Storefront Login Test Plan

Objective: Verify that users can successfully request an OTP with a valid 10-digit phone number.

1. Navigate to the storefront login page (/login)
   Login page loads with phone number input field and "Send OTP" button disabled
2. Enter a valid 10-digit phone number: 9876543210
   "Send OTP" button becomes enabled
3. Click the "Send OTP" button
   Button shows "Sending..." loading state
4. Wait for OTP request to complete
   • Screen transitions to OTP entry view
   • Shows message: "We sent a 6-digit code to +91 9876543210"
   • 6 OTP input boxes are displayed
   • 60-second countdown timer starts for resend
   • First OTP input box is auto-focused

Objective: Verify that phone numbers with less than 10 digits are rejected.

1. Navigate to the login page
   Login page loads
2. Enter a phone number with only 9 digits: 987654321
   "Send OTP" button remains disabled
3. Try to submit the form by pressing Enter
   Form does not submit, no API call is made

Objective: Verify that non-numeric characters are automatically stripped from input.

1. Navigate to the login page
   Login page loads
2. Try typing letters: abc
   Input field remains empty - letters are not accepted
3. Try typing special characters: !@#$%
   Input field remains empty - special characters are not accepted
4. Try pasting a formatted number: 98765-43210
   Input shows 9876543210 - only digits are kept

Objective: Verify that input is limited to 10 digits maximum.

1. Navigate to the login page
   Login page loads
2. Try typing 12 digits: 123456789012
   Input field only accepts first 10 digits: 1234567890
3. Try pasting a longer number: 9876543210999
   Input shows only 9876543210 - truncated to 10 digits

Objective: Verify that an existing user can successfully log in with a valid OTP.

Precondition: User has already completed phone entry and is on OTP screen.

1. Enter the valid 6-digit OTP: 123456 (one digit per box)
   • Each digit auto-advances to next input box
   • "Verify OTP" button becomes enabled after 6th digit
2. Click "Verify OTP" button
   Button shows "Verifying..." loading state
3. Wait for verification to complete
   • User is redirected to homepage (/) or previous page
   • User's name/avatar appears in header (logged in state)
   • Auth token is stored in localStorage/cookie

Objective: Verify that new users see profile completion modal after OTP verification.

Precondition: Use a phone number that doesn't exist in the system.

1. Complete phone entry with new number: 9123456789
   OTP screen is shown
2. Enter valid OTP: 123456
   OTP is accepted
3. Click "Verify OTP" button
   • Profile Completion Modal appears
   • Modal contains fields for Name and Email (optional)
   • Background is dimmed/blurred
4. Fill in profile details and submit
   • Modal closes
   • User is redirected to homepage or previous page
   • User is fully logged in

Objective: Verify proper error handling when user enters incorrect OTP.

1. Complete phone entry and reach OTP screen
   OTP entry screen is displayed
2. Enter an invalid OTP: 000000
   All 6 digits are entered
3. Click "Verify OTP" button
   • Error message appears: "Invalid OTP. Please try again."
   • Error is displayed in red error box
   • OTP input boxes are cleared
   • First input box is auto-focused for re-entry
   • User remains on OTP screen

Objective: Verify OTP input boxes have proper auto-focus and keyboard navigation.

1. Reach OTP entry screen
   First OTP input box is automatically focused
2. Type digit 1
   Digit appears in first box, focus moves to second box
3. Continue typing 23456
   Each digit fills next box, focus advances automatically
4. Press Backspace key
   Last digit is cleared, focus moves to previous box
5. Press Backspace again on empty box
   Focus moves to previous box (if not first box)

Objective: Verify users can paste a 6-digit OTP and have it fill all boxes.

1. Reach OTP entry screen
   OTP input boxes are displayed
2. Copy 123456 to clipboard
   Text is in clipboard
3. Click on any OTP input box and paste (Ctrl+V / Cmd+V)
   • All 6 digits are distributed across the 6 input boxes
   • Box 1: 1, Box 2: 2, Box 3: 3, Box 4: 4, Box 5: 5, Box 6: 6
   • "Verify OTP" button becomes enabled

Objective: Verify users can go back to change their phone number.

1. Complete phone entry and reach OTP screen
   OTP entry screen is displayed
2. Click "Change phone number" link
   • Returns to phone number entry screen
   • Previous phone number may still be in input (or cleared)
   • OTP inputs are reset
   • No error messages shown
3. Enter a different phone number and request OTP again
   New OTP request is sent to the new number

Objective: Verify the resend OTP countdown timer works correctly.

1. Complete phone entry and reach OTP screen
   • OTP entry screen is displayed
   • "Resend in 60s" text is shown (disabled)
2. Observe countdown timer
   • Timer counts down every second: 60s, 59s, 58s...
   • Resend button/link remains disabled during countdown
3. Wait for countdown to reach 0
   • Text changes to "Resend OTP" (now clickable)
   • Link color changes to active (primary color)
4. Click "Resend OTP"
   • New OTP is sent
   • OTP input boxes are cleared
   • First input is focused
   • Countdown resets to 60s

Objective: Verify already logged-in users are redirected away from login page.

Precondition: User is already logged in.

1. While logged in, navigate directly to /login
   • User is automatically redirected to homepage (/)
   • Login page is not displayed
2. Use browser back button
   Does not return to login page (redirect happens again if attempted)