IP Allowlist Account Block for React

Edit SIGNINS (a city, a documentation address and an ISO time each) and START (the networks allowed when the page opens). The seen networks are worked out from the sign-ins: each address maps to its /24 or /48, and the count, the place and the last day come from the sign-ins that share it. CURRENT is the address in use. Whether a sign-in would pass is a real containment check: a numeric range test for IPv4 and a prefix test for IPv6, so a range you add counts at once.

Turning the switch on is refused, with its reason in a line under it, while the address in use isn't inside the allowed networks; the switch stays off and focusable. Allow the network of your address first and it turns on. While it is on, a network can't be removed if that would uncover your address: the status line says which. The rehearsal says how many of the 12 sign-ins would have passed, so you can see what turning it on would have blocked.

An IPv4 address, a slash and a length from /16 to /32, like 203.0.113.64/28. It shows what it parsed to as you type (16 addresses, from 203.0.113.64 to 203.0.113.79) and counts a range that starts mid-block from its first address. A bad range is refused with its problem under the field and focus stays in it; one already inside an allowed network is refused as covered. An added range appears in the allowed list and the panel grows by its row.

Everything: Allow, Remove, the field and the switch change this page's state and the status line says "Nothing was sent to a firewall". To make it real, save the allowed list and the switch from allow, remove, addRange and toggle, enforce them on your server at sign-in, and keep the lockout check on the server too, since the page can be bypassed. The 12 recent sign-ins come from your sign-in log.

The two columns stack in reading order: the networks you signed in from, the allowed networks, the add-a-range field, then the rehearsal with its switch. Every network row is the same height with its button at the end, and a group with none says so in its heading, so moving a network between the groups doesn't move the page.

The groups are labelled lists, each button is named for its network ("Allow 203.0.113.0/24"), the field has a visible label and its note is tied to it, and the refusal is read out as an alert when it appears. The result of the rehearsal is text, not only a figure, and the status line is a polite live region present from the start. Ranges and addresses read start to end in any language, and the counts keep their order in a right-to-left page.