feat(package): ability to use always the green color for strong password #162

Author: AnthonyNahas

demo/src/app/examples/examples.component.html

@@ -279,5 +279,47 @@ <h1>Explore the library and try these examples <3</h1>
         </mat-card-content>
       </mat-card>
     </mat-card>
+
+<!--    #7 GREEN COLOR FOR STRONG PASSWORD-->
+    <mat-card>
+      <mat-card-title>#7</mat-card-title>
+      <mat-card-subtitle>
+        Use always the green color for a strong password
+      </mat-card-subtitle>
+
+      <mat-slide-toggle #toggle7>Show Password Details</mat-slide-toggle>
+
+      <mat-card-content>
+        <!--password input filed-->
+        <mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent7.color">
+          <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>
+          <mat-label>Password</mat-label>
+          <input matInput #password
+                 [type]="toggle.type"
+                 placeholder="Password">
+          <mat-hint align="end" aria-live="polite">
+            {{password.value.length}} / {{passwordComponent7.max}}
+          </mat-hint>
+        </mat-form-field>
+
+        <!--@angular-material-extensions/password-strength's main component-->
+        <mat-password-strength #passwordComponent7
+                               class="green"
+                               [password]="password.value">
+        </mat-password-strength>
+        <!--Password's strength info-->
+        <mat-password-strength-info
+          *ngIf="toggle7.checked"
+          [passwordComponent]="passwordComponent7">
+        </mat-password-strength-info>
+      </mat-card-content>
+
+      <mat-card class="mt-2">
+        <mat-card-title>code</mat-card-title>
+        <mat-card-content>
+          <markdown src="assets/md/examples/e7.md"></markdown>
+        </mat-card-content>
+      </mat-card>
+    </mat-card>
   </div>
 </section>

demo/src/app/home/home.component.html

@@ -157,7 +157,6 @@ <h1>@angular-material-extensions/password-strength</h1>
 
           <!--@angular-material-extensions/password-strength's main component-->
           <mat-password-strength #passwordComponentWithValidation
-                                 [greenStrongPassword]="true"
                                  (onStrengthChanged)="onStrengthChanged($event)"
                                  [password]="passwordWithValidation.value">
           </mat-password-strength>

demo/src/assets/md/examples/e7.md

@@ -0,0 +1,6 @@
+```html
+<mat-password-strength #passwordComponent
+                       class="green"
+                       [password]="password.value">
+</mat-password-strength>
+```

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

@@ -1,5 +1,4 @@
 <mat-progress-bar mode="determinate"
-                  class="green"
                   [color]="color"
                   [value]="strength">
 </mat-progress-bar>

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

@@ -1,3 +1,3 @@
-::ng-deep .mat-progress-bar.mat-primary .mat-progress-bar-fill::after {
-  background-color: blue;
+.green :host::ng-deep .mat-progress-bar.mat-primary .mat-progress-bar-fill::after {
+  background-color: #43A047;
 }

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

@@ -19,7 +19,6 @@ export class MatPasswordStrengthComponent implements OnInit, OnChanges {
   @Input() password: string;
   @Input() customValidator: RegExp;
   @Input() externalError: boolean;
-  @Input() greenStrongPassword: boolean;
 
   @Input() enableLengthRule = true;
   @Input() enableLowerCaseLetterRule = true;
@@ -30,10 +29,6 @@ export class MatPasswordStrengthComponent implements OnInit, OnChanges {
   @Input() min = 8;
   @Input() max = 30;
 
-  // TODO 17.04.19 @anthonynahas
-  // @Output()
-  // onColorChanged: EventEmitter<string> = new EventEmitter();
-
   @Output()
   onStrengthChanged: EventEmitter<number> = new EventEmitter();