SL
SkillsLao Learner Portal
Prototype
๐ŸŽฌ Simulate:

Forgot Password

Choose how to receive your OTP to verify your identity before setting a new password.

Don't have an account? Sign up

Screen Flow (from flow.puml):

โ†’ Email OTP โ†’ SUC-IDP-01 โ†’ Mobile OTP โ†’ SUC-IDP-02 โ†’ suspended / Google SSO only (error inline, end of flow) โ†’ [end]
๐Ÿ“ Spec notes โ€” UC-IDP.22 / SCR-IDP.39 (fields, actions, requirements)
Identity
  • Screen: SCR-IDP.39 โ€” Forgot Password Landing
  • Use case: UC-IDP.22 โ€” Forgot Password
Brief description

Entry screen of the forgot-password flow โ€” user selects an OTP delivery channel (Email OTP or Mobile OTP) first, then the system shows the contact field matching the chosen channel; pressing "Continue" makes the system look up the account and send the OTP. Handles inline errors for: account not found (AF 4A), Google-SSO-only account (AF 4B), suspended account (AF 4C), and OTP send failure (AF 5A) โ€” all shown inline without navigating away.

Fields
  • otp_channel "OTP Delivery Method" โ€” enum {email_otp, mobile_otp} ยท required ยท always visible ยท default email_otp ยท both channels shown (learner)
  • email "Email" โ€” text ยท required & visible when otp_channel == email_otp ยท validation: format:email, max_length:255
  • country_code "Country code" โ€” text ยท read-only ยท default "+856" ยท required & visible when otp_channel == mobile_otp
  • mobile_number "Mobile Number" โ€” phone ยท required & visible when otp_channel == mobile_otp ยท validation: format:phone
  • inline_message "Notification Message" โ€” text ยท read-only ยท visible when form_error != null ยท values: account_not_found / google_only / account_suspended / otp_send_failed
Actions
  • continue "Continue" โ€” enabled when required_fields_valid ยท triggers UC-IDP.22-M-4 โ†’ SUC-IDP-01 or SUC-IDP-02 (/authenticate-via-email-otp or /authenticate-via-mobile-otp, returnUrl=/forgot-password/reset-password)
  • back_to_login "Back to Login" โ€” always enabled โ†’ /login-learner/
  • go_to_register "Sign up" โ€” always enabled โ†’ /register-as-learner/
Additional requirements
  1. For email_otp โ†’ show only the email field (text, format:email); for mobile_otp โ†’ show country_code (+856, read-only) and mobile_number (phone) side by side โ€” same pattern as the sign-up screen (SCR-IDP.01). [refs: โ€”]
  2. All error cases (account not found, Google-SSO-only, suspended, OTP send failure) must be shown inline in the "Inline message" region โ€” the page must not navigate; the user can edit and retry immediately. [refs: โ€”]
๐Ÿ“ Reviewer notes (overlay)

The page header block (icon circle + title + subtitle) must sit on the white background inside the card โ€” render the text-center header as the first child of .card-body, above the form regions.

Source: Prototype/screen-notes/forgot-password/_uc.md โ€” applied as override layer at generation time