mac-password-validation
Reactive icon

MAC Password Validation

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded on 15 Jan by 
0.0
 (0 ratings)
mac-password-validation

MAC Password Validation

Details
Widget to validate password, you can add how many rules you want.
Read more

Widget to validate password.

Functionalities:

  • Customize all rules and text.
  • Add how many rules you want.
  • Show dropbox on Top or Bottom.
  • Trigger an event with a list with all rules not accepted and if password is valid.


A complete demo how to use and how to customize : )


Easy to customize with CSS variables

.password-validation-container {

    --fix-dropdown-position: 0px; /* To fix position 5px / -10px / -5px */

    

    --dropdown-title-font-text-color: var(--color-neutral-10);

    --dropdown-title-font-weight: 700;

    --dropdown-title-font-size: var(--font-size-base);

    --dropdown-title-margin-bottom: 10px;

    --dropdown-padding: 15px;

    --dropdown-shadow: 3px 3px 3px 0px rgba(0,0,0,0.23);

    

    --dropdown-border-radius: 2px;

    --dropdown-border-width: 1px;

    --dropdown-border-left-width: 5px;

    --dropdown-border-color: var(--color-neutral-6);

    --dropdown-background-color: var(--color-neutral-0);

    

    --dropdown-font-text-color: var(--color-neutral-6);

    --dropdown-font-text-color-password-length: var(--color-neutral-7);

    --dropdown-font-text-color-isvalid: var(--color-neutral-10);

    --dropdown-font-weight-isvalid: 500;

    --dropdown-icon-color-isvalid: var(--color-success);

    --dropdown-icon-color-isinvalid: var(--color-error);

    --not-allowed-pattern-font-color : rgb(255,102,102,0.7);

    --dropdown-border-color-isvalid: var(--color-success);

    --dropdown-progressbar-color: var(--color-success);

    --dropdown-progressbar-height: var(--dropdown-border-left-width);

    --dropdown-icon-color-warning: var(--color-warning);

    --dropdown-border-color-warning: var(--color-warning);

 }

What’s new (1.0.0)
Reviews (0)