ngx-auth-firebaseui-updated
Version:
From ngx-auth-firbaseui but updated to fix dependency issues with Angular 16. Open Source Library for Angular Web Apps to integrate a material user interface for firebase authentication
303 lines • 112 kB
JavaScript
import { isPlatformBrowser } from "@angular/common";
import { ChangeDetectionStrategy, Component, EventEmitter, forwardRef, Inject, Input, Output, PLATFORM_ID, ViewChild, } from "@angular/core";
import { UntypedFormControl, UntypedFormGroup, Validators, } from "@angular/forms";
// ANGULAR MATERIAL
import { MatLegacyTabGroup as MatTabGroup } from "@angular/material/legacy-tabs";
// Third PARTY
import { MatPasswordStrengthComponent } from "@angular-material-extensions/password-strength";
import { LegalityDialogComponent } from "..";
import { EMAIL_REGEX, } from '../../interfaces';
import { AuthProvider, } from "../../services/auth-process.service";
import { NgxAuthFirebaseuiAnimations } from "../../animations";
import { NgxAuthFirebaseUIConfigToken } from "../../tokens";
import * as i0 from "@angular/core";
import * as i1 from "@angular/fire/compat/auth";
import * as i2 from "../../services/auth-process.service";
import * as i3 from "@angular/material/legacy-dialog";
import * as i4 from "@angular/router";
import * as i5 from "@angular/common";
import * as i6 from "@angular/forms";
import * as i7 from "@angular/material/tabs";
import * as i8 from "@angular/material/card";
import * as i9 from "@angular/material/input";
import * as i10 from "@angular/material/form-field";
import * as i11 from "@angular/material/button";
import * as i12 from "@angular/material/icon";
import * as i13 from "@angular/material/divider";
import * as i14 from "@angular/material/progress-bar";
import * as i15 from "@angular-material-extensions/password-strength";
import * as i16 from "../providers/auth.providers.component";
import * as i17 from "../email-confirmation/email-confirmation.component";
export class AuthComponent {
constructor(
// eslint-disable-next-line @typescript-eslint/ban-types
platformId, config, auth, authProcess, dialog, activatedRoute, changeDetectorRef) {
this.platformId = platformId;
this.config = config;
this.auth = auth;
this.authProcess = authProcess;
this.dialog = dialog;
this.activatedRoute = activatedRoute;
this.changeDetectorRef = changeDetectorRef;
// google, facebook, twitter, github as array or all as one single string
this.providers = AuthProvider.ALL;
this.registrationEnabled = true;
this.resetPasswordEnabled = true;
this.guestEnabled = true;
this.selectedTabChange = new EventEmitter();
// Password strength api
this.enableLengthRule = true;
this.enableLowerCaseLetterRule = true;
this.enableUpperCaseLetterRule = true;
this.enableDigitRule = true;
this.enableSpecialCharRule = true;
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
this.onStrengthChanged = new EventEmitter();
this.signOutText = "Sign out";
// Customize the text
// Reset Password Tab
this.resetPasswordTabText = "Reset e-mail address to password";
this.resetPasswordInputText = "Reset e-mail address to password";
this.resetPasswordErrorRequiredText = "E-mail is required to reset the password!";
this.resetPasswordErrorPatternText = "Please enter a valid e-mail address";
this.resetPasswordActionButtonText = "Reset";
this.resetPasswordInstructionsText = "Reset requested. Check your e-mail instructions.";
// SignIn Tab
this.signInTabText = "Sign in";
this.signInCardTitleText = "Signing in";
this.loginButtonText = "Log In";
this.forgotPasswordButtonText = "Forgot Password ?";
// Common
this.nameText = "Name";
this.nameErrorRequiredText = "Name is required";
this.nameErrorMinLengthText = "The name is too short!";
this.nameErrorMaxLengthText = "The name is too long!";
this.emailText = "E-mail";
this.emailErrorRequiredText = "E-mail is required";
this.emailErrorPatternText = "Please enter a valid e-mail address";
this.passwordText = "Password";
this.passwordErrorRequiredText = "Password is required";
this.passwordErrorMinLengthText = "The password is too short!";
this.passwordErrorMaxLengthText = "The password is too long!";
// Register Tab
this.registerTabText = "Register";
this.registerCardTitleText = "Registration";
this.registerButtonText = "Register";
this.guestButtonText = "continue as guest";
// email confirmation component
this.emailConfirmationTitle = "Confirm your e-mail address!";
// eslint-disable-next-line max-len
this.emailConfirmationText = `A confirmation e-mail has been sent to you. Check your inbox and click on the link "Confirm my e-mail" to confirm your e-mail address.`;
this.authProvider = AuthProvider;
this.authenticationError = false;
this.passReset = false;
this.authProviders = AuthProvider;
this.onSuccess = authProcess.onSuccessEmitter;
this.onError = authProcess.onErrorEmitter;
}
get color() {
return this.authenticationError ? "warn" : "primary";
}
ngOnInit() {
if (isPlatformBrowser(this.platformId)) {
this.onErrorSubscription = this.onError.subscribe(() => (this.authenticationError = true));
}
this.min =
this.min != null
? Math.max(this.min, this.config.passwordMinLength)
: this.config.passwordMinLength;
this.max =
this.max != null
? Math.min(this.max, this.config.passwordMaxLength)
: this.config.passwordMaxLength;
this.goBackURL = this.chooseBackUrl();
this.updateAuthSnackbarMessages();
// auth form's initialization
this._initSignInFormGroupBuilder();
this._initSignUpFormGroupBuilder();
this._initResetPasswordFormGroupBuilder();
}
ngAfterViewInit() {
if (this.passwordStrength) {
this.passwordStrength.onStrengthChanged.subscribe((strength) => {
this.onStrengthChanged.emit(strength);
});
}
}
ngOnChanges(changes) {
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;
}
if (changes.goBackURL) {
this.goBackURL = this.chooseBackUrl();
}
}
ngOnDestroy() {
if (this.onErrorSubscription) {
this.onErrorSubscription.unsubscribe();
}
}
onTabChange(event) {
this.selectedTabChange.emit(event);
this.tabIndex = event.index;
}
async signOut() {
try {
this.isLoading = true;
this.changeDetectorRef.markForCheck();
await this.authProcess.signOut();
}
finally {
this.isLoading = false;
this.tabIndex = 0;
this.changeDetectorRef.markForCheck();
}
}
async signIn() {
if (!this.signInFormGroup.valid) {
return;
}
try {
this.isLoading = true;
this.changeDetectorRef.markForCheck();
await this.authProcess.signInWith(this.authProviders.EmailAndPassword, {
email: this.signInFormGroup.value.email,
password: this.signInFormGroup.value.password,
});
}
finally {
this.isLoading = false;
this.changeDetectorRef.markForCheck();
}
}
updateAuthSnackbarMessages() {
this.authProcess.messageOnAuthSuccess = this.messageOnAuthSuccess;
this.authProcess.messageOnAuthError = this.messageOnAuthError;
}
createForgotPasswordTab() {
this.passwordResetWished = true;
this.tabIndex = 2;
this.changeDetectorRef.markForCheck();
}
processLegalSignUP(authProvider) {
if (this.tosUrl || this.privacyPolicyUrl) {
const params = {
tosUrl: this.tosUrl,
privacyPolicyUrl: this.privacyPolicyUrl,
authProvider,
};
this.dialogRef = this.dialog.open(LegalityDialogComponent, {
data: params,
});
this.dialogRef.afterClosed().subscribe((result) => {
if (result && result.checked) {
this._afterSignUpMiddleware(result.authProvider).then(() => this.signUpFormGroup.reset());
}
this.dialogRef = null;
});
}
else {
this._afterSignUpMiddleware(authProvider).then(() => this.signUpFormGroup.reset());
}
}
async signUp() {
try {
this.isLoading = true;
this.changeDetectorRef.markForCheck();
return await this.authProcess.signUp(this.signUpFormGroup.value.name, {
email: this.signUpFormGroup.value.email,
password: this.signUpFormGroup.value.password,
});
}
finally {
this.isLoading = false;
this.changeDetectorRef.markForCheck();
}
}
async signUpAnonymously() {
try {
this.isLoading = true;
this.changeDetectorRef.markForCheck();
await this.authProcess.signInWith(this.authProvider.ANONYMOUS);
}
finally {
this.isLoading = false;
this.changeDetectorRef.markForCheck();
}
}
resetPassword() {
this.authProcess
.resetPassword(this.resetPasswordEmailFormControl.value)
.then(() => {
this.passReset = true;
// this.tabIndex = 2;
this.changeDetectorRef.markForCheck();
});
}
chooseBackUrl() {
return (this.activatedRoute.snapshot.queryParams.redirectUrl ||
this.goBackURL ||
"/");
}
_initSignInFormGroupBuilder() {
this.signInFormGroup = new UntypedFormGroup({});
this.signInFormGroup.registerControl("email", (this.signInEmailFormControl = new UntypedFormControl("", [
Validators.required,
Validators.pattern(EMAIL_REGEX),
])));
this.signInFormGroup.registerControl("password", (this.sigInPasswordFormControl = new UntypedFormControl("", [
Validators.required,
Validators.minLength(this.min),
Validators.maxLength(this.max),
])));
}
_initSignUpFormGroupBuilder() {
this.signUpFormGroup = new UntypedFormGroup({
name: this.sigUpNameFormControl = new UntypedFormControl("", [
Validators.required,
Validators.minLength(this.config.nameMinLength),
Validators.maxLength(this.config.nameMaxLength),
]),
email: this.sigUpEmailFormControl = new UntypedFormControl("", [
Validators.required,
Validators.pattern(EMAIL_REGEX),
]),
password: this.sigUpPasswordFormControl = new UntypedFormControl("", [
Validators.required,
Validators.minLength(this.min),
Validators.maxLength(this.max),
]),
});
}
_initResetPasswordFormGroupBuilder() {
this.resetPasswordFormGroup = new UntypedFormGroup({
email: this.resetPasswordEmailFormControl = new UntypedFormControl("", [
Validators.required,
Validators.pattern(EMAIL_REGEX),
]),
});
}
_afterSignUpMiddleware(authProvider) {
if (authProvider === this.authProvider.ANONYMOUS) {
return this.signUpAnonymously();
}
return this.signUp();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthComponent, deps: [{ token: PLATFORM_ID }, { token: forwardRef(() => NgxAuthFirebaseUIConfigToken) }, { token: i1.AngularFireAuth }, { token: i2.AuthProcessService }, { token: i3.MatLegacyDialog }, { token: i4.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AuthComponent, selector: "ngx-auth-firebaseui", inputs: { providers: "providers", providersTheme: "providersTheme", appearance: "appearance", tabIndex: "tabIndex", registrationEnabled: "registrationEnabled", resetPasswordEnabled: "resetPasswordEnabled", guestEnabled: "guestEnabled", tosUrl: "tosUrl", privacyPolicyUrl: "privacyPolicyUrl", goBackURL: "goBackURL", messageOnAuthSuccess: "messageOnAuthSuccess", messageOnAuthError: "messageOnAuthError", messageOnEmailConfirmationSuccess: "messageOnEmailConfirmationSuccess", enableLengthRule: "enableLengthRule", enableLowerCaseLetterRule: "enableLowerCaseLetterRule", enableUpperCaseLetterRule: "enableUpperCaseLetterRule", enableDigitRule: "enableDigitRule", enableSpecialCharRule: "enableSpecialCharRule", min: "min", max: "max", customValidator: "customValidator", verifyEmailTemplate: "verifyEmailTemplate", verifyEmailTitleText: "verifyEmailTitleText", verifyEmailConfirmationText: "verifyEmailConfirmationText", verifyEmailGoBackText: "verifyEmailGoBackText", sendNewVerificationEmailText: "sendNewVerificationEmailText", signOutText: "signOutText", resetPasswordTabText: "resetPasswordTabText", resetPasswordInputText: "resetPasswordInputText", resetPasswordErrorRequiredText: "resetPasswordErrorRequiredText", resetPasswordErrorPatternText: "resetPasswordErrorPatternText", resetPasswordActionButtonText: "resetPasswordActionButtonText", resetPasswordInstructionsText: "resetPasswordInstructionsText", signInTabText: "signInTabText", signInCardTitleText: "signInCardTitleText", loginButtonText: "loginButtonText", forgotPasswordButtonText: "forgotPasswordButtonText", nameText: "nameText", nameErrorRequiredText: "nameErrorRequiredText", nameErrorMinLengthText: "nameErrorMinLengthText", nameErrorMaxLengthText: "nameErrorMaxLengthText", emailText: "emailText", emailErrorRequiredText: "emailErrorRequiredText", emailErrorPatternText: "emailErrorPatternText", passwordText: "passwordText", passwordErrorRequiredText: "passwordErrorRequiredText", passwordErrorMinLengthText: "passwordErrorMinLengthText", passwordErrorMaxLengthText: "passwordErrorMaxLengthText", registerTabText: "registerTabText", registerCardTitleText: "registerCardTitleText", registerButtonText: "registerButtonText", guestButtonText: "guestButtonText", emailConfirmationTitle: "emailConfirmationTitle", emailConfirmationText: "emailConfirmationText" }, outputs: { onSuccess: "onSuccess", onError: "onError", selectedTabChange: "selectedTabChange", onStrengthChanged: "onStrengthChanged" }, viewQueries: [{ propertyName: "matTabGroup", first: true, predicate: MatTabGroup, descendants: true }, { propertyName: "passwordStrength", first: true, predicate: MatPasswordStrengthComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"authProcess.user$ | async as user; else showForm\">\n\n <!-- This component will be shown when:\n - we just sent a verification mail (notably after sign up)\n - we arrived from the guard after trying to access a protected route even though we are connected\n - config.enableEmailVerification is undefined, null or true\n -->\n <div\n *ngIf=\"(config.enableEmailVerification !== false) && (\n (config.guardProtectedRoutesUntilEmailIsVerified && !user.emailVerified) || (authProcess.emailConfirmationSent && !user.emailVerified)\n ); else signedInUser\"\n style=\"flex-direction: row\" fxLayoutAlign=\"center center\">\n <ngx-auth-firebaseui-email-confirmation\n (signOut)=\"signOut()\"\n [email]=\"user.email\"\n [goBackURL]=\"goBackURL\"\n [messageOnEmailConfirmationSuccess]=\"messageOnEmailConfirmationSuccess\"\n [sendNewVerificationEmailText]=\"sendNewVerificationEmailText\"\n [signOutText]=\"signOutText\"\n [template]=\"verifyEmailTemplate\"\n [verifyEmailConfirmationText]=\"verifyEmailConfirmationText\"\n [verifyEmailGoBackText]=\"verifyEmailGoBackText\"\n [verifyEmailTitleText]=\"verifyEmailTitleText\">\n </ngx-auth-firebaseui-email-confirmation>\n </div>\n\n <ng-template #signedInUser>\n <div class=\"signed-in-container\" style=\"flex-direction: column\" fxLayoutAlign=\"center center\">\n <img *ngIf=\"user?.photoURL; else noPhoto\" [src]=\"user?.photoURL\" class=\"account-circle\">\n <ng-template #noPhoto>\n <mat-icon class=\"account-circle\">account_circle</mat-icon>\n </ng-template>\n <div class=\"user-display-name mat-title\">{{ user?.displayName }}</div>\n <div class=\"user-email mat-body-2\">{{ user?.email }}</div>\n <div class=\"actions\">\n <mat-progress-bar *ngIf=\"isLoading\" mode=\"indeterminate\"></mat-progress-bar>\n <a *ngIf=\"verifyEmailGoBackText\" [routerLink]=\"goBackURL\" class=\"go-back-button action-button\" color=\"primary\"\n mat-stroked-button>{{ verifyEmailGoBackText }}</a>\n <button (click)=\"signOut()\" class=\"sign-out-button action-button\" color=\"warn\"\n mat-stroked-button>{{ signOutText }}</button>\n </div>\n </div>\n </ng-template>\n\n</ng-container>\n\n<ng-template #showForm>\n <mat-tab-group (selectedTabChange)=\"onTabChange($event)\" [color]=\"color\" [selectedIndex]=\"tabIndex\">\n <!--Sign in tab-->\n <mat-tab [label]=\"signInTabText\">\n <mat-card>\n <mat-card-title>{{signInCardTitleText}}</mat-card-title>\n <mat-card-content>\n <form (ngSubmit)=\"signIn()\"\n [@animateStagger]=\"{ value: '50' }\"\n [formGroup]=\"signInFormGroup\">\n <div style=\"flex-direction: column\" fxLayoutAlign=\"center\">\n <mat-form-field [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n [appearance]=\"appearance\">\n <mat-label>{{emailText}}</mat-label>\n <input formControlName=\"email\"\n matInput\n required\n autocomplete=\"username\">\n <mat-icon [color]=\"color\" matSuffix>email</mat-icon>\n <mat-error *ngIf=\"signInEmailFormControl.hasError('required')\">\n {{emailErrorRequiredText}}\n </mat-error>\n <mat-error *ngIf=\"signInEmailFormControl.hasError('pattern')\">\n {{emailErrorPatternText}}\n </mat-error>\n </mat-form-field>\n\n <mat-form-field [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n [appearance]=\"appearance\">\n <mat-label>{{passwordText}}</mat-label>\n <input [maxlength]=\"max\" [minlength]=\"min\" [type]=\"togglePass?.type\" formControlName=\"password\"\n autocomplete=\"current-password\" matInput\n required/>\n <mat-pass-toggle-visibility #togglePass matSuffix></mat-pass-toggle-visibility>\n <mat-icon [color]=\"color\" matSuffix>lock</mat-icon>\n <mat-hint align=\"end\" aria-live=\"polite\"> {{ signInFormGroup.value.password.length }}\n / {{ max }} </mat-hint>\n <mat-error *ngIf=\"sigInPasswordFormControl.hasError('required')\">\n {{passwordErrorRequiredText}}\n </mat-error>\n <mat-error *ngIf=\"sigInPasswordFormControl.hasError('minlength')\">\n {{ passwordErrorMinLengthText }}\n </mat-error>\n <mat-error *ngIf=\"sigInPasswordFormControl.hasError('maxlength')\">\n {{ passwordErrorMaxLengthText }}\n </mat-error>\n </mat-form-field>\n\n <button [@animate]=\"{ value: '*', params: { x: '50px' } }\"\n [color]=\"color\"\n [disabled]=\"signInFormGroup.invalid\"\n class=\"space-top\"\n mat-raised-button\n style=\"margin-top: 20px\"\n type=\"submit\">\n {{loginButtonText}}\n </button>\n\n </div>\n </form>\n\n <div fxLayoutAlign=\"center\">\n <button (click)=\"createForgotPasswordTab()\"\n *ngIf=\"resetPasswordEnabled\"\n [@animate]=\"{ value: '*', params: { x: '-50px' } }\"\n [color]=\"color\"\n class=\"space-top\"\n mat-button>\n {{forgotPasswordButtonText}}\n </button>\n </div>\n\n </mat-card-content>\n <mat-card-footer *ngIf=\"isLoading\">\n <mat-progress-bar [@animate]=\"{ value: '*', params: { z: '50px', delay: '50ms', scale: '0.2' } }\"\n mode=\"indeterminate\"></mat-progress-bar>\n </mat-card-footer>\n </mat-card>\n </mat-tab>\n\n <!--tab register-->\n <mat-tab *ngIf=\"registrationEnabled\" [label]=\"registerTabText\">\n <mat-card>\n <mat-card-title>{{registerCardTitleText}}</mat-card-title>\n <mat-card-content style=\"flex-direction: column\" fxLayoutAlign=\"center\">\n <form (ngSubmit)=\"signUpFormGroup.valid &&\n processLegalSignUP(authProvider.EmailAndPassword)\"\n [@animateStagger]=\"{ value: '50' }\" [formGroup]=\"signUpFormGroup\">\n <div style=\"flex-direction: column\" fxLayoutAlign=\"center\">\n <!--name-->\n <mat-form-field [@animate]=\"{ value: '*', params: { x: '50px' } }\"\n [appearance]=\"appearance\">\n <!--labels will work only with @angular/material@6.2.0 -->\n <mat-label>{{nameText}}</mat-label>\n <input\n [formControl]=\"sigUpNameFormControl\"\n [maxlength]=\"config.nameMaxLength\"\n [minlength]=\"config.nameMinLength\"\n matInput\n required\n />\n <mat-icon [color]=\"color\" matSuffix>person</mat-icon>\n <mat-hint align=\"end\" aria-live=\"polite\"> {{ signUpFormGroup.value.name?.length }}\n / {{ config.nameMaxLength }} </mat-hint>\n <mat-error *ngIf=\"sigUpNameFormControl.hasError('required')\">\n {{nameErrorRequiredText}}\n </mat-error>\n <mat-error *ngIf=\"sigUpNameFormControl.hasError('minlength')\">\n {{nameErrorMinLengthText}}\n </mat-error>\n <mat-error *ngIf=\"sigUpNameFormControl.hasError('maxlength')\">\n {{nameErrorMaxLengthText}}\n </mat-error>\n </mat-form-field>\n\n <!--email-->\n <mat-form-field [@animate]=\"{ value: '*', params: { x: '50px' } }\"\n [appearance]=\"appearance\">\n <mat-label>{{emailText}}</mat-label>\n <input [formControl]=\"sigUpEmailFormControl\"\n matInput\n required\n type=\"email\"\n autocomplete=\"username\">\n <mat-icon [color]=\"color\" matSuffix>email</mat-icon>\n <mat-error *ngIf=\"sigUpEmailFormControl.hasError('required')\">\n {{emailErrorRequiredText}}\n </mat-error>\n <mat-error *ngIf=\"sigUpEmailFormControl.hasError('pattern')\">\n {{emailErrorPatternText}}\n </mat-error>\n </mat-form-field>\n\n <!--password-->\n <div style=\"flex-direction: column\">\n <mat-form-field [@animate]=\"{ value: '*', params: { x: '50px' } }\"\n [appearance]=\"appearance\">\n <mat-label>{{passwordText}}</mat-label>\n <input\n [formControl]=\"sigUpPasswordFormControl\"\n [maxlength]=\"max\"\n [minlength]=\"min\"\n [type]=\"toggle.type\"\n matInput\n name=\"password\"\n autocomplete=\"new-password\"\n required\n />\n <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>\n\n <mat-icon [color]=\"color\" matSuffix>lock</mat-icon>\n\n <mat-hint align=\"end\" aria-live=\"polite\">\n {{signUpFormGroup.value.password?.length}} / {{ max }}\n </mat-hint>\n\n <mat-error *ngIf=\"sigUpPasswordFormControl.hasError('required')\" class=\"cut-text\">\n {{passwordErrorRequiredText}}\n </mat-error>\n\n <mat-error *ngIf=\"sigUpPasswordFormControl.hasError('minlength')\" class=\"cut-text\">\n {{ passwordErrorMinLengthText }}\n </mat-error>\n <mat-error *ngIf=\"sigUpPasswordFormControl.hasError('maxlength')\" class=\"cut-text\">\n {{ passwordErrorMaxLengthText }}\n </mat-error>\n\n </mat-form-field>\n\n <mat-password-strength #passwordStrength\n [customValidator]=\"customValidator\"\n [enableDigitRule]=\"enableDigitRule\"\n [enableLengthRule]=\"enableLengthRule\"\n [enableLowerCaseLetterRule]=\"enableLowerCaseLetterRule\"\n [enableSpecialCharRule]=\"enableSpecialCharRule\"\n [enableUpperCaseLetterRule]=\"enableUpperCaseLetterRule\"\n [externalError]=\"sigUpPasswordFormControl.dirty\"\n [max]=\"max\"\n [min]=\"min\"\n [password]=\"signUpFormGroup.value.password\">\n </mat-password-strength>\n\n </div>\n\n <button [@animate]=\"{ value: '*', params: { x: '100px' } }\"\n [color]=\"color\"\n [disabled]=\"signUpFormGroup.invalid\"\n mat-raised-button\n style=\"margin-top: 20px\"\n type=\"submit\">\n {{registerButtonText}}\n </button>\n\n </div>\n </form>\n\n <button (click)=\"processLegalSignUP(authProvider.ANONYMOUS)\"\n *ngIf=\"guestEnabled\"\n [@animate]=\"{ value: '*', params: { x: '-100px' } }\"\n [color]=\"color\"\n mat-button\n style=\"margin-top: 20px\">\n <mat-icon>fingerprint</mat-icon>\n {{guestButtonText}}\n </button>\n\n </mat-card-content>\n\n <mat-card-footer *ngIf=\"isLoading\">\n <mat-progress-bar [@animate]=\"{ value: '*', params: { z: '50px', delay: '50ms', scale: '0.2' } }\"\n mode=\"indeterminate\"></mat-progress-bar>\n </mat-card-footer>\n\n </mat-card>\n </mat-tab>\n\n <!--Reset password tab-->\n <mat-tab *ngIf=\"passwordResetWished\" class=\"reset-password-tab\">\n <ng-template mat-tab-label>\n <button (click)=\"passwordResetWished = false\" class=\"reset-password-tab__close-button\" mat-icon-button>\n {{ resetPasswordTabText }}\n <mat-icon>close</mat-icon>\n </button>\n </ng-template>\n <form (ngSubmit)=\"resetPasswordFormGroup.valid && resetPassword()\"\n [@animateStagger]=\"{ value: '50' }\"\n [formGroup]=\"resetPasswordFormGroup\">\n <mat-card class=\"reset-password-card\">\n <mat-card-content>\n <mat-form-field [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\" [appearance]=\"appearance\"\n class=\"full-width\">\n <mat-label> {{ resetPasswordInputText }} </mat-label>\n <input [title]=\"resetPasswordInputText\"\n formControlName=\"email\"\n matInput\n required>\n <mat-icon [color]=\"color\" matSuffix>email</mat-icon>\n <mat-error *ngIf=\"resetPasswordEmailFormControl.hasError('required')\">\n {{resetPasswordErrorRequiredText}}\n </mat-error>\n <mat-error *ngIf=\"resetPasswordEmailFormControl.hasError('pattern')\">\n {{resetPasswordErrorPatternText}}\n </mat-error>\n </mat-form-field>\n <p *ngIf=\"passReset\">{{resetPasswordInstructionsText}}</p>\n </mat-card-content>\n <mat-card-actions fxLayoutAlign=\"center\">\n <mat-progress-bar *ngIf=\"isLoading\" mode=\"indeterminate\"></mat-progress-bar>\n <button [@animate]=\"{ value: '*', params: { x: '50px' } }\"\n [color]=\"color\"\n mat-raised-button\n type=\"submit\">\n {{resetPasswordActionButtonText}}\n </button>\n </mat-card-actions>\n </mat-card>\n </form>\n </mat-tab>\n\n </mat-tab-group>\n <mat-divider></mat-divider>\n <ngx-auth-firebaseui-providers *ngIf=\"tabIndex !== 2\"\n [providers]=\"providers\"\n [theme]=\"providersTheme\"\n [tosUrl]=\"tosUrl\"\n [privacyPolicyUrl]=\"privacyPolicyUrl\">\n </ngx-auth-firebaseui-providers>\n</ng-template>\n", styles: [".mat-card{margin:2rem}.space-top{margin-top:.5rem}.full-width{width:100%}.cut-text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.signed-in-container .account-circle{font-size:12rem;width:12rem;height:12rem}.signed-in-container img.account-circle{-o-object-fit:cover;object-fit:cover;border-radius:50%}.signed-in-container .sign-out-button{margin-top:2rem}.signed-in-container .user-display-name{margin-top:1rem}.signed-in-container .user-email{margin-top:-1rem}.signed-in-container .actions{margin-top:2rem}.signed-in-container .actions .action-button,.signed-in-container .actions mat-progress-bar{width:100%}.signed-in-container .actions .action-button{margin-top:1rem}.reset-password-tab mat-progress-bar{margin-bottom:1rem}.reset-password-tab__close-button{width:100%;display:flex;justify-content:space-between;align-items:center}.reset-password-tab__close-button mat-icon{font-size:18px;position:relative;top:-1px}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i7.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i8.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i8.MatCardFooter, selector: "mat-card-footer" }, { kind: "directive", type: i8.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i10.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i10.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i11.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i11.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i11.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i12.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i14.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i15.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { kind: "component", type: i15.MatPassToggleVisibilityComponent, selector: "mat-pass-toggle-visibility", inputs: ["isVisible", "tabindex"] }, { kind: "component", type: i16.AuthProvidersComponent, selector: "ngx-auth-firebaseui-providers", inputs: ["theme", "layout", "providers", "tosUrl", "privacyPolicyUrl"], outputs: ["onSuccess", "onError"] }, { kind: "component", type: i17.EmailConfirmationComponent, selector: "ngx-auth-firebaseui-email-confirmation", inputs: ["email", "goBackURL", "verifyEmailTitleText", "verifyEmailConfirmationText", "verifyEmailGoBackText", "sendNewVerificationEmailText", "signOutText", "messageOnEmailConfirmationSuccess", "template"], outputs: ["signOut"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], animations: NgxAuthFirebaseuiAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthComponent, decorators: [{
type: Component,
args: [{ selector: "ngx-auth-firebaseui", animations: NgxAuthFirebaseuiAnimations, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"authProcess.user$ | async as user; else showForm\">\n\n <!-- This component will be shown when:\n - we just sent a verification mail (notably after sign up)\n - we arrived from the guard after trying to access a protected route even though we are connected\n - config.enableEmailVerification is undefined, null or true\n -->\n <div\n *ngIf=\"(config.enableEmailVerification !== false) && (\n (config.guardProtectedRoutesUntilEmailIsVerified && !user.emailVerified) || (authProcess.emailConfirmationSent && !user.emailVerified)\n ); else signedInUser\"\n style=\"flex-direction: row\" fxLayoutAlign=\"center center\">\n <ngx-auth-firebaseui-email-confirmation\n (signOut)=\"signOut()\"\n [email]=\"user.email\"\n [goBackURL]=\"goBackURL\"\n [messageOnEmailConfirmationSuccess]=\"messageOnEmailConfirmationSuccess\"\n [sendNewVerificationEmailText]=\"sendNewVerificationEmailText\"\n [signOutText]=\"signOutText\"\n [template]=\"verifyEmailTemplate\"\n [verifyEmailConfirmationText]=\"verifyEmailConfirmationText\"\n [verifyEmailGoBackText]=\"verifyEmailGoBackText\"\n [verifyEmailTitleText]=\"verifyEmailTitleText\">\n </ngx-auth-firebaseui-email-confirmation>\n </div>\n\n <ng-template #signedInUser>\n <div class=\"signed-in-container\" style=\"flex-direction: column\" fxLayoutAlign=\"center center\">\n <img *ngIf=\"user?.photoURL; else noPhoto\" [src]=\"user?.photoURL\" class=\"account-circle\">\n <ng-template #noPhoto>\n <mat-icon class=\"account-circle\">account_circle</mat-icon>\n </ng-template>\n <div class=\"user-display-name mat-title\">{{ user?.displayName }}</div>\n <div class=\"user-email mat-body-2\">{{ user?.email }}</div>\n <div class=\"actions\">\n <mat-progress-bar *ngIf=\"isLoading\" mode=\"indeterminate\"></mat-progress-bar>\n <a *ngIf=\"verifyEmailGoBackText\" [routerLink]=\"goBackURL\" class=\"go-back-button action-button\" color=\"primary\"\n mat-stroked-button>{{ verifyEmailGoBackText }}</a>\n <button (click)=\"signOut()\" class=\"sign-out-button action-button\" color=\"warn\"\n mat-stroked-button>{{ signOutText }}</button>\n </div>\n </div>\n </ng-template>\n\n</ng-container>\n\n<ng-template #showForm>\n <mat-tab-group (selectedTabChange)=\"onTabChange($event)\" [color]=\"color\" [selectedIndex]=\"tabIndex\">\n <!--Sign in tab-->\n <mat-tab [label]=\"signInTabText\">\n <mat-card>\n <mat-card-title>{{signInCardTitleText}}</mat-card-title>\n <mat-card-content>\n <form (ngSubmit)=\"signIn()\"\n [@animateStagger]=\"{ value: '50' }\"\n [formGroup]=\"signInFormGroup\">\n <div style=\"flex-direction: column\" fxLayoutAlign=\"center\">\n <mat-form-field [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n [appearance]=\"appearance\">\n <mat-label>{{emailText}}</mat-label>\n <input formControlName=\"email\"\n matInput\n required\n autocomplete=\"username\">\n <mat-icon [color]=\"color\" matSuffix>email</mat-icon>\n <mat-error *ngIf=\"signInEmailFormControl.hasError('required')\">\n {{emailErrorRequiredText}}\n </mat-error>\n <mat-error *ngIf=\"signInEmailFormControl.hasError('pattern')\">\n {{emailErrorPatternText}}\n </mat-error>\n </mat-form-field>\n\n <mat-form-field [@animate]=\"{value:'*',params:{duration:'300ms',y:'100px'}}\"\n [appearance]=\"appearance\">\n <mat-label>{{passwordText}}</mat-label>\n <input [maxlength]=\"max\" [minlength]=\"min\" [type]=\"togglePass?.type\" formControlName=\"password\"\n autocomplete=\"current-password\" matInput\n required/>\n <mat-pass-toggle-visibility #togglePass matSuffix></mat-pass-toggle-visibility>\n <mat-icon [color]=\"color\" matSuffix>lock</mat-icon>\n <mat-hint align=\"end\" aria-live=\"polite\"> {{ signInFormGroup.value.password.length }}\n / {{ max }} </mat-hint>\n <mat-error *ngIf=\"sigInPasswordFormControl.hasError('required')\">\n {{passwordErrorRequiredText}}\n </mat-error>\n <mat-error *ngIf=\"sigInPasswordFormControl.hasError('minlength')\">\n {{ passwordErrorMinLengthText }}\n </mat-error>\n <mat-error *ngIf=\"sigInPasswordFormControl.hasError('maxlength')\">\n {{ passwordErrorMaxLengthText }}\n </mat-error>\n </mat-form-field>\n\n <button [@animate]=\"{ value: '*', params: { x: '50px' } }\"\n [color]=\"color\"\n [disabled]=\"signInFormGroup.invalid\"\n class=\"space-top\"\n mat-raised-button\n style=\"margin-top: 20px\"\n type=\"submit\">\n {{loginButtonText}}\n </button>\n\n </div>\n </form>\n\n <div fxLayoutAlign=\"center\">\n <button (click)=\"createForgotPasswordTab()\"\n *ngIf=\"resetPasswordEnabled\"\n [@animate]=\"{ value: '*', params: { x: '-50px' } }\"\n [color]=\"color\"\n class=\"space-top\"\n mat-button>\n {{forgotPasswordButtonText}}\n </button>\n </div>\n\n </mat-card-content>\n <mat-card-footer *ngIf=\"isLoading\">\n <mat-progress-bar [@animate]=\"{ value: '*', params: { z: '50px', delay: '50ms', scale: '0.2' } }\"\n mode=\"indeterminate\"></mat-progress-bar>\n </mat-card-footer>\n </mat-card>\n </mat-tab>\n\n <!--tab register-->\n <mat-tab *ngIf=\"registrationEnabled\" [label]=\"registerTabText\">\n <mat-card>\n <mat-card-title>{{registerCardTitleText}}</mat-card-title>\n <mat-card-content style=\"flex-direction: column\" fxLayoutAlign=\"center\">\n <form (ngSubmit)=\"signUpFormGroup.valid &&\n processLegalSignUP(authProvider.EmailAndPassword)\"\n [@animateStagger]=\"{ value: '50' }\" [formGroup]=\"signUpFormGroup\">\n <div style=\"flex-direction: column\" fxLayoutAlign=\"center\">\n <!--name-->\n <mat-form-field [@animate]=\"{ value: '*', params: { x: '50px' } }\"\n [appearance]=\"appearance\">\n <!--labels will work only with @angular/material@6.2.0 -->\n <mat-label>{{nameText}}</mat-label>\n <input\n [formControl]=\"sigUpNameFormControl\"\n [maxlength]=\"config.nameMaxLength\"\n [minlength]=\"config.nameMinLength\"\n matInput\n required\n />\n <mat-icon [color]=\"color\" matSuffix>person</mat-icon>\n <mat-hint align=\"end\" aria-live=\"polite\"> {{ signUpFormGroup.value.name?.length }}\n / {{ config.nameMaxLength }} </mat-hint>\n <mat-error *ngIf=\"sigUpNameFormControl.hasError('required')\">\n {{nameErrorRequiredText}}\n </mat-error>\n <mat-error *ngIf=\"sigUpNameFormControl.hasError('minlength')\">\n {{nameErrorMinLengthText}}\n </mat-error>\n <mat-error *ngIf=\"sigUpNameFormControl.hasError('maxlength')\">\n {{nameErrorMaxLengthText}}\n </mat-error>\n </mat-form-field>\n\n <!--email-->\n <mat-form-field [@animate]=\"{ value: '*', params: { x: '50px' } }\"\n [appearance]=\"appearance\">\n <mat-label>{{emailText}}</mat-label>\n <input [formControl]=\"sigUpEmailFormControl\"\n matInput\n required\n type=\"email\"\n autocomplete=\"username\">\n <mat-icon [color]=\"color\" matSuffix>email</mat-icon>\n <mat-error *ngIf=\"sigUpEmailFormControl.hasError('required')\">\n {{emailErrorRequiredText}}\n </mat-error>\n <mat-error *ngIf=\"sigUpEmailFormControl.hasError('pattern')\">\n {{emailErrorPatternText}}\n </mat-error>\n </mat-form-field>\n\n <!--password-->\n <div style=\"flex-direction: column\">\n <mat-form-field [@animate]=\"{ value: '*', params: { x: '50px' } }\"\n [appearance]=\"appearance\">\n <mat-label>{{passwordText}}</mat-label>\n <input\n [formControl]=\"sigUpPasswordFormControl\"\n [maxlength]=\"max\"\n [minlength]=\"min\"\n [type]=\"toggle.type\"\n matInput\n name=\"password\"\n autocomplete=\"new-password\"\n required\n />\n <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>\n\n <mat-icon [color]=\"color\" matSuffix>lock</mat-icon>\n\n <mat-hint align=\"end\" aria-live=\"polite\">\n {{signUpFormGroup.value.password?.length}} / {{ max }}\n </mat-hint>\n\n <mat-error *ngIf=\"sigUpPasswordFormControl.hasError('required')\" class=\"cut-text\">\n {{passwordErrorRequiredText}}\n </mat-error>\n\n <mat-error *ngIf=\"sigUpPasswordFormControl.hasError('minlength')\" class=\"cut-text\">\n {{ passwordErrorMinLengthText }}\n </mat-error>\n <mat-error *ngIf=\"sigUpPasswordFormControl.hasError('maxlength')\" class=\"cut-text\">\n {{ passwordErrorMaxLengthText }}\n </mat-error>\n\n </mat-form-field>\n\n <mat-password-strength #passwordStrength\n [customValidator]=\"customValidator\"\n [enableDigitRule]=\"enableDigitRule\"\n [enableLengthRule]=\"enableLengthRule\"\n [enableLowerCaseLetterRule]=\"enableLowerCaseLetterRule\"\n [enableSpecialCharRule]=\"enableSpecialCharRule\"\n [enableUpperCaseLetterRule]=\"enableUpperCaseLetterRule\"\n [externalError]=\"sigUpPasswordFormControl.dirty\"\n [max]=\"max\"\n [min]=\"min\"\n [password]=\"signUpFormGroup.value.password\">\n </mat-password-strength>\n\n </div>\n\n <button [@animate]=\"{ value: '*', params: { x: '100px' } }\"\n [color]=\"color\"\n [disabled]=\"signUpFormGroup.invalid\"\n mat-raised-button\n style=\"margin-top: 20px\"\n type=\"submit\">\n {{registerButtonText}}\n </button>\n\n </div>\n </form>\n\n <button (click)=\"processLegalSignUP(authProvider.ANONYMOUS)\"\n *ngIf=\"guestEnabled\"\n [@an