refactor: use plain input for totp input to fix autofill issues

[steveiliop56]

Fixes #407

Summary by CodeRabbit

• Refactor

  • Replaced the multi-slot TOTP entry with a single numeric input for a simpler, more streamlined code entry.
  • Input now auto-submits when six digits are entered (with safeguards against duplicate submissions).
  • Added numeric input hints (numeric keypad, max 6 characters, placeholder) and kept one-time-code autocomplete.

• Style

  • Adjusted page content layout to use default card styling instead of forced centered column layout.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 94c82645-bdcb-4b26-9ebf-e08a4270c028

📥 Commits

Reviewing files that changed from the base of the PR and between e7b44ee and 40bb8b4.

📒 Files selected for processing (1)

• frontend/src/components/auth/totp-form.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• frontend/src/components/auth/totp-form.tsx

---

📝 Walkthrough

Walkthrough

Replaced the multi-slot OTP UI and removed its input-otp dependency. The TOTP form now uses a single numeric text input that sanitizes/truncates to 6 digits, auto-submits when length is 6 (via form.handleSubmit), and layout styling on the TOTP page was relaxed.

Changes

Cohort / File(s)	Summary
Dependency & Removed UI frontend/package.json, frontend/src/components/ui/input-otp.tsx	Removed the input-otp dependency and deleted the InputOTP, InputOTPGroup, InputOTPSlot, and InputOTPSeparator component implementations/exports.
TOTP Form Input Refactor frontend/src/components/auth/totp-form.tsx	Replaced multi-slot InputOTP with a single Input; switched to event-based change handler that strips non-digits and truncates to 6 chars; uses form.setValue("code", ..., { shouldValidate: false }); auto-triggers form.handleSubmit(onSubmit)() when 6 digits entered with a ref-guard to avoid repeats; added input attributes (inputMode, maxLength, placeholder, centered text).
Layout Adjustment frontend/src/pages/totp-page.tsx	Removed flex flex-col items-center Tailwind classes from CardContent wrapper to allow default layout behavior.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hopped from slots to one neat line,
Six digits tidy, numeric and fine.
No extra library, just clean, swift art—
A little rabbit’s code, straight from the heart.

🚥 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 'refactor: use plain input for totp input to fix autofill issues' accurately and specifically describes the main change: replacing an OTP library component with a plain input to resolve autofill compatibility issues.
Linked Issues check	✅ Passed	The pull request successfully addresses issue #407 by replacing the incompatible InputOTP component with a plain HTML input field that supports autofill and paste operations.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the TOTP autofill issue: removing InputOTP dependency, replacing the component, and adjusting layout styling accordingly.
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.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch scottmckendry-fix-totp-autofill

---

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 20.12%. Comparing base (cc94294) to head (40bb8b4).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #790   +/-   ##
=======================================
  Coverage   20.12%   20.12%           
=======================================
  Files          50       50           
  Lines        3970     3970           
=======================================
  Hits          799      799           
  Misses       3099     3099           
  Partials       72       72           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@frontend/src/components/auth/totp-form.tsx`:
- Around line 27-32: handleChange currently calls form.handleSubmit(onSubmit) on
every change when value.length === 6, causing repeated submissions; modify
handleChange to only trigger submission when the code just transitioned to 6
digits (not on every onChange) by storing the last-submitted code in a ref
(e.g., lastSubmittedCodeRef) or a boolean (e.g., hasSubmittedRef) and comparing
current value to that before calling form.handleSubmit(onSubmit)(); update
lastSubmittedCodeRef.current = value (or set hasSubmittedRef) after a successful
trigger, and reset the ref when form.setValue changes to a non-6 length so
subsequent edits can submit again; reference functions/variables: handleChange,
form.setValue, form.handleSubmit, onSubmit, and the new
lastSubmittedCodeRef/hasSubmittedRef.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 35356c33-1dd9-46ba-8f1e-74aefff2f1cf

📥 Commits

Reviewing files that changed from the base of the PR and between cc94294 and e7b44ee.

⛔ Files ignored due to path filters (1)

• frontend/bun.lock is excluded by !**/*.lock

📒 Files selected for processing (4)

• frontend/package.json
• frontend/src/components/auth/totp-form.tsx
• frontend/src/components/ui/input-otp.tsx
• frontend/src/pages/totp-page.tsx

💤 Files with no reviewable changes (2)

• frontend/package.json
• frontend/src/components/ui/input-otp.tsx