feat: add password manager compatible OTP input component

[leofilmon]

Description

This PR adds password manager compatibility to the OTP input component used in the 2FA login flow and 2FA setup.

Problem

The previous InputOTP component using individual slots was not compatible with password managers like Dashlane, 1Password, etc., making it difficult for users to auto-fill their 2FA codes.

Solution

• Redesigned the InputOTP component with a hidden native input that password managers can detect
• Added autoComplete="one-time-code" for proper password manager integration
• Maintained visual appeal with modern rounded boxes and smooth animations
• Implemented automatic cursor movement for better UX
• Removed legacy slot-based components

Changes

• ✨ New modern InputOTP component with password manager support
• 🎨 Enhanced visual design with rounded boxes, hover effects, and focus states
• ♿ Better accessibility with proper input attributes
• 🧹 Code cleanup by removing unused components

Screenshots/Video

ScreenRecording-OTP-Dokploy.mov

Testing

• Tested with Dashlane
• Tested manual input
• Tested cursor movement
• Tested on login page
• Tested on 2FA setup page

[leofilmon]

Hey @Siumauricio 👋

Just a friendly ping on this PR! It's been a few weeks and I wanted to check if you had a chance to take a look.
I'm happy to make any changes or adjustments based on your feedback. I think this could be a nice UX improvement for users who rely on password managers like Dashlane or 1Password for their 2FA codes.

Let me know if there's anything I can do to help move this forward. Thanks! 🙂

[Siumauricio]

Hey I see another PR related to this #3042 which solves the same problem without so much code change

I see that the component has changed almost completely; what's the reason for all this? I tried it with 1password and it works fine.

[leofilmon]

Hey! Thanks for the feedback.

The issue with PR #3042 is that it only changes the autoComplete attribute, but that doesn't solve anything with Dashlane.
Whether you remove autoComplete, set it to "off", or "one-time-code" — it makes no difference. Dashlane still can't auto-fill the code.

The real problem is the multiple separate input boxes (the slot-based approach with InputOTPSlot). Dashlane simply can't detect and fill a code that's split across 6 different input fields.

That's why the component had to be redesigned with a hidden native input that password managers can actually interact with, while keeping the visual appearance of separate boxes through CSS styling.

I tested this specifically with Dashlane and it now works correctly. Happy to show a demo if needed!

[leofilmon]

Hey @Siumauricio ! Just a friendly bump on this PR 👋

I imagine I'm not the only one waiting for this fix — password manager compatibility for OTP inputs is a common pain point.

This change would save a lot of time for end users and only touches UI/UX code, so the risk surface is pretty minimal.

Would it be possible to get a final review on this? Whether it's a merge or a close with feedback, any update would be appreciated!

Thanks for your time 🙏