feat(package): implemented the password strength api #191

Author: AnthonyNahas

src/module/components/ngx-auth-firebaseui/auth.component.html

@@ -91,13 +91,13 @@
                 <!--labels will work only with @angular/material@6.2.0 -->
                 <mat-label>{{nameText}}</mat-label>
                 <input matInput
-                       minlength="2"
-                       maxlength="30"
+                       [minlength]="passwordStrength.min.toString()"
+                       [maxlength]="passwordStrength.max.toString()"
                        [formControl]="sigUpNameFormControl"
                        required>
                 <mat-icon matSuffix [color]="color">person</mat-icon>
                 <mat-hint align="end" aria-live="polite">
-                  {{signUpFormGroup.value.name?.length}} / 25
+                  {{signUpFormGroup.value.name?.length}} / {{passwordStrength.max}}
                 </mat-hint>
                 <mat-error *ngIf="sigUpNameFormControl.hasError('required')">
                   {{nameErrorRequiredText}}
@@ -157,6 +157,14 @@
                 </mat-form-field>
 
                 <mat-password-strength #passwordStrength
+                                       [min]="min"
+                                       [max]="max"
+                                       [customValidator]="customValidator"
+                                       [enableLengthRule]="enableLengthRule"
+                                       [enableLowerCaseLetterRule]="enableLowerCaseLetterRule"
+                                       [enableUpperCaseLetterRule]="enableUpperCaseLetterRule"
+                                       [enableDigitRule]="enableDigitRule"
+                                       [enableSpecialCharRule]="enableSpecialCharRule"
                                        [password]="signUpFormGroup.value.password"
                                        [externalError]="sigUpPasswordFormControl.dirty">
                 </mat-password-strength>
@@ -201,7 +209,7 @@
   </mat-tab>
 
   <!--Reset password tab-->
-  <mat-tab *ngIf="passwordResetWished" [label]="resetPasswordTabText" >
+  <mat-tab *ngIf="passwordResetWished" [label]="resetPasswordTabText">
     <form [formGroup]="resetPasswordFormGroup" (ngSubmit)="resetPasswordFormGroup.valid && resetPassword()">
 
       <mat-card>

src/module/components/ngx-auth-firebaseui/auth.component.ts

@@ -12,7 +12,7 @@ import {
   ViewChild
 } from '@angular/core';
 import {AbstractControl, FormControl, FormGroup, Validators} from '@angular/forms';
-import {MatDialog, MatDialogRef, MatFormFieldAppearance, MatTabChangeEvent, MatTabGroup} from '@angular/material';
+import {MatDialog, MatDialogRef, MatFormFieldAppearance, MatTabChangeEvent, MatTabGroup, ThemePalette} from '@angular/material';
 import {AngularFireAuth} from '@angular/fire/auth';
 import {isPlatformBrowser} from '@angular/common';
 import {Subscription} from 'rxjs/internal/Subscription';
@@ -22,6 +22,7 @@ import {LegalityDialogComponent} from '../../components/legality-dialog/legality
 import {LegalityDialogParams, LegalityDialogResult} from '../../interfaces/legality.dialog.intreface';
 import {NgxAuthFirebaseUIConfig, NgxAuthFirebaseUIConfigToken} from '../../ngx-auth-firebase-u-i.module';
 import {defaultAuthFirebaseUIConfig} from '../../interfaces/config.interface';
+import {MatPasswordStrengthComponent} from '@angular-material-extensions/password-strength';
 
 
 export const EMAIL_REGEX = new RegExp(['^(([^<>()[\\]\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\.,;:\\s@\"]+)*)',
@@ -40,6 +41,7 @@ export const PHONE_NUMBER_REGEX = new RegExp(/^\+(?:[0-9] ?){6,14}[0-9]$/);
 export class AuthComponent implements OnInit, OnChanges, OnDestroy {
 
   @ViewChild(MatTabGroup, {static: false}) matTabGroup: MatTabGroup;
+  @ViewChild(MatPasswordStrengthComponent, {static: false}) passwordStrength: MatPasswordStrengthComponent;
 
   @Input() providers: string[] | string = AuthProvider.ALL; //  google, facebook, twitter, github as array or all as one single string
   @Input() appearance: MatFormFieldAppearance;
@@ -53,6 +55,17 @@ export class AuthComponent implements OnInit, OnChanges, OnDestroy {
   @Input() messageOnAuthSuccess: string;
   @Input() messageOnAuthError: string;
 
+  // Password strength api
+  @Input() enableLengthRule = true;
+  @Input() enableLowerCaseLetterRule = true;
+  @Input() enableUpperCaseLetterRule = true;
+  @Input() enableDigitRule = true;
+  @Input() enableSpecialCharRule = true;
+  @Input() min = 8;
+  @Input() max = 30;
+  @Input() customValidator: RegExp;
+  @Output() onStrengthChanged: EventEmitter<number> = new EventEmitter();
+
   // Customize the text
   // Reset Password Tab
   @Input() resetPasswordTabText = 'Reset e-mail address to password';
@@ -127,6 +140,7 @@ export class AuthComponent implements OnInit, OnChanges, OnDestroy {
 
   public ngOnInit(): void {
     this.config = Object.assign(defaultAuthFirebaseUIConfig, this.config);
+    this.onStrengthChanged = this.passwordStrength.onStrengthChanged;
 
     if (isPlatformBrowser(this.platformId)) {
       this.onErrorSubscription = this.onError.subscribe(() => this.authenticationError = true);
@@ -154,7 +168,7 @@ export class AuthComponent implements OnInit, OnChanges, OnDestroy {
     this.selectedTabChange.emit(event);
   }
 
-  get color(): string {
+  get color(): string | ThemePalette {
     return this.authenticationError ? 'warn' : 'primary';
   }