Meridian Access
Toda aplicação começa por uma destas, e a maioria das galerias as deixa de fora. Cinco telas sobre um só formulário: um card centralizado, uma tela dividida com um painel da marca, o mesmo formulário num modal sobre uma landing page, a criação de conta com medidor de força e consentimento, e uma redefinição de senha em três passos com um código de seis dígitos. O formulário é um único componente do começo ao fim, e é esse o ponto: três maneiras de apresentá-lo, uma só coisa para manter funcionando.
Telas
1 Entrar
Um card centralizado: a porta de entrada de uma aplicação
2 Tela dividida
O mesmo formulário ao lado de um painel com a marca
3 Num diálogo
Entrar por cima da página, sem sair dela
4 Criar uma conta
Uma senha escolhida, um medidor de força e um consentimento
5 Redefinir a senha
E-mail, um código de seis dígitos e uma nova senha, em três passos
O que tem dentro
5 telas e 11 componentes, ligados por estado compartilhado e navegação local.
Recursos
- Um único componente SignInForm por trás do card, da tela dividida e do diálogo
- Um campo de senha com botão de mostrar, e um medidor de força onde a senha está sendo escolhida
- Um login em modal que preserva a página por trás, inclusive a posição de rolagem
- Uma redefinição em três passos: e-mail, um código InputOtp de seis dígitos com contador para reenviar, e uma nova senha
- Erros mostrados no campo e numa mensagem, nunca só pela cor
Telas
Perguntas
Sobre o Meridian Access e sobre templates em geral.
Porque ele aparece de três maneiras. Um diálogo que reimplementa o login é um segundo formulário para manter em sincronia, e o que acaba esquecido é sempre o que fica atrás do botão.