P3: feat(auth): suggest checking spam for OTP emails - #221
Conversation
📝 WalkthroughWalkthroughThe OTP sign-in page now shows a centered hint that tells users to check their spam folder when the email does not arrive. Muted text uses a darker color. A changeset documents the update. ChangesOTP login guidance
Estimated code review effort: 1 (Trivial) | ~3 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 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 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 8a163d1 The changes in this PR will be included in the next version bump. 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 |
|
🚅 Deployed to the ePDS-pr-221 environment in ePDS
|
Coverage Report for CI Build 30629432974Coverage remained the same at 57.281%Details
Uncovered ChangesNo uncovered changes found. Coverage RegressionsNo coverage regressions found. Coverage Stats
💛 - Coveralls |
aspiers
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.changeset/spam-hint-on-otp-form.md:
- Line 9: Update the end-user description in the changeset to replace “digit
boxes” with “code boxes,” keeping the rest of the wording and meaning unchanged.
In `@packages/auth-service/src/routes/login-page.ts`:
- Line 617: Update the .otp-spam-hint CSS rule to use the darker existing muted
color `#6b6b6b` instead of the faint `#999` value, while preserving its other
styling.
🪄 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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 63b9b071-3af2-4774-acfd-48e872999e81
📒 Files selected for processing (2)
.changeset/spam-hint-on-otp-form.mdpackages/auth-service/src/routes/login-page.ts
If the user typo'd their email or the OTP landed in spam, they sat staring at the OTP form with no indication of what to do. The natural next move is "Use different email" or check the spam folder, but the page surfaced neither — so the user just waited and got frustrated. Add a small muted note below the digit boxes: "If you don't see the email, check your spam folder." Single line, doesn't compete with the "We sent a 8-digit code to xx@example.com" subtitle, lives above the Resend / Use different email actions so the visual reading order is: 1. We sent it to xx@example.com 2. (digit boxes + Verify) 3. If you don't see it, check spam 4. Otherwise, Resend / Use different email / Recover. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
9da3263 to
8a163d1
Compare
|
Resending an OTP invalidates every earlier one, but the UI never said so. A user holding two code emails had no way to tell which one the form would accept, and the natural guess — the one that arrived first and is higher up the inbox — is the wrong one. The spam-folder hint has the same shape: it only helps someone whose mail has not arrived, which is a minority of sign-ins. Both facts are noise for the user who signs in on the first code, so neither belongs in permanently-visible page copy. Clicking "Resend code" is the signal that the user is struggling, so the resend confirmation carries both: Use the new code; earlier ones no longer work. It may be in your spam folder. This replaces "Code resent!", which restated what the click already confirmed. The message renders in the existing flash region, which is a persistent role="status" live region rather than a toast, so the longer copy is announced to assistive tech and stays on screen until the next action clears it. Supersedes #221, which added the spam hint as a permanent line under the code boxes. The --muted-foreground contrast bump that #221 carried to make that 13px line pass WCAG AA is no longer needed here and will land separately on its own accessibility merit. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
Superseded by #220 and #232 — not closing yet, since #220 has to land first. The hint. This PR renders the spam advice as a permanently visible line under the code boxes. That is clutter for the majority of users, who sign in on the first code and never need it; the advice only helps someone whose email has not arrived. The same reasoning applies to a second fact worth surfacing: resending an OTP invalidates every earlier one, so a user holding two code emails cannot tell which the form will accept — and the natural guess, the one that arrived first, is wrong. Clicking Resend code is precisely the signal that a user is struggling, so both facts now live in the resend confirmation instead, landed on #220 as fe45b27:
That replaces The contrast change. This PR also carried (analysis and follow-up PRs by Claude Opus 5 via Claude Code) |
Resending an OTP invalidates every earlier one, but the UI never said so. A user holding two code emails had no way to tell which one the form would accept, and the natural guess — the one that arrived first and is higher up the inbox — is the wrong one. The spam-folder hint has the same shape: it only helps someone whose mail has not arrived, which is a minority of sign-ins. Both facts are noise for the user who signs in on the first code, so neither belongs in permanently-visible page copy. Clicking "Resend code" is the signal that the user is struggling, so the resend confirmation carries both: Use the new code; earlier ones no longer work. It may be in your spam folder. This replaces "Code resent!", which restated what the click already confirmed. The message renders in the existing flash region, which is a persistent role="status" live region rather than a toast, so the longer copy is announced to assistive tech and stays on screen until the next action clears it. Supersedes #221, which added the spam hint as a permanent line under the code boxes. The --muted-foreground contrast bump that #221 carried to make that 13px line pass WCAG AA is no longer needed here and will land separately on its own accessibility merit. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
Superseded by #220 |
Summary
Add a concise spam-folder hint below the OTP form so users have an immediate next step when the verification email is slow to appear.
Changes
Testing
pnpm format:checkpnpm lintpnpm typecheckpnpm testpnpm test:coverageScreenshots
Before: the OTP form gave no hint about checking filtered mail.
After: a concise, readable spam-folder hint appears beneath Verify; it retains the theme variable and meets normal-text contrast guidance.
Notes
Current SHA 8a163d1 passed the full deployed E2E suite in run 30629432954.
Focused extraction and review of work originally proposed in [WIP] many usability fixes (needs untangling) #165.
Summary by CodeRabbit
New Features
Style