Developer API Login Block for React

Everything stays in the page. The key is checked against a shape (its prefix and its length) and nothing else: it is never sent, stored or logged, and the sample key is made up and opens nothing. Pressing "Sign in with key" waits less than a second and shows what a real product would do next, in the column's own space, with a polite status message saying nothing was sent. In your app, send the key to your API in an Authorization header and show the account it belongs to.

A line that would call the API with the key you typed, rewritten as you type. The key is masked in it: its prefix and its last four characters once it is long enough, only the prefix while it is short, and a variable name ($TERNPOST_KEY) when what is typed is not a Ternpost key. Copy copies the line exactly as it shows, so a pasted key is never in the clipboard from this block; put the real key in your shell yourself.

A key is tp_live_ or tp_test_ followed by 24 lowercase letters and digits. While you type, the line under the field says what has been typed so far ("Test key, 12 of 32 characters"), and pressing Sign in with a key that isn't well formed puts one sentence in that line and moves focus to the field. A well formed key tells you whether it is a test key (calls go to the sandbox) or a live key (calls go to production).

Everything you typed: the email, the password and the key all live in the block's own state, so switching tabs never loses them. The problems of one tab aren't shown on the other, and a polite message says which tab is showing. Tab reaches the selected tab, the arrow keys move between "Password" and "API key" and show the panel, and the panel's own fields follow in the tab order.

An unseen copy of both panels sits in the same grid cell as the real one, so the cell is as tall as the taller panel whichever tab is showing. The copy is hidden from assistive technology, out of the tab order and uses its own ids, so nothing is announced twice. The page is centred, so any change in height would move the heading.

It stays on one line, because a command that wraps can't be read or checked. The window scrolls sideways inside itself, takes focus so the keyboard can scroll it, and Copy stays at its end. The key field, the line and the button are all on the first screen.