fix(ui): allow pw manager extensions to autofill totp#787
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (3)
💤 Files with no reviewable changes (2)
📝 WalkthroughWalkthroughReplaces a multi-slot OTP component with a single numeric text input: removes the Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #787 +/- ##
=======================================
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. 🚀 New features to boost your workflow:
|
f3bc8bb to
9b1e798
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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`:
- Line 53: The placeholder in the TotpForm component is hardcoded as "xxxxxx";
replace it with a localized string using the project's i18n hook (e.g., call
useTranslation()/t) instead of the literal, update the placeholder prop on the
input in totp-form.tsx to use t('auth.totp.placeholder') (or your chosen key),
ensure useTranslation is imported and available in the component (e.g., const {
t } = useTranslation()), and add the corresponding "auth.totp.placeholder" entry
to the locale JSON files so translations are provided.
- Around line 27-32: The input handler (handleChange) directly calls onSubmit
when value reaches 6 chars, bypassing the form submission pipeline
(form.handleSubmit) and risking duplicate mutation calls; change handleChange to
invoke the same submission path by calling form.handleSubmit(onSubmit) instead
of onSubmit(...) and then clear/reset the field (e.g., form.reset() or
form.setValue("code", "") ) after the submission completes so subsequent Enter
presses won't re-submit the same code; update references in handleChange to use
form.handleSubmit and form.reset/form.setValue to ensure a single unified submit
path and clear the form.
🪄 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: b1ca1379-e98b-4f07-84ef-b22b70733464
⛔ Files ignored due to path filters (1)
frontend/bun.lockis excluded by!**/*.lock
📒 Files selected for processing (3)
frontend/package.jsonfrontend/src/components/auth/totp-form.tsxfrontend/src/components/ui/input-otp.tsx
💤 Files with no reviewable changes (2)
- frontend/package.json
- frontend/src/components/ui/input-otp.tsx
| autoComplete="one-time-code" | ||
| autoFocus | ||
| maxLength={6} | ||
| placeholder="xxxxxx" |
There was a problem hiding this comment.
Localize the placeholder text.
Line 53 hardcodes "xxxxxx" in an otherwise localized component; this should be i18n-backed for consistency.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/components/auth/totp-form.tsx` at line 53, The placeholder in
the TotpForm component is hardcoded as "xxxxxx"; replace it with a localized
string using the project's i18n hook (e.g., call useTranslation()/t) instead of
the literal, update the placeholder prop on the input in totp-form.tsx to use
t('auth.totp.placeholder') (or your chosen key), ensure useTranslation is
imported and available in the component (e.g., const { t } = useTranslation()),
and add the corresponding "auth.totp.placeholder" entry to the locale JSON files
so translations are provided.
9b1e798 to
ea21cbd
Compare
|
Closing in favor of #790. |
removes shadcn's totp component in favour of a regular input field.
Loosely based styling on github's 2fa prompt:
my bw extension appears to work fine with this input.
fixes #407
Summary by CodeRabbit