rocket-password-strength.js

<template
          data-rocket-ds-password-strength
          data-props-password="string|=">
  <script data-static>
    const requirements = [
      { label: '8+ characters', check: (pwd) => pwd.length >= 8 },
      { label: '12+ characters', check: (pwd) => pwd.length >= 12 },
      { label: 'Lowercase letter', check: (pwd) => /[a-z]/.test(pwd) },
      { label: 'Uppercase letter', check: (pwd) => /[A-Z]/.test(pwd) },
      { label: 'Number', check: (pwd) => /\d/.test(pwd) },
      { label: 'Special character', check: (pwd) => /[^a-zA-Z0-9]/.test(pwd) }
    ];
  </script>
  <script>
    $$rows = computed(() => requirements.map(({ label, check }) => ({ label, met: check($$password), })))
  </script>
  <div class="w-80 p-6 bg-white rounded-xl shadow-lg space-y-4">
    <input
           class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2"
           type="password"
           data-bind="password"
           placeholder="Test password strength" />
    <ul class="space-y-2">
      <li data-for="r in $$rows"
          class="flex items-center gap-2">
        <div class="w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold"
             data-class="{ 'bg-green-500 text-white': r.met, 'bg-gray-200 text-gray-400': !r.met }"
             data-text="r.met ? '✓' : ''"></div>
        <span
              class="text-sm"
              data-class="{'text-green-600 font-medium': r.met, 'text-gray-500': !r.met }"
              data-text="r.label"></span>
      </li>
    </ul>
  </div>
</template>