If your application allows the user to change their password, the password strength meter component can help you alert the user to the relative strength of their new password.
The password strength meter only displays a relative strength level, it doesn’t actually calculate the strength. That logic is left up to your application to decide.
In this change password view, the user has entered a relatively weak password value. The password strength meter displays a percentage value representing the relative strength, the word “WEAK”, and error styling. All of this helps the user understand that their selected password is weak.
In this change password view, the user has entered a relatively strong password value. The password strength meter displays a percentage value representing the relative strength, the word “STRONG”, and success styling. All of this helps the user understand that their selected password is strong.
Displays a progress bar with a themed color background and a description that indicate the relative strength of a new password value entered by the user in a Change Password view
Name
Type
Default
Description
strengthValue
number
0
Specify a value between 10 and 100 that indicates the relative strength of a new password value entered by the user, with lower values indicating a weaker password and higher values indicating a stronger password. Use an internal calculation appropriate to your use case to determine the relative strength value.
strengthDescription
string
'weak'
One of “weak”, “medium”, or “strong”. Use an internal calculation appropriate to your use case to determine the relative strength description. The internal progress bar displays a different background color value for each of these three strength descriptions.
Implementation
Begin by importing the rui-password-strength-meter module into your application.
Import the module
// import into app.module
import'@jkhy/responsive-ui-wc/components/rui-password-strength-meter/rui-password-strength-meter-imports';
Add logic in your TypeScript to calculate a relative password strength level between 10 and 100 based on the new password the user entered, then map that value to a strength description of either “weak”, “medium”, or “strong”.
Password strength calculation
publicSetPasswordStrength() {this.passwordStrengthValue=100;// Determine password strength
if(this.newPassword.errors){if(this.newPassword.errors.passwordTooShort){this.passwordStrengthValue=this.passwordStrengthValue-25;}if(this.newPassword.errors.passwordNoUppercase){this.passwordStrengthValue=this.passwordStrengthValue-25;}if(this.newPassword.errors.passwordNoLowercase){this.passwordStrengthValue=this.passwordStrengthValue-25;}if(this.newPassword.errors.passwordNoSymbol){this.passwordStrengthValue=this.passwordStrengthValue-25;}}// Update password strength description based on latest value
if(this.passwordStrengthValue>0&&this.passwordStrengthValue<=33){this.passwordStrengthDescription='weak';}elseif(this.passwordStrengthValue>=34&&this.passwordStrengthValue<=67){this.passwordStrengthDescription='medium';}elseif(this.passwordStrengthValue>=67){this.passwordStrengthDescription='strong';}}
Add a rui-password-strength-meter element to your HTML between the password input and any field-level validation errors for that input. Bind the strengthValue and strengthDescription properties to the appropriate backing values in your TypeScript.
Displays a progress bar with a themed color background and a description that indicate the relative strength of a new password value entered by the user in a Change Password view
Name
Type
Default
Description
jhaStrengthValue
number
0
Specify a value between 10 and 100 that indicates the relative strength of a new password value entered by the user, with lower values indicating a weaker password and higher values indicating a stronger password. Use an internal calculation appropriate to your use case to determine the relative strength value.
jhaStrengthDescription
string
'Weak'
One of “Weak”, “Medium”, or “Strong”. Use an internal calculation appropriate to your use case to determine the relative strength description. The internal progress bar displays a different background color value for each of these three strength descriptions.
Implementation
Begin by importing the JhaPasswordStrengthMeterModule module into your application.
Import the module
// import into app.module
import{JhaPasswordStrengthMeterModule}from'@jkhy/responsive-ui-angular/jha-password-strength-meter';@NgModule({imports:[...JhaPasswordStrengthMeterModule,...]})exportclassAppModule(){}
Add logic in your TypeScript to calculate a relative password strength level between 10 and 100 based on the new password the user entered, then map that value to a strength description of either “Weak”, “Medium”, or “Strong”.
Password strength calculation
publicSetPasswordStrength() {this.passwordStrengthValue=100;// Determine password strength
if(this.newPassword.errors){if(this.newPassword.errors.passwordTooShort){this.passwordStrengthValue=this.passwordStrengthValue-25;}if(this.newPassword.errors.passwordNoUppercase){this.passwordStrengthValue=this.passwordStrengthValue-25;}if(this.newPassword.errors.passwordNoLowercase){this.passwordStrengthValue=this.passwordStrengthValue-25;}if(this.newPassword.errors.passwordNoSymbol){this.passwordStrengthValue=this.passwordStrengthValue-25;}}// Update password strength description based on latest value
if(this.passwordStrengthValue>0&&this.passwordStrengthValue<=33){this.passwordStrengthDescription='Weak';}elseif(this.passwordStrengthValue>=34&&this.passwordStrengthValue<=67){this.passwordStrengthDescription='Medium';}elseif(this.passwordStrengthValue>=67){this.passwordStrengthDescription='Strong';}}
Add a jha-password-strength-meter element to your HTML between the New Password input and any field-level validation errors for that input. Bind the jhaStrengthValue and jhaStrengthDescription properties to the appropriate backing values in your TypeScript.
