Form Password

Form password component. Show or hide password value.

Form Password, Personalization Blocks

Example:

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

# Basic Usage

Expected Password Format:

At least 8 characters

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

At least one number

At least one uppercase character

<x-password value="TallStackUi" />

# Label & Hint

Password

Insert your best password

Expected Password Format:

At least 8 characters

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

At least one number

At least one uppercase character

<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

Expected Password Format:

At least 8 characters

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

At least one number

At least one uppercase character

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

Expected Password Format:

At least 8 characters

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

At least one number

At least one uppercase character

<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

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

You can also omit the rules attribute to use the default rules that come from the configuration file.

<x-password rules />

# Password Generator

Expected Password Format:

At least 5 characters

At least one symbol (!@)

<x-password generator :rules="['min:5', 'symbols:!@']" />

Similar to the format validator, mentioned above, you can also omit the rules attribute to use the default rules that come from the configuration file. With this approach all default rules will be applied to the password generator, which is better for enforcing a strong password.

<x-password generator />

# Generator Algorithm

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}`)" />