IP Allowlist Settings Block for React

Edit SAVED at the top: each rule has an id, a CIDR or a single address, a label and the day it expires (empty for never). VISITOR is the address the check uses, which in your app comes from the request, and AS_OF is the fixed day expiries are measured from. The sizes, the expiry words, the counts and the guard sentence are worked out from those, so nothing is typed twice. The ranges here are the documentation blocks reserved for examples.

An IPv4 address or an IPv6 address, with an optional prefix length, is turned into its bits; a single address is a /32 or a /128. One range covers another when it has the same IP version, a prefix that is no longer, and the same leading bits, which is how the overlap check, the covered check and the guard all work, with no library. Expired rules are ignored by the covered check, and an address with a part over 255, an IPv6 group that isn't hexadecimal or a prefix that is too long is refused with a message.

Two things. Turning enforcement on while your address isn't covered by an active rule is refused, the switch stays off and focus goes to Add my address. If enforcement is on and you remove the rule that covered you, the sentence turns into a warning and Save refuses with a message and the same focus, because saving would lock you out. Pressing Add my address when you are already covered says so and changes nothing.

Everything. Nothing is blocked, saved or sent: the rules and the switch live in this page's state, and Save only says what it kept. To make it real, send the saved list to your API, enforce it where requests arrive, and run the same covered check on the server before accepting a change so another client can't lock the account out either. Resolving the address a person is really coming from, behind proxies, is your server's job.

Below the medium breakpoint the table becomes one card per rule with the range, the label, its size and expiry and a Remove button, the add form stacks, and the action foot is pinned to the bottom of the screen. The table is native, with a caption, column headers and the range as each row's header, every Remove button is named for its range, and when you remove a rule focus moves to the rule that took its place, or to the add field if none remains. The status line is a polite live region present from the start.