Merge pull request #21 from feeloor/master

More optional values and added password strength description
rnadler · Jun 3, 2018 · 3b3da54 · 3b3da54
2 parents 3438da7 + a74844e
commit 3b3da54
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 12 deletions.
diff --git a/app/app.spec.ts b/app/app.spec.ts
@@ -30,25 +30,46 @@ describe('App', function () {
 
     it('App should have expected text', () => {
         fixture.detectChanges();
-        const div = de.nativeElement;
-        expect(div.innerText).toMatch(/Password strength:/);
+        expect(de.nativeElement.innerText).toMatch(/Password strength:/);
     });
 
     it('should correctly set custom bar colors', () => {
       comp.account.password = 'testinput';
       fixture.detectChanges();
       expect(bar0.nativeElement.style.backgroundColor).toBe('rgb(221, 44, 0)'); // #DD2C00
+      expect(de.nativeElement.innerText).toMatch(/\(Useless\)/);
     });
 
     it('should correctly use default bar colors', () => {
       comp.account.password = 'testinputN';
       comp.myColors = null;
       fixture.detectChanges();
       expect(bar0.nativeElement.style.backgroundColor).toBe('rgb(255, 153, 0)'); // #F90 == #FF9900
+      expect(de.nativeElement.innerText).toMatch(/\(Weak\)/);
 
       comp.account.password = 'testinput';
       comp.myColors = ['#DD2C00', '#FF6D00', '#FFD600', '#AEEA00']; // only 4 items
       fixture.detectChanges();
       expect(bar0.nativeElement.style.backgroundColor).toBe('rgb(255, 0, 0)'); // #F00 == #FF0000
+      expect(de.nativeElement.innerText).toMatch(/\(Useless\)/);
+    });
+
+    it('should correctly show custom base color', () => {
+      fixture.detectChanges();
+      expect(bar0.nativeElement.style.backgroundColor).toBe('rgb(255, 255, 255)'); // #FFF
+      expect(de.nativeElement.innerText).toMatch(/\(Useless\)/);
+    });
+
+    it('should correctly show default base color and strength label (none)', () => {
+      comp.baseColor = null;
+      comp.strengthLabels = null;
+      fixture.detectChanges();
+      expect(bar0.nativeElement.style.backgroundColor).toBe('rgb(221, 221, 221)'); // #DDD
+      expect(de.nativeElement.innerText).not.toMatch(/\(Useless\)/);
+    });
+    it('should correctly show default base color on a bad base color', () => {
+      comp.baseColor = 'EEE'; // invalid color
+      fixture.detectChanges();
+      expect(bar0.nativeElement.style.backgroundColor).toBe('rgb(221, 221, 221)'); // #DDD
     });
 });
diff --git a/app/app.ts b/app/app.ts
@@ -13,7 +13,10 @@ import {PasswordStrengthBarModule} from '../index';
                [(ngModel)]="account.password" #password="ngModel"
                minlength="5" maxlength="50" required>
         <ng2-password-strength-bar [passwordToCheck]="account.password" [barColors]="myColors"
-                                   [barLabel]="barLabel"></ng2-password-strength-bar>
+                                   [barLabel]="barLabel"
+                                   [baseColor]="baseColor"
+                                   [strengthLabels]="strengthLabels">
+        </ng2-password-strength-bar>
       </form>
     </div>
   `,
@@ -22,7 +25,9 @@ export class AppComponent {
   public account = {
     password: <string>null
   };
+  public baseColor = '#FFF';
   public barLabel = 'Password strength:';
+  public strengthLabels = ['(Useless)', '(Weak)', '(Normal)', '(Strong)', '(Great!)'];
   public myColors = ['#DD2C00', '#FF6D00', '#FFD600', '#AEEA00', '#00C853'];
 }
 

diff --git a/src/passwordStrengthBar.component.ts b/src/passwordStrengthBar.component.ts
@@ -3,52 +3,63 @@ import {Component, OnChanges, Input, SimpleChange} from '@angular/core';
 @Component({
   selector: 'ng2-password-strength-bar',
   styles: [`
