Project

General

Profile

Actions

User Story #540

open

Feature #533: Authentication Hum Rahi

EPIC #539: Epic: User Authentication - OTP Verification & Security

User Story HR-FE-01: 6-Digit OTP Input UI & Auto-Focus Logic

Added by Islam Mansoori about 1 month ago.

Status:
To Do
Priority:
low
Assignee:
-
Target version:
Start date:
Due date:
% Done:

0%

Estimated time:

Description

Role: Front-End User Story Story: As a User, I want a seamless way to enter my 6-digit code with automatic focus shifting, so that I can complete the verification quickly without manual navigation between boxes.

  • In-Scope: * Implementation of 6 individual digit input boxes.
    • Auto-focus logic (moving to the next box upon entry, previous box upon backspace).
    • Dynamic masking of the phone number (e.g., +91 XXXXX 12345).
  • Out-of-Scope: API integration or countdown timer logic.
  • Acceptance Criteria (AC):
    • AC1: On page load, the first input box is auto-focused.
    • AC2: Typing a digit automatically moves focus to the next field.
    • AC3: Pressing 'Backspace' in an empty field moves focus to the previous field.
    • AC4: The "Verify" button is only enabled when all 6 digits are filled.
  • Validation Rules: Numeric characters only (0-9); 1 character max per box.
  • Error Messages: N/A (System prevents non-numeric input).
  • Definition of Done (DoD): UI matches design; Works on mobile soft-keyboard; Unit tests for focus-shifting logic passed.

No data to display

Actions

Also available in: Atom PDF