1) Contexte & objectif

Nom de l’écran : Vérification OTP
But : Vérifier l’identité de l’utilisateur via un code OTP (One-Time Password) reçu par SMS afin de sécuriser une action (connexion, réinitialisation, validation de transaction, etc.).
Résultat attendu : L’utilisateur saisit un code à 4 chiffres et l’application :

• Valide le code (succès → passage à l’étape suivante).
• Ou signale une erreur (code invalide/expiré) et propose de renvoyer un nouveau code après un délai.

2) Public cible & scénarios d’usage

• Nouveaux utilisateurs : vérification de numéro lors de l’inscription.
• Utilisateurs existants : confirmation d’action sensible (mot de passe, paiement).

3) Contenu & UI

3.1 En-tête

• Icône retour (flèche) en haut à gauche → navigation vers l’écran précédent.
• Titre : Vérification OTP.

3.2 Zone principale

• Illustration : icône enveloppe (mail/SMS) – purement décorative.
• Titre fort : Entrez le code de validation.
• Sous-texte : Envoyé par SMS au 2250548019521 Affiche le numéro masqué ou format international +225… (Côte d’Ivoire).
• Entrées code : 4 cases (chacune accepte uniquement un chiffre [0–9]). Focus auto et avance après saisie.
• Timer renvoi : Renvoyer le code dans 0:54 → compte à rebours jusqu’à 0:00 puis le libellé devient “Renvoyer le code” (clic actif).
• Clavier numérique : chiffres 0–9 + bouton suppression (icône retour arrière).

3.3 États & messages

• Normal : cases vides, timer actif.
• Saisie partielle : cases remplies à mesure, bouton suppression actif.
• Saisie complète (4 chiffres) : déclenche auto-validation (ou bouton “Valider” si on préfère explicitement).
• Erreur :
  • Code incorrect. Réessayez. (cases secouées, bordure rouge).
  • Code expiré. Demandez un nouveau code. (désactive soumission et invite au renvoi).

4) Règles fonctionnelles

1. Longueur OTP : 4 chiffres (configurable).
2. Caractères autorisés : uniquement 0–9. Coller un code depuis le presse-papiers doit filtrer et tronquer à 4 chiffres.
3. Compteur : démarre à la réception de l’écran (ex. 60 s). Tant que > 0, le lien Renvoi est désactivé.
4. Renvoi du code :
   • Au timer = 0 : le lien devient cliquable “Renvoyer le code”.
   • Au clic : réinitialise le compteur et affiche une confirmation (Nouveau code envoyé.).
5. Validation :
   • Auto-submit à la saisie du 4e chiffre OU via un bouton “Valider”.
   • Si succès : navigation vers l’écran suivant (Ecran de connexion).
   • Si échec :
     • Tentative-1..n : message Code incorrect.
     • À n échecs (ex. 5) : captchas / verrouillage temporaire (ex. 5 min) ou parcours de récupération.
6. Expirations :
   • OTP : valide p.ex. 5 min côté serveur.
   • Session de vérification : invalide après p.ex. 10 min d’inactivité.

5) Accessibilité & UX

• Focus management : focus sur la première case à l’ouverture ; avance automatique ; retour arrière avec suppression.
• Lecteurs d’écran :
  • Titre : “Vérification OTP”.
  • Description : “Entrez le code à 4 chiffres envoyé par SMS”.
  • Cases : “Chiffre 1/4… 4/4”.
  • Timer : “Renvoyer le code dans 54 secondes”.
  • Bouton renvoi : “Renvoyer le code”.