firebaseui-angular-i18n
Version:
[](https://badge.fury.io/js/firebaseui-angular-i18n)
488 lines (478 loc) • 22.6 kB
JavaScript
import { __awaiter } from 'tslib';
import * as i0 from '@angular/core';
import { Injectable, Inject, Optional, EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
import { ɵfirebaseAppFactory, FIREBASE_OPTIONS, FIREBASE_APP_NAME } from '@angular/fire/compat';
import * as i1 from '@angular/fire/compat/auth';
import { USE_EMULATOR } from '@angular/fire/compat/auth';
import _firebase from 'firebase/compat/app';
import * as firebaseuiOriginal from 'firebaseui';
import { Subject } from 'rxjs';
import { DOCUMENT, CommonModule } from '@angular/common';
import 'firebase/compat/auth';
/*
* Created by Raphael Jenni
* Copyright (c) 2017 Raphael Jenni
*/
const firebase = _firebase;
const firebaseui = firebaseuiOriginal;
class FirebaseUISignInSuccessWithAuthResult {
}
class FirebaseUISignInFailure {
}
const FirebaseUILanguages = [
{ code: "ar", name: "Arabic", isRtL: true },
{ code: "bg", name: "Bulgarian" },
{ code: "ca", name: "Catalan" },
{ code: "zh_cn", name: "Chinese (Simplified)" },
{ code: "zh_tw", name: "Chinese (Traditional)" },
{ code: "hr", name: "Croatian" },
{ code: "cs", name: "Czech" },
{ code: "da", name: "Danish" },
{ code: "nl", name: "Dutch" },
{ code: "en", name: "English" },
{ code: "en_gb", name: "English (UK)" },
{ code: "fa", name: "Farsi", isRtL: true },
{ code: "fil", name: "Filipino" },
{ code: "fi", name: "Finnish" },
{ code: "fr", name: "French" },
{ code: "de", name: "German" },
{ code: "el", name: "Greek" },
{ code: "iw", name: "Hebrew", isRtL: true },
{ code: "hi", name: "Hindi" },
{ code: "hu", name: "Hungarian" },
{ code: "id", name: "Indonesian" },
{ code: "it", name: "Italian" },
{ code: "ja", name: "Japanese" },
{ code: "ko", name: "Korean" },
{ code: "lv", name: "Latvian" },
{ code: "lt", name: "Lithuanian" },
{ code: "no", name: "Norwegian (Bokmal)" },
{ code: "pl", name: "Polish" },
{ code: "pt_br", name: "Portuguese (Brazil)" },
{ code: "pt_pt", name: "Portuguese (Portugal)" },
{ code: "ro", name: "Romanian" },
{ code: "ru", name: "Russian" },
{ code: "sr", name: "Serbian" },
{ code: "sk", name: "Slovak" },
{ code: "sl", name: "Slovenian" },
{ code: "es", name: "Spanish" },
{ code: "es_419", name: "Spanish (Latin America)" },
{ code: "sv", name: "Swedish" },
{ code: "th", name: "Thai" },
{ code: "tr", name: "Turkish" },
{ code: "uk", name: "Ukrainian" },
{ code: "vi", name: "Vietnamese" }
];
var $comment = [
"Do not edit this file manually.",
"This is used to dynamically specify which version of Firebase scripts we need to load in order to localize the Firebase UI widget"
];
var firebaseUiVersion = "6.0.2";
var version = {
$comment: $comment,
firebaseUiVersion: firebaseUiVersion
};
class DynamicLoaderService {
constructor(_document) {
this._document = undefined;
this._document = _document;
DynamicLoaderService.ResourcesStore.forEach((res) => {
DynamicLoaderService.LoadedResources[res.name] = {
loaded: false,
type: res.type,
src: res.src
};
});
}
/**
* Loads a series of previously registered Script(s)
* @param resNames The list of resources to load
*/
load(...resNames) {
const promises = resNames.map(name => this.loadResource(name));
return Promise.all(promises);
}
/**
* Loads a script given it's name.
* @param name Name of the script to laod.
*/
loadResource(name) {
return new Promise((resolve, reject) => {
const resourceRef = DynamicLoaderService.LoadedResources[name];
if (!resourceRef) {
return reject({ resource: name, loaded: false, statusText: 'Resource not registered' });
}
if (resourceRef.loaded) {
return resolve({ resource: name, loaded: true, statusText: 'Already Loaded' });
}
const tag = resourceRef.type === "js" ? this._document.createElement("script") : this._document.createElement("link");
tag.onload = (e) => {
resourceRef.loaded = true;
return resolve({ resource: name, loaded: true, statusText: "Loaded", status: e });
};
tag.onerror = (error) => {
return reject({ resource: name, loaded: false, statusText: 'Error', error: error });
};
if (tag instanceof HTMLScriptElement) {
tag.type = "text/javascript";
tag.async = true;
tag.src = resourceRef.src;
}
if (tag instanceof HTMLLinkElement) {
tag.type = "text/css";
tag.href = resourceRef.src;
tag.rel = "stylesheet";
}
this._document.head.appendChild(tag);
});
}
/**
* Registers a series of Resource(s), without loading them
* @param resources A list of Resource(s)
*/
register(...resources) {
resources.forEach(res => {
DynamicLoaderService.ResourcesStore.push(res);
DynamicLoaderService.LoadedResources[res.name] = {
loaded: false,
type: res.type,
src: res.src
};
});
}
/**
* Registers and then loads a list of Resource(s)
* @param resources The list of resources
*/
registerAndLoad(...resources) {
const resNames = resources.map(s => s.name);
this.register(...resources);
return this.load(...resNames);
}
}
DynamicLoaderService.ResourcesStore = [];
DynamicLoaderService.LoadedResources = {};
DynamicLoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: DynamicLoaderService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
DynamicLoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: DynamicLoaderService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: DynamicLoaderService, decorators: [{
type: Injectable
}], ctorParameters: function () {
return [{ type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }];
} });
const FIREBASEUI_CDN_VERSION = firebaseUiVersion || "6.0.0";
const FIREBASEUI_CDN_URL = `https://www.gstatic.com/firebasejs/ui/${FIREBASEUI_CDN_VERSION}`;
class FirebaseuiAngularLibraryService {
constructor(_firebaseUiConfig, options, nameOrConfig, _useEmulator, // can't use the tuple here
_scriptLoaderService, zone) {
this._firebaseUiConfig = _firebaseUiConfig;
this._useEmulator = _useEmulator;
this._scriptLoaderService = _scriptLoaderService;
/**
* This method returns the observable of the Firebase UI instance
*/
this.getFirebaseUiObservable = () => FirebaseuiAngularLibraryService.uiInstanceObservable;
// noinspection JSNonASCIINames
this.firebaseInstance = ɵfirebaseAppFactory(options, zone, nameOrConfig);
}
/**
* Creates a new instance of FirebaseUI
*/
instantiateFirebaseUI() {
const auth = this.firebaseInstance.auth();
if (this._useEmulator) {
const connectionString = this._useEmulator[0].startsWith('http') ? this._useEmulator[0] : `http://${this._useEmulator.join(':')}`;
auth.useEmulator(connectionString);
}
FirebaseuiAngularLibraryService.firebaseUiInstance = new firebaseuiOriginal.auth.AuthUI(auth);
FirebaseuiAngularLibraryService.uiInstanceObservable.next(FirebaseuiAngularLibraryService.firebaseUiInstance);
}
//#region Changes made to the original lib to support i18n
/**
* Changes language of the currently displayed Firebase UI instance
* @param languageCode One of the codes specified by a "FirebaseUILanguage" object
*/
setLanguage(languageCode) {
return __awaiter(this, void 0, void 0, function* () {
if (FirebaseuiAngularLibraryService.firebaseUiInstance) {
yield FirebaseuiAngularLibraryService.firebaseUiInstance.delete();
}
const previousLanguageCode = FirebaseuiAngularLibraryService.currentLanguageCode;
const previousLanguage = previousLanguageCode ? this.getLanguageByCode(previousLanguageCode) : null;
FirebaseuiAngularLibraryService.currentLanguageCode = languageCode ? languageCode.toLowerCase() : "en";
if (!languageCode || (languageCode.toLowerCase() === "en" && FirebaseuiAngularLibraryService.firstLoad)) {
console.log("[service] using lib from npm bundles");
return this.instantiateFirebaseUI();
}
FirebaseuiAngularLibraryService.firstLoad = false;
const languages = FirebaseUILanguages.filter((l) => l.code.toLowerCase() === languageCode.toLowerCase());
if (languages.length !== 1) {
throw new Error("Invalid language code");
}
// Otherwise we'll use a version of the same library from CDN.
// Expose a reference to the firebase object or the firebaseui won't work
if (typeof window !== "undefined" && typeof window.firebase === "undefined") {
// Semi-cheat: firebaseInstance is an instance of FirebaseApp,
// but FirebaseUI uses an instance of the "vanilla" Firebase object (hence the cast to any and the "".firebase_" part)
window.firebase = _firebase;
}
if (typeof global !== "undefined" && typeof global["firebase"] === "undefined") {
global["firebase"] = _firebase;
}
const language = languages[0];
const toLoad = [
{
name: `firebaseui-${language.code}`,
type: "js",
src: `${FIREBASEUI_CDN_URL}/firebase-ui-auth__${language.code}.js`
}
];
// If the selected language is a Right to Left one, load also the special css file
if (language.isRtL) {
toLoad.push({
name: "firebaseui-css-rtl",
type: "css",
src: `${FIREBASEUI_CDN_URL}/firebase-ui-auth-rtl.css`
});
}
// If we had previsouly loaded another language that was a RtL one and current one is not,
// we need to load the LtR css
if (previousLanguage && previousLanguage.isRtL && !language.isRtL) {
toLoad.push({
name: "firebaseui-css",
type: "css",
src: `${FIREBASEUI_CDN_URL}/firebase-ui-auth.css`
});
}
yield this._scriptLoaderService.registerAndLoad(...toLoad);
// and create a new firebaseui instance, using the imported firebaseui
return this.instantiateFirebaseUI();
});
}
/**
* Returns the currently selected language, as an instance of FirebaseUILanguage.
* If no previous language was set, it will return language specified in the ".forRoot" method of this module.
* If the parameter "language" was not set, it will defualt to English
*/
getCurrentLanguage() {
return this.getLanguageByCode(FirebaseuiAngularLibraryService.currentLanguageCode || this._firebaseUiConfig.language || "en");
}
/**
* Given a FirebaseUILanguage code, it returns the matching object
* @param code Language code
*/
getLanguageByCode(code) {
const matching = FirebaseUILanguages.filter((lang) => lang.code.toLowerCase() === code.toLowerCase());
if (matching.length === 1) {
return matching[0];
}
return null;
}
}
FirebaseuiAngularLibraryService.firebaseUiInstance = undefined;
FirebaseuiAngularLibraryService.uiInstanceObservable = new Subject();
FirebaseuiAngularLibraryService.currentLanguageCode = "";
FirebaseuiAngularLibraryService.firstLoad = true;
FirebaseuiAngularLibraryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: FirebaseuiAngularLibraryService, deps: [{ token: 'firebaseUIAuthConfig' }, { token: FIREBASE_OPTIONS }, { token: FIREBASE_APP_NAME, optional: true }, { token: USE_EMULATOR, optional: true }, { token: DynamicLoaderService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
FirebaseuiAngularLibraryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: FirebaseuiAngularLibraryService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: FirebaseuiAngularLibraryService, decorators: [{
type: Injectable
}], ctorParameters: function () {
return [{ type: undefined, decorators: [{
type: Inject,
args: ['firebaseUIAuthConfig']
}] }, { type: undefined, decorators: [{
type: Inject,
args: [FIREBASE_OPTIONS]
}] }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [FIREBASE_APP_NAME]
}] }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [USE_EMULATOR]
}] }, { type: DynamicLoaderService }, { type: i0.NgZone }];
} });
class FirebaseuiAngularLibraryComponent {
constructor(angularFireAuth, _firebaseUiConfig, _firebaseUiConfig_Feature, ngZone, firebaseUIService) {
this.angularFireAuth = angularFireAuth;
this._firebaseUiConfig = _firebaseUiConfig;
this._firebaseUiConfig_Feature = _firebaseUiConfig_Feature;
this.ngZone = ngZone;
this.firebaseUIService = firebaseUIService;
this.signInSuccessWithAuthResultCallback = new EventEmitter(); // tslint:disable-line
this.signInFailureCallback = new EventEmitter(); // tslint:disable-line
this.uiShownCallback = new EventEmitter(); // tslint:disable-line
this.firebaseUISubscription = this.firebaseUIService.getFirebaseUiObservable().subscribe((fireUIInstance) => {
this.firebaseUIPopup(fireUIInstance);
});
}
ngOnChanges(changes) {
return __awaiter(this, void 0, void 0, function* () {
yield this.firebaseUIService.setLanguage(changes.language.currentValue);
});
}
get firebaseUiConfig() {
return Object.assign(Object.assign({}, this._firebaseUiConfig), this._firebaseUiConfig_Feature);
}
ngOnInit() {
this.subscription = this.angularFireAuth.authState.subscribe((value) => {
if ((value && value.isAnonymous) || !value) {
if (this.firebaseUiConfig.signInOptions.length !== 0) {
// initialization of ngOnChanges occurs only when language value is accepted as @input. fire manually if it is not
if (!this.language) {
this.firebaseUIService.setLanguage('en');
}
}
else {
throw new Error('There must be at least one AuthProvider.');
}
}
});
}
ngOnDestroy() {
if (!!this.subscription) {
this.subscription.unsubscribe();
}
if (!!this.firebaseUISubscription) {
this.firebaseUISubscription.unsubscribe();
}
}
getUIAuthConfig() {
if (!this.firebaseUiConfig.callbacks) {
this._firebaseUiConfig[FirebaseuiAngularLibraryComponent.COMPUTED_CALLBACKS] = true;
this._firebaseUiConfig.callbacks = this.getCallbacks();
}
return this.firebaseUiConfig;
}
firebaseUIPopup(firebaseUiInstance) {
const uiAuthConfig = this.getUIAuthConfig();
// Check if callbacks got computed to reset them again after providing the to firebaseui.
// Necessary for allowing updating the firebaseui config during runtime.
let resetCallbacks = false;
if (uiAuthConfig[FirebaseuiAngularLibraryComponent.COMPUTED_CALLBACKS]) {
resetCallbacks = true;
delete uiAuthConfig[FirebaseuiAngularLibraryComponent.COMPUTED_CALLBACKS];
}
delete uiAuthConfig.language;
// show the firebaseui
firebaseUiInstance.start('#firebaseui-auth-container', uiAuthConfig);
if (resetCallbacks) {
this._firebaseUiConfig.callbacks = null;
}
}
getCallbacks() {
const signInSuccessWithAuthResultCallback = (authResult, redirectUrl) => {
this.ngZone.run(() => {
this.signInSuccessWithAuthResultCallback.emit({
authResult,
redirectUrl
});
});
return this.firebaseUiConfig.signInSuccessUrl;
};
const signInFailureCallback = (error) => {
this.ngZone.run(() => {
this.signInFailureCallback.emit({
code: error.code,
credential: error.credential
});
});
return Promise.reject();
};
const uiShownCallback = () => {
this.ngZone.run(() => {
this.uiShownCallback.emit();
});
};
return {
signInSuccessWithAuthResult: signInSuccessWithAuthResultCallback,
signInFailure: signInFailureCallback,
uiShown: uiShownCallback
};
}
}
FirebaseuiAngularLibraryComponent.COMPUTED_CALLBACKS = 'COMPUTED_CALLBACKS';
FirebaseuiAngularLibraryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: FirebaseuiAngularLibraryComponent, deps: [{ token: i1.AngularFireAuth }, { token: 'firebaseUIAuthConfig' }, { token: 'firebaseUIAuthConfigFeature' }, { token: i0.NgZone }, { token: FirebaseuiAngularLibraryService }], target: i0.ɵɵFactoryTarget.Component });
FirebaseuiAngularLibraryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: FirebaseuiAngularLibraryComponent, selector: "firebase-ui", inputs: { language: "language" }, outputs: { signInSuccessWithAuthResultCallback: "signInSuccessWithAuthResult", signInFailureCallback: "signInFailure", uiShownCallback: "uiShown" }, usesOnChanges: true, ngImport: i0, template: '<div id="firebaseui-auth-container"></div>', isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: FirebaseuiAngularLibraryComponent, decorators: [{
type: Component,
args: [{
selector: 'firebase-ui',
template: '<div id="firebaseui-auth-container"></div>'
}]
}], ctorParameters: function () {
return [{ type: i1.AngularFireAuth }, { type: undefined, decorators: [{
type: Inject,
args: ['firebaseUIAuthConfig']
}] }, { type: undefined, decorators: [{
type: Inject,
args: ['firebaseUIAuthConfigFeature']
}] }, { type: i0.NgZone }, { type: FirebaseuiAngularLibraryService }];
}, propDecorators: { language: [{
type: Optional
}, {
type: Input,
args: ["language"]
}], signInSuccessWithAuthResultCallback: [{
type: Output,
args: ['signInSuccessWithAuthResult']
}], signInFailureCallback: [{
type: Output,
args: ['signInFailure']
}], uiShownCallback: [{
type: Output,
args: ['uiShown']
}] } });
class FirebaseUIModule {
static forRoot(firebaseUiAuthConfig) {
return {
ngModule: FirebaseUIModule,
providers: [
{ provide: 'firebaseUIAuthConfig', useValue: firebaseUiAuthConfig },
{ provide: 'firebaseUIAuthConfigFeature', useValue: {} }
]
};
}
static forFeature(firebaseUIAuthConfig) {
return {
ngModule: FirebaseUIModule,
providers: [
{ provide: 'firebaseUIAuthConfigFeature', useValue: firebaseUIAuthConfig }
]
};
}
}
FirebaseUIModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: FirebaseUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
FirebaseUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.2", ngImport: i0, type: FirebaseUIModule, declarations: [FirebaseuiAngularLibraryComponent], imports: [CommonModule], exports: [FirebaseuiAngularLibraryComponent] });
FirebaseUIModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: FirebaseUIModule, providers: [
FirebaseuiAngularLibraryService,
DynamicLoaderService
], imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: FirebaseUIModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule
],
declarations: [FirebaseuiAngularLibraryComponent],
providers: [
FirebaseuiAngularLibraryService,
DynamicLoaderService
],
exports: [FirebaseuiAngularLibraryComponent]
}]
}] });
/*
* Public API Surface of firebaseui-angular-library
*/
/**
* Generated bundle index. Do not edit.
*/
export { FirebaseUILanguages, FirebaseUIModule, FirebaseUISignInFailure, FirebaseUISignInSuccessWithAuthResult, FirebaseuiAngularLibraryComponent, FirebaseuiAngularLibraryService, firebase, firebaseui };
//# sourceMappingURL=firebaseui-angular-i18n.mjs.map