Password Complexity Indicator
The PasswordComplexityIndicatorService
is for calculating the password complexity.
Set default values in
PasswordComplexityIndicatorService
:- colors
- texts
- requirements
How we set default values
Make sure that the lengths of these values are equal (In our service we have 5 tests/colors/texts).
The
PasswordComplexityIndicatorService
has only one methodvalidatePassword
that passes the password as an argument and returns the properties of the bar.The
validatePassword
method returns an object of the type ProgressBarStats.Use this object to modify the
password complexity bar
- bgColor: decides the color of the bar.
- text: explains the meaning of the bar to the user.
- width: decides how full the bar will be.
How To Use
It's easy, imagine you have a password input that you want to add the complexity indicator under. Put this component under the input
- Pass the password to the
validatePassword
method of thePasswordComplexityIndicatorService
, and bind return the value to theprogressBar
property of theabp-password-complexity-indicator
- We suggest localization instead of using the text value directly.
- en.json
How To Customize
- If you want to change the test count, make sure that the lengths of the arrays of the
colors,texts,regex
in thePasswordComplexityIndicatorService
are equal. Otherwise, it won't work. - If you change any of the texts, you must change the localization file.
- That's it, you can start typing the password input!