[UI/UX Design] Design a 2FA recovery-email fallback confirmation flow

[thlpkee20-wq]

Description

When a user loses their 2FA device, a recovery-email fallback must be secure yet accessible. Design a flow that verifies the recovery email, throttles requests, and clearly communicates progress and cooldowns.

Requirements and context

• Must be accessible (WCAG 2.1 AA), responsive, and documented in the design system
• Should be consistent with existing patterns and easy to review
• Relevant code: src/components/TwoFactorSetup.tsx
• Cooldown must show a countdown in plain language

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/2fa-recovery-email-flow
• Implement changes
  • Design the request-code screen and code-entry screen
  • Specify throttling and cooldown UI
  • Draft the "still can't access" support link
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • Repeated requests, expired codes, screen reader flow
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: 2fa recovery email flow

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours

[drips-wave]

Congratulations, @Wizdee-001! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @Wizdee-001: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[thlpkee20-wq]

Assigned to @Wizdee-001 based on their Drips Wave application. This assignment was checked against the limit of 4 active assigned issues without a linked PR across the RevoraOrg organization. Please open a PR referencing this issue when ready.

[adeboladee]

@adeboladee has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hello Maintainer, Please I would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @adeboladee to this issue.

[samkay-ops]

@samkay-ops has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi team,

I'm applying to work on this issue.

I work across multiple stacks (TypeScript/Node, Rust, Python, and related tooling) and focus on clean, testable changes that match the acceptance criteria. I will keep the PR scoped to this issue only and ready for review.

Ready to start immediately.

Best regards,
samkay-ops

ℹ️ Repo Maintainers: To accept this application, review their application or assign @samkay-ops to this issue.

[AnnieIj]

@AnnieIj has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi maintainer, I would love to work on this issue. Thanks

ℹ️ Repo Maintainers: To accept this application, review their application or assign @AnnieIj to this issue.

[Classique-seyi]

@Classique-seyi has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi maintainer, I'm new to this platform and yet to receive any issue, please assign

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Classique-seyi to this issue.

[Kenisank]

@Kenisank has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi maintainer, I would like to solve this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Kenisank to this issue.

[Eldren-cmd]

@Eldren-cmd has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi maintainer, i would like to work on this issue, kindly assign it to me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Eldren-cmd to this issue.

[Sharon-alt29]

@Sharon-alt29 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hello Maintainer, Pls I would really love to hop on this task. Thank you for the opportunity.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Sharon-alt29 to this issue.

[directorfloo]

@directorfloo has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

i would love to work to work on this issue professionally, Please assign it to me

ℹ️ Repo Maintainers: To accept this application, review their application or assign @directorfloo to this issue.

[Sage-senpai]

@Sage-senpai has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

would love to work on this issue and can guarantee an optimal and effective PR under 48 hours

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Sage-senpai to this issue.

[gitGolf]

@gitGolf has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi Maintainer, I'd like to work on this issue. I've handled similar tasks in the past and feel comfortable diving into this one right away

ℹ️ Repo Maintainers: To accept this application, review their application or assign @gitGolf to this issue.