VPN Required Login Block for React

Everything, and nothing here detects a VPN. The three checks are a typed script (two failures with different diagnoses, then a pass) and the switch simply pretends. In a product the check is a request to a health endpoint that only answers on the VPN side of your network, or your gateway reports whether the session arrived through the tunnel; use the diagnosis it returns in place of the typed ones, and enforce the rule on your server, never in the page.

To show two different, useful diagnoses: traffic leaving from a public network address, and a tunnel that is up with no route to the console. Each is a line in ATTEMPTS, so you can reorder them, add more or make the first one pass. Start over runs the script again from the first check.

None. It says "an IKEv2 or WireGuard-compatible client", because the page cannot know which one your company uses. Replace the three steps with your own, and name your client in them if you want to.

One answer is open at a time and it stays open, so every panel has the same height and the page never shifts. Tab moves between the question rows; arrow keys do not.

By the word (Not connected, Checking, Connected), a glyph (a Wi-Fi-off mark, a spinner, a tick), and the numbered steps filling in when the connection is made. The one status dot is only an extra mark on a failed state.

Yes. The check is one button, its result is said in the page's single status line and takes focus, the switch is named and marked as a demo control, and each step says "Done" once the connection is made. The spinner stops moving under reduced motion.