Password Strength Meter
Overview
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.
Development
Web component development
Component reference
rui-password-strength-meter
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 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”.
public SetPasswordStrength() {
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';
} else if (this.passwordStrengthValue >= 34 && this.passwordStrengthValue <= 67) {
this.passwordStrengthDescription = 'medium';
} else if (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.
<rui-password-strength-meter *ngIf="passwordStrengthValue >= 10"
[strengthValue]="passwordStrengthValue [strengthDescription]="passwordStrengthDescription">
</rui-password-strength-meter>
Angular wrapper development
Wrapper reference
jha-password-strength-meter
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 into app.module
import { JhaPasswordStrengthMeterModule } from '@jkhy/responsive-ui-angular/jha-password-strength-meter';
@NgModule({
imports: [
...
JhaPasswordStrengthMeterModule,
...
]
})
export class AppModule(){}
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”.
public SetPasswordStrength() {
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';
} else if (this.passwordStrengthValue >= 34 && this.passwordStrengthValue <= 67) {
this.passwordStrengthDescription = 'Medium';
} else if (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.
<jha-password-strength-meter *ngIf="passwordStrengthValue >= 10"
[jhaStrengthValue]="passwordStrengthValue [jhaStrengthDescription]="passwordStrengthDescription">
</jha-password-strength-meter>
Component playground
Design
There are no specific design elements for the password strength meter.