Form Password

Form password component. Show or hide password value.

Password, Personalization Blocks

This content is part of TallStackUI personalization.

Example:

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

The soft personalization should be done in boot method of service providers.

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

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

# Invalidate

An option to not show validation error message

Password

Insert your best password

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