Tutorial
Criando um formulário de OTP com React
Nível
16 aulas
1h04
Assistir agora
1. Introdução
Sobre o Tutorial
Esse tutorial mostra o passo-a-passo para resolver o Mini Projeto Formulário de OTP com React.
Descrição do projeto
É crescente o uso de aplicações que implementam algum tipo de segurança adicional na autenticação. Uma das formas mais comuns para isso é utilizando uma estratégia de 2 fatores. Além da senha tradicional, o usuário recebe em seu e-mail ou por SMS uma senha de uso único (também conhecida como OTP - One-Time Password).
🔨 Requisitos
- Crie um formulário com 5 campos de entrada, cada um representando um dígito da senha OTP.
- A submissão desse formulário deverá ocorrer quando o usuário pressionar a tecla Enter ou clicar no botão de submissão.
- Os campos de entrada só poderão aceitar números, permitindo apenas um único dígito em cada.
- Ao carregar a página, a aplicação deverá focar no primeiro campo de dígito.
- Ao digitar no primeiro campo, o foco deve ser transferido automaticamente para o segundo campo, e assim sucessivamente.
- Se algum dígito for apagado, o foco deve retornar para o dígito anterior.
- Deve ser possível colar um código de 5 dígitos e ele deve aparecer corretamente nos campos de entrada.
- Um erro deve ser exibido quando o texto colado não possuir 5 dígitos numéricos.
- A navegação entre os campos deve ser possível utilizando as setas do teclado (ArrowLeft e ArrowRight).
- Em dispositivos móveis, o teclado numérico deve ser ativado (ao invés do teclado tradicional).
- Utilize, sempre que possível, as boas práticas descritas nesse artigo.
- Desenvolva a interface de usuário conforme o modelo do Figma ou, se preferir, crie um design personalizado.
🎨 Design Sugerido
Temos uma sugestão de design no Figma. Entretanto, fique à vontade para montar a aplicação conforme a sua criatividade.
Figma
👉🏽 O que você irá praticar:
React
- Refs no React
- Formulários controlados no React
- Eventos
WebOTP API
- Melhores práticas no uso da WebOTP API
- Inputs com teclados numéricos
Pré requisitos
Para fazer esse Mini Projeto será necessário no mínimo conhecimento básico de React e de desenvolvimento web no geral.
Seu Instrutor
Aulas
- Introdução e Setup
- 1.
Introdução
01:14 - 2.
Requisitos do Projeto
03:20 - 3.
Instalando Vite , React e Tailwind
05:08 - 4.
Construindo o HTML
01:51 - 5.
Estilizando a Página
08:57 - 6.
Extraindo o Formulário para um componente à parte
01:04 - Lógica do Formulário
- 7.
maxLength e required nos inputs
01:10 Salvando os dados do input no estado
11:54Validação: dígitos numéricos
01:17Foco no primeiro dígito ao carregar a página
02:01Mudar o foco para o próximo input após digitar
04:42Mudar o foco quando apagar um input
06:52Colando um código no input
07:38Navegando nos inputs com as setas do teclado
01:39Propriedades inputMode e autoComplete
04:44Finalização
00:55