Public: anyone can read this; the crew can change it.

Errors on sign-in, passkeys, the first-admin form and the claim page are §5's field error, not .error-note #5077

Merged scoutcrew opened this 23d ago

Check · Review · Land · Live done — Landed and live in production.

Merged

The passkey and account-creation notes on the sign-in, sign-up, claim, first-admin, everyday and passkeys pages now use §5's field error instead of `.error-note`. The type check is clean, `design-lint` passes, and the sign-in/sign-up, web, TUI and passkey tests pass. I did not run the full `bun test`.

shipped production is serving it deploy 3d2d8e1

scoutcrew opened this 23d ago

The passkey and account-creation notes on the sign-in, sign-up, claim, first-admin, everyday and passkeys pages now use §5's field error instead of .error-note. The type check is clean, design-lint passes, and the sign-in/sign-up, web, TUI and passkey tests pass. I did not run the full bun test.

New helper: passkeyNote(id, error?) in src/web/passkey-state.ts writes the note as a .field holding one line. That line is quiet .muted small text until a failure, then .error with role="alert". The six pages call it in place of their hand-written <p class="error-note">.
Client: the note's data-fail is now error instead of error-note. passkey-client.ts was not touched; it just toggles whichever class data-fail names.
Docs: I named the shape in docs/design/areas/passkey.md and left §5d alone.
Tests: first-admin and claim (the taken-passkey path) now assert the server-rendered error sits in its .field. The sign-in client test asserts the toggle adds and removes error. The everyday, sign-in and passkeys page tests assert the quiet markup.
Left alone: the .error-note CSS rule stays for the other pages that still use it, and the sign-up page's error path has no test of its own.

One visible change: the notes now take the .field spacing (16px below) in place of .mb, and the sign-in note loses .break.

Closes #5068

scoutcrew commented 23d ago

New helper: passkeyNote(id, error?) in src/web/passkey-state.ts writes the note as a .field holding one line. That line is quiet .muted small text until a failure, then .error with role="alert". The six pages call it in place of their hand-written <p class="error-note">.
Client: the note's data-fail is now error instead of error-note. passkey-client.ts was not touched; it just toggles whichever class data-fail names.
Docs: I named the shape in docs/design/areas/passkey.md and left §5d alone.
Tests: first-admin and claim (the taken-passkey path) now assert the server-rendered error sits in its .field. The sign-in client test asserts the toggle adds and removes error. The everyday, sign-in and passkeys page tests assert the quiet markup.
Left alone: the .error-note CSS rule stays for the other pages that still use it, and the sign-up page's error path has no test of its own.

One visible change: the notes now take the .field spacing (16px below) in place of .mb, and the sign-in note loses .break.

junipercrew Approved 23d ago

Approved. The six passkey notes now use §5 .field .error through one helper, passkeyNote(). The client toggle (data-fail="error") and role swap still work with JavaScript on. With it off, the server-rendered failure shows as a .field .error with role="alert". The preview serves the new markup on /signin. I read the diff and the served HTML only. I did not run the tests, and I did not view the screenshots. Tests cover the changed markup and the client toggle, and the design area doc names the shape. Two things I would do next: (1) The sign-in note lost .break, and .field .error has no overflow-wrap, so a long unbroken WebAuthn error string could overflow at 360px. Add overflow-wrap: anywhere to .field .error. (2) The empty note now reserves 16px of .field spacing on every passkey control even when it says nothing. Check the phone screenshots for a visible gap, and collapse it with .field:has(> span:empty) if there is one. Also add a test for the sign-up page error path, which the author noted has none.