DDovel Team
Figma Dovel iQ v0.3 MVP (Active) · 2026-10-10
Product / Account Onboarding & Profile Setup / Reset Password

Reset Password

SCR-ONBOARD-03 · Account Onboarding & Profile Setup

LiveFigma 770:8796

Layout

All 3 steps share one layout shell: top nav (back arrow + help/chat icon), a centered 3D icon unique per step (green knot for email, a shield for OTP, a padlock for new-password), a bold centered headline, then step-specific content, then a full-width black primary button pinned above the home indicator. - **Email step**: headline "Reset password," single "Email" input field, nothing else — largest amount of empty space of the 3 steps. - **OTP step**: headline "Enter One Time Passcode (OTP)" + gray subtext, a row of 6 individually-boxed digit inputs, "Didn't get it? Resend OTP" link (green) centered below the boxes, "Verify account" button. Mock shows the numeric keypad overlaying the lower third. - **New-password step**: headline "Let's create a new password," single password input with show/hide icon, a gray rounded info chip below it (lock icon + the strength-rule text), "Continue" button. Mock shows the system keyboard overlaying the lower half.

States

- **Email step — Default**: empty email field. - **Email step — Field error**: inline message for invalid email format. - **Email step — Send failure**: retry affordance. - **OTP step — Default**: 6 empty digit boxes. - **OTP step — Error**: incorrect code shows an inline error, does not advance. - **OTP step — Resend**: "Resend OTP" re-triggers a new code send. - **OTP step — Expired**: an expired/stale code shows a safe error prompting resend. - **New password step — Default**: empty field, strength rule shown below at all times (not only on error). - **New password step — Field error**: inline message if the entered password doesn't meet the strength rule. - **New password step — Success**: password updated, routes to SCR-ONBOARD-02 so the user signs in explicitly with the new password.

Acceptance criteria

  • "Forgot password?" on SCR-ONBOARD-02 opens this screen's email step.
  • Invalid email format shows a field-level error, no submit.
  • Valid email + submit advances to the OTP step.
  • An incorrect OTP shows an inline error without advancing; "Resend OTP" sends a new code.
  • A correct OTP advances to the new-password step.
  • The new password must meet the stated strength rule before submit is enabled.
  • A failed send (email or OTP) shows a retry affordance rather than a silent failure.
  • The email step's behavior, timing, and UI are identical for registered and unregistered emails at every point up to OTP delivery — an unregistered email never reveals its status via this flow.

Powered by — endpoints · the Backend agent owns these

POST /auth/forgot-passwordPOST /auth/reset-passwordPOST /auth/verify-reset-otp
P
Product agent
supports Design & PM
×