Componente de código de autorização
Resumo
AuthCodeInput é um campo de entrada de código de autorização de 6 caracteres usado para fluxos no estilo 2FA. Ele renderiza seis campos de um único caractere e integra-se com um backend para validar o código inserido.
História do usuário
Como usuário, quero inserir um código de autorização de 6 caracteres e enviá-lo, para que eu possa verificar minha identidade em um fluxo familiar de 2FA.
Anatomia
- 6 campos de entrada alinhados em uma fila (um caractere por campo)
- No centro dos campos, renderizar um hífen (-)
Comportamento principal
Entradas
- Cada um dos 6 campos aceita um único caractere.
- Apenas dígitos 0–9 e letras A-Z são permitidos.
- Ao digitar um caractere válido:
o o caractere é armazenado no campo atual.
o se o caractere digitado estiver em minúscula, deve ser convertido automaticamente para maiúscula.
o o foco é automaticamente movido para o próximo campo.
- Completude do OTP:
o o componente considera o valor "completo" somente quando todos os 6 campos estiverem preenchidos.