Kiosk Mode Login Block for React

Everything. The badge is one typed value printed once under the dots, the session is a counter in the page, and nobody is told you arrived. In a product, look the badge up on the front desk's server, start a session there and end it there when the timer runs out or someone signs out: a kiosk must never trust its own screen to keep a session closed, and should wipe the screen's state as well.

It starts on the press, not on load. One timeout at a time counts a second off a number kept in the page, so there is no interval running when no session is open, and the status line speaks only at the start, at ten seconds ("Still there?") and at the end, never every second. Under reduced motion the changing seconds give way to a sentence that says the session ends in 30 seconds unless you extend it.

A timeout that cannot be extended takes control away from people who need more time, which is a failure of the web accessibility guidelines. In the last ten seconds the page asks "Still there?" and Extend gives another thirty seconds. A real kiosk would also end a session on a long idle, and this one does the same at demo speed.

Yes. The dots sit over a real password field that takes typed digits, paste and Enter, and digits and Backspace typed while a key has focus do what the keypad does. The keys are large, at least 56 pixels tall on a phone and 80 on a wide screen, and keep that size at every width.

Signing out, or the timer ending, empties the digits, closes the session pane and returns focus to the badge field. The marker in the status row says whether a session is open. In a product it would also clear anything a visitor typed or opened, and never store a badge or a session in the browser.

By words and shapes: the marker reads No session or Private session beside a lock, filled dots show how many digits are in, a refused badge has its own sentence with an icon, and the button's label says what is missing.