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

Author: AnthonyNahas

demo/src/app/examples/examples-routing.module.ts

@@ -10,6 +10,7 @@ import {MessagesComponent} from './messages/messages.component';
 import {GoBackURLComponent} from './go-back-url/go-back-url.component';
 import {RegistrationComponent} from './registration/registration.component';
 import {ResetPasswordComponent} from './reset-psasword/reset-password.component';
+import {PasswordStrengthComponent} from './password-strength/password-strength.component';
 
 @NgModule({
   imports: [RouterModule.forChild([
@@ -23,6 +24,7 @@ import {ResetPasswordComponent} from './reset-psasword/reset-password.component'
     {path: 'tos', component: TosComponent},
     {path: 'tabIndex', component: TabIndexComponent},
     {path: 'gobackurl', component: GoBackURLComponent},
+    {path: 'password-strength', component: PasswordStrengthComponent},
   ])],
   exports: [RouterModule]
 })

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

@@ -140,6 +140,22 @@ <h1>Examples</h1>
           <img fxHide.gt-lg src="assets/logo.svg" mat-card-md-image>
         </mat-card-title-group>
       </mat-card>
+
+      <mat-card matRipple routerLink="password-strength">
+        <div fxHide
+             fxShow.gt-lg
+             fxLayout="column"
+             fxLayoutAlign="center center">
+          <img src="assets/logo.svg" mat-card-md-image>
+        </div>
+        <mat-card-title-group>
+          <mat-card-title>Explore the password strength api</mat-card-title>
+          <mat-card-subtitle>
+            Configure the password strength in the register form on your own
+          </mat-card-subtitle>
+          <img fxHide.gt-lg src="assets/logo.svg" mat-card-md-image>
+        </mat-card-title-group>
+      </mat-card>
     </div>
   </div>
 </section>

demo/src/app/examples/examples.module.ts

@@ -13,6 +13,7 @@ import {MessagesComponent} from './messages/messages.component';
 import { GoBackURLComponent } from './go-back-url/go-back-url.component';
 import { RegistrationComponent } from './registration/registration.component';
 import { ResetPasswordComponent } from './reset-psasword/reset-password.component';
