Filament Password Input Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require rawilk/filament-password-input
   

   Publish the config (if needed):

   php artisan vendor:publish --tag="filament-password-input-config"
   

2. First Use Case: Replace a standard Filament TextInput with the enhanced password component in a form:

   use Rawilk\FilamentPasswordInput\PasswordInput;
   
   PasswordInput::make('password')
       ->label('New Password')
       ->required()
       ->maxLength(72)
   

3. Where to Look First:

   • README.md for feature highlights.
   • config/filament-password-input.php for default settings (e.g., button labels, icon packs).
   • Changelog for breaking changes (e.g., v3.0 upgrade notes).

Implementation Patterns

Core Workflows

1. Basic Integration: Replace TextInput with PasswordInput in Filament forms (Pages, Widgets, or Resources):

   PasswordInput::make('password')
       ->columnSpanFull() // Optional: Full-width layout
       ->extraAttributes(['autocomplete' => 'new-password']);
   

2. Dynamic Configuration: Use methods to customize behavior per field:

   PasswordInput::make('confirm_password')
       ->revealPassword() // Enable toggle (default: true)
       ->copyToClipboard() // Enable clipboard (default: true)
       ->generatePassword() // Enable generator (default: true)
       ->passwordGeneratorLength(16); // Set default length
   

3. Resource-Specific Usage: In a Filament Resource (e.g., UserResource):

   public static function form(Form $form): Form
   {
       return $form
           ->schema([
               PasswordInput::make('password')
                   ->label('Reset Password')
                   ->rules(['required_if:reset_password,1']),
           ]);
   }
   

4. Widget/Page Integration: For standalone forms (e.g., a PasswordResetPage):

   public function form(Form $form): Form
   {
       return $form
           ->schema([
               PasswordInput::make('new_password')
                   ->passwordGeneratorRules(['uppercase', 'numbers']),
           ]);
   }
   

Advanced Patterns

1. Conditional Features: Disable features based on context (e.g., edit vs. create):

   PasswordInput::make('password')
       ->copyToClipboard(fn ($record) => !$record->exists)
       ->generatePassword(fn ($record) => $record->isAdmin());
   

2. Custom Icons: Override default icons via config:

   // config/filament-password-input.php
   'icons' => [
       'reveal' => 'heroicon-o-eye',
       'copy' => 'heroicon-o-clipboard',
       'generate' => 'heroicon-o-shuffle',
   ],
   

3. Password Generator Rules: Extend generator rules dynamically:

   PasswordInput::make('password')
       ->passwordGeneratorRules(['custom_rule' => fn () => '!@#$%'])
       ->passwordGeneratorLength(20);
   

4. Localization: Translate labels/buttons via Filament’s localization system:

   PasswordInput::make('password')
       ->revealPasswordLabel(fn () => __('filament-password-input::reveal'))
       ->copyLabel(fn () => __('filament-password-input::copy'));
   

Gotchas and Tips

Pitfalls

1. v3.0 Migration:

   • Breaking Change: v3.0 drops support for Filament v1.x. Ensure compatibility:

     composer require filament/filament:"^2.0"
     

   • Config Shift: Defaults moved to config/filament-password-input.php. Update published config if using custom settings.

2. Generator Security:

   • Default Rules: The generator uses Str::random() by default, which may not meet all compliance needs (e.g., PCI DSS). Extend rules carefully:

     ->passwordGeneratorRules(['uppercase', 'lowercase', 'digits', 'special_chars'])
     

   • Avoid Predictability: Disable generation for sensitive fields (e.g., admin passwords) where randomness isn’t desired.

3. Clipboard Permissions:

   • Browser Restrictions: Clipboard API may block access in iframes or cross-origin contexts. Test in production-like environments.

4. Form Validation:

   • Rule Conflicts: Ensure maxLength aligns with backend validation (e.g., Laravel’s max:72 for password fields). The component enforces UI limits but doesn’t replace server-side rules.

Debugging

1. Console Errors:

   • Missing Icons: Verify icon pack (e.g., Heroicons) is installed in your Filament project:

     npm install @heroicons/react
     

   • JavaScript Errors: Check browser console for filament-password-input related errors. Common causes:
     • Missing Alpine.js (Filament dependency).
     • Conflicting global variables (e.g., duplicate x-data bindings).

2. Configuration Overrides:

   • Priority: Config values in config/filament-password-input.php override defaults, but per-field methods (e.g., ->revealPassword(false)) take precedence.

3. Testing:

   • Unit Tests: Mock the component in PHPUnit:

     $component = PasswordInput::make('test')
         ->revealPassword(false);
     $this->assertFalse($component->isRevealPasswordEnabled());
     

   • E2E Tests: Use Playwright/Puppeteer to verify:
     • Toggle visibility (check type="text" ↔ type="password").
     • Clipboard copy (simulate paste into another field).
     • Password generation (validate length/rules).

Extension Points

1. Custom Actions: Extend the component via JavaScript (Alpine.js):

   document.addEventListener('filament-password-input-initialized', (e) => {
       const input = e.detail.input;
       input.$el.querySelector('.generate-password').addEventListener('click', () => {
           // Custom logic (e.g., API call for password)
       });
   });
   

2. Server-Side Logic: Hook into Filament’s afterStateUpdated to log generated passwords (for audit trails):

   use Filament\Forms\Concerns\InteractsWithForms;
   
   public function form(Form $form): Form
   {
       return $form
           ->schema([PasswordInput::make('password')])
           ->afterStateUpdated(function (Form $form) {
               if ($form->has('password') && $form->getState('password')) {
                   \Log::info('New password generated', ['password' => '***']);
               }
           });
   }
   

3. Theming: Override Blade views (e.g., resources/views/vendor/filament-password-input/...) to match your Filament theme:

   <x-filament-password-input::input
       :reveal-password="{{ $getRevealPassword() }}"
       :copy-to-clipboard="{{ $getCopyToClipboard() }}"
       :generate-password="{{ $getGeneratePassword() }}"
   />
   

4. Local Development:

   • Hot Reloading: Use Filament’s Vite setup to avoid cache issues:

     npm run dev
     php artisan filament:cache-clear