chore: auto verify OTP whenever user enters 6 digits OTP instead of waiting for them to click on verify button

[harshithpabbati]

What does this PR do?

This PR is to auto-verify when there are exactly 6 number of non-empty digits in the VerifyCodeDialog component.

Fixes #12130

https://www.loom.com/share/1dd7ed45d70f4db99798379d3b7d6ed6

Requirement/Documentation

• If there is a requirement document, please, share it here.
• If there is ab UI/UX design document, please, share it here.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• Chore (refactoring code, technical debt, workflow improvements)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How should this be tested?

• Are there environment variables that should be set?
• What are the minimal test data to have?
• What is expected (happy path) to have (input and output)?
• Any other important info that could help to test that PR

Mandatory Tasks

• Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.

Checklist

• I haven't read the contributing guide
• My code doesn't follow the style guidelines of this project
• I haven't commented my code, particularly in hard-to-understand areas
• I haven't checked if my PR needs changes to the documentation
• I haven't checked if my changes generate no new warnings
• I haven't added tests that prove my fix is effective or that my feature works
• I haven't checked if new and existing unit tests pass locally with my changes

[vercel]

@harshithpabbati is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

[CLAassistant]

All committers have signed the CLA.

[github-actions]

Thank you for following the naming conventions! 🙏 Feel free to join our discord and post your PR link to collect XP and win prizes!

[github-actions]

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Five Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (350 KB)
/settings/organizations/teams/other/[id]/appearance	261.24 KB	417.48 KB	119.28% (🟢 -0.95%)
/settings/organizations/teams/other/[id]/members	256.4 KB	412.64 KB	117.90% (🟢 -0.78%)
/settings/teams/[id]/appearance	261.23 KB	417.46 KB	119.28% (🟢 -0.96%)
/settings/teams/[id]/members	374.35 KB	530.58 KB	151.59% (🟢 -0.76%)
/settings/teams/[id]/profile	444.31 KB	600.54 KB	171.58% (🟢 -0.20%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

[supalarry]

Thanks for the PR Harshith!

1. I tested it locally with incorrect OTP code and the loading gets stuck

If you add log on line 64 and check console you see it being logged over and over again, so there might be infinite re-rendering happening or something alike.

2. Next, if the authentication happens automatically, then it would be good to remove the "Verify" button and just leave the "Close" button. I see no instance where having "Verify" button would be useful.

[harshithpabbati]

I just made the change and also removed the verify button.

[supalarry]

Thank you for the PR, awesome stuff! Tested locally and looks good!

[emrysal]

This broke a test and somehow merged; patched the broken test in #12704