Compact Inline Sign In Login Block for React

Nothing leaves the page. Sign in waits under a spinner for less than a second, then shows "Signed in as" with the address you typed, and a polite status message says nothing was sent; Sign out brings the fields back with your email still filled in and focus on the password. To wire it for real, post the email and password to your auth endpoint where the code says so, keep the busy state until it answers, then show who signed in, or show its error under the field it concerns.

The form is a grid: from the lg breakpoint it has four columns (the mark, the email, the password and the button), the fields share the space left over and the button takes what it needs. Below that it's one column, the mark is dropped, and the button fills the width. The panel is max-w-4xl, which is why the row fits at 1024 px; in a narrower container, switch to the stacked layout sooner by changing the breakpoint.

No. The row of fields and the signed-in row are laid in one grid cell, so the cell is as tall as the taller one and the other waits unseen and out of reach; each field's problem line is always there, even when empty. Check it by pressing Sign in empty, then signing in: the panel keeps its height.

A disabled button can't explain itself, and keyboard users can't reach it. Here it stays enabled: pressing it with an empty or malformed email, or no password, marks those fields invalid, writes one sentence under each and moves focus to the first, which reads its problem out. Typing clears that field's problem.

Yes. The email field is type="email" with autocomplete="username", and the password field autocomplete="current-password", which is what browsers and password managers look for on a sign-in form, and both fields have real labels, which stay visible above the fields.

Tab runs through the email, the password, its show and hide toggle, Forgot and Sign in; Enter in either field signs in. The heading names the form, each problem is tied to its field, and after signing in focus moves to the line that says who signed in, while a polite status message says what happened.