diff --git a/ui/docs/auth-flow.md b/ui/docs/auth-flow.md index 15d808b..6a4e1fa 100644 --- a/ui/docs/auth-flow.md +++ b/ui/docs/auth-flow.md @@ -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 diff --git a/ui/frontend/src/lib/screens/login-screen.svelte b/ui/frontend/src/lib/screens/login-screen.svelte index 95c20b1..f782191 100644 --- a/ui/frontend/src/lib/screens/login-screen.svelte +++ b/ui/frontend/src/lib/screens/login-screen.svelte @@ -1,4 +1,5 @@