Welcome Back Login Block for React

The remembered account (Dara Nwosu, her address and her initials) is a typed constant, so the page shows the same thing to everyone and remembers nothing. Sign-in waits under a spinner for less than a second, then shows "You're signed in" and a polite status message says nothing was sent. In a product, keep the address, the display name and optionally an avatar URL of the last account that signed in on this browser in a cookie or in local storage, never the password or a token, read it when the page renders, and fall back to the plain email form when there isn't one. Post the form to your auth endpoint where the code says so.

Four things change, in place and at the same height: the avatar shows a person glyph instead of the initials, the heading reads "Sign in to Bookwren", the sentence asks for the email and password of the account you read with, and the address field stops being read-only and empties. Focus moves to that field, a polite message says what happened, and any problem on show is cleared. "Use Dara's account instead" reverses it and puts focus on the password.

Password managers fill a sign-in by pairing the password with a username field, so the address stays a real field with autocomplete="username". It is read-only, not disabled, so it keeps its place in the tab order, is read out with its label and is still sent with the form. Its tint follows the theme, and it becomes an ordinary editable field when you switch account.

It is a convenience with a cost: anyone at that browser sees the name and the address. Offer it only after a visitor chose to be remembered, expire it with the session policy of your product, and keep the "Not you?" button where people can see it, as here. A password manager's fill still needs the password; the page never shows it.

A disabled button can't explain itself, and keyboard users can't reach it. Pressing Sign in with no password (or, for another account, with no or a malformed email) marks those fields invalid, writes one sentence under each and moves focus to the first. Typing clears that field's problem, and each field keeps a line for its problem even when there is none, so nothing moves.