22 lines
767 B
JavaScript
22 lines
767 B
JavaScript
import { PASSWORD_RULES } from '../utils/passwordRules'
|
|
|
|
// Règles du mot de passe, cochées au fil de la saisie. À relier au champ via
|
|
// aria-describedby={id}.
|
|
export default function PasswordRules({ id, password }) {
|
|
return (
|
|
<ul id={id} className="mt-2 space-y-1">
|
|
{PASSWORD_RULES.map((rule) => {
|
|
const ok = rule.test(password)
|
|
return (
|
|
<li key={rule.id} data-rule={rule.id} data-valid={ok}
|
|
className={`flex items-center gap-2 text-xs ${ok ? 'text-green-700' : 'text-gray-500'}`}>
|
|
<span aria-hidden="true">{ok ? '✓' : '○'}</span>
|
|
{rule.label}
|
|
<span className="sr-only">{ok ? ' : respecté' : ' : non respecté'}</span>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
)
|
|
}
|