Livewire Password Meter Laravel Package

Getting Started

Minimal Steps

1. Installation Run composer require atefrihane/livewire-password-meter and include Alpine.js via CDN:

   <script src="//unpkg.com/alpinejs" defer></script>
   

2. Basic Usage Add the component to your Livewire form:

   <livewire:password-field
       wireKey="password"
       placeholder="Enter your password"
       showStrength="true"
   />
   

   Ensure the wireKey matches the property name in your Livewire component (e.g., public $password).

3. First Use Case Integrate into a registration/login form to provide real-time password strength feedback, improving UX and security.

Implementation Patterns

Core Workflow

1. Livewire Component Integration

   • Use wireKey to bind the input to your Livewire component’s property (e.g., public $password).
   • Example:

     // In your Livewire component
     public $password;
     

2. Styling and Customization

   • Pass :class and :styles for inline or CSS class-based styling.
   • Example:

     <livewire:password-field
         wireKey="password"
         class="w-full p-2 border rounded"
         styles="color: #333;"
     />
     

3. Toggle Password Visibility

   • Enable the eye icon with :eyeIcon="true" to toggle password visibility dynamically.

4. Strength Meter Feedback

   • Use :showStrength="true" to display a visual meter (e.g., bars or percentage) for password strength.
   • Customize the meter via Alpine.js or CSS (see Alpine.js docs for dynamic updates).

Advanced Patterns

1. Dynamic Rules Extend the default strength logic by overriding the Alpine.js logic in your blade template:

   <script>
       document.addEventListener('livewire:init', () => {
           Livewire.hook('password-meter-updated', (component, strength) => {
               // Custom logic (e.g., disable submit if strength < 70%)
               if (strength < 70) {
                   document.querySelector('#submit-button').disabled = true;
               }
           });
       });
   </script>
   

2. Multi-Field Validation Combine with other Livewire rules (e.g., rules="min:8|confirmed" in your Livewire component) for layered validation.

3. Localization Override the strength labels (e.g., "Weak," "Strong") via Alpine.js:

   <script>
       Alpine.data('passwordMeter', () => ({
           strengthLabels: {
               0: 'Very Weak',
               1: 'Weak',
               2: 'Medium',
               3: 'Strong',
               4: 'Very Strong'
           }
       }));
   </script>
   

4. Server-Side Validation Validate the final password in your Livewire component:

   protected $rules = [
       'password' => 'required|string|min:8|confirmed',
   ];
   

Gotchas and Tips

Pitfalls

1. Alpine.js Dependency

   • Forgetting to include Alpine.js will break the component. Verify the script tag is loaded after Livewire’s scripts.

2. WireKey Mismatch

   • Ensure wireKey matches the exact property name in your Livewire component (case-sensitive). Example:

     <!-- Works -->
     <livewire:password-field wireKey="password" />
     
     <!-- Fails (property is $userPassword) -->
     <livewire:password-field wireKey="password" />
     

3. Strength Logic Overrides

   • The default strength algorithm may not align with your security requirements. Audit or extend the logic in your template:

     <script>
         Alpine.store('passwordMeter', {
             calculateStrength(password) {
                 // Custom implementation
                 return password.length > 12 ? 4 : 0;
             }
         });
     </script>
     

4. Performance with Large Forms

   • Avoid excessive Alpine.js event listeners on high-traffic forms. Debounce the strength calculation:

     <script>
         Alpine.directive('debounce', (el, {value}, {evaluate}) => {
             let timeout;
             el.addEventListener('input', () => {
                 clearTimeout(timeout);
                 timeout = setTimeout(evaluate, 500);
             });
         });
     </script>
     

Debugging Tips

1. Check Livewire Events Use Livewire’s event system to debug:

   // In your Livewire component
   public function updatedPassword($value) {
       $this->dispatch('password-meter-updated', strength: $this->calculateStrength($value));
   }
   

2. Inspect Alpine.js State Add a temporary debug element to your template:

   <div x-data="{ strength: 0 }" x-text="strength"></div>
   

3. Clear Cache If styles or functionality break after updates, run:

   php artisan view:clear
   php artisan cache:clear
   

Extension Points

1. Custom Strength Indicators Replace the default meter with a custom component (e.g., a progress bar or icons):

   <div x-show="showStrength" x-text="'⚠️' + Array(5).fill().map((_, i) => i < strength ? '✅' : '❌').join('')"></div>
   

2. Integration with Livewire Actions Disable submit buttons based on strength:

   <button
       type="submit"
       :disabled="strength < 3"
       wire:click="savePassword"
   >
       Submit
   </button>
   

3. Server-Side Strength Calculation Offload strength logic to the server for complex rules:

   public function calculateStrength($password) {
       // Custom server-side logic
       return strlen($password) > 10 ? 4 : 0;
   }