Register Form: Password Strength and Generate

We must extend the base Register class to add fields to the register page.

We modify the getPasswordFormComponent() method to add more functionality.

We add a suffix action to show/hide password fields. This is done by changing the type in the type() method.

We add a hint action to generate a random password value. After the password is generated, we determine the password strength level and dispatch event with its value to show a progress bar and to say how strong the password is.

This is how the Blade file shows the strength and listeners for the event with Alpine.js.

<div
    x-data="{ strengthScore: 0, strengthLevels: $wire.$entangle('strengthLevels') }"
    @update-score.window="strengthScore = $event.detail.score"
>
 
    <span class="font-semibold">Password strength:</span> <span x-text="strengthLevels[strengthScore] ?? 'Weak'"></span>
    <progress :value="strengthScore" max="4" class="w-full"></progress>
 
</div>

This is how a custom page looks for the registration page:

use ZxcvbnPhp\Zxcvbn;
use Filament\Forms\Set;
use Filament\Forms\Get;
use Filament\Forms\Form;
use Illuminate\Support\Str;
use Illuminate\Support\Facades\Hash;
use Filament\Forms\Components\Component;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\ViewField;
use Illuminate\Validation\Rules\Password;
use App\Forms\Components\PasswordStrength;
use Filament\Forms\Components\Actions\Action;
use Filament\Pages\Auth\Register as BaseRegister;
 
class Register extends BaseRegister
{
    public bool $showPassword = false;
 
    public int $strengthScore = 0;
 
    // ...