fix(password): make sure min-max input parameters are respected #297

Also add new min/max global configuration parameters for name and password.

Also merge default configuration and user provided once and for all in #forRoot() module method.

The goal is to avoid doing it in several places when configuration is needed.

.gitignore

@@ -15,6 +15,7 @@
 *.launch
 .settings/
 *.sublime-workspace
+.history/
 
 # IDE - VSCode
 .vscode/*

package.json

@@ -63,7 +63,8 @@
     "@angular/forms": "^8.1.2",
     "@angular/material": "^8.1.1",
     "@angular/router": "^8.1.2",
-    "firebase": "^6.3.1"
+    "firebase": "^6.3.1",
+    "lodash": "^4.17.15"
   },
   "devDependencies": {
     "@angular-devkit/core": "^8.1.2",
@@ -113,7 +114,6 @@
     "jest": "^24.8.0",
     "jest-cli": "^24.8.0",
     "jest-preset-angular": "^6.0.2",
-    "lodash": "^4.17.15",
     "node-sass": "^4.12.0",
     "postcss": "^7.0.17",
     "postcss-strip-inline-comments": "0.1.5",

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

@@ -50,9 +50,7 @@
                    placeholder="Name"
                    [formControl]="updateNameFormControl">
             <mat-icon matSuffix>person</mat-icon>
-            <mat-hint align="end" aria-live="polite">
-              {{updateNameFormControl.value?.length}} / 25
-            </mat-hint>
+            <mat-hint align="end" aria-live="polite"> {{ updateNameFormControl.value?.length }} / {{ config.nameMaxLength }} </mat-hint>
             <mat-error *ngIf="updateNameFormControl.hasError('required')">
               Name is required
             </mat-error>

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

@@ -10,7 +10,8 @@ import {AngularFirestore} from '@angular/fire/firestore';
 import {AngularFireAuthStub, FirestoreStub} from '../../tests/helper';
 import {AngularFireAuth} from '@angular/fire/auth';
 import {UserComponent} from './user.component';
-import {NgxAuthFirebaseUIConfigToken} from '../../ngx-auth-firebase-u-i.module';
+import {NgxAuthFirebaseUIConfigToken, UserProvidedConfigToken} from '../../ngx-auth-firebase-u-i.module';
+import {ngxAuthFirebaseUIConfigFactory} from '../../interfaces/config.interface';
 import {AuthProcessService} from '../../services/auth-process.service';
 import {FirestoreSyncService} from '../../services/firestore-sync.service';
 
@@ -33,12 +34,13 @@ describe('UserComponent', () => {
       ],
       providers: [
         HttpClientTestingModule,
-        AuthProcessService,
         FirestoreSyncService,
         AngularFireModule,
         {provide: AngularFirestore, useValue: FirestoreStub},
         {provide: AngularFireAuth, useValue: AngularFireAuthStub},
-        {provide: NgxAuthFirebaseUIConfigToken, useValue: NgxAuthFirebaseUIConfigToken}
+        {provide: UserProvidedConfigToken, useValue: {}},
+        {provide: NgxAuthFirebaseUIConfigToken, useFactory: ngxAuthFirebaseUIConfigFactory, deps: [UserProvidedConfigToken]},
+        AuthProcessService
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })

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

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Inject, Input, Output} from '@angular/core';
+import {Component, EventEmitter, Inject, Input, Output, forwardRef} from '@angular/core';
 import {AngularFireAuth} from '@angular/fire/auth';
 import {MatFormFieldAppearance, MatSnackBar} from '@angular/material';
 import {AuthProcessService} from '../../services/auth-process.service';
@@ -45,23 +45,23 @@ export class UserComponent {
   updatePhoneNumberFormControl: FormControl;
   updatePasswordFormControl: FormControl;
 
-  constructor(@Inject(NgxAuthFirebaseUIConfigToken)
-              public config: NgxAuthFirebaseUIConfig,
-              public auth: AngularFireAuth,
-              public authProcess: AuthProcessService,
-              private _fireStoreService: FirestoreSyncService,
-              private snackBar: MatSnackBar) {
-  }
+  constructor(
+    public auth: AngularFireAuth,
+    public authProcess: AuthProcessService,
+    private _fireStoreService: FirestoreSyncService,
+    private snackBar: MatSnackBar,
+    @Inject(forwardRef(() => NgxAuthFirebaseUIConfigToken)) public config: NgxAuthFirebaseUIConfig
+  ) { }
 
   protected initUpdateFormGroup() {
     const currentUser: User = this.auth.auth.currentUser;
     this.updateFormGroup = new FormGroup({
       name: this.updateNameFormControl = new FormControl(
-        {value: currentUser.displayName, disabled: this.editMode},
+        { value: currentUser.displayName, disabled: this.editMode },
         [
           Validators.required,
-          Validators.minLength(2),
-          Validators.maxLength(25),
+          Validators.minLength(this.config.nameMinLength),
+          Validators.maxLength(this.config.nameMaxLength)
         ]
       ),
 
@@ -104,18 +104,18 @@ export class UserComponent {
       try {
         if (this.updateNameFormControl.dirty) {
           await user.updateProfile({displayName: this.updateNameFormControl.value, photoURL: null});
-          snackBarMsg.push(`your name has been update to ${user.displayName}`);
+          snackBarMsg.push(`your name has been updated to ${user.displayName}`);
         }
 
         if (this.updateEmailFormControl.dirty) {
           await user.updateEmail(this.updateEmailFormControl.value);
-          snackBarMsg.push(`your email has been update to ${user.email}`);
+          snackBarMsg.push(`your email has been updated to ${user.email}`);
         }
 
         if (this.updatePhoneNumberFormControl.dirty) {
           await user.updatePhoneNumber(this.updatePhoneNumberFormControl.value);
           console.log('phone number = ', this.updatePhoneNumberFormControl.value);
-          snackBarMsg.push(`your phone number has been update to ${user.phoneNumber}`);
+          snackBarMsg.push(`your phone number has been updated to ${user.phoneNumber}`);
         }
 
         if (this.config.enableFirestoreSync) {