Form Password

Form password component. Show or hide password value.

Form Password, Personalization Blocks

Example:

TallStackUi::personalize()
    ->form('password')
    ->block('block', 'classes');

# Basic Usage

<x-password value="TallStackUi" />

# Label & Hint

Password

Insert your best password

<x-password label="Password" hint="Insert your best password" value="TallStackUi" />

# Required Label Indicator

An option to display an asterisk indicating that the field is required.

Password *

Insert your password

<x-password label="Password *" hint="Insert your password" value="TallStackUi" />

# Caps Lock Indicator

An option to control the caps lock indicator.

Activate caps lock to see the indicator.

<x-password hint="Activate caps lock to see the indicator." />
 
<!-- To disable and do not show the indicator use `mixed-case` -->
<x-password hint="Activate caps lock to see the indicator." mixed-case />

The caps lock indicator does not work on mobile devices.

# Format Validator

An option to visually validate the format of the entered password.

Expected Password Format:

At least 8 characters

At least one symbol (!@#)

At least one number

At least one uppercase character

<!-- Allowed: min, symbols, numbers, mixed -->
 
<!-- You can set min to `min:8` or
omit the number to use the default -->
 
<!-- You can define symbols like `symbols:!@#`
or omit symbols to use the defaults -->
 
<x-password :rules="['min:8', 'symbols:!@#', 'numbers', 'mixed']" />

If you do not specify the min size then the default size will be 8
If you do not specify the symbols then the default symbols will be !@#$%^&*()_+-=

# Password Generator

Expected Password Format:

At least 8 characters

At least one symbol (!@#$%^&*()_+-=)

At least one number

At least one uppercase character

<x-password generator :rules="['min:8', 'symbols', 'numbers', 'mixed']" />

The generator requires the rules attributes.
The generated password will match the rules passed to the component.

The password generation algorithm was created with advanced techniques for generating unique passwords. The algorithm is good and functional, but if for some reason you want to change it, you can define your own password generation algorithm:

You can copy this base code into your application layout and make any necessary changes:

<script>
    window.TallStackUi = window.TallStackUi || {};
 
    window.TallStackUi.passwordGenerator = function (min, mixed, numbers, symbols) {
        return 'logic-goes-here';
    };
</script>

In the code above, the variables mixed , numbers , and symbols are boolean variables that will have their true values when the user passes the rule to the component. The min is the minimum length selected for the password.

# Events

Expected Password Format:

At least 8 characters

At least one symbol (!@#$%^&*()_+-=)

At least one number

At least one uppercase character

<x-password value="TallStackUI"
            generator
            :rules="['min:8', 'symbols', 'numbers', 'mixed']"
            x-on:reveal="alert(`Password Revealed: ${$event.detail.status}`)"
            x-on:generate="alert(`Password Generated: ${$event.detail.password}`)" />