diff --git a/.changeset/use-different-email-clears-form.md b/.changeset/use-different-email-clears-form.md new file mode 100644 index 00000000..3fa6e176 --- /dev/null +++ b/.changeset/use-different-email-clears-form.md @@ -0,0 +1,9 @@ +--- +'ePDS': patch +--- + +"Use different email" on the sign-in code page now clears the email field. + +**Affects:** End users + +**End users:** clicking **Use different email** on the code-entry page used to take you back to the email form with your previous address still filled in — exactly the opposite of what the button suggests, and forcing you to clear the field manually before you could type a new address. The form now starts empty, with the cursor in the field, so you can just type the new address and continue. diff --git a/e2e/step-definitions/auth.steps.ts b/e2e/step-definitions/auth.steps.ts index d0f2a6f5..2e18271c 100644 --- a/e2e/step-definitions/auth.steps.ts +++ b/e2e/step-definitions/auth.steps.ts @@ -929,3 +929,14 @@ Then( }) }, ) + +// --------------------------------------------------------------------------- +// "Use different email" UX +// --------------------------------------------------------------------------- + +Then('the email input is empty and focused', async function (this: EpdsWorld) { + const page = getPage(this) + const input = page.locator('#email') + await expect(input).toHaveValue('', { timeout: 5_000 }) + await expect(input).toBeFocused({ timeout: 5_000 }) +}) diff --git a/features/passwordless-authentication.feature b/features/passwordless-authentication.feature index 20edade8..1492e1a9 100644 --- a/features/passwordless-authentication.feature +++ b/features/passwordless-authentication.feature @@ -384,6 +384,23 @@ Feature: Passwordless authentication via email OTP # programmatically clearing the demo's `oauth_state` cookie just # before the OTP submission, which is equivalent to the cookie # having lapsed by wall-clock. + # The "Use different email" button on the OTP step takes the user + # back to the email-entry form so they can sign in with a different + # address. The form must be EMPTY when they get there — leaving the + # prior email pre-filled is exactly the misleading "looks like the + # form remembered me" UX that the button was meant to escape from, + # and forces the user to manually clear the field before they can + # type their actual email. + @email + Scenario: "Use different email" returns the user to a clean email form + When the demo client initiates an OAuth login + Then the browser is redirected to the auth service login page + And the login page displays an email input form + When the user enters a unique test email and submits + Then the login page shows an OTP verification form + When the user clicks "Use different email" + Then the email input is empty and focused + @email @demo-cookie-expiry @bug-report Scenario: Demo client's OAuth cookie has expired by the time of callback — useful error, not generic auth_failed When the demo client starts a new OAuth flow with random handle mode diff --git a/packages/auth-service/src/routes/login-page.ts b/packages/auth-service/src/routes/login-page.ts index 376b6343..70baa7a0 100644 --- a/packages/auth-service/src/routes/login-page.ts +++ b/packages/auth-service/src/routes/login-page.ts @@ -1087,6 +1087,15 @@ export function renderLoginPage(opts: { if (termsEl) termsEl.style.display = 'block'; clearError(); stopHeartbeat(); + // Reset the email field — the user clicked "Use different + // email" precisely to escape the previous value, so leaving + // it pre-filled both wastes a clearing keystroke and looks + // like the form remembered them when they wanted a fresh + // start. Focus the input so they can start typing + // immediately. + emailInput.value = ''; + currentEmail = ''; + emailInput.focus(); } // Send OTP via better-auth