Keep the passcode out of the login form's markup (iOS AutoFill)

[feruzm]

Closes #162

On iOS, AutoFill filled the saved Hive key into Passcode instead of Private key on Add account. Desktop managers got it right.

Why: since #136 the passcode belongs to a detached form of its own (form= attribute), and desktop managers go by which form owns a field. But the passcode input still sat inside the login <form> element. iOS AutoFill seems to group fields by the <form> element they sit in, so it saw a username and two password fields.

Change (src/routes/import.tsx):

• The login <form> now wraps only the username and the private key. It uses display: contents, so the page looks exactly the same.
• The passcode, the checkbox and the Add account button sit outside it. The button submits the login form through its form attribute.
• Enter in the passcode clicks that button, so a disabled button still refuses the submit. Enter in the key still submits the form.

Tests:

• The unit and contract tests now check that the passcode is not inside the login form (login.contains(pass) === false). With the old markup the unit test fails.
• A new contract test checks that Enter in the key submits through the outside button.
• 1096 unit tests pass. All 83 Chromium e2e tests pass against a local nginx build.

Needs a device check: Safari's AutoFill rules are not public, and no desktop browser runs iOS AutoFill, so this can only be confirmed on a phone. After staging deploys: on an iPhone, open Add account on staging.hivesigner.com, tap Username, pick the saved login from the QuickType bar. The key should land in Private key and Passcode should stay empty.

Summary by CodeRabbit

• Bug Fixes
  • Improved password-manager behavior on the import page by keeping the passcode field separate from the username and password fields, reducing the chance that saved credentials are filled into the wrong fields.
  • Pressing Enter in the passcode field now submits the login form, including when the submit button is outside the form.

[qodo-code-review]

ⓘ Qodo reviews are paused because your trial has ended. Ask your workspace admin to add credits to resume reviews. Manage billing

[qodo-free-for-open-source-projects]

PR Summary by Qodo

Isolate passcode markup from login form for iOS AutoFill

🐞 Bug fix 🧪 Tests 🕐 10-20 Minutes

AI Description

• Isolates passcode controls from login form markup to prevent iOS AutoFill misclassification.
• Preserves keyboard submission through an externally associated Add account button.
• Adds unit and browser contracts for form containment and Enter behavior.

Diagram

sequenceDiagram
  actor User
  participant AutoFill as iOS AutoFill
  participant Login as Login Form
  participant Passcode as Detached Passcode
  participant Button as External Button
  participant Handler as Import Handler
  Note over Login,Passcode: Separate DOM form boundaries
  AutoFill->>Login: Fill username and key
  User->>Login: Enter in key
  Login->>Button: Use associated submitter
  Button->>Handler: Submit credentials
  User->>Passcode: Enter passcode
  Passcode->>Button: Click when enabled
  Button->>Handler: Submit credentials

Loading

High-Level Assessment

The native HTML form association is the best approach: physically separating the passcode addresses iOS AutoFill while form= preserves semantic submission from the external button. Routing passcode Enter through the button also retains disabled-state enforcement and older Safari compatibility; direct programmatic submission or broader layout restructuring would add risk without improving the fix. Validate the remaining undocumented AutoFill behavior on a physical iPhone.

Files changed (3) +67 / -29

Bug fix (1) +42 / -29

import.tsxPhysically separate passcode controls from the login form +42/-29

Physically separate passcode controls from the login form

• Restricts the login form to the username and private-key fields while preserving the existing layout with 'display: contents'. Moves the remaining controls outside it, associates the submit button through a generated form ID, and routes passcode Enter presses through the button so disabled submissions remain blocked.

src/routes/import.tsx

Tests (2) +25 / -0

password-managers.spec.tsCover physical form isolation and keyboard submission +20/-0

Cover physical form isolation and keyboard submission

• Extends the browser contract to verify the passcode is outside the login form's DOM subtree. Adds coverage proving Enter in the private-key field submits only the username and key through the external button.

e2e/tests/password-managers.spec.ts

import.test.tsxAssert passcode containment and external button ownership +5/-0

Assert passcode containment and external button ownership

• Adds unit assertions that the passcode is neither owned by nor nested inside the login form. Confirms the Add account button remains associated with that form from outside its markup.

src/routes/import.test.tsx

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

Tip of the day

💡 Did you know, you can reply 'qodo' on any finding to push back, ask questions, or dig deeper

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 58b4d723-a893-4eab-a5af-23aa81d78b4e

📥 Commits

Reviewing files that changed from the base of the PR and between b62f7c0 and e10b96d.

📒 Files selected for processing (3)

• e2e/tests/password-managers.spec.ts
• src/routes/import.test.tsx
• src/routes/import.tsx

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The import page now keeps the passcode outside the login form while associating the external submit button with that form. Tests check the field grouping and verify that pressing Enter in the passcode field submits only the username and password fields.

Changes

Import form

Layer / File(s)	Summary
Form grouping and submission src/routes/import.tsx, src/routes/import.test.tsx, e2e/tests/password-managers.spec.ts	The login form contains only the username and secret fields. The passcode remains outside it. The external button submits the login form, and Enter in the passcode field clicks that button. Tests verify field containment and the submitted fields.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to e10b9

Account import retains the entered passcode and its submission behavior after the form change. The change is mergeable after normal checks; iPhone AutoFill behavior still needs device confirmation.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 3 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the primary change: moving the passcode outside the login form to address iOS AutoFill behavior.
Linked Issues check	✅ Passed	Issue [#162] requires the mobile password manager to place the saved Hive key in the private key field, not the passcode field. src/routes/import.tsx keeps only username and password inside the …
Out of Scope Changes check	✅ Passed	The reviewed changes are limited to the import page structure and its unit and end-to-end tests. The changes directly support [#162] by changing password-manager field grouping and preserving form sub…

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{A rabbit checks the fields in line
The passcode rests outside the sign
Enter clicks the button bright
The form sends only what is right
Then hops away beneath moonlight}

_{Comment @coderabbitai help to get the list of available commands.}