User Story #535
Updated by Islam Mansoori about 1 month ago
### **User Story 1: Front-End - Mobile Entry UI & Validation** **As a** As a User, **I want** I want a responsive and validated mobile number entry form, **so that** so that I can provide my contact details without errors before requesting an OTP. - **In-Scope:** - 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:** - Out-of-Scope: Actual SMS/WhatsApp transmission (Backend responsibility). - "Contact Support" page redirection logic. - **Acceptance Acceptance Criteria (AC):** - **AC1:** (AC): AC1: The input field must only accept numeric digits. - **AC2:** AC2: The "Send OTP" button remains disabled until the "Terms and Conditions" checkbox is checked. - **AC3:** AC3: The UI must display the fixed +91 country code prefix. - **AC4:** AC4: Clicking the "Send OTP" button triggers a POST request to the backend API. - **Validation Rules:** - **Format:** Validation Rules: Format: Must be exactly 10 digits (excluding +91). - **Mandatory:** Mandatory: Phone number and Terms checkbox are required. - **Error Messages:** - *Empty Field:* Error Messages: Empty Field: "Please enter your mobile number." - *Invalid Length:* Invalid Length: "Mobile number must be exactly 10 digits." - *Terms Unchecked:* Terms Unchecked: "You must agree to the Terms and Conditions to proceed." - **Definition Definition of Done (DoD):** - (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.