Password Strength

<!-- Password Strength -->
<!-- An Alpine.js and Tailwind CSS component by https://pinemix.com -->
<div class="mx-auto w-full max-w-xl py-6">
  <form
    x-data="{
      // Options
      showBar: true,
      showMessage: true,
      
      // Helpers
      message: 'Choose a strong password',
      password: '',
      strength: 0,

      // Check the strength of the password
      checkStrength() {
        let score = 0;
      
        if (this.password.length >= 8) {
          // Length check
          if (this.password.length >= 12) score += 20;
          
          // Contains number check
          if (/[0-9]/.test(this.password)) score += 20;
          
          // Contains lowercase check
          if (/[a-z]/.test(this.password)) score += 20;
          
          // Contains uppercase check
          if (/[A-Z]/.test(this.password)) score += 20;

          // Contains special character check
          if (/[^A-Za-z0-9]/.test(this.password)) score += 20;
        } else if (this.password.length > 0) {
          score = 10;
        }
        
        this.strength = score;
        
        if (score === 0) {
          this.message = 'Choose a strong password';
        } else if (score === 10) {
          this.message = 'Too short!';
        } else if (score <= 30) {
          this.message = 'Weak';
        } else if (score <= 60) {
          this.message = 'Medium';
        } else if (score <= 80) {
          this.message = 'Strong';
        } else {
          this.message = 'Very strong!';
        }
      }
    }"
    class="rounded-xl border border-zinc-200 p-6 dark:border-zinc-700/50"
  >
    <!-- Input -->
    <div class="space-y-1">
      <label
        for="password"
        class="block text-sm font-medium text-zinc-900 dark:text-zinc-100"
      >
        Password
      </label>
      <input
        type="password"
        id="password"
        x-model="password"
        x-on:input="checkStrength"
        class="block w-full rounded-lg border border-zinc-200 px-3 py-2 text-sm/6 placeholder-zinc-500 focus:border-zinc-500 focus:ring focus:ring-zinc-500/50 dark:border-zinc-600 dark:bg-transparent dark:placeholder-zinc-400 dark:focus:border-zinc-500"
      />
    </div>
    <!-- END Input -->

    <!-- Progress Bar -->
    <div
      x-cloak
      x-show="showBar"
      class="mt-2.5 h-1.5 w-full rounded-full bg-zinc-200 dark:bg-zinc-700"
      role="progressbar"
      aria-label="Password strength"
      x-bind:aria-valuenow="strength"
      aria-valuemin="0"
      aria-valuemax="100"
    >
      <div
        class="h-1.5 rounded-full transition-all duration-300"
        :class="{
          'bg-rose-500': strength <= 30,
          'bg-orange-500': strength <= 60,
          'bg-emerald-500': strength > 60,
        }"
        x-bind:style="{
          'width': strength + '%'
        }"
      ></div>
    </div>
    <!-- END Progress Bar -->

    <!-- Message -->
    <p
      x-cloak
      x-show="showMessage"
      x-transition:enter="transition ease-out duration-200"
      x-transition:enter-start="opacity-0 -translate-y-4"
      x-transition:enter-end="opacity-100 translate-y-0"
      x-transition:leave="transition ease-in duration-200"
      x-transition:leave-start="opacity-100 translate-y-0"
      x-transition:leave-end="opacity-0 translate-y-4"
      x-text="message"
      class="mt-1.5 text-sm font-medium"
      x-bind:class="{
        'text-zinc-500 dark:text-zinc-400': strength === 0,
        'text-rose-500 dark:text-rose-400': strength <= 30,
        'text-orange-500 dark:text-orange-400': strength <= 60,
        'text-emerald-500 dark:text-emerald-400': strength > 60,
      }"
    ></p>
    <!-- END Message -->
  </form>
</div>
<!-- END Password Strength -->