Componente de código de autorización
Resumen
AuthCodeInput es un campo de entrada de código de autorización de 6 caracteres utilizado para flujos de estilo 2FA. Renderiza seis campos de un solo carácter y se integra con un backend para validar el código ingresado.
Historia de usuario
Como usuario, quiero ingresar un código de autorización de 6 caracteres y enviarlo, para poder verificar mi identidad en un flujo familiar de 2FA.
Anatomía
- 6 campos de entrada alineados en una fila (un carácter por campo)
- En el centro de los campos, renderizar un guion (-)
Comportamiento principal
Entradas
- Cada uno de los 6 campos acepta un solo carácter.
- Solo se permiten dígitos 0–9 y letras A-Z.
- Al escribir un carácter válido:
o se guarda en el campo actual.
o si el carácter ingresado está en minúscula, se convierte automáticamente a mayúscula.
o se enfoca automáticamente en el siguiente campo.
- Completitud de OTP:
o el componente considera que el valor está "completo" solo cuando los 6 campos están llenos.