Angular 2 Password Strength Bar

3 Responses to Angular 2 Password Strength Bar

1. sander says:

   November 25, 2016 at 1:13 am

   Nice work. Would you consider publishing this as a npm package?
2. tony says:

   January 14, 2017 at 11:40 am

   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);
   }
   }
3. Niladri Banerjee says:

   November 30, 2018 at 3:09 am

   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.