I spent a little time updating AngularJS Directive to test the strength of a password to be a pure Angular 2 component and thought I'd share.
A working demo and all of the code can be found here: Angular 2 Password Strength Bar.
Notes:
- Upgraded to Typescript and used the OnChanges interface.
- Incorporation of the bar is now component-based:
<password-strength-bar [passwordToCheck]="account.password"></password-strength-bar>
- Removed direct DOM modification and replaced with Angular 2 dynamic in-line styles.
- Removed JQuery dependence.
Enjoy!
Tags: angularjs, TypeScript
Nice work. Would you consider publishing this as a npm package?
Thanks for this! I really liked the meter markup/css, but wanted to use the zxcvbn package for determining the strength, so I paired your markup and styling with that package and it works great. Thank you!
registration.html:
<div class=”align-center mt-0″ *ngIf=”password”>
<ul id=”strengthBar”>
<li *ngFor=”let barColor of barColors;” class=”point” [style.background-color]=”barColor”></li>
</ul>
<i *ngIf=”!isStrongPassword” class=”fa fa-info-circle” rel=”tooltip” [title]=”passwordSuggestions”></i>
</div>”
styles.css (only modified this slightly):
/* start Password strength bar style */
ul#strengthBar {
display:inline;
list-style:none;
margin-right:10px;
padding:0;
vertical-align:2px;
}
.point:last {
margin:0 !important;
}
.point {
background:#DDD;
border-radius:2px;
display:inline-block;
height:5px;
margin-right:1px;
width:15%;
}
/* end Password strength bar style */
registration.component.ts (relevant pieces, anyway):
import * as zxcvbn from ‘zxcvbn’;
export class RegistrationComponent implements OnInit {
barColors: string[];
colors = [‘#F00’, ‘#F90’, ‘#FF0’, ‘#9F0’, ‘#0F0’];
passwordSuggestions: ”;
ngOnInit() {
this.updateBarColors(”);
}
updateBarColors(color): void {
this.barColors = [];
for (let i = 0; i < 5; i++) {
this.barColors.push((i <= this.passwordStrength) ? color : '');
}
}
updatePasswordStrength(): void {
let results = zxcvbn(this.password);
this.passwordStrength = results.score;
let color = this.colors[this.passwordStrength];
this.updateBarColors(color);
}
}
The glitch is I cannot modify the regex value for some customisation Angular 5. Let me know if there is a solution because I do not want to edit the core files under node_modules.