Session Limit Login Block for React

Everything. The three sessions, their places and the last-active times are typed constants; ending one waits 700 milliseconds and changes the page's state only. No session is really ended and nothing is sent. In a product, list the account's live sessions from your server, end the chosen one there (which also signs that device out), and only then start the new session.

It is a gate, not a manager. It appears at the moment a sign-in is blocked, offers only the choice that unblocks it (give up one screen) and ends once the way is clear; it doesn't show history, locations on a map or every device you have ever used. The account area's sessions page does that, after you are in.

A disabled button explains nothing and is skipped by the keyboard. Here it stays focusable and pressable but looks quiet while nothing is chosen; pressing it says "Choose a session to end first." in the status line and moves focus to the first row, so the next key choice is the first step. Once a row is chosen it takes the full look.

They are native radio inputs in one group named "Choose one to end": arrow keys move between rows, and each row is read as its device name with the app, place and last-active time as its description. The drawn mark is hidden from assistive technology. An ended row is struck through, says "Ended" in words and is no longer a choice.

It ends every listed session, with the same short wait, and the meter reads "0 of 3". The button after either choice becomes "Continue to Viewmoor", which only says that nothing opens in the demo; Start over brings the three sessions back and returns focus to the list.

Each is an ISO time in the data, formatted by a helper: a session from the demo's day shows only a clock time ("today, 13:52 UTC"), an older one shows the date ("Oct 12, 18:30 UTC"). The demo's "today" is a typed constant, never the clock, so the page reads the same whenever it is opened.