mad-password-field

Campo de senha com toggle de visibilidade (eye/eye-off) e validacao de forca client-side configuravel. Substitui <mad-input-field type="password"> (que nao tem toggle nem validacao).

Integra com MadForm via mad:model automatico, registra-se no MadFormRegistry como tipo 'input' com 'type' => 'password', e suporta MadRenderContext (preenchimento via $form->fill($record)).

Props#

Prop	Tipo	Default	Descricao
name	string	''	Nome do campo (obrigatorio)
label	string	''	Label do campo
placeholder	string	''	Placeholder
toggle-visibility	bool	true	Habilita o botao eye/eye-off a direita
strong-password	bool	false	Habilita validacao de forca client-side com popover
strong-options	array	[]	Override das regras de forca (merge com defaults)
autocomplete	string	'current-password'	Use 'new-password' em forms de cadastro/troca
maxlength	string	''	Tamanho maximo do input
width	string	''	Largura CSS do wrapper
max-width	string	''	max-width CSS do wrapper
hint	string	''	Texto de ajuda abaixo do campo
error	string	''	Mensagem de erro (aplica estilo de erro)
required	bool	false	Campo obrigatorio
disabled	bool	false	Campo desabilitado
readonly	bool	false	Somente leitura
attrs	string	''	Atributos HTML extras

Defaults de validacao de forca#

[
    'minLength'          => ['value' => 8,    'message' => '8 caracteres'],
    'requireNumbers'     => ['value' => true, 'message' => 'Pelo menos 1 numero'],
    'requireLowercase'   => ['value' => true, 'message' => 'Pelo menos 1 letra minuscula'],
    'requireUppercase'   => ['value' => true, 'message' => 'Pelo menos 1 letra maiuscula'],
    'requireSpecialChar' => ['value' => true, 'message' => 'Pelo menos 1 caractere especial'],
]

Uso basico#

<mad-password-field name="senha" label="Senha" required />

Form de login (autocomplete current-password)#

<mad-form submit="onLogin">
    <mad-input-field name="login" label="Login" autocomplete="username" required />
    <mad-password-field name="senha" label="Senha" required />
    <mad-btn type="submit" variant="primary" icon="log-in">Entrar</mad-btn>
</mad-form>

Form de cadastro / troca de senha (autocomplete new-password + strong)#

<mad-form submit="onSave">
    <mad-password-field name="senha" label="Nova senha"
        autocomplete="new-password"
        :strong-password="true" required />

    <mad-password-field name="senha_confirma" label="Confirmar senha"
        autocomplete="new-password" required />

    <mad-btn type="submit" variant="primary" icon="save">Salvar</mad-btn>
</mad-form>

Strong password com regras customizadas#

<mad-password-field name="senha" label="Senha"
    :strong-password="true"
    :strong-options="[
        'minLength'          => ['value' => 12, 'message' => '12 caracteres'],
        'requireSpecialChar' => ['value' => false],
        'requireUppercase'   => ['value' => true, 'message' => 'Ao menos 1 maiuscula (A-Z)'],
    ]" />

Cada chave override completa a regra default. Setar 'value' => false desativa a regra.

Sem toggle de visibilidade#

<mad-password-field name="pin" label="PIN" :toggle-visibility="false" maxlength="4" />

Com maxlength#

<mad-password-field name="senha" label="Senha" maxlength="32" />

Reset de senha (preenche valor via form->set)#

public function onResetar(): MadResponse
{
    $novaSenha = bin2hex(random_bytes(8));
    $this->form->set('senha', $novaSenha);
    return MadToast::info("Senha temporaria gerada: {$novaSenha}");
}

<mad-password-field name="senha" label="Senha" />
<mad-btn variant="ghost" icon="refresh-cw" mad:click="onResetar">Gerar senha</mad-btn>

Carregar valor existente (onEdit)#

public function onEdit(int $id): void
{
    $user = SystemUsers::findOrFail($id);
    $this->form->fill($user); // password e preenchido automaticamente via MadRenderContext
}

Validacao server-side#

O componente valida client-side (visual). A validacao de servidor e responsabilidade do controller via Modelo::rules($id) ou MadFormRegistry::validate():

public function onSave(): MadResponse
{
    try {
        $data = $this->form->getData();
        $this->form->validate(SystemUsers::rules($this->registroId));
        // ... salvar ...
    } catch (MadValidationException $e) {
        return $e->asModal();
    }
}

Para validar forca no servidor tambem, criar regra customizada:

public static function rules($id = null): array
{
    return [
        'senha' => 'required|min:8|regex:/^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[^\w]).+$/',
    ];
}

Comportamento#

• Toggle visibility: clique no botao eye alterna type="password" ↔ type="text". Mantem foco e posicao do cursor.
• Strong password: ao focar, popover abre abaixo do campo com lista de regras (X cinza). A medida que o usuario digita, regras viram check verde.
• Popover: fecha 150ms apos blur (delay para permitir clicar dentro).
• Lucide icons: re-inicializados automaticamente quando eye/eye-off ou check/x trocam.

Quando usar password-field vs input-field type=password#

SEMPRE usar <mad-password-field> para senhas. O <mad-input-field type="password"> nao tem toggle nem validacao.

Cenario	Usar
Qualquer campo de senha	<mad-password-field>
PIN / OTP / codigo de verificacao	<mad-otp-field>
Token de API / chave secreta (mostrar/copiar)	<mad-input-field type="password"> + botao copy

NUNCA fazer#

{{-- ERRADO: input-field type=password sem toggle --}}
<mad-input-field name="senha" label="Senha" type="password" />

{{-- CERTO --}}
<mad-password-field name="senha" label="Senha" />

{{-- ERRADO: input nativo type=password --}}
<input type="password" name="senha">

{{-- CERTO --}}
<mad-password-field name="senha" label="Senha" />

{{-- ERRADO: autocomplete padrao em form de cadastro/troca (browser sugere senha antiga) --}}
<mad-password-field name="senha_nova" label="Nova senha" :strong-password="true" />

{{-- CERTO: autocomplete=new-password evita auto-fill de senha antiga --}}
<mad-password-field name="senha_nova" label="Nova senha"
    autocomplete="new-password" :strong-password="true" />

{{-- ERRADO: strong-options sem array (silencia override) --}}
<mad-password-field name="senha" :strong-password="true"
    strong-options="minLength=10" />

{{-- CERTO: array PHP --}}
<mad-password-field name="senha" :strong-password="true"
    :strong-options="['minLength' => ['value' => 10]]" />

{{-- ERRADO: setar :value via prop quando ja existe MadRenderContext + mad:model --}}
<mad-password-field name="senha" :value="$user->password" />

{{-- CERTO: fill faz isso automaticamente --}}
{{-- Controller: $this->form->fill($user); --}}
<mad-password-field name="senha" label="Senha" />