fix(login): restore browser autofill on two-step login form#1788
Conversation
Add a visually-hidden email input with autocomplete="username" inside the password form (step 2) so browsers and password managers can correctly associate the saved password with the user's email address. Uses opacity+absolute positioning instead of display:none so the input is still detectable by browser autofill engines while remaining invisible to the user. Also moved the email display <p> inside the password form and added it to the SSO path to keep parity. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
📝 WalkthroughWalkthroughThe login form is modified to improve password-manager autofill compatibility by adding a hidden email input field with autocomplete="username" while reorganizing the visible email context display placement within the credentials section. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan for PR comments
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/pages/login.vue (1)
589-604: Consider using Tailwind utility classes instead of inline styles.The hidden input implementation correctly follows browser autofill best practices (using opacity/position instead of
display:none). However, per coding guidelines, inline CSS should be avoided in favor of utility composition.♻️ Suggested refactor using Tailwind utilities
<input type="email" :value="emailForLogin" name="username" autocomplete="username" readonly tabindex="-1" aria-hidden="true" - style="position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none;" + class="absolute w-px h-px opacity-0 overflow-hidden pointer-events-none" >As per coding guidelines: "Avoid custom CSS in Vue components; prefer utility composition and DaisyUI theming."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/login.vue` around lines 589 - 604, The hidden email input uses inline style; replace the style attribute on the input (the hidden email autofill helper input with name="username" and :value="emailForLogin") with Tailwind utility classes that replicate the behavior, e.g. add classes like "absolute w-[1px] h-[1px] opacity-0 overflow-hidden pointer-events-none" (or equivalent utility tokens your project prefers) and remove the inline style string so the component follows the utility-first/DaisyUI guideline.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/pages/login.vue`:
- Around line 589-604: The hidden email input uses inline style; replace the
style attribute on the input (the hidden email autofill helper input with
name="username" and :value="emailForLogin") with Tailwind utility classes that
replicate the behavior, e.g. add classes like "absolute w-[1px] h-[1px]
opacity-0 overflow-hidden pointer-events-none" (or equivalent utility tokens
your project prefers) and remove the inline style string so the component
follows the utility-first/DaisyUI guideline.
|
2 participants
Summary (AI generated)
<input type="email" autocomplete="username">inside the password form (step 2) so browser credential managers can associate the saved password with the entered email address<p>inside the password form (was outside the<FormKit>form, so browsers couldn't detect the association)Motivation (AI generated)
When the login page was split into two steps (email → password), browser autofill broke because:
username/emailfield and apasswordfield in the same HTML form to trigger password autofill. With the two-step approach, the password form had no email field, so the browser couldn't determine which saved credential to suggest.<p>was outside the<FormKit>(i.e., outside the<form>element), so it had no effect on autofill heuristics.The fix follows the HTML5 autocomplete spec and browser vendor documentation for multi-step login forms:
autocomplete="username"inside the password formopacity:0; position:absolute(notdisplay:none) so browsers still detect it for autofillBusiness Impact (AI generated)
Test Plan (AI generated)
Generated with AI
Summary by CodeRabbit