PasswordStrength
- Angular:
mds-password-strength - CSS/HTML (mds-styles): disponível
- Figma: ❌
- Tipo: Componente Angular
Definição Funcional
Seção intitulada “Definição Funcional”O PasswordStrength monitora e exibe o nível de segurança da senha digitada pelo usuário em tempo real. Ele utiliza uma barra de progresso colorida e uma lista de requisitos dinâmicos para orientar a criação de credenciais que atendam às políticas de segurança do sistema.
)
Seção intitulada “)”Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Barra de Progresso (Segmentada): A barra deve mudar de cor conforme a força aumenta.
- Vermelho: Muito fraca / Fraca.
- Amarelo/Laranja: Média.
- Verde: Forte / Muito forte.
- Checklist de Requisitos: Os critérios (números, letras, etc.) devem ser riscados ou receber um ícone de “concluído” (check) imediatamente após serem satisfeitos.
- Feedback de Texto: Exiba o rótulo do nível de força atual (ex: Muito fraca) ao lado da barra para facilitar a interpretação. Use Caixa de Sentença.
- Instrução de Meta: Deixe claro qual o nível mínimo exigido para que a senha seja aceita pelo sistema (ex: Mínimo: Média).
Exemplos de Escrita (Checklist)
Seção intitulada “Exemplos de Escrita (Checklist)”| Requisito | Estilo Incorreto (Vago) | Estilo UX (Direto) |
|---|---|---|
| Comprimento | A senha tem que ser grande | Mínimo de 8 caracteres |
| Números | Coloque alguns números | Números (0-9) |
| Maiúsculas | Use letras grandes | Letras maiúsculas |
| Especiais | Use símbolos | Caracteres especiais (!@#) |