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>

ui/frontend/tests/e2e/auth-flow.spec.ts

@@ -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");
+	});
 });

ui/frontend/tests/login-page.test.ts

@@ -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");
+	});
 });