Terminal Side Panel Login Block for React

Nothing leaves the page, and nothing runs. 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. The terminal is typed text: the command, the address and the code ABCD-4821 are made up, and nothing waits for approval. To wire it for real, post the email and password to your auth endpoint where the code says so, and for the device flow have your CLI print the verification address and the one-time code your server issued for it.

The block follows the page theme, so the terminal is a card in whatever your theme uses: light in a light theme, dark in a dark one, with the same border and text tokens as everything else. Nothing forces a dark scope, which also keeps the contrast of the text correct in every preset. If your product's terminal is dark in both themes, put dark on that one box and mark it with a comment.

It copies termwright login, without the prompt, to the clipboard and swaps its icon for a check for three seconds. A polite status message, which the page already has for the sign-in, reads "Copied the command" so screen reader users hear it, and if the clipboard refuses (no permission, or a page that isn't served over HTTPS) it says "Couldn't copy" and tells you to select the text. The button is named "Copy the sign-in command" and the text is real text you can also select by hand.

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 in every browser, and each field keeps a line for its problem even when there is none, so a problem never pushes the page.

The form comes first in the markup, so Tab order and the reading order start with the sign-in and its heading; the terminal follows, and on a phone, where it's gone, nothing has to be reordered. It's at the end of the band, behind a divider, in a left-to-right layout and at the start side's mirror in right-to-left. The terminal's text is set dir="ltr" so the command and the address read correctly in a right-to-left page.

The terminal is hidden below 1024 px (max-lg:hidden), so a phone shows the product's mark, the heading, the form and the Sign in button, which ends on the first screen. A visitor on a phone isn't signing in from a terminal, so nothing is lost.