fix(ui): add autocomplete attribute to 2FA input fields

[Aerospace-prog]

Description

This PR addresses Issue #30025 where password managers (like KeePassXC, 1Password, Bitwarden) were unable to automatically detect and fill the 2FA code input fields on the authentication modals.

By adding the standard HTML attribute autoComplete="one-time-code" to the underlying <TextInput> components, password managers and browser autofill features can now successfully identify and populate the TOTP and Email 2FA fields, significantly improving the UX and accessibility during login.

I applied this fix to both the TOTP Modal and the Email 2FA Modal to ensure consistency across the application's security flows.

Related Issues

Fixes #30025

Areas of Code Affected

• Frontend React Components:
  • TwoFactorTotpModal.tsx
  • TwoFactorEmailModal.tsx

Testing Done

• Automated UI/CI checks pass locally via Eslint (yarn eslint).
• Confirmed the <input> element renders with the correct DOM attributes.

---

Summary by CodeRabbit

• Bug Fixes
  • Enabled browser autofill support for one-time code inputs in two-factor authentication modals (email and TOTP), improving the user experience when entering authentication codes.

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

⚠️ No Changeset found

Latest commit: 4a1c5ba

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0d00b05 and 36298fb.

📒 Files selected for processing (2)

• apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx
• apps/meteor/client/components/TwoFactorModal/TwoFactorTotpModal.tsx

📜 Recent review details

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

• apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx
• apps/meteor/client/components/TwoFactorModal/TwoFactorTotpModal.tsx

🔇 Additional comments (2)

apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx (1)

68-68: Looks good — scoped fix aligns with the 2FA autofill objective.

Adding autoComplete='one-time-code' on this input is the right, minimal change for password manager/browser OTP detection.

apps/meteor/client/components/TwoFactorModal/TwoFactorTotpModal.tsx (1)

52-59: Approved — consistent OTP autocomplete support in TOTP modal.

The new autoComplete='one-time-code' is correctly applied while preserving existing form behavior.

---

Walkthrough

Adds the autoComplete='one-time-code' attribute to TextInput components in two-factor authentication modals (email and TOTP) to enable password manager recognition and browser autofill support for one-time codes.

Changes

Cohort / File(s)	Summary
Two-Factor Authentication Modals apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx, apps/meteor/client/components/TwoFactorModal/TwoFactorTotpModal.tsx	Added autoComplete='one-time-code' attribute to TextInput components to enable browser and password manager autofill for one-time authentication codes. No changes to control flow, event handlers, or error handling.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Suggested labels

type: bug, area: authentication

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding autocomplete attributes to 2FA input fields, which directly matches the modifications in both modal components.
Linked Issues check	✅ Passed	The PR fully implements the primary requirement from Issue #30025 by adding autocomplete='one-time-code' to both TOTP and Email 2FA input fields as recommended by KeePassXC.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the linked issue requirements; the PR only adds the autocomplete attribute to the specified 2FA modal components with no extraneous modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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

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

[cubic-dev-ai]

No issues found across 2 files

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}