TallStackUI 4.0 is here! Seven new components and thousand of improvements. See what's new .

Powerful suite of Blade components for TALL Stack apps

Form Password

Form password component. Show or hide password value.

# Basic Usage 

<x-password value="TallStackUI" />

# Label & Hint

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

# Readonly & Disabled 

<x-password label="Readonly" value="TallStackUI" readonly />
<x-password label="Disabled" value="TallStackUI" disabled />

# Required Label Indicator

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

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. 

<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 

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

# Password Generator Reflection
NEW

An option to populate a different field when password is generated. 

<x-password generator="confirm_password" />
 
<!-- and... -->
 
<x-password id="confirm_password" /> <!-- accepts id or x-ref -->

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

# Disable Paste Event

You will not be able to paste a value on this password input 
<x-password typing-only />

# Events 

<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}`)" />
Event Detail Fired when
reveal { status } Visibility is toggled
generate { password } A password is generated
paste { password } A password is pasted

Code highlighting provided by Torchlight