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.

<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>