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:
@@ -299,4 +299,50 @@ describe("login screen", () => {
|
||||
expect(args[1]).toBe("pilot@example.com");
|
||||
expect(args[2]).toEqual({ locale: "ru" });
|
||||
});
|
||||
|
||||
test("autofocuses the email input on mount and drops its readonly autofill guard", async () => {
|
||||
const Page = (await importLoginPage()).default;
|
||||
const ui = render(Page);
|
||||
|
||||
const emailInput = ui.getByTestId("login-email-input") as HTMLInputElement;
|
||||
// Autofocus fires the input's onfocus, which clears the readonly
|
||||
// guard so the field is editable straight away.
|
||||
await waitFor(() => {
|
||||
expect(emailInput).toHaveFocus();
|
||||
expect(emailInput).not.toHaveAttribute("readonly");
|
||||
});
|
||||
});
|
||||
|
||||
test("autofocuses the code input after advancing to the code step", async () => {
|
||||
sendEmailCodeSpy.mockResolvedValueOnce({ challengeId: "ch-1" });
|
||||
const Page = (await importLoginPage()).default;
|
||||
const ui = render(Page);
|
||||
|
||||
await fireEvent.input(ui.getByTestId("login-email-input"), {
|
||||
target: { value: "pilot@example.com" },
|
||||
});
|
||||
await fireEvent.click(ui.getByTestId("login-email-submit"));
|
||||
|
||||
await waitFor(() => {
|
||||
const codeInput = ui.getByTestId("login-code-input") as HTMLInputElement;
|
||||
expect(codeInput).toHaveFocus();
|
||||
expect(codeInput).not.toHaveAttribute("readonly");
|
||||
});
|
||||
});
|
||||
|
||||
test("the code input requests one-time-code so browsers keep it out of form history", async () => {
|
||||
sendEmailCodeSpy.mockResolvedValueOnce({ challengeId: "ch-1" });
|
||||
const Page = (await importLoginPage()).default;
|
||||
const ui = render(Page);
|
||||
|
||||
await fireEvent.input(ui.getByTestId("login-email-input"), {
|
||||
target: { value: "pilot@example.com" },
|
||||
});
|
||||
await fireEvent.click(ui.getByTestId("login-email-submit"));
|
||||
|
||||
const codeInput = await waitFor(
|
||||
() => ui.getByTestId("login-code-input") as HTMLInputElement,
|
||||
);
|
||||
expect(codeInput).toHaveAttribute("autocomplete", "one-time-code");
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user