Profile Switch Login Block for React

Everything. The four profiles, the lock on one of them and its PIN (1234, printed under the field) are typed, and renaming, removing and adding only change the page's state. In a product, store profiles on the account, hold a PIN as a salted hash on your server (never in the page), and count wrong tries there.

Edit profiles is a toggle (pressed while editing). While it is on, each name becomes a text field, saved as you type (ten characters at most; Enter keeps the name and returns to the tile, and an emptied name goes back to what it was), and Remove appears under each tile. The room for both is always reserved, so turning it on or off never moves the tiles. The main button reads Done editing, and does the same as the toggle.

Remove takes a profile off the TV, the status line says "Removed Kids. 3 profiles remain." and focus moves to the next tile. Undo is always on the page, quiet until there is something to undo, and puts the last removed profile back in its place, one step at a time. The last profile can't be removed: its Remove button stays but says why. Nothing disappears on a timer.

Choosing Parents moves focus to a four-digit field and prints the demo PIN beneath it. Digits only are kept, a paste is cleaned the same way, and Enter sends the form. A wrong or short PIN says so in one line and clears the field; nothing locks you out in the demo. The field reads left to right whatever the page direction, and an Unlock button takes the place of Watch.

It adds the next name from a short typed list (Nana, then Arlo, then Guest) to the end of the row and moves focus to its tile, ready to be renamed in Edit mode. A household holds five profiles at most; with five, the tile stays and says so instead of disappearing.

The tiles go three across with the same large initials, the edit controls keep their reserved room, and the button is pinned to the foot of the screen so it is always in reach. The sentence under the heading is kept for screen readers.