Composant de code d'autorisation
Résumé
AuthCodeInput est un champ de saisie de code d'autorisation de 6 caractères utilisé pour des flux de style 2FA. Il affiche six champs à un seul caractère et s'intègre à un backend pour valider le code saisi.
Histoire utilisateur
En tant qu'utilisateur, je souhaite saisir un code d'autorisation de 6 caractères et le soumettre, afin de vérifier mon identité dans un flux 2FA familier.
Anatomie
- 6 champs de saisie alignés en ligne (un caractère par champ)
- Au centre des champs, afficher un tiret (-)
Comportement principal
Entrées
- Chacun des 6 champs accepte un seul caractère.
- Seules les chiffres 0–9 et les lettres A-Z sont autorisées.
- Lors de la saisie d'un caractère valide:
o le caractère est stocké dans le champ actuel.
o si le caractère saisi est en minuscules, il doit être automatiquement mis en majuscule.
o le focus se déplace automatiquement sur le champ suivant.
- Complétude OTP:
o le composant considère la valeur "complète" uniquement lorsque tous les 6 champs sont remplis.