feat(package): added the ability to change and adapt custom msgs for …

…the info component
angular-material-extensions · Dec 10, 2018 · b817bee · b817bee
1 parent 068f0c3
commit b817bee
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/src/module/component/mat-password-strength-info/mat-password-strength-info.component.html b/src/module/component/mat-password-strength-info/mat-password-strength-info.component.html
@@ -11,7 +11,7 @@
         <mat-icon @negativeState color="warn">error</mat-icon>
       </ng-template>
       <div>
-        <p>contains at least one lower character</p>
+        <p>{{lowerCaseCriteriaMsg}}</p>
       </div>
     </div>
 
@@ -25,7 +25,7 @@
         <mat-icon @negativeState color="warn">error</mat-icon>
       </ng-template>
       <div>
-        <p>contains at least one upper character</p>
+        <p>{{upperCaseCriteriaMsg}}</p>
       </div>
     </div>
 
@@ -39,7 +39,7 @@
         <mat-icon @negativeState color="warn">error</mat-icon>
       </ng-template>
       <div>
-        <p>contains at least one digit character</p>
+        <p>{{digitsCriteriaMsg}}</p>
       </div>
     </div>
 
@@ -53,7 +53,7 @@
         <mat-icon @negativeState color="warn">error</mat-icon>
       </ng-template>
       <div>
-        <p>contains at least one special character</p>
+        <p>{{specialCharsCriteriaMsg}}</p>
       </div>
     </div>
 
@@ -67,7 +67,7 @@
         <mat-icon @negativeState color="warn">error</mat-icon>
       </ng-template>
       <div>
-        <p>contains at least {{passwordComponent.min}} characters</p>
+        <p>{{minCharsCriteriaMsg}}</p>
       </div>
     </div>
 

diff --git a/src/module/component/mat-password-strength-info/mat-password-strength-info.component.ts b/src/module/component/mat-password-strength-info/mat-password-strength-info.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {MatPasswordStrengthComponent} from '../mat-password-strength/mat-password-strength.component';
 import {animate, animateChild, keyframes, query, stagger, style, transition, trigger, useAnimation} from '@angular/animations';
 import {shake} from '../../animations/index';
@@ -72,12 +72,33 @@ import {shake} from '../../animations/index';
     ]),
   ],
 })
-export class MatPasswordStrengthInfoComponent {
+export class MatPasswordStrengthInfoComponent implements OnInit {
 
   @Input()
   passwordComponent: MatPasswordStrengthComponent;
 
   @Input()
   enableScoreInfo = false;
 
+  @Input()
+  lowerCaseCriteriaMsg = 'contains at least one lower character';
+
+  @Input()
+  upperCaseCriteriaMsg = 'contains at least one upper character';
+
+  @Input()
+  digitsCriteriaMsg = 'contains at least one digit character';
+
+  @Input()
+  specialCharsCriteriaMsg = 'contains at least one special character';
+
+  @Input()
+  minCharsCriteriaMsg: string;
+
+  ngOnInit(): void {
+    if (!this.minCharsCriteriaMsg) {
+      this.minCharsCriteriaMsg = `contains at least ${this.passwordComponent.min} characters`
+    }
+  }
+
 }