+import {PasswordStrengthComponent} from './password-strength/password-strength.component';
 
 @NgModule({
   imports: [
@@ -32,7 +33,8 @@ import { ResetPasswordComponent } from './reset-psasword/reset-password.componen
       MessagesComponent,
       GoBackURLComponent,
       RegistrationComponent,
-      ResetPasswordComponent
+      ResetPasswordComponent,
+      PasswordStrengthComponent
     ]
 })
 export class ExamplesModule {

demo/src/app/examples/password-strength/password-strength.component.html

@@ -0,0 +1,45 @@
+<div class="jumbotron jumbotron-fluid">
+  <div class="container">
+    <h1>Password Strength API - Config</h1>
+  </div>
+</div>
+
+
+<div class="container">
+
+  <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
+
+    <mat-card fxFlexAlign.gt-xs="center">
+      <mat-card-subtitle>
+        <div fxLayout="row" fxLayoutAlign="space-between">
+          <pre><code [highlight]="example"></code></pre>
+          <button mat-icon-button
+                  ngxClipboard
+                  [cbContent]="example"
+                  matTooltip="copy"
+                  (click)="showCopyMessage(example)">
+            <mat-icon aria-label="copy content" class="mat-18">content_copy</mat-icon>
+          </button>
+        </div>
+      </mat-card-subtitle>
+      <mat-card-content>
+        <ngx-auth-firebaseui tabIndex="1"
+                             [min]="8"
+                             [max]="15"
+                             [enableLengthRule]="true"
+                             [enableLowerCaseLetterRule]="true"
+                             [enableUpperCaseLetterRule]="true"
+                             [enableDigitRule]="true"
+                             [enableSpecialCharRule]="true"
+                             (onStrengthChanged)="onStrengthChanged($event)">
+        </ngx-auth-firebaseui>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</div>
+
+
+
+
+
+

demo/src/app/examples/password-strength/password-strength.component.scss

@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {ExampleBaseComponent} from '../example.abstract';
+
+@Component({
+  selector: 'app-password-strength',
+  templateUrl: 'password-strength.component.html',
+  styleUrls: ['password-strength.component.scss']
+})
+export class PasswordStrengthComponent extends ExampleBaseComponent {
+
+  example = `<ngx-auth-firebaseui tabIndex="1"
+                             [min]="8"
+                             [max]="15"
+                             [enableLengthRule]="true"
+                             [enableLowerCaseLetterRule]="true"
+                             [enableUpperCaseLetterRule]="true"
+                             [enableDigitRule]="true"
+                             [enableSpecialCharRule]="true"
+                             (onStrengthChanged)="onStrengthChanged($event)">
+        </ngx-auth-firebaseui>`;
+
+  constructor(public snackBar: MatSnackBar) {
+    super(snackBar);
+  }
+
+  onStrengthChanged($event: number) {
+    console.log('on strength changed: ', $event);
+  }
+
+}

demo/src/app/examples/password-strength/password-strength.component.ts

@@ -91,8 +91,8 @@
                 <!--labels will work only with @angular/material@6.2.0 -->
                 <mat-label>{{nameText}}</mat-label>
                 <input matInput
-                       [minlength]="passwordStrength.min.toString()"
-                       [maxlength]="passwordStrength.max.toString()"
+                       [minlength]="2"
+                       [maxlength]="20"
                        [formControl]="sigUpNameFormControl"
                        required>
                 <mat-icon matSuffix [color]="color">person</mat-icon>
@@ -140,18 +140,18 @@
                   <mat-icon matSuffix [color]="color">lock</mat-icon>
 
                   <mat-hint align="end" aria-live="polite">
-                    {{signUpFormGroup.value.password?.length}} / {{ passwordStrength.max }}
+                    {{signUpFormGroup.value.password?.length}} / {{ max }}
                   </mat-hint>
 
                   <mat-error *ngIf="sigUpPasswordFormControl.hasError('required')" class="cut-text">
                     {{passwordErrorRequiredText}}
                   </mat-error>
 
                   <mat-error *ngIf="sigUpPasswordFormControl.hasError('minlength')" class="cut-text">
-                    The password must be at least 6 characters long.
+                    The password must be at least {{min}} characters long.
                   </mat-error>
                   <mat-error *ngIf="sigUpPasswordFormControl.hasError('maxlength')" class="cut-text">
-                    The password can not be longer than 25 characters.
+                    The password can not be longer than {{max}} characters.
                   </mat-error>
 
                 </mat-form-field>

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

@@ -21,7 +21,7 @@ import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {AngularFireModule} from '@angular/fire';
 import {AngularFirestore} from '@angular/fire/firestore';
 import {AngularFireAuth} from '@angular/fire/auth';
-import {MatPasswordStrengthModule} from '@angular-material-extensions/password-strength';
+import {MatPasswordStrengthComponent, MatPasswordStrengthModule} from '@angular-material-extensions/password-strength';
 import {AuthComponent} from './auth.component';
 import {AuthProcessService} from '../../services/auth-process.service';
 import {FirestoreSyncService} from '../../services/firestore-sync.service';
@@ -81,6 +81,9 @@ describe('AuthComponent', function () {
     }).compileComponents().then(() => {
       fixture = TestBed.createComponent(AuthComponent);
       component = fixture.componentInstance;
+      component.passwordStrength =
+        TestBed.createComponent(MatPasswordStrengthComponent).componentInstance;
+
       testBedService = TestBed.get(AuthProcessService);
 
       // AuthService provided to the TestBed

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

@@ -1,4 +1,5 @@
 import {
+  AfterViewInit,
   Component,
   EventEmitter,
   Inject,
@@ -37,8 +38,7 @@ export const PHONE_NUMBER_REGEX = new RegExp(/^\+(?:[0-9] ?){6,14}[0-9]$/);
   templateUrl: 'auth.component.html',
   styleUrls: ['auth.component.scss']
 })
-
-export class AuthComponent implements OnInit, OnChanges, OnDestroy {
+export class AuthComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
 
   @ViewChild(MatTabGroup, {static: false}) matTabGroup: MatTabGroup;
   @ViewChild(MatPasswordStrengthComponent, {static: false}) passwordStrength: MatPasswordStrengthComponent;
@@ -55,6 +55,10 @@ export class AuthComponent implements OnInit, OnChanges, OnDestroy {
   @Input() messageOnAuthSuccess: string;
   @Input() messageOnAuthError: string;
 
+  @Output() onSuccess: any;
+  @Output() onError: any;
+  @Output() selectedTabChange: EventEmitter<MatTabChangeEvent> = new EventEmitter();
+
   // Password strength api
   @Input() enableLengthRule = true;
   @Input() enableLowerCaseLetterRule = true;
@@ -100,10 +104,6 @@ export class AuthComponent implements OnInit, OnChanges, OnDestroy {
   @Input() registerButtonText = 'Register';
   @Input() guestButtonText = 'continue as guest';
 
-  @Output() onSuccess: any;
-  @Output() onError: any;
-  @Output() selectedTabChange: EventEmitter<MatTabChangeEvent> = new EventEmitter();
-
   authProvider = AuthProvider;
   passwordResetWished: boolean;
 
@@ -140,7 +140,6 @@ 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);
@@ -152,6 +151,12 @@ export class AuthComponent implements OnInit, OnChanges, OnDestroy {
     this._initResetPasswordFormGroupBuilder();
   }
 
+  ngAfterViewInit(): void {
+    this.passwordStrength.onStrengthChanged.subscribe((strength: number) => {
+      this.onStrengthChanged.emit(strength);
+    });
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.messageOnAuthSuccess || changes.messageOnAuthError) {
       this.updateAuthSnackbarMessages();
@@ -258,8 +263,8 @@ export class AuthComponent implements OnInit, OnChanges, OnDestroy {
       password: this.sigUpPasswordFormControl = new FormControl('',
         [
           Validators.required,
-          Validators.minLength(6),
-          Validators.maxLength(25),
+          Validators.minLength(this.min),
+          Validators.maxLength(this.max),
         ])
     });
   }