Getting Started

Minimal Setup

Installation

composer require parfaitementweb/filament-password-input

Publish the config (if needed):

php artisan vendor:publish --provider="Parfaitementweb\FilamentPasswordInput\FilamentPasswordInputServiceProvider" --tag="filament-password-input-config"

First Use Case Replace a standard Filament TextInput with the enhanced password component in a resource or form:
```
use Parfaitementweb\FilamentPasswordInput\Forms\Components\PasswordInput;

PasswordInput::make('password')
    ->required()
    ->label('Password'),
```
Filament v5 Support This package now officially supports Filament v5 alongside existing Filament v2/3 compatibility. No additional steps are required—simply install and use as before.

Where to Look First

Documentation: Check the README for basic usage and configuration options.
Config File: /config/filament-password-input.php for global settings (e.g., default toggle icon, copy button visibility).
Component API: Explore the PasswordInput class methods in your IDE for available customizations.
Filament v5 Migration: If upgrading from v2/3, verify compatibility by testing the component in your Filament v5 project.

Implementation Patterns

Core Workflows

Basic Password Field (Filament v5) Replace Filament’s default TextInput with PasswordInput in Filament v5 forms:
```
PasswordInput::make('password')
    ->required()
    ->minlength(8)
    ->maxlength(32),
```
Customizing Toggle Icon Override the default eye icon (e.g., for a custom SVG) in Filament v5:
```
PasswordInput::make('password')
    ->toggleIcon('heroicon-o-eye-slash'),
```

Conditional Copy Button Show/hide the copy button based on logic (works in Filament v5):

PasswordInput::make('password')
    ->showCopyButton(fn ($record) => $record->password !== null),

Integration with Filament v5 Forms Use in Filament v5 resource forms, custom panels, or standalone forms:

// In a Filament v5 Resource Form
public static function form(Form $form): Form
{
    return $form
        ->schema([
            PasswordInput::make('password')
                ->required(),
        ]);
}

Validation Rules Leverage Filament’s built-in validation (e.g., confirmed for password confirmation) in Filament v5:
```
PasswordInput::make('password')
    ->required()
    ->confirmed(),
```
Dynamic Defaults Set default values dynamically (e.g., for password reset flows) in Filament v5:
```
PasswordInput::make('new_password')
    ->default(fn () => 'AutoGen' . Str::random(4)),
```

Integration Tips

Localization: Translate labels/tooltips via Filament’s localization system (identical in Filament v5).
Theming: Customize CSS via Filament’s tailwind.config.js or scoped styles (compatible with Filament v5).
Accessibility: Ensure aria-label and aria-describedby are set for screen readers (tested in Filament v5).

Testing: Use Filament’s testing helpers (updated for Filament v5) to assert password field behavior:

$this->filament()->actingAs($user)
    ->form()
    ->fillForm([
        'password' => 'secure123',
    ])
    ->assertSet('password', 'secure123');

Gotchas and Tips

Pitfalls

Copy Button Security
- Risk: Exposing passwords in plaintext via the copy button may violate security policies.
- Fix: Disable the copy button for sensitive fields or use it only in trusted contexts (e.g., password reset forms).
- Config (applies to Filament v5):
```
'show_copy_button' => env('FILAMENT_PASSWORD_INPUT_SHOW_COPY', false),
```
State Persistence
- Issue: The "reveal password" toggle state may not persist across form reloads (e.g., validation errors) in Filament v5.
- Workaround: Use JavaScript to preserve the state or accept the trade-off for UX simplicity.
Conflicts with Filament v5 Plugins
- Problem: Some Filament v5 plugins may override or conflict with the password input’s JavaScript.
- Solution: Check plugin compatibility or override the component’s JS via filament-password-input.js.
Validation Feedback
- Gotcha: Password validation errors may not visually align with the toggle state in Filament v5.
- Tip: Use Filament’s dehydrateStateUsing to ensure errors are displayed correctly:
```
PasswordInput::make('password')
    ->dehydrateStateUsing(fn ($state) => $state),
```

Debugging

Console Errors: Check browser console for JS errors (e.g., missing icons or event listeners) in Filament v5.

Log Toggle State: Add debug logs to verify toggle behavior:

PasswordInput::make('password')
    ->extraAttributes(['data-test-id' => 'password-input'])
    ->extraJs('console.log("Toggle clicked")'),

Inspect DOM: Use browser dev tools to verify the component’s rendered HTML/JS in Filament v5.

Extension Points

Custom Toggle Logic Override the toggle behavior via extraJs (works in Filament v5):

PasswordInput::make('password')
    ->extraJs('
        document.querySelector("#password-input-toggle").addEventListener("click", function() {
            console.log("Custom toggle logic here");
        });
    '),

Server-Side Processing Extend the component to handle server-side password generation or hashing (compatible with Filament v5):
```
PasswordInput::make('password')
    ->afterStateUpdated(fn (set, $state) => Hash::make($state)),
```
Third-Party Integrations
- Password Managers: Add support for autofill via autocomplete="current-password" (tested in Filament v5).
- Biometrics: Integrate with platform-specific password managers (e.g., iCloud Keychain).

Testing Hooks Add test IDs for automated testing (compatible with Filament v5 testing helpers):

PasswordInput::make('password')
    ->extraAttributes(['data-test-password-input' => true]),

Config Quirks

Global Toggle Icon: Set a default icon in config/filament-password-input.php (applies to Filament v5):
```
'toggle_icon' => 'heroicon-o-eye',
```
Copy Button Delay: Adjust the copy button’s visibility delay (default: 500ms) via config (works in Filament v5):
```
'copy_button_delay' => 300,
```
Environment-Specific Settings: Use .env to toggle features (compatible with Filament v5):
```
FILAMENT_PASSWORD_INPUT_SHOW_COPY=false
```

Filament v5-Specific Notes

No Breaking Changes: The v4.1.0 update adds Filament v5 support without altering existing functionality for Filament v2/3.
Testing: Verify component behavior in both Filament v5 and legacy versions if maintaining backward compatibility.
Documentation: Refer to Filament v5’s migration guide for additional context if upgrading.

Filament Password Input Laravel Package