Hum Rahi

User Story 1: Front-End - Mobile Entry UI & Validation¶

As a User, I want a responsive and validated mobile number entry form, so that I can provide my contact details without errors before requesting an OTP.

• In-Scope:
  • Responsive UI implementation based on the provided HTML/Tailwind CSS.
  • Client-side validation for the phone number field.
  • Toggle state for "Remember Me" and "Terms & Conditions" checkboxes.
  • Dark/Light mode support as defined in the CSS.
• Out-of-Scope:
  • Actual SMS/WhatsApp transmission (Backend responsibility).
  • "Contact Support" page redirection logic.
• Acceptance Criteria (AC):
  • AC1: The input field must only accept numeric digits.
  • AC2: The "Send OTP" button remains disabled until the "Terms and Conditions" checkbox is checked.
  • AC3: The UI must display the fixed +91 country code prefix.
  • AC4: Clicking the "Send OTP" button triggers a POST request to the backend API.
• Validation Rules:
  • Format: Must be exactly 10 digits (excluding +91).
  • Mandatory: Phone number and Terms checkbox are required.
• Error Messages:
  • Empty Field: "Please enter your mobile number."
  • Invalid Length: "Mobile number must be exactly 10 digits."
  • Terms Unchecked: "You must agree to the Terms and Conditions to proceed."
• Definition of Done (DoD):
  • UI matches the provided HTML/Tailwind design.
  • Cross-browser tested (Chrome, Safari, Firefox).
  • Mobile-responsive (verified on small screen breakpoints).
  • Unit tests for validation logic passed.