Avatar Preview Login Block for React

Nothing is looked up and no avatar service is called. The monogram is worked out from the typed address in the page, and the two demo accounts (Maya Alvarez and Joaquin Alvarez) are typed constants. Sign-in waits under a spinner for less than a second, then shows "You're signed in" with the name or the address and a polite status message says nothing was sent. For real, post the form to your auth endpoint where the code says so; for a photo, put an image URL from your own user service in the avatar and keep the initials as its fallback.

From the part of the address before the at sign: it is split on dots, underscores, plus signs and hyphens, and the first letter of each of the first two parts is taken, so maya.alvarez gives MA and maya gives M. Digits and symbols are ignored, any script's letters work, and with no letter at all the avatar shows the person glyph. A demo account swaps in its own monogram once the whole address matches.

It can be. If a server answered for any typed address, it would tell strangers which accounts exist. Here the two accounts are typed into the page to show the pattern. In a product, show a name only from what this browser already knows, such as the account it signed in with last time, and keep the answer to a typed address the same whether or not the account exists.

When the address is a whole address (a name, an at sign and a domain) and the password is still empty, Enter moves focus to the password instead of sending the form, so a problem isn't shown before you have had the chance to type it. In any other case Enter sends the form as usual: it checks both fields, writes a sentence under each one that is wrong and moves focus to the first. The two demo accounts are also buttons under the form that type their address for you.

Below the large breakpoint it becomes a compact chip, the avatar at 48 pixels with the name and the typed address beside it, between the heading and the email field, so the field it reflects is right under it and the Sign in button stays on the first screen. From the large breakpoint it fills the start half of the band at 144 pixels. It is the same element in both places.

The avatar is decoration: the typed address and, for a demo account, the name are text beside it, so nothing is read twice. A polite status message speaks once when the address becomes one of the demo accounts ("Maya Alvarez's account. Press Enter to go to the password.") and stays silent while you type anything else, so a screen reader isn't interrupted at every key.