-    ul#strengthBar {
+    .strengthBar {
       display: inline;
       list-style: none;
       margin: 0 0 0 15px;
       padding: 0;
       vertical-align: 2px;
     }
 
-    ul#strengthBar .point {
+    .strengthBar .point {
       background: #DDD;
       border-radius: 2px;
       display: inline-block;
       height: 5px;
       margin-right: 1px;
       width: 20px;
     }
-    
-    ul#strengthBar .point:last-child {
+
+    .strengthBar .point:last-child {
       margin: 0;
     }
+    .pre {
+      white-space: pre;
+    }
   `],
   template: `
     <div id="strength" #strength>
       <small>{{barLabel}}</small>
-      <ul id="strengthBar">
+      <ul id="strengthBar" class="strengthBar">
         <li id="bar0" class="point" [style.background-color]="bar0"></li>
         <li class="point" [style.background-color]="bar1"></li>
         <li class="point" [style.background-color]="bar2"></li>
         <li class="point" [style.background-color]="bar3"></li>
         <li class="point" [style.background-color]="bar4"></li>
       </ul>
+      <small [hidden]="!strengths" class="pre">  {{strengthLabel}}</small>
     </div>
   `
 })
 export class PasswordStrengthBarComponent implements OnChanges {
   @Input() passwordToCheck: string;
   @Input() barLabel: string;
   @Input() barColors: Array<string>;
+  @Input() baseColor: string;
+  @Input() strengthLabels: Array<string>;
+
   bar0: string;
   bar1: string;
   bar2: string;
   bar3: string;
   bar4: string;
 
+  strengthLabel: string;
+
   private colors: Array<string>;
+  strengths: Array<string>;
   private defaultColors = ['#F00', '#F90', '#FF0', '#9F0', '#0F0'];
+  private defaultBaseColor: string = '#DDD';
 
   constructor() {
     this.colors = this.defaultColors;
@@ -61,6 +72,13 @@ export class PasswordStrengthBarComponent implements OnChanges {
     } else {
       this.colors = this.defaultColors;
     }
+
+    this.strengths = this.strengthLabels && this.strengthLabels.length === 5 ? this.strengthLabels.slice() : null;
+    this.setStrengthLabel(0);
+
+    if (!/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.baseColor)) {
+      this.baseColor = this.defaultBaseColor;
+    }
   }
 
   private static measureStrength(p: string) {
@@ -75,7 +93,7 @@ export class PasswordStrengthBarComponent implements OnChanges {
     const _flags = [_lowerLetters, _upperLetters, _numbers, _symbols];
 
     let _passedMatches = 0;
-    for (let _flag of _flags) {
+    for (const _flag of _flags) {
       _passedMatches += _flag === true ? 1 : 0;
     }
 
@@ -122,11 +140,12 @@ export class PasswordStrengthBarComponent implements OnChanges {
   }
 
   ngOnChanges(changes: { [propName: string]: SimpleChange }): void {
-    let password = changes['passwordToCheck'].currentValue;
+    const password = changes['passwordToCheck'].currentValue;
     this.checkBarColors();
-    this.setBarColors(5, '#DDD');
+    this.setBarColors(5, this.baseColor);
     if (password) {
-      let c = this.getStrengthIndexAndColor(password);
+      const c = this.getStrengthIndexAndColor(password);
+      this.setStrengthLabel(c.idx - 1);
       this.setBarColors(c.idx, c.col);
     }
   }
@@ -136,4 +155,9 @@ export class PasswordStrengthBarComponent implements OnChanges {
       this['bar' + _n] = col;
     }
   }
+  private setStrengthLabel(index: number) {
+    if (this.strengths) {
+      this.strengthLabel = this.strengths[index];
+    }
+  }
 }