Minimal Sign In Login Block for React

Nothing leaves the page. Sign in waits under a spinner for less than a second, then shows "You're signed in" with the address you typed, and a polite status message says nothing was sent; Sign out brings the form back with your email still filled in. To wire it for real, post the email and password to your auth endpoint where the code says so (a server action or your auth library's sign-in call), keep the busy state until it answers, then redirect, or show its error under the field it concerns.

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. The browser's own validation bubbles are turned off with noValidate, so the messages look the same everywhere, and each field keeps a line for its problem even when there is none, so a problem never pushes the page.

The Input and the password's group take classes that remove the border on three sides, the fill and the corners, and keep a line under the text. The line is a foreground tone, because the style's own border is too pale to be a field's only edge; keyboard focus adds a second pixel in the full foreground color, and a wrong field's line turns the status color. The labels stay visible above the fields, so a field never loses its name once it has text.

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. Both fields have real labels and names. For a sign-up page, use new-password on the password so managers offer to generate one.

The slug's idea is that nothing but the form is on the page, so the column is max-w-xs and starts at the band's start edge, a little inside the rail, instead of floating in the middle; in a right-to-left language it moves to the other side with no change. To center it, add mx-auto to the column and drop the lg:ms-12 offset. On a phone the column fills the width either way.

Tab runs through the email, the password, its show and hide toggle (a named button, pressed while the password shows), Forgot password 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 result's heading while a polite status message says what happened, so screen reader users hear the outcome.