Form Password
Form password component. Show or hide password value.
Form Password, Customization Blocks
Example:
// AppServiceProvider, "boot" method. TallStackUi::customize() ->form('password') ->block('block', 'classes');Expected Password Format:
At least 8 characters
At least one symbol (!@#$%^&*()_+-=)
At least one number
Uppercase and lowercase letters
<x-password value="TallStackUi" />Expected Password Format:
At least 8 characters
At least one symbol (!@#$%^&*()_+-=)
At least one number
Uppercase and lowercase letters
<x-password label="Password" hint="Insert your best password" value="TallStackUi" />An option to display an asterisk indicating that the field is required.
Expected Password Format:
At least 8 characters
At least one symbol (!@#$%^&*()_+-=)
At least one number
Uppercase and lowercase letters
<x-password label="Password *" hint="Insert your password" value="TallStackUi" />An option to control the caps lock indicator.
Expected Password Format:
At least 8 characters
At least one symbol (!@#$%^&*()_+-=)
At least one number
Uppercase and lowercase letters
<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.
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
Uppercase and lowercase letters
<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 />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 />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.
Since some systems disallow the action of pasting a value to be the password,
the password input component also offers this ability when using the typing-only
attribute,
starting from the version 2.8.2:
Expected Password Format:
At least 8 characters
At least one symbol (!@#$%^&*()_+-=)
At least one number
Uppercase and lowercase letters
<x-password typing-only />Expected Password Format:
At least 8 characters
At least one symbol (!@#$%^&*()_+-=)
At least one number
Uppercase and lowercase letters
<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}`)" />