Filament Password Reveal Laravel Package

Getting Started

Minimal Steps

1. Installation: Add the package via Composer:

   composer require phpsa/filament-password-reveal
   

2. Publish assets (if needed): Run:

   npm run dev
   

   (Ensure your Filament project’s assets are compiled.)

3. First Use Case: Replace a standard TextInput with Password in a Filament form:

   use Phpsa\FilamentPasswordReveal\Password;
   
   Password::make('password')
       ->label('New Password')
       ->required()
       ->autocomplete('new-password');
   

Where to Look First

• README: Focus on the Usage section for method signatures and defaults.
• Source: Check Password.php for all available methods and their logic.
• Blade Template: Inspect password.blade.php to understand the UI structure and how icons/buttons are rendered.

Implementation Patterns

Core Workflows

1. Basic Password Field:

   Password::make('password')
       ->label('Confirm Password')
       ->rules(['required', 'confirmed']);
   

   • Uses Filament’s built-in validation and styling.

2. Revealable Password (Toggle Visibility):

   Password::make('api_token')
       ->revealable() // Default: true
       ->showIcon('heroicon-m-eye') // Customize icons
       ->hideIcon('heroicon-m-eye-slash');
   

   • Conditional Reveal: Use a Closure to dynamically enable/disable:

     ->revealable(fn ($record) => $record->isAdmin)
     

3. Copy-to-Clipboard:

   Password::make('database_password')
       ->copyable()
       ->copyIcon('heroicon-o-copy');
   

   • Conditional Copy: Restrict access via:

     ->copyable(fn ($record) => auth()->user()->can('view-secrets'))
     

4. Password Generation:

   Password::make('generated_password')
       ->generatable()
       ->passwordLength(16)
       ->passwordUsesNumbers(true)
       ->passwordUsesSymbols(true);
   

   • Dynamic Generation: Trigger via a button or event (e.g., created hook in Filament).

Integration Tips

• Filament Forms/Tables: Use within Filament\Forms\Form or Filament\Tables\Table components. Example:

  public static function form(Form $form): Form
  {
      return $form
          ->schema([
              Password::make('password')
                  ->generatable()
                  ->copyable(),
          ]);
  }
  

• Custom Styling: Override the Blade template or use Filament’s CSS utilities:

  Password::make('password')
      ->extraAttributes(['class' => 'custom-password-class']);
  

• Localization: Translate labels/icons via Filament’s getLabel() or getIcon() methods, or override the Blade template.

• Testing: Test reveal/copy/generate functionality with:

  $this->get('/admin/resource/edit/1')
      ->assertSee('heroicon-o-eye') // Reveal icon
      ->press('Copy') // Simulate clipboard action
      ->assertSessionHas('copied');
  

Gotchas and Tips

Pitfalls

1. Asset Compilation:

   • Issue: Forgetting to run npm run dev after installation may break the toggle/copy/generate buttons.
   • Fix: Ensure resources/js/app.js includes the package’s JS (check the source).

2. Icon Conflicts:

   • Issue: Using custom icons (e.g., heroicon-o-eye) without importing them in your Filament project’s assets.
   • Fix: Add the required Heroicons to your resources/js/app.js:

     import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
     

3. Conditional Logic:

   • Issue: Closures in revealable(), copyable(), or generatable() may not update dynamically if the underlying data changes (e.g., user role).
   • Fix: Use Filament’s livewire reactivity or refresh the component:

     ->revealable(fn () => auth()->user()->can('toggle-passwords'))
     

4. Password Generation Security:

   • Issue: Generated passwords may not meet complexity requirements if not validated.
   • Fix: Combine with Filament’s rules():

     Password::make('password')
         ->generatable()
         ->rules(['min:12', 'regex:/[A-Z]/', 'regex:/[0-9]/']);
     

5. Clipboard Permissions:

   • Issue: Copy functionality may fail in iframes or strict CSP environments.
   • Fix: Test in your target environment and adjust CSP headers if needed.

Debugging Tips

• Console Logs: Check browser console for errors (e.g., missing icons or JS).
• Blade Debugging: Temporarily modify the Blade template to add {{ dd($value) }} for debugging.
• Livewire Events: Listen for password-revealed or password-copied events in your Livewire component:

  protected $listen = ['password-revealed' => 'handlePasswordRevealed'];
  

Extension Points

1. Custom Templates: Override the Blade template at resources/views/vendor/filament-password-reveal/components/password.blade.php.

2. Add New Features: Extend the Password class to add methods (e.g., pasteable()):

   // app/Filament/Extensions/PasswordExtension.php
   namespace App\Filament\Extensions;
   
   use Phpsa\FilamentPasswordReveal\Password as BasePassword;
   
   class PasswordExtension extends BasePassword
   {
       public function pasteable(bool $condition = true): static
       {
           return $this->customAttributes(['data-pasteable' => $condition]);
       }
   }
   

   Then register it in AppServiceProvider.

3. Alpine.js Integration: Use Alpine to add interactivity (e.g., auto-reveal on focus):

   Password::make('password')
       ->extraAttributes([
           'x-data' => '{ reveal: false }',
           'x-on:focus' => 'reveal = true',
           'x-bind:type' => 'reveal ? "text" : "password"',
       ]);
   

4. Validation Hooks: Use Filament’s afterStateUpdated to validate generated passwords:

   Password::make('password')
       ->generatable()
       ->afterStateUpdated(fn (set, $state) => $state === 'generated' && $this->validatePassword($state));