Angular 2 Password Strength Bar

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!

2 Responses to “Angular 2 Password Strength Bar”


  • 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);
    }
    }

Leave a Reply

Subscribe

Categories

Twitter Updates