Indicateur de force de mot de passe

Évaluez la force du mot de passe en temps réel et fournissez des commentaires avec la couleur et le texte de la barre.

Aperçu

Password

Too short

Code d’implémentation (Implémentation)

<div class="max-w-sm mx-auto p-6 bg-white dark:bg-zinc-900 rounded-xl shadow-sm border border-gray-100 dark:border-zinc-800">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
<input type="password" id="pwd-input" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-zinc-800 dark:border-zinc-700 dark:text-white" placeholder="Enter password" />
<div class="mt-3 flex h-1.5 gap-1">
  <div id="bar-1" class="flex-1 bg-gray-200 dark:bg-zinc-700 rounded-full transition-colors"></div>
  <div id="bar-2" class="flex-1 bg-gray-200 dark:bg-zinc-700 rounded-full transition-colors"></div>
  <div id="bar-3" class="flex-1 bg-gray-200 dark:bg-zinc-700 rounded-full transition-colors"></div>
  <div id="bar-4" class="flex-1 bg-gray-200 dark:bg-zinc-700 rounded-full transition-colors"></div>
</div>
<p id="pwd-text" class="mt-2 text-xs text-gray-500 text-right">Too short</p>
</div>
<script>
const input = document.getElementById('pwd-input');
const bars = [document.getElementById('bar-1'), document.getElementById('bar-2'), document.getElementById('bar-3'), document.getElementById('bar-4')];
const text = document.getElementById('pwd-text');
input.addEventListener('input', (e) => {
  const val = e.target.value;
  let strength = 0;
  if (val.length > 5) strength++;
  if (val.length > 8) strength++;
  if (/[A-Z]/.test(val) && /[0-9]/.test(val)) strength++;
  if (/[^A-Za-z0-9]/.test(val)) strength++;
  
  const colors = ['bg-red-500', 'bg-orange-500', 'bg-yellow-500', 'bg-green-500'];
  const labels = ['Weak', 'Fair', 'Good', 'Strong'];
  
  bars.forEach((bar, i) => {
    bar.className = 'flex-1 rounded-full transition-colors ' + (i < strength ? colors[strength-1] : 'bg-gray-200 dark:bg-zinc-700');
  });
  text.innerText = val.length === 0 ? 'Too short' : (strength === 0 ? 'Weak' : labels[strength-1]);
});
</script>