merisia-password

Champ de mot de passe avec bouton d'affichage/masquage accessible et règles de complexité configurables.

Import

import '@merisia-inc/merisia-components/password';

Extension

Vous pouvez sous-classer ce composant pour ajouter ou redéfinir des propriétés, méthodes ou styles :

import { customElement } from 'lit/decorators.js';
import { MerisiaPassword } from '@merisia-inc/merisia-components';

@customElement('my-password')
export class MyPassword extends MerisiaPassword {
  // Ajoutez ou redéfinissez des propriétés, méthodes ou styles ici.
}

Démos

<merisia-password
  label="Mot de passe"
  name="password"
  hint="Au moins 8 caractères."
  autocomplete="current-password"
></merisia-password>

<merisia-password id="pwd" label="Nouveau mot de passe" name="new-password"
  autocomplete="new-password"></merisia-password>
<script>
  document.getElementById('pwd').rules = [
    { label: 'Au moins 8 caractères', test: (v) => v.length >= 8 },
    { label: 'Au moins une majuscule (A–Z)', test: (v) => /[A-Z]/.test(v) },
    { label: 'Au moins une minuscule (a–z)', test: (v) => /[a-z]/.test(v) },
    { label: 'Au moins un chiffre (0–9)', test: (v) => /[0-9]/.test(v) },
    { label: 'Au moins un caractère spécial (!@#$…)', test: (v) => /[^A-Za-z0-9]/.test(v) },
  ];
</script>

const el = document.querySelector('merisia-password');
el.errors = ["Le mot de passe est requis."];

Propriétés