feat(ui): autofocus login fields; keep verification code out of form history
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:
@@ -301,4 +301,37 @@ test.describe("Phase 7 — auth flow", () => {
|
||||
// entirely, so the login form never renders.
|
||||
await expect(page.getByTestId("login-email-input")).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("autofocuses each step's primary field and keeps the code out of form history", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.route(
|
||||
"**/api/v1/public/auth/send-email-code",
|
||||
async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({ challenge_id: "ch-focus-1" }),
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
await page.goto("/");
|
||||
// The e-mail field is focused on load so the user can type at once.
|
||||
// Reaching the focused state also means the readonly autofill guard
|
||||
// has dropped, so `fill` does not need a preceding click here.
|
||||
await expect(page.getByTestId("login-email-input")).toBeFocused();
|
||||
|
||||
await page.getByTestId("login-email-input").fill("pilot@example.com");
|
||||
await page.getByTestId("login-email-submit").click();
|
||||
|
||||
// Advancing to the code step moves the cursor onto the code field.
|
||||
const codeInput = page.getByTestId("login-code-input");
|
||||
await expect(codeInput).toBeFocused();
|
||||
// `one-time-code` is what keeps browsers (notably Firefox) from
|
||||
// saving the verification code to form history. Assert the attribute
|
||||
// the suppression relies on; Firefox form history itself is verified
|
||||
// by hand, as the e2e matrix runs Chromium and WebKit only.
|
||||
await expect(codeInput).toHaveAttribute("autocomplete", "one-time-code");
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user