Merge pull request 'feat(ui): autofocus login fields; keep verification code out of form history' (#56) from feature/issue-44-login-autofocus-otp into development

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

ui/frontend/src/lib/screens/login-screen.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tick } from "svelte";
 	import { appScreen } from "$lib/app-nav.svelte";
 	import {
 		AuthError,
@@ -22,11 +23,30 @@
 	// fields and pops the Keychain suggester regardless. The classic
 	// workaround is to render the input as `readonly` initially —
 	// Safari does not autofill readonly fields — and drop the
-	// attribute on the first user focus so typing still works. Once
+	// attribute on the first focus (user-driven or via `focusOnMount`
-	// dropped, the flag stays false for the rest of the page life.
+	// below) so typing still works. Once dropped, the flag stays false
+	// for the rest of the page life.
 	let emailReadonly = $state(true);
 	let codeReadonly = $state(true);
 
+	// Autofill intent differs per field. The e-mail input asks for
+	// `new-password` to stop password managers injecting a saved login.
+	// The code input asks for `one-time-code` (set on the element): it is
+	// the semantic token for a verification code and the only reliable way
+	// to keep Firefox from saving the code to form history and offering it
+	// back in a dropdown — Firefox honours it specifically, while plain
+	// `autocomplete="off"` is not respected here (Mozilla bug 1547294).
+
+	// Drop the cursor on the step's primary field as soon as it mounts so
+	// the user can start typing immediately: the e-mail field on load, the
+	// code field once the e-mail step advances. Deferring one tick lets the
+	// field's own focus handler wire up first; firing it clears the
+	// readonly autofill guard above, leaving the field editable. Mirrors
+	// the focus pattern in `designer-science.svelte`.
+	function focusOnMount(node: HTMLInputElement): void {
+		void tick().then(() => node.focus());
+	}
+
 	function describe(err: unknown): string {
 		if (err instanceof AuthError) {
 			return err.message;
@@ -199,6 +219,7 @@
 					spellcheck="false"
 					readonly={emailReadonly}
 					onfocus={() => (emailReadonly = false)}
+					use:focusOnMount
 					bind:value={email}
 					disabled={pending}
 					required
@@ -228,12 +249,13 @@
 					type="text"
 					name="galaxy-login-code"
 					inputmode="numeric"
-					autocomplete="new-password"
+					autocomplete="one-time-code"
 					autocorrect="off"
 					autocapitalize="off"
 					spellcheck="false"
 					readonly={codeReadonly}
 					onfocus={() => (codeReadonly = false)}
+					use:focusOnMount
 					bind:value={code}
 					disabled={pending}
 					required

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