PasswordStrength
Tipo: Componente Angular
- DesignersFigmaAinda não disponível
- Devs · HTML/CSSmds-styles Storybook com classes e exemplos
- Devs · Angularmds-angular Storybook com inputs e outputs
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.
)
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 (!@#) |
Para desenvolvedores
Seção intitulada “Para desenvolvedores”Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.
HTML/CSS (mds-styles)
Seção intitulada “HTML/CSS (mds-styles)”Exemplo
Seção intitulada “Exemplo”Story Weak do Storybook:
<div class="d-flex align-items-center small" style="width: 300px;"> <strong>Força da senha</strong> <div class="align-items-center d-flex flex-grow-1 strength-0"> <div class="password-strength-item flex-grow-1 margin-left--sm password-strength_item-active"></div><div class="password-strength-item flex-grow-1 margin-left--sm "></div><div class="password-strength-item flex-grow-1 margin-left--sm "></div><div class="password-strength-item flex-grow-1 margin-left--sm "></div><div class="password-strength-item flex-grow-1 margin-left--sm "></div> </div> <span class="margin-left--sm">Muito fraca</span></div>Variações e opções
Seção intitulada “Variações e opções”Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.
| Opção | Valores | Padrão no exemplo |
|---|---|---|
strength |
— | 0 |
Classes CSS
Seção intitulada “Classes CSS”Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.
| Tipo | Classes |
|---|---|
| Bloco | .mds-password-strength_item-active .mds-password-strength-item .mds-strength |
Angular (mds-angular)
Seção intitulada “Angular (mds-angular)”Seletor
Seção intitulada “Seletor”mds-password-strength
A barra de força de senha ajuda o usuário a identificar se possui uma senha forte ou não.
| Input | Tipo | Padrão | Descrição |
|---|---|---|---|
className |
string |
'' |
Classe CSS customizada adicionada ao host |
formControl (obrigatório) |
UntypedFormControl |
— | Form control |
barLabel |
string |
'Força da Senha' |
Label da barra de força |
strengthLabels |
string[] |
['Muito fraca', 'Fraca', 'Média', 'Média', 'Média'… |
Descrição das forças |
minLength |
number |
12 |
tamanho mínimo |
minStrenght |
number | null |
null |
força mínima |
showDetails |
boolean |
false |
exibe os detalhes da senha |
Outputs
Seção intitulada “Outputs”| Output | Payload | Descrição |
|---|---|---|
onChange |
number |
Evento disparado ao alterar o valor da força |