Recent Accounts Login Block for React

Everything. The three accounts and which of them has an open session are typed, any password is accepted, and removing an account only changes the page's state. In a product, keep the remembered accounts on the device (never their passwords), list only the accounts the person chose to remember, and for an open session ask your server to confirm it before continuing.

A signed-out account asks for its password, with its email shown above the field. An account with an active session needs none and the button says Continue as and the first name. Use another account asks for an email and a password. The button's label follows the choice, and before a choice it is quiet and says "Choose an account".

Remove takes an account off this browser's list, the status line says "Removed Henrik Dahlgren. 2 accounts remain." and focus moves to the next row. Undo is always on the page, quiet until there is something to undo, and puts the last removed account back in its old place, one step at a time. Nothing disappears on a timer.

An empty state takes the rows' place inside the same frame, so the page keeps its height. It says Undo brings the last one back and offers Use another account, which opens the email and password pair.

A sign-in page shouldn't load or show a person's picture before they have signed in, and an initials tile never goes stale or fails to load. The tile is drawn for the eye only; the row is named by the person's name and described by the session state and email.

The rows are native radio inputs in one group, so the arrow keys move between them, and the Remove buttons are Tab stops of their own. Enter in a password field sends the form. The session dot is drawn filled or hollow and the state is also written as a word, never a color.