feat: Auto-format Authentication Code with Hyphen

[dhairyashiil]

feat: Auto-format Authentication Code with Hyphen

Proposed changes (including videos or screenshots)

In the current authentication code input process, users can enter the code in two formats: 123456 or 123-456. This can lead to confusion as users may not always know if they should manually add the hyphen (-).

Solution:

This feature automatically adds a hyphen (-) after every three digits once the user enters the first three characters. The code will appear as 123-456, and users will be able to continue entering the remaining digits without needing to manually insert the hyphen. This improves the user experience and ensures the correct format is always followed.

Screenshots/Video:

hyphen.in.authentication.code.mp4

Issue(s)

Closes #35178

Steps to test or reproduce

Step 0: Enable Two-factor authentication First (Profile -> Security -> Two-factor authentication via email)

1. Navigate to the authentication input screen where users are prompted to enter an OTP.
2. Start typing the first three digits of the code.
3. The hyphen (-) should automatically appear after the third digit (e.g., 123-).
4. Continue typing the remaining digits, ensuring the hyphen is retained, and the code is formatted correctly (e.g., 123-456).
5. Verify that both 123456 and 123-456 formats are accepted.

Further comments

This solution should simplify the process for users and eliminate any confusion regarding whether they need to manually enter the hyphen. It is a small UI improvement that enhances usability without impacting the backend or requiring complex changes.

Let me know if you need any changes or improvements, and I look forward to your feedback.

[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]

🦋 Changeset detected

Latest commit: 1084d65

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 35 packages

Name	Type
@rocket.chat/meteor	Patch
@rocket.chat/core-typings	Patch
@rocket.chat/rest-typings	Patch
@rocket.chat/uikit-playground	Patch
@rocket.chat/api-client	Patch
@rocket.chat/apps	Patch
@rocket.chat/core-services	Patch
@rocket.chat/cron	Patch
@rocket.chat/ddp-client	Patch
@rocket.chat/freeswitch	Patch
@rocket.chat/fuselage-ui-kit	Patch
@rocket.chat/gazzodown	Patch
@rocket.chat/livechat	Patch
@rocket.chat/model-typings	Patch
@rocket.chat/ui-contexts	Patch
@rocket.chat/account-service	Patch
@rocket.chat/authorization-service	Patch
@rocket.chat/ddp-streamer	Patch
@rocket.chat/omnichannel-transcript	Patch
@rocket.chat/presence-service	Patch
@rocket.chat/queue-worker	Patch
@rocket.chat/stream-hub-service	Patch
@rocket.chat/license	Patch
@rocket.chat/omnichannel-services	Patch
@rocket.chat/pdf-worker	Patch
@rocket.chat/presence	Patch
rocketchat-services	Patch
@rocket.chat/models	Patch
@rocket.chat/network-broker	Patch
@rocket.chat/ui-avatar	Patch
@rocket.chat/ui-client	Patch
@rocket.chat/ui-video-conf	Patch
@rocket.chat/ui-voip	Patch
@rocket.chat/web-ui-registration	Patch
@rocket.chat/instance-status	Patch

Not sure what this means? Click here to learn what changesets are.

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