diff --git a/.gitignore b/.gitignore index 85f0d90c..4e56c0da 100644 --- a/.gitignore +++ b/.gitignore @@ -15,6 +15,7 @@ *.launch .settings/ *.sublime-workspace +.history/ # IDE - VSCode .vscode/* diff --git a/package-lock.json b/package-lock.json index be3b4e6a..5e2b840b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "ngx-auth-firebaseui", - "version": "3.2.4", + "version": "3.2.6", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -331,45 +331,45 @@ } }, "@babel/core": { - "version": "7.4.5", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.4.5.tgz", - "integrity": "sha512-OvjIh6aqXtlsA8ujtGKfC7LYWksYSX8yQcM8Ay3LuvVeQ63lcOKgoZWVqcpFwkd29aYU9rVx7jxhfhiEDV9MZA==", + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.5.5.tgz", + "integrity": "sha512-i4qoSr2KTtce0DmkuuQBV4AuQgGPUcPXMr9L5MyYAtk06z068lQ10a4O009fe5OB/DfNV+h+qqT7ddNV8UnRjg==", "dev": true, "requires": { - "@babel/code-frame": "^7.0.0", - "@babel/generator": "^7.4.4", - "@babel/helpers": "^7.4.4", - "@babel/parser": "^7.4.5", + "@babel/code-frame": "^7.5.5", + "@babel/generator": "^7.5.5", + "@babel/helpers": "^7.5.5", + "@babel/parser": "^7.5.5", "@babel/template": "^7.4.4", - "@babel/traverse": "^7.4.5", - "@babel/types": "^7.4.4", + "@babel/traverse": "^7.5.5", + "@babel/types": "^7.5.5", "convert-source-map": "^1.1.0", "debug": "^4.1.0", "json5": "^2.1.0", - "lodash": "^4.17.11", + "lodash": "^4.17.13", "resolve": "^1.3.2", "semver": "^5.4.1", "source-map": "^0.5.0" }, "dependencies": { "@babel/code-frame": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz", - "integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==", + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz", + "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==", "dev": true, "requires": { "@babel/highlight": "^7.0.0" } }, "@babel/generator": { - "version": "7.4.4", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.4.4.tgz", - "integrity": "sha512-53UOLK6TVNqKxf7RUh8NE851EHRxOOeVXKbK2bivdb+iziMyk03Sr4eaE9OELCbyZAAafAKPDwF2TPUES5QbxQ==", + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.5.5.tgz", + "integrity": "sha512-ETI/4vyTSxTzGnU2c49XHv2zhExkv9JHLTwDAFz85kmcwuShvYG2H08FwgIguQf4JC75CBnXAUM5PqeF4fj0nQ==", "dev": true, "requires": { - "@babel/types": "^7.4.4", + "@babel/types": "^7.5.5", "jsesc": "^2.5.1", - "lodash": "^4.17.11", + "lodash": "^4.17.13", "source-map": "^0.5.0", "trim-right": "^1.0.1" } @@ -404,9 +404,9 @@ } }, "@babel/highlight": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0.tgz", - "integrity": "sha512-UFMC4ZeFC48Tpvj7C8UgLvtkaUuovQX+5xNWrsIoMG8o2z+XFKjKaN9iVmS84dPwVN00W4wPmqvYoZF3EGAsfw==", + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.5.0.tgz", + "integrity": "sha512-7dV4eu9gBxoM0dAnj/BCFDW9LFU0zvTrkq0ugM7pnHEgguOEeOz1so2ZghEdzviYzQEED0r4EAgpsBChKy1TRQ==", "dev": true, "requires": { "chalk": "^2.0.0", @@ -415,9 +415,9 @@ } }, "@babel/parser": { - "version": "7.4.5", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.4.5.tgz", - "integrity": "sha512-9mUqkL1FF5T7f0WDFfAoDdiMVPWsdD1gZYzSnaXsxUCUqzuch/8of9G3VUSNiZmMBoRxT3neyVsqeiL/ZPcjew==", + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.5.5.tgz", + "integrity": "sha512-E5BN68cqR7dhKan1SfqgPGhQ178bkVKpXTPEXnFJBrEt8/DKRZlybmy+IgYLTeN7tp1R5Ccmbm2rBk17sHYU3g==", "dev": true }, "@babel/template": { @@ -432,30 +432,30 @@ } }, "@babel/traverse": { - "version": "7.4.5", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.4.5.tgz", - "integrity": "sha512-Vc+qjynwkjRmIFGxy0KYoPj4FdVDxLej89kMHFsWScq999uX+pwcX4v9mWRjW0KcAYTPAuVQl2LKP1wEVLsp+A==", + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.5.5.tgz", + "integrity": "sha512-MqB0782whsfffYfSjH4TM+LMjrJnhCNEDMDIjeTpl+ASaUvxcjoiVCo/sM1GhS1pHOXYfWVCYneLjMckuUxDaQ==", "dev": true, "requires": { - "@babel/code-frame": "^7.0.0", - "@babel/generator": "^7.4.4", + "@babel/code-frame": "^7.5.5", + "@babel/generator": "^7.5.5", "@babel/helper-function-name": "^7.1.0", "@babel/helper-split-export-declaration": "^7.4.4", - "@babel/parser": "^7.4.5", - "@babel/types": "^7.4.4", + "@babel/parser": "^7.5.5", + "@babel/types": "^7.5.5", "debug": "^4.1.0", "globals": "^11.1.0", - "lodash": "^4.17.11" + "lodash": "^4.17.13" } }, "@babel/types": { - "version": "7.4.4", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.4.4.tgz", - "integrity": "sha512-dOllgYdnEFOebhkKCjzSVFqw/PmmB8pH6RGOWkY4GsboQNd47b1fBThBSwlHAq9alF9vc1M3+6oqR47R50L0tQ==", + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.5.5.tgz", + "integrity": "sha512-s63F9nJioLqOlW3UkyMd+BYhXt44YuaFm/VV0VwuteqjYwRrObkU7ra9pY4wAJR3oXi8hJrMcrcJdO/HH33vtw==", "dev": true, "requires": { "esutils": "^2.0.2", - "lodash": "^4.17.11", + "lodash": "^4.17.13", "to-fast-properties": "^2.0.0" } }, @@ -659,34 +659,34 @@ } }, "@babel/helpers": { - "version": "7.4.4", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.4.4.tgz", - "integrity": "sha512-igczbR/0SeuPR8RFfC7tGrbdTbFL3QTvH6D+Z6zNxnTe//GyqmtHmDkzrqDmyZ3eSwPqB/LhyKoU5DXsp+Vp2A==", + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.5.5.tgz", + "integrity": "sha512-nRq2BUhxZFnfEn/ciJuhklHvFOqjJUD5wpx+1bxUF2axL9C+v4DE/dmp5sT2dKnpOs4orZWzpAZqlCy8QqE/7g==", "dev": true, "requires": { "@babel/template": "^7.4.4", - "@babel/traverse": "^7.4.4", - "@babel/types": "^7.4.4" + "@babel/traverse": "^7.5.5", + "@babel/types": "^7.5.5" }, "dependencies": { "@babel/code-frame": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz", - "integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==", + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz", + "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==", "dev": true, "requires": { "@babel/highlight": "^7.0.0" } }, "@babel/generator": { - "version": "7.4.4", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.4.4.tgz", - "integrity": "sha512-53UOLK6TVNqKxf7RUh8NE851EHRxOOeVXKbK2bivdb+iziMyk03Sr4eaE9OELCbyZAAafAKPDwF2TPUES5QbxQ==", + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.5.5.tgz", + "integrity": "sha512-ETI/4vyTSxTzGnU2c49XHv2zhExkv9JHLTwDAFz85kmcwuShvYG2H08FwgIguQf4JC75CBnXAUM5PqeF4fj0nQ==", "dev": true, "requires": { - "@babel/types": "^7.4.4", + "@babel/types": "^7.5.5", "jsesc": "^2.5.1", - "lodash": "^4.17.11", + "lodash": "^4.17.13", "source-map": "^0.5.0", "trim-right": "^1.0.1" } @@ -721,9 +721,9 @@ } }, "@babel/highlight": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0.tgz", - "integrity": "sha512-UFMC4ZeFC48Tpvj7C8UgLvtkaUuovQX+5xNWrsIoMG8o2z+XFKjKaN9iVmS84dPwVN00W4wPmqvYoZF3EGAsfw==", + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.5.0.tgz", + "integrity": "sha512-7dV4eu9gBxoM0dAnj/BCFDW9LFU0zvTrkq0ugM7pnHEgguOEeOz1so2ZghEdzviYzQEED0r4EAgpsBChKy1TRQ==", "dev": true, "requires": { "chalk": "^2.0.0", @@ -732,9 +732,9 @@ } }, "@babel/parser": { - "version": "7.4.5", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.4.5.tgz", - "integrity": "sha512-9mUqkL1FF5T7f0WDFfAoDdiMVPWsdD1gZYzSnaXsxUCUqzuch/8of9G3VUSNiZmMBoRxT3neyVsqeiL/ZPcjew==", + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.5.5.tgz", + "integrity": "sha512-E5BN68cqR7dhKan1SfqgPGhQ178bkVKpXTPEXnFJBrEt8/DKRZlybmy+IgYLTeN7tp1R5Ccmbm2rBk17sHYU3g==", "dev": true }, "@babel/template": { @@ -749,30 +749,30 @@ } }, "@babel/traverse": { - "version": "7.4.5", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.4.5.tgz", - "integrity": "sha512-Vc+qjynwkjRmIFGxy0KYoPj4FdVDxLej89kMHFsWScq999uX+pwcX4v9mWRjW0KcAYTPAuVQl2LKP1wEVLsp+A==", + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.5.5.tgz", + "integrity": "sha512-MqB0782whsfffYfSjH4TM+LMjrJnhCNEDMDIjeTpl+ASaUvxcjoiVCo/sM1GhS1pHOXYfWVCYneLjMckuUxDaQ==", "dev": true, "requires": { - "@babel/code-frame": "^7.0.0", - "@babel/generator": "^7.4.4", + "@babel/code-frame": "^7.5.5", + "@babel/generator": "^7.5.5", "@babel/helper-function-name": "^7.1.0", "@babel/helper-split-export-declaration": "^7.4.4", - "@babel/parser": "^7.4.5", - "@babel/types": "^7.4.4", + "@babel/parser": "^7.5.5", + "@babel/types": "^7.5.5", "debug": "^4.1.0", "globals": "^11.1.0", - "lodash": "^4.17.11" + "lodash": "^4.17.13" } }, "@babel/types": { - "version": "7.4.4", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.4.4.tgz", - "integrity": "sha512-dOllgYdnEFOebhkKCjzSVFqw/PmmB8pH6RGOWkY4GsboQNd47b1fBThBSwlHAq9alF9vc1M3+6oqR47R50L0tQ==", + "version": "7.5.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.5.5.tgz", + "integrity": "sha512-s63F9nJioLqOlW3UkyMd+BYhXt44YuaFm/VV0VwuteqjYwRrObkU7ra9pY4wAJR3oXi8hJrMcrcJdO/HH33vtw==", "dev": true, "requires": { "esutils": "^2.0.2", - "lodash": "^4.17.11", + "lodash": "^4.17.13", "to-fast-properties": "^2.0.0" } }, @@ -13927,8 +13927,7 @@ "lodash": { "version": "4.17.15", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", - "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", - "dev": true + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" }, "lodash._basecopy": { "version": "3.0.1", diff --git a/package.json b/package.json index adc92282..fd5260e1 100644 --- a/package.json +++ b/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", diff --git a/src/module/components/ngx-auth-firebaseui-user/user.component.html b/src/module/components/ngx-auth-firebaseui-user/user.component.html index 4bd2b938..0040687d 100644 --- a/src/module/components/ngx-auth-firebaseui-user/user.component.html +++ b/src/module/components/ngx-auth-firebaseui-user/user.component.html @@ -50,9 +50,7 @@ placeholder="Name" [formControl]="updateNameFormControl"> person - - {{updateNameFormControl.value?.length}} / 25 - + {{ updateNameFormControl.value?.length }} / {{ config.nameMaxLength }} Name is required diff --git a/src/module/components/ngx-auth-firebaseui-user/user.component.spec.ts b/src/module/components/ngx-auth-firebaseui-user/user.component.spec.ts index 97bd5fa7..f4316bb9 100644 --- a/src/module/components/ngx-auth-firebaseui-user/user.component.spec.ts +++ b/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] }) diff --git a/src/module/components/ngx-auth-firebaseui-user/user.component.ts b/src/module/components/ngx-auth-firebaseui-user/user.component.ts index d2212edd..7313a657 100644 --- a/src/module/components/ngx-auth-firebaseui-user/user.component.ts +++ b/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) { diff --git a/src/module/components/ngx-auth-firebaseui/auth.component.html b/src/module/components/ngx-auth-firebaseui/auth.component.html index e9dbbbbb..a1b7c2cb 100755 --- a/src/module/components/ngx-auth-firebaseui/auth.component.html +++ b/src/module/components/ngx-auth-firebaseui/auth.component.html @@ -27,24 +27,17 @@ {{passwordText}} - + lock - - {{signInFormGroup.value.password.length}} / 25 - + {{ signInFormGroup.value.password.length }} / {{ max }} {{passwordErrorRequiredText}} - The password must be at least 6 characters long. + The password must be at least {{ min }} characters long. - The password must not exceed 25 characters + The password must not exceed {{ max }} characters @@ -90,15 +83,15 @@ {{nameText}} - + person - - {{signUpFormGroup.value.name?.length}} / {{passwordStrength.max}} - + {{ signUpFormGroup.value.name?.length }} / {{ config.nameMaxLength }} {{nameErrorRequiredText}} @@ -130,11 +123,15 @@
{{passwordText}} - + lock diff --git a/src/module/components/ngx-auth-firebaseui/auth.component.spec.ts b/src/module/components/ngx-auth-firebaseui/auth.component.spec.ts index 0449f821..40f82e9a 100644 --- a/src/module/components/ngx-auth-firebaseui/auth.component.spec.ts +++ b/src/module/components/ngx-auth-firebaseui/auth.component.spec.ts @@ -25,7 +25,8 @@ import {MatPasswordStrengthComponent, MatPasswordStrengthModule} from '@angular- import {AuthComponent} from './auth.component'; import {AuthProcessService} from '../../services/auth-process.service'; import {FirestoreSyncService} from '../../services/firestore-sync.service'; -import {NgxAuthFirebaseUIConfigToken} from '../../../module/ngx-auth-firebase-u-i.module'; +import {NgxAuthFirebaseUIConfigToken, UserProvidedConfigToken} from '../../../module/ngx-auth-firebase-u-i.module'; +import {ngxAuthFirebaseUIConfigFactory} from '../../interfaces/config.interface'; import {EmailConfirmationComponent} from '../email-confirmation/email-confirmation.component'; import {AngularFireAuthStub, FirestoreStub} from '../../tests/helper'; @@ -66,12 +67,13 @@ describe('AuthComponent', function () { ], 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 ], declarations: [ EmailConfirmationComponent, diff --git a/src/module/components/ngx-auth-firebaseui/auth.component.ts b/src/module/components/ngx-auth-firebaseui/auth.component.ts index b9d9bc5b..6ca85eb9 100644 --- a/src/module/components/ngx-auth-firebaseui/auth.component.ts +++ b/src/module/components/ngx-auth-firebaseui/auth.component.ts @@ -10,7 +10,8 @@ import { Output, PLATFORM_ID, SimpleChanges, - ViewChild + ViewChild, + forwardRef } from '@angular/core'; import {AbstractControl, FormControl, FormGroup, Validators} from '@angular/forms'; import {MatDialog, MatDialogRef, MatFormFieldAppearance, MatTabChangeEvent, MatTabGroup, ThemePalette} from '@angular/material'; @@ -65,8 +66,8 @@ export class AuthComponent implements OnInit, AfterViewInit, OnChanges, OnDestro @Input() enableUpperCaseLetterRule = true; @Input() enableDigitRule = true; @Input() enableSpecialCharRule = true; - @Input() min = 8; - @Input() max = 30; + @Input() min: number; + @Input() max: number; @Input() customValidator: RegExp; @Output() onStrengthChanged: EventEmitter = new EventEmitter(); @@ -128,19 +129,18 @@ export class AuthComponent implements OnInit, AfterViewInit, OnChanges, OnDestro sigUpPasswordConfirmationFormControl: AbstractControl; resetPasswordEmailFormControl: AbstractControl; - constructor(@Inject(PLATFORM_ID) private platformId: Object, - @Inject(NgxAuthFirebaseUIConfigToken) private config: NgxAuthFirebaseUIConfig, - public auth: AngularFireAuth, - public authProcess: AuthProcessService, - public dialog: MatDialog) { - + constructor( + @Inject(PLATFORM_ID) private platformId: Object, + public auth: AngularFireAuth, + public authProcess: AuthProcessService, + public dialog: MatDialog, + @Inject(forwardRef(() => NgxAuthFirebaseUIConfigToken)) public config: NgxAuthFirebaseUIConfig + ) { this.onSuccess = authProcess.onSuccessEmitter; this.onError = authProcess.onErrorEmitter; } public ngOnInit(): void { - this.config = Object.assign(defaultAuthFirebaseUIConfig, this.config); - if (isPlatformBrowser(this.platformId)) { this.onErrorSubscription = this.onError.subscribe(() => this.authenticationError = true); } @@ -163,6 +163,12 @@ export class AuthComponent implements OnInit, AfterViewInit, OnChanges, OnDestro if (changes.messageOnAuthSuccess || changes.messageOnAuthError) { this.updateAuthSnackbarMessages(); } + if (changes.min) { + this.min = this.min != null ? Math.max(this.min, this.config.passwordMinLength) : this.config.passwordMinLength; + } + if (changes.max) { + this.max = this.max != null ? Math.min(this.max, this.config.passwordMaxLength) : this.config.passwordMaxLength; + } } ngOnDestroy(): void { @@ -244,8 +250,8 @@ export class AuthComponent implements OnInit, AfterViewInit, OnChanges, OnDestro this.signInFormGroup.registerControl('password', this.sigInPasswordFormControl = new FormControl('', [ Validators.required, - Validators.minLength(6), - Validators.maxLength(25), + Validators.minLength(this.min), + Validators.maxLength(this.max) ])); } @@ -254,8 +260,8 @@ export class AuthComponent implements OnInit, AfterViewInit, OnChanges, OnDestro name: this.sigUpNameFormControl = new FormControl('', [ Validators.required, - Validators.minLength(2), - Validators.maxLength(30), + Validators.minLength(this.config.nameMinLength), + Validators.maxLength(this.config.nameMaxLength) ]), email: this.sigUpEmailFormControl = new FormControl('', [ diff --git a/src/module/interfaces/config.interface.ts b/src/module/interfaces/config.interface.ts index b5044faa..c16195de 100644 --- a/src/module/interfaces/config.interface.ts +++ b/src/module/interfaces/config.interface.ts @@ -11,11 +11,22 @@ export interface NgxAuthFirebaseUIConfig { // ppUrl?: string, // privacy policy url // authProviders?: Array, // languageCode?: string, // todo: 28.3.18 - authGuardFallbackURL?: string, - authGuardLoggedInURL?: string, - enableFirestoreSync?: boolean, - toastMessageOnAuthSuccess?: boolean, - toastMessageOnAuthError?: boolean + authGuardFallbackURL?: string; + authGuardLoggedInURL?: string; + enableFirestoreSync?: boolean; + + // Toasts + toastMessageOnAuthSuccess?: boolean; + toastMessageOnAuthError?: boolean; + + // Password length min/max in forms independently of each componenet min/max. + // `min/max` input parameters in components should be within this range. + passwordMaxLength?: number; + passwordMinLength?: number; + + // Same as password but for the name + nameMaxLength?: number; + nameMinLength?: number; } export const defaultAuthFirebaseUIConfig: NgxAuthFirebaseUIConfig = { @@ -25,6 +36,17 @@ export const defaultAuthFirebaseUIConfig: NgxAuthFirebaseUIConfig = { authGuardLoggedInURL: '/', enableFirestoreSync: true, toastMessageOnAuthSuccess: true, - toastMessageOnAuthError: true + toastMessageOnAuthError: true, + // Password length min/max in forms independently of each componenet min/max. + // `min/max` input parameters in components should be within this range. + passwordMaxLength: 60, + passwordMinLength: 8, + // Same as password but for the name + nameMaxLength: 50, + nameMinLength: 2 }; +// Merge default config with user provided config. +export function ngxAuthFirebaseUIConfigFactory(userProvidedConfig: NgxAuthFirebaseUIConfig): NgxAuthFirebaseUIConfig { + return Object.assign({}, defaultAuthFirebaseUIConfig, userProvidedConfig); +} diff --git a/src/module/ngx-auth-firebase-u-i.module.ts b/src/module/ngx-auth-firebase-u-i.module.ts index 65ec0148..462597ae 100755 --- a/src/module/ngx-auth-firebase-u-i.module.ts +++ b/src/module/ngx-auth-firebase-u-i.module.ts @@ -1,12 +1,12 @@ import {CommonModule} from '@angular/common'; -import {Inject, InjectionToken, ModuleWithProviders, NgModule} from '@angular/core'; +import {InjectionToken, ModuleWithProviders, NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {HttpClientModule} from '@angular/common/http'; import {AuthComponent} from './components/ngx-auth-firebaseui/auth.component'; import {UserComponent} from './components/ngx-auth-firebaseui-user/user.component'; import {AuthProvidersComponent} from './components/providers/auth.providers.component'; import {EmailConfirmationComponent} from './components/email-confirmation/email-confirmation.component'; -import {defaultAuthFirebaseUIConfig, NgxAuthFirebaseUIConfig} from './interfaces/config.interface'; +import {NgxAuthFirebaseUIConfig} from './interfaces/config.interface'; import {FirestoreSyncService} from './services/firestore-sync.service'; import {AuthProcessService} from './services/auth-process.service'; import {FirebaseAppConfig, FirebaseNameOrConfigToken, FirebaseOptionsToken} from '@angular/fire'; @@ -32,6 +32,7 @@ import {LegalityDialogComponent} from './components/legality-dialog/legality-dia import {LoggedInGuard} from './guards/logged-in.guard'; import {NgxAuthFirebaseuiAvatarComponent} from './components/ngx-auth-firebaseui-avatar/ngx-auth-firebaseui-avatar.component'; import {RouterModule} from '@angular/router'; +import {ngxAuthFirebaseUIConfigFactory} from './interfaces/config.interface'; // Export module's public API // components @@ -49,7 +50,12 @@ export {LoggedInGuard} from './guards/logged-in.guard'; // interfaces export {NgxAuthFirebaseUIConfig} from './interfaces/config.interface'; -export const NgxAuthFirebaseUIConfigToken = new InjectionToken('NgxAuthFirebaseUIConfig'); + + +// This token is the official token containing the final configuration; ie. the merge between default and user provided configurations +export const NgxAuthFirebaseUIConfigToken = new InjectionToken('NgxAuthFirebaseUIConfigToken'); +// This is an intermediate token containing only user-provided configuration +export const UserProvidedConfigToken = new InjectionToken('UserProvidedConfigToken'); @NgModule({ imports: [ @@ -107,12 +113,12 @@ export const NgxAuthFirebaseUIConfigToken = new InjectionToken string, - config: NgxAuthFirebaseUIConfig = defaultAuthFirebaseUIConfig): ModuleWithProviders { + static forRoot( + configFactory: FirebaseAppConfig, + appNameFactory?: () => string, + config: NgxAuthFirebaseUIConfig = {} + ): ModuleWithProviders { return { ngModule: NgxAuthFirebaseUIModule, providers: @@ -125,19 +131,16 @@ export class NgxAuthFirebaseUIModule { provide: FirebaseNameOrConfigToken, useFactory: appNameFactory }, + { provide: UserProvidedConfigToken, useValue: config }, { provide: NgxAuthFirebaseUIConfigToken, - useValue: config + useFactory: ngxAuthFirebaseUIConfigFactory, + deps: [UserProvidedConfigToken] }, AuthProcessService, FirestoreSyncService, LoggedInGuard - ], + ] }; } - - constructor(@Inject(NgxAuthFirebaseUIConfigToken) - public config: NgxAuthFirebaseUIConfig) { - this.config = Object.assign(defaultAuthFirebaseUIConfig, this.config); - } } diff --git a/src/module/services/auth-process.service.ts b/src/module/services/auth-process.service.ts index 88652237..842d893d 100755 --- a/src/module/services/auth-process.service.ts +++ b/src/module/services/auth-process.service.ts @@ -1,8 +1,8 @@ -import {EventEmitter, Inject, Injectable} from '@angular/core'; +import {EventEmitter, Inject, Injectable, forwardRef} from '@angular/core'; import {MatSnackBar} from '@angular/material'; import {AngularFireAuth} from '@angular/fire/auth'; import {ICredentials, ISignInProcess, ISignUpProcess} from '../interfaces/main.interface'; -import {defaultAuthFirebaseUIConfig, NgxAuthFirebaseUIConfig} from '../interfaces/config.interface'; +import {NgxAuthFirebaseUIConfig} from '../interfaces/config.interface'; import {FirestoreSyncService} from './firestore-sync.service'; import {Accounts} from '../enums'; import {firebase} from '@firebase/app'; @@ -36,7 +36,6 @@ export enum AuthProvider { @Injectable() export class AuthProcessService implements ISignInProcess, ISignUpProcess { - onSuccessEmitter: EventEmitter = new EventEmitter(); onErrorEmitter: EventEmitter = new EventEmitter(); @@ -47,13 +46,12 @@ export class AuthProcessService implements ISignInProcess, ISignUpProcess { messageOnAuthSuccess: string; messageOnAuthError: string; - constructor(@Inject(NgxAuthFirebaseUIConfigToken) - public config: NgxAuthFirebaseUIConfig, - public afa: AngularFireAuth, - private _snackBar: MatSnackBar, - private _fireStoreService: FirestoreSyncService) { - this.config = Object.assign(defaultAuthFirebaseUIConfig, this.config); - } + constructor( + public afa: AngularFireAuth, + private _snackBar: MatSnackBar, + private _fireStoreService: FirestoreSyncService, + @Inject(forwardRef(() => NgxAuthFirebaseUIConfigToken)) public config: NgxAuthFirebaseUIConfig + ) {} /** * Reset the password of the ngx-auth-firebaseui-user via email