1) Context & Objective

Screen name: OTP Verification
Purpose: Verify the user’s identity via an OTP (One-Time Password) code received by SMS to secure an action (login, reset, transaction validation, etc.).
Expected result: The user enters a 4-digit code and the application:

• Validates the code (success → proceed to the next step).
• Or displays an error (invalid/expired code) and offers to resend a new code after a delay.

2) Target Audience & Usage Scenarios

• New users: Phone number verification during registration.
• Existing users: Confirmation of sensitive actions (password reset, payment).

3) Content & UI

3.1 Header

• Back icon (arrow) at the top left → navigates to the previous screen.
• Title: OTP Verification.

3.2 Main Area

• Illustration: envelope icon (mail/SMS) – purely decorative.
• Main title: Enter the verification code.
• Subtext: Sent by SMS to 2250548019521. Displays masked number or international format +225… (Côte d’Ivoire).
• Code input: 4 boxes (each accepts only one digit [0–9]). Auto-focus and moves forward after entry.
• Resend timer: “Resend code in 0:54” → countdown until 0:00, then label changes to “Resend code” (clickable).
• Numeric keyboard: digits 0–9 + delete button (backspace icon).

3.3 States & Messages

• Normal: empty boxes, active timer.
• Partial entry: boxes fill progressively, delete button active.
• Complete entry (4 digits): triggers auto-validation (or via “Validate” button if preferred).
• Error:
  • Incorrect code. Try again. (boxes shake, red border).
  • Code expired. Request a new code. (submission disabled, prompts resend).

4) Functional Rules

• OTP length: 4 digits (configurable).
• Allowed characters: digits only (0–9). Pasting from clipboard must filter and truncate to 4 digits.
• Timer: starts when screen loads (e.g., 60s). While > 0, resend link is disabled.
• Resend code:
  • At timer = 0: link becomes clickable “Resend code”.
  • On click: resets timer and shows confirmation (New code sent.).
• Validation:
  • Auto-submit on 4th digit OR via “Validate” button.
  • If success: navigate to next screen (Login screen).
  • If failure:
    • Attempts 1..n: message Incorrect code.
    • After n failures (e.g., 5): captcha / temporary lock (e.g., 5 min) or recovery flow.
• Expiration:
  • OTP: valid for e.g., 5 min server-side.
  • Verification session: invalid after e.g., 10 min inactivity.

5) Accessibility & UX

• Focus management: focus on first box at screen load; auto-advance; backspace moves backward.
• Screen readers:
  • Title: “OTP Verification”.
  • Description: “Enter the 4-digit code sent by SMS”.
  • Boxes: “Digit 1 of 4… 4 of 4”.
  • Timer: “Resend code in 54 seconds”.
  • Resend button: “Resend code”.