# Account pages · Porter

The account pages an ordinary app needs, on a Quiet page: sign in with Google, GitHub or email, create an account with a live password check, forgot and reset a password, a six-box two-step code that takes a paste, and a signed-in account page with its devices. Every field is labelled, every error is worded and tied to its field, and the first one takes the focus. Five wrong passwords pause sign-in with a countdown. Loading, empty, error and paused states included.

Template · With the Kit · https://tactileui.dev/templates/porter

> The code and styling for this template come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

- [Bar](https://tactileui.dev/parts/bar): The top of a page: a wordmark with a lamp, printed links, and one contrast key at most.
- [Banner](https://tactileui.dev/parts/banner): A strip the width of the page, above everything, for one announcement: a lamp, one line, an optional key that goes somewhere and a dismiss key. It is a raised plate, not a recess, so it reads as part of the frame and not as a message in the page. It is a labelled region, there on load, and says its thing once. When it goes it closes like a drawer, so the page glides up by its height instead of jumping.
- [Panel](https://tactileui.dev/parts/panel): A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels.
- [Field](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
- [Password field](https://tactileui.dev/parts/password-field): The field’s well with a louvred shutter drawn across its characters and a peek key at the end. Press the key and the shutter slides off to the right, the characters stand open, and the key stays down; press it again and the shutter closes. The key says Show or Hide, and the caret never leaves where it was.
- [Input group](https://tactileui.dev/parts/input-group): One recess that holds a field and everything that belongs to it. Words that are part of the value but are not typed, such as https:// or a currency, are printed on the floor of the well behind an engraved line; a glyph sits at the start; small keys sit at the end to clear the text, copy it, or show a password.
- [Check](https://tactileui.dev/parts/check): An option in a form: a small square key that presses below the plate when chosen, with a tick printed on it.
- [Meter](https://tactileui.dev/parts/meter): A value inside a known range, read off an LED strip. The strip is a native meter element, so low, high and optimum are the browser’s own: the whole lit length takes the colour of where the value stands (green in the good region, amber next to it, red beyond), not the colour of the segment it has reached. The marks under the strip print where the regions begin, and cut lines across it show the same two places. Words say the state too.
- [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.
- [Key](https://tactileui.dev/parts/key): Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.
- [Alert](https://tactileui.dev/parts/alert): A message let into the surface, with an annunciator: a small lit legend (Note, Done, Check, Fault) beside the words that say what happened.
- [List](https://tactileui.dev/parts/list): Rows in a rack: a mark, a title, a second line and a fact or a key at the end. Chosen rows sink into a recess with their check key latched; in a running order, a row lifts out of the rack on its skirt and slides past the others, from the keyboard or by its grip.
- [Avatar](https://tactileui.dev/parts/avatar): A person’s mark, struck like a coin: initials stamped into the field, or a photo set under the rim, with a status lamp mounted at five o’clock. Stacks into a group with a count.
- [Tag](https://tactileui.dev/parts/tag): A small printed plate: a type, a count, a badge. Solid for the one tag that must stand out.
- [Status](https://tactileui.dev/parts/status): A lamp with words: the state line in tables, panel heads and lists. The words carry the meaning; the lamp is the glance.
- [Empty state](https://tactileui.dev/parts/empty-state): What a view shows before it has anything: an empty tray with the outline of what goes in it printed on its floor, one sentence and one key.
- [Skeleton](https://tactileui.dev/parts/skeleton): The shape of a page before its data arrives, drawn as the unprinted plate: blank engraved bars where the words will print. Nothing on it moves. One amber lamp beside “Loading” is the only sign of work.
- [Segmented control](https://tactileui.dev/parts/segmented): A row of keys in a tray with one pressed down: pick a view, a range or a mode and it applies at once. It is the kit’s selector without the lamps, with sizes, a full-width row and icon segments.
- [Select](https://tactileui.dev/parts/select): A choice from a longer list, in the same recess as a field, with a printed chevron. The browser’s own menu opens it.
- [Toast](https://tactileui.dev/parts/toast): A confirmation after an action.

## Usage notes

Bar and a SAMPLE banner · one centred panel at a time, switched by the page address (#sign-in and the rest) · Sign in: Google and GitHub keys, email, a password field with Show and Hide, Remember this device, Forgot password, a pause with a countdown after five wrong tries · Create account: name, email, a password with a strength meter and its three rules written out, terms, then Check your email · Reset password: two fields, the meter, then a done screen · Two-step: six boxes that take a paste and move on their own, a resend key, and a recovery code instead · Signed in: name, email, Sign out, and each device with its own sign-out key · a key at the foot that shows the other states (?state=).