Implement OTP Confirmation Code Screen

[xkaper001]

Description

Implement the 4-digit OTP confirmation screen for both patient and doctor authentication flows.

Design Reference

Figma Frames:

• Patient: Patient Confirmation code (576:2792)
• Doctor: Confirmation code (576:3017, 576:3002)

Requirements

• Display sent email address dynamically
• 4 single-digit input fields (auto-sized boxes)
• Auto-focus next field on digit entry
• Auto-focus previous field on backspace
• Auto-submit when 4 digits entered
• "Resend code" button
• "Verify" button
• Number keyboard (platform-specific)
• Countdown timer for resend (60 seconds)
• Error handling for invalid codes
• Navigate to appropriate screen after verification
• Clear all fields on error

API Integration

• Verify OTP endpoint
• Resend OTP endpoint
• Handle expired codes
• Rate limiting for resend attempts
• Show remaining attempts

Features

• Visual feedback on code entry
• Shake animation on error
• Haptic feedback on error
• Success animation on verification
• Loading state during verification

Technical Notes

• Create reusable component for both apps
• Use platform-specific keyboard type (number)
• Implement auto-focus logic with FocusNode
• Store verification state

Dependencies

• Requires: Create Form Input Components #16, Create Button and Navigation Components #17 (UI components)

Files to Create/Modify

• lib/features/auth/presentation/pages/confirmation_code_page.dart
• lib/features/auth/presentation/widgets/otp_input_field.dart
• lib/core/utils/otp_controller.dart

Priority

High

Acceptance Criteria

• OTP fields work smoothly with auto-focus
• Resend works with countdown timer
• Verification success navigates correctly
• Error states handled properly

[github-actions]

👋 Thanks for opening this issue and contributing!

Our reviewers will check it soon 🚀

📘 If you’d like to know more about contributing, please read our CONTRIBUTING.md.