Full Viewport 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. Create an account, Forgot password and the footer links go to #, so point them at your own routes. To wire the form for real, post the email and password to your auth endpoint where the code says so, keep the busy state until it answers, then redirect, or show its error under the field it concerns.

Browsers don't let a page ask whether Caps Lock is on; they report it on key events. The password field reads it from every key you press or release in it, shows "Caps Lock is on" under the field and also says it through the page's polite status message, and clears the note when focus leaves the field. So the note appears after the first key, not before, and a Caps Lock turned on while you're elsewhere shows up as soon as you type. If the field has a problem to show, the problem takes the line and the note waits.

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, and each field keeps a line for its problem even when there is none, so nothing moves.

It's the Dot Pattern with its wave and its pointer light turned off, so it never moves, drawn in the text color at 10% in the space between the two rows only, so no text sits on a dot. A mask clears the middle, where the form is, and fades the dots out toward the rows, so they gather at the band's two sides. It follows the theme in light and dark and sits behind everything. Remove the DotPattern to get a plain band.

The band keeps its three rows. In the top row the "New to Larkspire?" words go and only the Create an account link stays beside the mark, the form keeps its width and the Sign in button stays on the first screen, and the footer row wraps its links and the language onto two lines when they don't fit. The page is still at least a screen tall.

No, it's text: the language the page is written in, marked with its lang. A switcher that changes the page's strings and direction is a different block; see the language selector sign-in.