Workspace Picker Login Block for React

Everything. The three workspaces, their member counts and last-used days are typed, any password is accepted and nothing is sent or stored; forgetting only changes the page's state. In a product, keep the list in a first-party cookie or local storage on the device, forget by removing the entry there, and send the password to the chosen workspace's own sign-in endpoint.

Forget takes the tile off the list and the status line says so ("Forgot Heron Court. 2 workspaces remembered."); focus moves to the next tile. Undo is always on the page, quiet until there is something to undo, and puts the last forgotten workspace back in its old place, as many times as you forgot. There is no toast that disappears: the line and the button stay.

The grid keeps its height, so the page doesn't jump: an empty state takes the place of the tiles, says Undo brings the last one back and offers Add a workspace. The cell for adding another stays where it was.

Add another workspace selects the add cell and opens the address field, with the address's own start and end around it (https:// and .pagewell.example). It accepts three or more letters, numbers or hyphens, refuses a duplicate, and holds three at most: with a full list it says to forget one first. A good address adds a tile, selects it and moves focus to its password.

A disabled button explains nothing and is skipped by the keyboard. Here it stays pressable: with nothing chosen it says "Choose a workspace first." and moves focus to the first tile; with a tile chosen its label names the workspace, and a press with no password names the missing field and focuses it.

The tiles stay two across, and the button is pinned to the foot of the screen so it is always in reach while the grid and the password field scroll. Texts that only repeat what the tiles say, such as the address under the password line, are kept for screen readers on a phone.