Password Hint

O mk-password-hint exibe uma lista reativa de requisitos de senha e fornece feedback imediato enquanto o usuário digita, sem precisar submeter o formulário. Os consumidores passam validators — funções que recebem o valor atual — e o componente indica visualmente quais requisitos foram satisfeitos, reduzindo tentativas falhas e a frustração de descobrir erros somente após o envio. Emite mkPasswordValid quando todos passam.

Quando usar

Use este componente para comunicar as regras de complexidade da senha ao usuário de forma progressiva e não bloqueante.

• O usuário estiver criando ou alterando uma senha
• A senha tiver regras de complexidade que precisam ser comunicadas

• O campo for apenas para autenticação (login) — nesse caso, apenas exiba erro após submissão
• As regras forem muito simples (apenas tamanho mínimo) — um texto auxiliar no campo já basta

Anatomia

Padrão

import { useState } from 'react';
import { MkInput, MkPasswordHint } from '@db1/makuco-ui-react';
import { MkValidators } from '@db1/makuco-ui-core';

const validators = [
  MkValidators.minChar(8),
  MkValidators.specialChar(),
  MkValidators.maxChar(32),
];

function App() {
  const [secret, setSecret] = useState('');

  return (
    <>
      <MkInput
        type="password"
        label="Senha"
        value={secret}
        onMkInput={(e) => setSecret(e.detail)}
      />
      <MkPasswordHint
        secret={secret}
        validators={validators}
        onMkPasswordValid={() => console.log('Senha válida!')}
      />
    </>
  );
}

<mk-input
  type="password"
  label="Senha"
  [value]="secret"
  (mkInput)="secret = $event.detail"
></mk-input>

<mk-password-hint
  [secret]="secret"
  [validators]="validators"
  (mkPasswordValid)="onValid()"
></mk-password-hint>

import { MkValidators } from '@db1/makuco-ui-core';

validators = [
  MkValidators.minChar(8),
  MkValidators.specialChar(),
  MkValidators.maxChar(32),
];

Validadores built-in

O utilitário MkValidators fornece validadores prontos para os casos mais comuns.

Validador customizado

Qualquer objeto que implemente a interface MkPasswordValidator é aceito:

import type { MkPasswordValidator } from '@db1/makuco-ui-core';

const noSpaces: MkPasswordValidator = {
  hint: 'Sem espaços',
  validate: (value) => !value.includes(' '),
};

<MkPasswordHint secret={secret} validators={[noSpaces]} />

import type { MkPasswordValidator } from '@db1/makuco-ui-core';

noSpaces: MkPasswordValidator = {
  hint: 'Sem espaços',
  validate: (value) => !value.includes(' '),
};

Variantes / Estados

Comportamento

O componente é exibido abaixo ou ao lado do campo de senha e atualiza em tempo real a cada caractere digitado. Conforme o usuário digita, as regras não atendidas são marcadas individualmente até que todas estejam satisfeitas e o estado mude para sucesso.

No estado padrão, o ícone de informação é exibido e as regras aparecem em cinza ou parcialmente marcadas. Quando todos os critérios são atendidos, o ícone muda para check e todas as regras são marcadas como concluídas, indicando que a senha é válida.

Composição

Sempre utilize o mk-password-hint junto ao campo mk-input configurado como senha (type="password"). O verificador não substitui a validação no envio do formulário — use os dois em conjunto para garantir tanto o feedback em tempo real quanto a validação final antes do envio.

Props

Eventos

Acessibilidade

• A lista de requisitos usa role="list" e aria-live="polite" — mudanças de estado são anunciadas por leitores de tela sem interromper o fluxo do usuário.
• Os ícones têm aria-hidden="true" para que apenas o texto do requisito seja lido.
• Anúncio de progresso: as mudanças de estado das regras devem ser anunciadas para leitores de tela. Use aria-live="polite" na região do verificador para que o leitor anuncie quando critérios forem atendidos sem interromper a digitação do usuário.