Session Expired Login Block for React

Everything. The account, the draft and its 14 changes are typed constants; any password signs in, and the result waits 700 milliseconds and says nothing was sent and no session was kept. In a product, keep the draft in your own storage tied to the account, not in the page, send the password to your auth endpoint, and return the person to the route they were on.

Because the session belonged to that account, and asking for the email again only invites a typo. The field is a real read-only input with its label, in the same box as the editable one, so a screen reader reads the address and the field keeps its place. Switch account is the only way to change it.

It opens an alert dialog first, because it clears the "Where you were" note: the dialog says the draft stays with the old account and the next one starts fresh. Focus starts on Stay signed out; Escape closes it too, and focus returns to Switch account. Confirming closes it, makes the email empty and editable, swaps the heading to "Sign in to Drafthurst" and puts focus in the email field. Use the saved account brings it back.

Every sentence that changes with the account (the heading, the line under it, the note) is laid over an unseen copy of its other state in one grid cell, so the longer of the two sets the size. The result also takes the form's place in the same cell, and the page is centred, so anything that grew would have moved the heading.

The button is never disabled: it names the problem ("Enter your password.") under the field and in the status line and puts focus on the field. After Switch account the email is checked first, for both an empty and a malformed address.

Yes on all seven targets: it is modal, takes focus on its Cancel button, closes on Escape and returns focus to the trigger. When it closes because you confirmed, the trigger is gone from view, so the page moves focus to the email field itself about 300 milliseconds later.