ng7-auth
Version:
Firestore Authentication with Angular. A Fork form Anthony Nahas.
906 lines (899 loc) • 84.4 kB
JavaScript
import { Injectable, EventEmitter, Inject, Component, Input, Output, PLATFORM_ID, NgModule, InjectionToken } from '@angular/core';
import { AngularFirestore, AngularFirestoreModule } from '@angular/fire/firestore';
import { MatSnackBar, MAT_DIALOG_DATA, MatDialogRef, MatDialog, MatIconRegistry, MatButtonModule, MatCardModule, MatChipsModule, MatDialogModule, MatDividerModule, MatIconModule, MatInputModule, MatSnackBarModule, MatTabsModule, MatTooltipModule, MatProgressSpinnerModule, MatProgressBarModule, MatCheckboxModule } from '@angular/material';
import { AngularFireAuth, AngularFireAuthModule } from '@angular/fire/auth';
import { auth } from 'firebase/app';
import 'firebase/auth';
import { FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { isPlatformBrowser, CommonModule } from '@angular/common';
import { DomSanitizer } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { FirebaseOptionsToken, FirebaseNameOrConfigToken } from '@angular/fire';
import { FlexLayoutModule } from '@angular/flex-layout';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
var collections = {
users: 'users',
};
var FirestoreSyncService = /** @class */ (function () {
function FirestoreSyncService(afs) {
this.afs = afs;
// this.afs.firestore.settings({timestampsInSnapshots: true});
}
// get timestamp() {
// return firebase.firestore.FieldValue.serverTimestamp();
// }
// get timestamp() {
// return firebase.firestore.FieldValue.serverTimestamp();
// }
/**
* @param {?} uid
* @return {?}
*/
FirestoreSyncService.prototype.getUserDocRefByUID =
// get timestamp() {
// return firebase.firestore.FieldValue.serverTimestamp();
// }
/**
* @param {?} uid
* @return {?}
*/
function (uid) {
return this.afs.doc(collections.users + "/" + uid);
};
/**
* @param {?=} queryFn
* @return {?}
*/
FirestoreSyncService.prototype.getUsersCollectionRef = /**
* @param {?=} queryFn
* @return {?}
*/
function (queryFn) {
return this.afs.collection(collections.users + "/", queryFn);
};
/**
* @param {?} uid
* @return {?}
*/
FirestoreSyncService.prototype.deleteUserData = /**
* @param {?} uid
* @return {?}
*/
function (uid) {
/** @type {?} */
var userRef = this.getUserDocRefByUID(uid);
return userRef.delete();
};
/**
* @param {?} user
* @return {?}
*/
FirestoreSyncService.prototype.updateUserData = /**
* @param {?} user
* @return {?}
*/
function (user) {
// Sets user$ data to firestore on login
/** @type {?} */
var userRef = this.getUserDocRefByUID(user.uid);
/** @type {?} */
var data = {
uid: user.uid,
email: user.email,
displayName: user.displayName,
photoURL: user.photoURL,
phoneNumber: user.phoneNumber,
providerId: user.providerId
};
return userRef.set(data, { merge: true });
};
FirestoreSyncService.decorators = [
{ type: Injectable },
];
/** @nocollapse */
FirestoreSyncService.ctorParameters = function () { return [
{ type: AngularFirestore }
]; };
return FirestoreSyncService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @enum {string} */
var Accounts = {
NONE: 'account',
CHECK: 'account-check',
EDIT: 'account-edit',
OFF: 'account-off',
REMOVE: 'account-remove',
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
/** @type {?} */
var facebookAuthProvider = new auth.FacebookAuthProvider();
/** @type {?} */
var googleAuthProvider = new auth.GoogleAuthProvider();
/** @type {?} */
var twitterAuthProvider = new auth.TwitterAuthProvider();
/** @type {?} */
var githubAuthProvider = new auth.GithubAuthProvider();
/** @enum {string} */
var AuthProvider$$1 = {
ALL: 'all',
ANONYMOUS: 'anonymous',
EmailAndPassword: 'firebase',
Google: 'google',
Facebook: 'facebook',
Twitter: 'twitter',
Github: 'github',
PhoneNumber: 'phoneNumber',
};
var AuthProcessService$$1 = /** @class */ (function () {
function AuthProcessService$$1(config, afa, _snackBar, _fireStoreService) {
this.config = config;
this.afa = afa;
this._snackBar = _snackBar;
this._fireStoreService = _fireStoreService;
this.onSuccessEmitter = new EventEmitter();
this.onErrorEmitter = new EventEmitter();
}
/**
* Reset the password of the user via email
*
* @param email - the email to reset
* @returns
*/
/**
* Reset the password of the user via email
*
* @param {?} email - the email to reset
* @return {?}
*/
AuthProcessService$$1.prototype.resetPassword = /**
* Reset the password of the user via email
*
* @param {?} email - the email to reset
* @return {?}
*/
function (email) {
var _this = this;
return this.afa.auth.sendPasswordResetEmail(email)
.then(function () { return console.log('email sent'); })
.catch(function (error) { return _this.onErrorEmitter.next(error); });
};
/**
* General sign in mechanism to authenticate the users with a firebase project
* using a traditional way, via username and password or by using an authentication provider
* like google, facebook, twitter and github
*
* @param provider - the provider to authenticate with (google, facebook, twitter, github)
* @param email - (optional) the email of user - used only for a traditional sign in
* @param password - (optional) the password of user - used only for a traditional sign in
* @returns
*/
/**
* General sign in mechanism to authenticate the users with a firebase project
* using a traditional way, via username and password or by using an authentication provider
* like google, facebook, twitter and github
*
* @param {?} provider - the provider to authenticate with (google, facebook, twitter, github)
* @param {?=} email - (optional) the email of user - used only for a traditional sign in
* @param {?=} password - (optional) the password of user - used only for a traditional sign in
* @return {?}
*/
AuthProcessService$$1.prototype.signInWith = /**
* General sign in mechanism to authenticate the users with a firebase project
* using a traditional way, via username and password or by using an authentication provider
* like google, facebook, twitter and github
*
* @param {?} provider - the provider to authenticate with (google, facebook, twitter, github)
* @param {?=} email - (optional) the email of user - used only for a traditional sign in
* @param {?=} password - (optional) the password of user - used only for a traditional sign in
* @return {?}
*/
function (provider, email, password) {
return __awaiter(this, void 0, void 0, function () {
var signInResult, _a, err_1;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
_b.trys.push([0, 16, 17, 18]);
this.isLoading = true;
signInResult = void 0;
_a = provider;
switch (_a) {
case AuthProvider$$1.ANONYMOUS: return [3 /*break*/, 1];
case AuthProvider$$1.EmailAndPassword: return [3 /*break*/, 3];
case AuthProvider$$1.Google: return [3 /*break*/, 5];
case AuthProvider$$1.Facebook: return [3 /*break*/, 7];
case AuthProvider$$1.Twitter: return [3 /*break*/, 9];
case AuthProvider$$1.Github: return [3 /*break*/, 11];
}
return [3 /*break*/, 13];
case 1: return [4 /*yield*/, this.afa.auth.signInAnonymously()];
case 2:
signInResult = (/** @type {?} */ (_b.sent()));
return [3 /*break*/, 14];
case 3: return [4 /*yield*/, this.afa.auth.signInWithEmailAndPassword(email, password)];
case 4:
signInResult = (/** @type {?} */ (_b.sent()));
return [3 /*break*/, 14];
case 5: return [4 /*yield*/, this.afa.auth.signInWithPopup(googleAuthProvider)];
case 6:
signInResult = (/** @type {?} */ (_b.sent()));
return [3 /*break*/, 14];
case 7: return [4 /*yield*/, this.afa.auth.signInWithPopup(facebookAuthProvider)];
case 8:
signInResult = (/** @type {?} */ (_b.sent()));
return [3 /*break*/, 14];
case 9: return [4 /*yield*/, this.afa.auth.signInWithPopup(twitterAuthProvider)];
case 10:
signInResult = (/** @type {?} */ (_b.sent()));
return [3 /*break*/, 14];
case 11: return [4 /*yield*/, this.afa.auth.signInWithPopup(githubAuthProvider)];
case 12:
signInResult = (/** @type {?} */ (_b.sent()));
return [3 /*break*/, 14];
case 13: throw new Error(AuthProvider$$1[provider] + " is not available as auth provider");
case 14: return [4 /*yield*/, this.handleSuccess(signInResult)];
case 15:
_b.sent();
return [3 /*break*/, 18];
case 16:
err_1 = _b.sent();
this.handleError(err_1);
console.error(err_1);
// this._snackBar.open(err.message, 'OK', {duration: 5000});
this.onErrorEmitter.next(err_1);
return [3 /*break*/, 18];
case 17:
this.isLoading = false;
return [7 /*endfinally*/];
case 18: return [2 /*return*/];
}
});
});
};
/**
* Sign up new users via email and password.
* After that the user should verify and confirm an email sent via the firebase
*
* @param name - the name if the new user
* @param email - the email if the new user
* @param password - the password if the new user
* @returns
*/
/**
* Sign up new users via email and password.
* After that the user should verify and confirm an email sent via the firebase
*
* @param {?} name - the name if the new user
* @param {?} email - the email if the new user
* @param {?} password - the password if the new user
* @return {?}
*/
AuthProcessService$$1.prototype.signUp = /**
* Sign up new users via email and password.
* After that the user should verify and confirm an email sent via the firebase
*
* @param {?} name - the name if the new user
* @param {?} email - the email if the new user
* @param {?} password - the password if the new user
* @return {?}
*/
function (name, email, password) {
return __awaiter(this, void 0, void 0, function () {
var userCredential, user, err_2;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 6, 7, 8]);
this.isLoading = true;
return [4 /*yield*/, this.afa.auth.createUserWithEmailAndPassword(email, password)];
case 1:
userCredential = _a.sent();
user = userCredential.user;
console.log('onsignUp the user = ', user);
return [4 /*yield*/, this._fireStoreService
.getUserDocRefByUID(user.uid)
.set((/** @type {?} */ ({
uid: user.uid,
displayName: name,
email: user.email,
photoURL: user.photoURL
})))];
case 2:
_a.sent();
return [4 /*yield*/, user.sendEmailVerification()];
case 3:
_a.sent();
return [4 /*yield*/, this.updateProfile(name, user.photoURL)];
case 4:
_a.sent();
this.emailConfirmationSent = true;
this.emailToConfirm = email;
return [4 /*yield*/, this.handleSuccess(userCredential)];
case 5:
_a.sent();
return [3 /*break*/, 8];
case 6:
err_2 = _a.sent();
this.handleError(err_2);
return [3 /*break*/, 8];
case 7:
this.isLoading = false;
return [7 /*endfinally*/];
case 8: return [2 /*return*/];
}
});
});
};
/**
* Update the profile (name + photo url) of the authenticated user in the
* firebase authentication feature (not in firestore)
*
* @param name - the new name of the authenticated user
* @param photoURL - the new photo url of the authenticated user
* @returns
*/
/**
* Update the profile (name + photo url) of the authenticated user in the
* firebase authentication feature (not in firestore)
*
* @param {?} name - the new name of the authenticated user
* @param {?} photoURL - the new photo url of the authenticated user
* @return {?}
*/
AuthProcessService$$1.prototype.updateProfile = /**
* Update the profile (name + photo url) of the authenticated user in the
* firebase authentication feature (not in firestore)
*
* @param {?} name - the new name of the authenticated user
* @param {?} photoURL - the new photo url of the authenticated user
* @return {?}
*/
function (name, photoURL) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.afa.auth.currentUser.updateProfile({ displayName: name, photoURL: photoURL })];
case 1: return [2 /*return*/, _a.sent()];
}
});
});
};
/**
* @return {?}
*/
AuthProcessService$$1.prototype.deleteAccount = /**
* @return {?}
*/
function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.afa.auth.currentUser.delete()];
case 1: return [2 /*return*/, _a.sent()];
}
});
});
};
/**
* @param {?} user
* @return {?}
*/
AuthProcessService$$1.prototype.parseUserInfo = /**
* @param {?} user
* @return {?}
*/
function (user) {
return {
uid: user.uid,
displayName: user.displayName,
email: user.email,
phoneNumber: user.phoneNumber,
photoURL: user.photoURL,
providerId: user.providerData.length > 0 ? user.providerData[0].providerId : null
};
};
/**
* @return {?}
*/
AuthProcessService$$1.prototype.getUserPhotoUrl = /**
* @return {?}
*/
function () {
/** @type {?} */
var user = this.afa.auth.currentUser;
if (!user) {
return;
}
else if (user.photoURL) {
return user.photoURL;
}
else if (user.emailVerified) {
return this.getPhotoPath(Accounts.CHECK);
}
else if (user.isAnonymous) {
return this.getPhotoPath(Accounts.OFF);
}
else {
return this.getPhotoPath(Accounts.NONE);
}
};
/**
* @param {?} image
* @return {?}
*/
AuthProcessService$$1.prototype.getPhotoPath = /**
* @param {?} image
* @return {?}
*/
function (image) {
return "assets/user/" + image + ".svg";
};
/**
* @return {?}
*/
AuthProcessService$$1.prototype.signInWithPhoneNumber = /**
* @return {?}
*/
function () {
// todo: 3.1.18
};
/**
* @param {?} userCredential
* @return {?}
*/
AuthProcessService$$1.prototype.handleSuccess = /**
* @param {?} userCredential
* @return {?}
*/
function (userCredential) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this._fireStoreService.updateUserData(this.parseUserInfo(userCredential.user))];
case 1:
_a.sent();
if (this.config.toastMessageOnAuthSuccess) {
this._snackBar.open("Hallo " + (userCredential.user.displayName ? userCredential.user.displayName : '') + "!", 'OK', { duration: 5000 });
}
this.onSuccessEmitter.next(userCredential.user);
return [2 /*return*/];
}
});
});
};
/**
* @param {?} error
* @return {?}
*/
AuthProcessService$$1.prototype.handleError = /**
* @param {?} error
* @return {?}
*/
function (error) {
if (this.config.toastMessageOnAuthError) {
this._snackBar.open(error.message, 'OK', { duration: 5000 });
}
console.error(error);
this.onErrorEmitter.next(error);
};
AuthProcessService$$1.decorators = [
{ type: Injectable },
];
/** @nocollapse */
AuthProcessService$$1.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: Inject, args: [NgxAuthFirebaseUIConfigToken,] }] },
{ type: AngularFireAuth },
{ type: MatSnackBar },
{ type: FirestoreSyncService }
]; };
return AuthProcessService$$1;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var LegalityDialogComponent = /** @class */ (function () {
function LegalityDialogComponent(dialogRef, data) {
this.dialogRef = dialogRef;
this.data = data;
this._disableConfirmActionButton = false;
}
Object.defineProperty(LegalityDialogComponent.prototype, "disableConfirmActionButton", {
get: /**
* @return {?}
*/
function () {
if (this.data.tosUrl && this.data.privacyPolicyUrl) {
this._disableConfirmActionButton = !(this.checkTOS && this.checkPrivacyPolicy);
}
else if (this.data.tosUrl && !this.data.privacyPolicyUrl) {
this._disableConfirmActionButton = !this.checkTOS;
}
else if (!this.data.tosUrl && this.data.privacyPolicyUrl) {
this._disableConfirmActionButton = !this.checkPrivacyPolicy;
}
return this._disableConfirmActionButton;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
LegalityDialogComponent.prototype.closeDialog = /**
* @return {?}
*/
function () {
/** @type {?} */
var result = {
checked: !this.disableConfirmActionButton,
authProvider: this.data.authProvider
};
this.dialogRef.close(result);
};
LegalityDialogComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-auth-firebaseui-legality-dialog',
template: "\n <h1 matDialogTitle>Legal requirements</h1>\n\n <mat-dialog-content>\n <div fxLayout=\"column\" fxLayoutAlign=\"start\">\n <mat-checkbox *ngIf=\"this.data.tosUrl\" [(ngModel)]=\"checkTOS\">\n I agree to the\n <span> </span>\n <a target=\"_blank\"\n [href]=\"this.data.tosUrl\">\n Terms of Service and Conditions\n </a>\n </mat-checkbox>\n\n <mat-checkbox *ngIf=\"this.data.privacyPolicyUrl\"\n [(ngModel)]=\"checkPrivacyPolicy\">\n I have read and agree to the\n <span> </span>\n <a target=\"_blank\"\n [href]=\"this.data.privacyPolicyUrl\">\n Privacy\n </a>\n </mat-checkbox>\n </div>\n </mat-dialog-content>\n\n <mat-dialog-actions>\n <button id=\"decline-action\"\n mat-raised-button\n matDialogClose\n color=\"warn\">Decline</button>\n <button id=\"confirm-action\"\n mat-raised-button\n color=\"primary\"\n [disabled]=\"disableConfirmActionButton\"\n (click)=\"closeDialog()\">Confirm\n </button>\n </mat-dialog-actions>\n ",
styles: ["\n ::ng-deep .mat-checkbox-label{display:flex;flex-wrap:wrap}mat-dialog-content div{margin-top:1.5rem}mat-dialog-actions{margin-top:1rem}\n "]
},] },
];
/** @nocollapse */
LegalityDialogComponent.ctorParameters = function () { return [
{ type: MatDialogRef },
{ type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
]; };
return LegalityDialogComponent;
}());
var __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator$1 = (undefined && undefined.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
/** @type {?} */
var EMAIL_REGEX = new RegExp(['^(([^<>()[\\]\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\.,;:\\s@\"]+)*)',
'|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.',
'[0-9]{1,3}\])|(([a-zA-Z\\-0-9]+\\.)+',
'[a-zA-Z]{2,}))$'].join(''));
/** @type {?} */
var PHONE_NUMBER_REGEX = new RegExp(/^\+(?:[0-9] ?){6,14}[0-9]$/);
var AuthComponent = /** @class */ (function () {
function AuthComponent(platformId, auth$$1, authProcess, dialog) {
this.platformId = platformId;
this.auth = auth$$1;
this.authProcess = authProcess;
this.dialog = dialog;
this.providers = AuthProvider$$1.ALL; // google, facebook, twitter, github as array or all as one single string
this.guestEnabled = true;
this.authProvider = AuthProvider$$1;
this.authenticationError = false;
this.passReset = false;
this.authProviders = AuthProvider$$1;
this.onSuccess = authProcess.onSuccessEmitter;
this.onError = authProcess.onErrorEmitter;
}
/**
* @return {?}
*/
AuthComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
if (isPlatformBrowser(this.platformId)) {
this.onErrorSubscription = this.onError.subscribe(function () { return _this.authenticationError = true; });
}
this._initSignInFormGroupBuilder();
this._initSignUpFormGroupBuilder();
this._initResetPasswordFormGroupBuilder();
};
/**
* @return {?}
*/
AuthComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.onErrorSubscription) {
this.onErrorSubscription.unsubscribe();
}
};
Object.defineProperty(AuthComponent.prototype, "color", {
get: /**
* @return {?}
*/
function () {
return this.authenticationError ? 'warn' : 'primary';
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
AuthComponent.prototype.createForgotPasswordTab = /**
* @return {?}
*/
function () {
var _this = this;
this.passwordResetWished = true;
setTimeout(function () { return _this.tabIndex = 0; }, 100);
};
/**
* @param {?=} authProvider
* @return {?}
*/
AuthComponent.prototype.openLegalityDialog = /**
* @param {?=} authProvider
* @return {?}
*/
function (authProvider) {
var _this = this;
if (this.tosUrl || this.privacyPolicyUrl) {
/** @type {?} */
var params = {
tosUrl: this.tosUrl,
privacyPolicyUrl: this.privacyPolicyUrl,
authProvider: authProvider
};
this.dialogRef = this.dialog.open(LegalityDialogComponent, { data: params });
this.dialogRef.afterClosed().subscribe(function (result) {
console.log('this.dialogRef.afterClosed(): ', result);
if (result && result.checked) {
_this._afterSignUpMiddleware(result.authProvider).then(function () { return _this.signUpFormGroup.reset(); });
}
_this.dialogRef = null;
});
}
else {
this._afterSignUpMiddleware(authProvider).then(function () { return _this.signUpFormGroup.reset(); });
}
};
/**
* @return {?}
*/
AuthComponent.prototype.signUp = /**
* @return {?}
*/
function () {
return __awaiter$1(this, void 0, void 0, function () {
return __generator$1(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.authProcess.signUp(this.signUpFormGroup.value.name, this.signUpFormGroup.value.email, this.signUpFormGroup.value.password)];
case 1: return [2 /*return*/, _a.sent()];
}
});
});
};
/**
* @return {?}
*/
AuthComponent.prototype.signUpAnonymously = /**
* @return {?}
*/
function () {
return __awaiter$1(this, void 0, void 0, function () {
return __generator$1(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.authProcess.signInWith(this.authProvider.ANONYMOUS)];
case 1: return [2 /*return*/, _a.sent()];
}
});
});
};
/**
* @return {?}
*/
AuthComponent.prototype.resetPassword = /**
* @return {?}
*/
function () {
var _this = this;
this.authProcess.resetPassword(this.resetPasswordEmailFormControl.value)
.then(function () { return _this.passReset = true; });
};
/**
* @return {?}
*/
AuthComponent.prototype._initSignInFormGroupBuilder = /**
* @return {?}
*/
function () {
this.signInFormGroup = new FormGroup({});
this.signInFormGroup.registerControl('email', this.signInEmailFormControl = new FormControl('', [
Validators.required,
Validators.pattern(EMAIL_REGEX)
]));
this.signInFormGroup.registerControl('password', this.sigInPasswordFormControl = new FormControl('', [
Validators.required,
Validators.minLength(6),
Validators.maxLength(25),
]));
};
/**
* @return {?}
*/
AuthComponent.prototype._initSignUpFormGroupBuilder = /**
* @return {?}
*/
function () {
this.signUpFormGroup = new FormGroup({
name: this.sigUpNameFormControl = new FormControl('', [
Validators.required,
Validators.minLength(2),
Validators.maxLength(30),
]),
email: this.sigUpEmailFormControl = new FormControl('', [
Validators.required,
Validators.pattern(EMAIL_REGEX)
]),
password: this.sigUpPasswordFormControl = new FormControl('', [
Validators.required,
Validators.minLength(6),
Validators.maxLength(25),
])
});
};
/**
* @return {?}
*/
AuthComponent.prototype._initResetPasswordFormGroupBuilder = /**
* @return {?}
*/
function () {
this.resetPasswordFormGroup = new FormGroup({
email: this.resetPasswordEmailFormControl = new FormControl('', [
Validators.required,
Validators.pattern(EMAIL_REGEX)
])
});
};
/**
* @param {?=} authProvider
* @return {?}
*/
AuthComponent.prototype._afterSignUpMiddleware = /**
* @param {?=} authProvider
* @return {?}
*/
function (authProvider) {
if (authProvider === this.authProvider.ANONYMOUS) {
return this.signUpAnonymously();
}
return this.signUp();
};
AuthComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-auth-firebaseui',
template: "\n <mat-tab-group [color]=\"color\" [selectedIndex]=\"tabIndex\">\n <!--Reset password tab-->\n <mat-tab *ngIf=\"passwordResetWished\" label=\"Reset Password\">\n <form [formGroup]=\"resetPasswordFormGroup\" (ngSubmit)=\"resetPasswordFormGroup.valid && resetPassword()\">\n\n <mat-card>\n <mat-card-header fxLayoutAlign=\"end\">\n <button mat-icon-button\n [color]=\"color\"\n matTooltip=\"close\"\n matTooltipPosition=\"above\"\n (click)=\"passwordResetWished = false\">\n <mat-icon>close</mat-icon>\n </button>\n </mat-card-header>\n\n <mat-card-content>\n <mat-form-field class=\"full-width\" [appearance]=\"appearance\">\n <mat-label>Reset e-mail address to password</mat-label>\n <input matInput\n [readonly]=\"passReset\"\n formControlName=\"email\"\n title=\"Reset e-mail address to password\"\n required>\n <mat-icon matSuffix [color]=\"color\">email</mat-icon>\n <mat-error *ngIf=\"resetPasswordEmailFormControl.hasError('required')\">\n E-mail is required to reset the password!\n </mat-error>\n <mat-error *ngIf=\"resetPasswordEmailFormControl.hasError('pattern')\">\n Please enter a valid e-mail address\n </mat-error>\n </mat-form-field>\n </mat-card-content>\n <mat-card-actions fxLayoutAlign=\"center\">\n <button mat-raised-button\n type=\"submit\"\n [color]=\"color\"\n [disabled]=\"passReset\">\n Reset\n </button>\n </mat-card-actions>\n <mat-card-footer *ngIf=\"passReset\" fxLayoutAlign=\"center\">\n <p>Reset requested. Check your e-mail instructions.</p>\n </mat-card-footer>\n <mat-card-footer>\n <mat-progress-bar *ngIf=\"authProcess.isLoading\" mode=\"indeterminate\"></mat-progress-bar>\n </mat-card-footer>\n </mat-card>\n </form>\n </mat-tab>\n\n <!--Sign in tab-->\n <mat-tab label=\"Sign in\">\n <mat-card>\n <mat-card-title>Signing in</mat-card-title>\n <mat-card-content>\n <form [formGroup]=\"signInFormGroup\"\n (ngSubmit)=\"signInFormGroup.valid &&\n authProcess.signInWith\n (authProviders.EmailAndPassword,signInFormGroup.value.email,signInFormGroup.value.password)\">\n <div fxLayout=\"column\" fxLayoutAlign=\"center\">\n <mat-form-field [appearance]=\"appearance\">\n <mat-label>E-mail</mat-label>\n <input matInput\n placeholder=\"E-mail\"\n formControlName=\"email\"\n required>\n <mat-icon matSuffix [color]=\"color\">email</mat-icon>\n <mat-error *ngIf=\"signInEmailFormControl.hasError('required')\">\n E-mail is required\n </mat-error>\n <mat-error *ngIf=\"signInEmailFormControl.hasError('pattern')\">\n Please enter a valid e-mail address\n </mat-error>\n </mat-form-field>\n\n <mat-form-field [appearance]=\"appearance\">\n <mat-label>Password</mat-label>\n <input matInput\n type=\"current-password\"\n placeholder=\"Password\"\n minlength=\"6\"\n maxlength=\"25\"\n formControlName=\"password\"\n required>\n <mat-icon matSuffix [color]=\"color\">lock</mat-icon>\n <mat-hint align=\"end\" aria-live=\"polite\">\n {{signInFormGroup.value.password.length}} / 25\n </mat-hint>\n <mat-error *ngIf=\"sigInPasswordFormControl.hasError('required')\">\n Please do not forget the password\n </mat-error>\n <mat-error *ngIf=\"sigInPasswordFormControl.hasError('minlength')\">\n The password must be at least 6 characters long.\n </mat-error>\n <mat-error *ngIf=\"sigInPasswordFormControl.hasError('maxlength')\">\n The password must not exceed 25 characters\n </mat-error>\n </mat-form-field>\n\n <button mat-raised-button\n style=\"margin-top: 20px\"\n type=\"submit\"\n class=\"space-top\"\n [color]=\"color\">\n Log In\n </button>\n\n </div>\n </form>\n\n <div fxLayoutAlign=\"center\">\n <button mat-button\n class=\"space-top\"\n [color]=\"color\"\n (click)=\"createForgotPasswordTab()\">\n Forgot Password?\n </button>\n </div>\n\n </mat-card-content>\n <mat-card-footer *ngIf=\"authProcess.isLoading\">\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n </mat-card-footer>\n </mat-card>\n </mat-tab>\n\n <!--tab register-->\n <mat-tab label=\"Register\">\n <mat-card>\n <mat-card-title>Registration</mat-card-title>\n <div *ngIf=\"!authProcess.emailConfirmationSent;then register else confirm\"></div>\n <ng-template #register>\n <mat-card-content fxLayout=\"column\" fxLayoutAlign=\"center\">\n <form [formGroup]=\"signUpFormGroup\" (ngSubmit)=\"signUpFormGroup.valid &&\n authProcess.signUp\n (signUpFormGroup.value.name,signUpFormGroup.value.email,signUpFormGroup.value.password)\">\n <div fxLayout=\"column\" fxLayoutAlign=\"center\">\n <!--name-->\n <mat-form-field [appearance]=\"appearance\">\n <!--labels will work only with @angular/material@6.2.0 -->\n <mat-label>Name</mat-label>\n <input matInput\n placeholder=\"Name\"\n minlength=\"2\"\n maxlength=\"30\"\n [formControl]=\"sigUpNameFormControl\"\n required>\n <mat-icon matSuffix [color]=\"color\">person</mat-icon>\n <mat-hint align=\"end\" aria-live=\"polite\">\n {{signUpFormGroup.value.name?.length}} / 25\n </mat-hint>\n <mat-error *ngIf=\"sigUpNameFormControl.hasError('required')\">\n Name is required\n </mat-error>\n <mat-error *ngIf=\"sigUpPasswordFormControl.hasError('minlength')\">\n The name is too short!\n </mat-error>\n <mat-error *ngIf=\"sigUpPasswordFormControl.hasError('maxlength')\">\n The name is too long!\n </mat-error>\n </mat-form-field>\n\n <!--email-->\n <mat-form-field [appearance]=\"appearance\">\n <mat-label>E-mail</mat-label>\n <input matInput\n placeholder=\"E-mail\"\n type=\"email\"\n [formControl]=\"sigUpEmailFormControl\">\n <mat-icon matSuffix [color]=\"color\">email</mat-icon>\n <mat-error *ngIf=\"sigUpEmailFormControl.hasError('required')\">\n E-mail is required\n </mat-error>\n <mat-error *ngIf=\"sigUpEmailFormControl.hasError('pattern')\">\n Please enter a valid e-mail address\n </mat-error>\n </mat-form-field>\n\n <!--password-->\n <div fxLayout=\"column\">\n\n <mat-form-field [appearance]=\"appearance\">\n <mat-label>Password</mat-label>\n <input matInput\n type=\"password\"\n placeholder=\"password\"\n name=\"password\"\n [formControl]=\"sigUpPasswordFormControl\"\n required>\n <mat-icon matSuffix [color]=\"color\">lock</mat-icon>\n\n <mat-hint align=\"end\" aria-live=\"polite\">\n {{signUpFormGroup.value.password?.length}} / 25\n </mat-hint>\n\n <mat-error *ngIf=\"sigUpPasswordFormControl.hasError('required')\" class=\"cut-text\">\n Please do not forget the password\n </mat-error>\n\n <mat-error *ngIf=\"sigUpPasswordFormControl.hasError('minlength')\" class=\"cut-text\">\n The password must be at least 6 characters long.\n </mat-error>\n <mat-error *ngIf=\"sigUpPasswordFormControl.hasError('maxlength')\" class=\"cut-text\">\n The password can not be longer than 25 characters.\n </mat-error>\n\n </mat-form-field>\n\n </div>\n\n <button mat-raised-button\n style=\"margin-top: 20px\"\n type=\"submit\"\n [color]=\"color\">\n Register\n </button>\n\n </div>\n </form>\n\n <button *ngIf=\"guestEnabled\"\n mat-button\n style=\"margin-top: 20px\"\n [color]=\"color\"\n (click)=\"openLegalityDialog(authProvider.ANONYMOUS)\">\n <mat-icon>fingerprint</mat-icon>\n continue as guest\n </button>\n\n </mat-card-content>\n\n <mat-card-footer *ngIf=\"authProcess.isLoading\">\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n </mat-card-footer>\n\n </ng-template>\n\n <!--confirm template-->\n <ng-template #confirm>\n <ngx-auth-firebaseui-email-confirmation [email]=\"authProcess.emailToConfirm\"\n [goBackURL]=\"goBackURL\">\n </ngx-auth-firebaseui-email-confirmation>\n </ng-template>\n\n </mat-card>\n </mat-tab>\n </mat-tab-group>\n <mat-divider></mat-divider>\n <ngx-auth-firebaseui-providers [providers]=\"providers\"></ngx-auth-firebaseui-providers>\n ",
styles: ["\n .mat-card{margin:2rem}.space-top{margin-top:.5rem}.full-width{width:100%}.cut-text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n "]
},] },
];
/** @nocollapse */
AuthComponent.ctorParameters = function () { return [
{ type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] },
{ type: AngularFireAuth },
{ type: AuthProcessService$$1 },
{ type: MatDialog }
]; };
AuthComponent.propDecorators = {
providers: [{ type: Input }],
appearance: [{ type: Input }],
tabIndex: [{ type: Input }],
guestEnabled: [{ type: Input }],
tosUrl: [{ type: Input }],
privacyPolicyUrl: [{ type: Input }],
goBackURL: [{ type: Input }],
onSuccess: [{ type: Output }],
onError: [{ type: Output }]
};
return AuthComponent;
}());
var __awaiter$2 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator$2 = (undefined && undefined.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0;