Screen Annotations — CON-011 OTP Verification
Screen ID: CON-011
Flow: Authentication → OTP Verification
Previous: CON-010 Login (Phone)
Next: CON-012 Registration (new user) or Home (existing user)
Auto-Submit: OTP should auto-submit once all 4 digits are entered. No manual submit button needed. Focus auto-advances to the next digit field on entry.
States:
- Populated — Default entry state. First two digits filled (3, 7) to show active typing. Cursor in third box.
- Loading — All 4 digits entered. Semi-transparent overlay with spinner and "Verifying..." text. Inputs disabled.
- Error — Wrong code entered. All 4 inputs get red border (otp-digit--error). Error message shown below inputs. Resend link becomes active.
Resend Timer: 30-second countdown before "Resend code" link becomes active. After expiry, the timer text disappears and the link turns active (green/primary color). Maximum 3 resend attempts before showing "Too many attempts" error.
Edit Link: Tapping "Edit" returns to CON-010 to correct the phone number. The OTP attempt is invalidated on the backend.
Success Flow: On valid OTP, if user is new → navigate to CON-012 Registration. If user already exists → navigate directly to CON-030 Home.