Merge pull request #230 from SirZach/feature/warn-accent-threshold

feat(package): allow for custom warn and accent thresholds

Author: AnthonyNahas

README.md

@@ -187,6 +187,8 @@ export class OtherModule {
 | enableSpecialCharRule      | `Input() `  | `boolean`   | true | whether a special char is optional
 | min      | `Input() `  | `number`   | 8 | the minimum length of the password
 | max      | `Input() `  | `number`   | 30 | the maximum length of the password
+| warnThreshold      | `Input() `  | `number`   | 21 | password strength less than this number shows the warn color
+| accentThreshold      | `Input() `  | `number`   | 81 | password strength less than this number shows the accent color
 | onStrengthChanged  | Output() | `number`    | - | emits the strength of the provided password in % e.g: 20%, 40%, 60%, 80% or 100%
 
 ### `<mat-password-strength-info>` used to display more information about the strength of a provided password - [see the demo examples](https://angular-material-extensions.github.io/password-strength/examples/mat-password-strength-info)

src/module/component/mat-password-strength/mat-password-strength.component.spec.ts

@@ -180,6 +180,24 @@ describe('PasswordStrengthComponent', () => {
       });
     });
 
+  it('should strength at least 80 and color = accent when the password fulfills 4 criteria and accentThreshold set to 100',
+    () => {
+      const charsList = ['a', 'A', '9', '!', 'bcdef'];
+      const combinations = generator.loadCombinationList(charsList, 4, 4, true);
+      const accentThreshold = 100;
+
+      combinations.forEach(combination => {
+        const isCharDuplicate = new RegExp(/^.*(.).*\1.*$/);
+        if (!isCharDuplicate.test(combination)) {
+          component.password = combination;
+          component.accentThreshold = accentThreshold;
+          component.calculatePasswordStrength();
+          expect(component.strength).toBeGreaterThanOrEqual(80);
+          component.strength < accentThreshold ? expect(component.color).toBe(Colors.accent) : expect(component.color).toBe(Colors.primary);
+        }
+      });
+    });
+
   it('should strength equal 100 and color = primary  when the password fulfills all 5 criteria ',
     () => {
       const charsList = ['a', 'A', '9', '!', 'bcdef'];

src/module/component/mat-password-strength/mat-password-strength.component.ts

@@ -29,6 +29,9 @@ export class MatPasswordStrengthComponent implements OnInit, OnChanges {
   @Input() max = 30;
   @Input() customValidator: RegExp;
 
+  @Input() warnThreshold = 21;
+  @Input() accentThreshold = 81;
+
   @Output()
   onStrengthChanged: EventEmitter<number> = new EventEmitter();
 
@@ -81,9 +84,9 @@ export class MatPasswordStrengthComponent implements OnInit, OnChanges {
 
   get color(): ThemePalette {
 
-    if (this._strength <= 20) {
+    if (this._strength < this.warnThreshold) {
       return Colors.warn;
-    } else if (this._strength <= 80) {
+    } else if (this._strength < this.accentThreshold) {
       return Colors.accent;
     } else {
       return Colors.primary;