diff --git a/.changeset/email-autocomplete-hints.md b/.changeset/email-autocomplete-hints.md new file mode 100644 index 00000000..ed312c3b --- /dev/null +++ b/.changeset/email-autocomplete-hints.md @@ -0,0 +1,9 @@ +--- +'ePDS': patch +--- + +Sign-in and recovery email fields now work more reliably with browser autofill and password managers. + +**Affects:** End users + +**End users:** email fields now identify themselves to browsers as email addresses, while the same sign-in field identifies itself as a username after switching to handle entry. This helps browsers and password managers offer the right saved value in each mode. diff --git a/e2e/step-definitions/atproto-login-button.steps.ts b/e2e/step-definitions/atproto-login-button.steps.ts index f0100ca8..2c34d692 100644 --- a/e2e/step-definitions/atproto-login-button.steps.ts +++ b/e2e/step-definitions/atproto-login-button.steps.ts @@ -76,6 +76,7 @@ Then( const input = page.locator('#email') await expect(input).toHaveAttribute('type', 'text') await expect(input).toHaveAttribute('name', 'handle') + await expect(input).toHaveAttribute('autocomplete', 'username') await expect(input).toHaveAttribute('placeholder', 'you.bsky.social') await expect(page.locator('label[for="email"]')).toHaveText('Handle') }, @@ -88,6 +89,7 @@ Then( const input = page.locator('#email') await expect(input).toHaveAttribute('type', 'email') await expect(input).toHaveAttribute('name', 'email') + await expect(input).toHaveAttribute('autocomplete', 'email') await expect(input).toHaveAttribute('placeholder', 'you@example.com') await expect(page.locator('label[for="email"]')).toHaveText( 'Enter your email address', diff --git a/packages/auth-service/src/routes/account-login.ts b/packages/auth-service/src/routes/account-login.ts index 7b044ab2..aea686fb 100644 --- a/packages/auth-service/src/routes/account-login.ts +++ b/packages/auth-service/src/routes/account-login.ts @@ -157,6 +157,7 @@ function renderLoginForm(opts: { csrfToken: string; error?: string }): string {