developer/galaxy-game
1
1
Fork 0
Code Issues Pull Requests Actions Packages Releases Wiki Activity

feat(ui): autofocus login fields; keep verification code out of form history
Tests · UI / test (push) Waiting to run
Details
Tests · UI / test (pull_request) Successful in 2m51s
Details

Browse Source 
The two-step e-mail login now drops the cursor on each step's primary
field as it mounts — the e-mail field on load, the code field once the
e-mail step advances — via a small `use:` action. Focusing fires each
input's onfocus, which clears the readonly autofill guard, so the field
is editable straight away.

The code input now requests `autocomplete="one-time-code"` instead of
`new-password`. The latter is a password-manager hint and does not stop
Firefox saving the typed code to form history (it was offering the
previous code back in a dropdown). `one-time-code` is the semantic token
for a verification code; Firefox honours it specifically to keep the
value out of form history (Mozilla bug 1547294). The e-mail field keeps
`new-password` to fend off saved-login autofill.

Tests: new Vitest cases assert autofocus on both steps and the code
field's `one-time-code` token; a new Playwright case covers the same in
Chromium and WebKit (Safari engine). Firefox form history is owner
manual-QA — there is no Firefox project in the e2e matrix.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Ilia Denisov
2026-05-25 23:53:20 +02:00
parent 6f2967024a
commit 3d5b331bd9
4 changed files with 134 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/docs/auth-flow.md
+30
View File
@@ -81,6 +81,36 @@ those branches.
backend collapse into the same `invalid_request` envelope from the
UI's perspective; the gateway does not differentiate them externally.
## Focus and autofill suppression
The login screen drops the cursor on each step's primary field the
moment it mounts — the e-mail field on load, the code field once the
e-mail step advances — so the user can type without first clicking.
This is wired with a one-line `use:` action that focuses the node on
the next tick.
Both inputs render `readonly` initially and drop the attribute on
first focus (user-driven or via the autofocus action). Safari ignores
`autocomplete="off"` on login-shaped fields and pops the Keychain
suggester on load, but it never autofills a readonly field, so the
page loads quiet and each field turns editable as soon as it is
focused.
Autofill intent then differs per field:
- the **e-mail** field asks for `autocomplete="new-password"` to keep
password managers from injecting a saved login;
- the **code** field asks for `autocomplete="one-time-code"`, the
semantic token for a verification code. It is the reliable way to
keep Firefox from saving the code to form history and offering it
back in a dropdown — Firefox honours that token specifically, while
plain `autocomplete="off"` is not respected for this field
([Mozilla bug 1547294](https://bugzilla.mozilla.org/show_bug.cgi?id=1547294)).
Playwright covers the autofocus and the code field's token in WebKit
(Safari engine) and Chromium; Firefox form-history behaviour is
verified by hand, as there is no Firefox project in the e2e matrix.
## Resend and change-email
- **send a new code** — re-issues `sendEmailCode` for the same