Entrar
Login, cadastro e redefinição de senha num card só, com mostrar e ocultar senha, validação, etapa de código de uso único, link mágico e chave de acesso.
As telas de conta que quase todo produto precisa no primeiro dia, num arquivo só. Entrar e Criar conta são abas; Esqueceu a senha, o código de uso único depois do cadastro, o "confira seu e-mail" e o estado de conectado são visões do mesmo card. Em telas largas, um painel da marca com o depoimento de uma cliente fica ao lado do formulário; nas menores, o formulário aparece sozinho. Tudo valida, e o código de teste da etapa de verificação aparece abaixo do campo.
Componentes
Comportamento
- Entrar. E-mail e senha são obrigatórios; a senha tem um botão para mostrar e ocultar. "Manter conectado" é uma caixa de seleção simples, que você liga à duração da sua sessão.
- Criar conta. Nome, e-mail, uma senha com três regras que vão sendo marcadas enquanto você digita (8 caracteres, uma letra e um número, diferente do e-mail) e a caixa dos termos. Enviar leva para a etapa do código.
- Código de uso único. Seis casas que aceitam digitação, Backspace e colar o código inteiro. Código incompleto e código errado têm erros diferentes. "Enviar novo código" espera 30 segundos entre um envio e outro, e o botão mostra a contagem.
- Esqueceu a senha. Pede o e-mail e responde do mesmo jeito exista a conta ou não, para o formulário não servir para descobrir quem tem conta.
- Link mágico e chave de acesso. Os dois botões abaixo do "ou" representam o login sem senha. Eles usam ícones genéricos de propósito: se você adicionar login com Google ou Apple, siga as regras de botão de cada provedor.
Acessibilidade
- Toda troca de etapa leva o foco para o título do card, então o leitor de tela anuncia "Confira seu e-mail" ou "Redefinir a senha" em vez de silêncio. Trocar de aba deixa o foco na aba, como o padrão de abas espera.
- Um envio com erro leva o foco para o primeiro campo com problema; o erro está ligado ao campo e é lido junto.
- As regras da senha são ditas uma vez, na descrição do campo. A lista que vai sendo marcada abaixo é só visual (
aria-hidden), para não se repetir a cada tecla. - O botão de mostrar senha troca de nome ("Mostrar senha", "Ocultar senha") em vez de usar
aria-pressed. Cada casa do código depois da primeira se chama "Dígito 2 de 6" e assim por diante. - O botão de reenviar usa
aria-disableddurante a contagem, então continua com foco e na ordem do Tab. - Todo campo tem
autocomplete(username,current-password,new-password,one-time-code), para gerenciadores de senha e o preenchimento automático do código por SMS funcionarem.
Use o código
A aba Código mostra a tela inteira em um arquivo, com @camaleo/react e lucide-react como únicas dependências. A função wait faz o papel do seu servidor de autenticação: troque pelas suas requisições, e troque o DEMO_CODE por uma verificação no servidor. Nunca decida no navegador se um código ou uma senha está certo.