fix(ui): improve 2FA input detection for password managers

[Pragatigupta2508]

Summary

Improved identification of 2FA input fields to ensure better compatibility with password managers.

Problem

Currently, the authentication code input field is not properly recognized by password managers, making it difficult for users to autofill one-time codes.

Solution

• Added autoComplete="one-time-code" to the input field
• Added name="totp" to improve field identification

Changes

• Updated the 2FA input field in TwoFactorEmailModal.tsx

Impact

This change allows password managers to correctly detect and autofill authentication codes, improving user experience during login.

Testing

• Verified that the input field renders correctly
• Confirmed that the new attributes are present in the DOM
• Ensured no existing functionality is affected

Summary by CodeRabbit

• Improvements
  • Enhanced the two-factor authentication email verification process to better support browser auto-fill features for authentication codes, providing a faster and more convenient verification experience.

[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: 1714cf6

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

[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.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e33b3649-2656-487f-9443-b516fdca6a68

📥 Commits

Reviewing files that changed from the base of the PR and between 4235cd9 and 1714cf6.

📒 Files selected for processing (1)

• apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.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

🧠 Learnings (3)

📓 Common learnings

Learnt from: smirk-dev
Repo: RocketChat/Rocket.Chat PR: 39625
File: apps/meteor/app/api/server/v1/push.ts:85-97
Timestamp: 2026-03-14T14:58:58.834Z
Learning: In RocketChat/Rocket.Chat, the `push.token` POST/DELETE endpoints in `apps/meteor/app/api/server/v1/push.ts` were already migrated to the chained router API pattern on `develop` prior to PR `#39625`. `cleanTokenResult` (which strips `authToken` and returns `PushTokenResult`) and `isPushTokenPOSTProps`/`isPushTokenDELETEProps` validators already exist on `develop`. PR `#39625` only migrates `push.get` and `push.info` to the chained pattern. Do not flag `cleanTokenResult` or `PushTokenResult` as newly introduced behavior-breaking changes when reviewing this PR.

Learnt from: juliajforesti
Repo: RocketChat/Rocket.Chat PR: 39590
File: apps/meteor/client/views/omnichannel/contactInfo/EditContactInfo.tsx:97-99
Timestamp: 2026-03-18T16:08:17.800Z
Learning: In `apps/meteor/client/views/omnichannel/contactInfo/EditContactInfo.tsx`, `reValidateMode: 'onBlur'` is intentionally used (not 'onChange') because the `validateEmailFormat` and `validatePhone` functions are async and call the `checkExistenceEndpoint` API to check for duplicates. Using 'onChange' would trigger excessive network requests on every keystroke. The combination of `mode: 'onSubmit'` with `reValidateMode: 'onBlur'` is a deliberate design decision to minimize API calls while still providing revalidation feedback.

📚 Learning: 2026-03-18T16:08:17.800Z

Learnt from: juliajforesti
Repo: RocketChat/Rocket.Chat PR: 39590
File: apps/meteor/client/views/omnichannel/contactInfo/EditContactInfo.tsx:97-99
Timestamp: 2026-03-18T16:08:17.800Z
Learning: In `apps/meteor/client/views/omnichannel/contactInfo/EditContactInfo.tsx`, `reValidateMode: 'onBlur'` is intentionally used (not 'onChange') because the `validateEmailFormat` and `validatePhone` functions are async and call the `checkExistenceEndpoint` API to check for duplicates. Using 'onChange' would trigger excessive network requests on every keystroke. The combination of `mode: 'onSubmit'` with `reValidateMode: 'onBlur'` is a deliberate design decision to minimize API calls while still providing revalidation feedback.

Applied to files:

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

📚 Learning: 2026-03-27T14:52:56.865Z

Learnt from: dougfabris
Repo: RocketChat/Rocket.Chat PR: 39892
File: apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx:150-155
Timestamp: 2026-03-27T14:52:56.865Z
Learning: In Rocket.Chat, there are two different `ModalBackdrop` components with different prop APIs. During review, confirm the import source: (1) `rocket.chat/fuselage` `ModalBackdrop` uses `ModalBackdropProps` based on `BoxProps` (so it supports `onClick` and other Box/DOM props) and does not have an `onDismiss` prop; (2) `rocket.chat/ui-client` `ModalBackdrop` uses a narrower props interface like `{ children?: ReactNode; onDismiss?: () => void }` and handles Escape keypress and outside mouse-up, and it does not forward arbitrary DOM props such as `onClick`. Flag mismatched props (e.g., `onDismiss` passed to the fuselage component or `onClick` passed to the ui-client component) and ensure the usage matches the correct component being imported.

Applied to files:

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

🔇 Additional comments (1)

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

68-76: Good OTP autofill compatibility improvement.

Adding name="totp" and autoComplete="one-time-code" on the TextInput is a solid, low-risk UX improvement, and the controlled input wiring remains correct.

---

Walkthrough

The TextInput component in the two-factor email modal was updated to include name="totp" and autoComplete="one-time-code" attributes to improve browser autofill support for one-time codes.

Changes

Cohort / File(s)	Summary
Two-Factor Authentication UI apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx	Added name="totp" and autoComplete="one-time-code" attributes to the code input field for enhanced browser autofill support.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested labels

type: bug

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 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 main change: adding autocomplete attributes to improve 2FA input detection for password managers, which directly matches the changeset.
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.}

---

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 1 file

[Pragatigupta2508]

Hi, thanks for the feedback!

Could a maintainer please help add the required labels and milestone to this PR? I’ve ensured the changes are minimal and focused on improving 2FA input detection for better password manager compatibility.

Happy to make any additional changes if needed!