@frontegg/js 6.0.1-alpha.5 → 6.0.3-alpha.1

package/AdminPortalRenderer/index.d.ts

@@ -0,0 +1,17 @@
+import { EnhancedStore } from '@frontegg/redux-store';
+import { FronteggAppOptions, FronteggThemeOptions } from '@frontegg/types';
+import { FronteggApp } from '../FronteggApp';
+export declare class AdminPortalRenderer {
+    app: FronteggApp;
+    options: FronteggAppOptions;
+    store: EnhancedStore;
+    setRoute: (route: string) => void;
+    themeSetter: ((themeOptions: FronteggThemeOptions) => {}) | undefined;
+    themeOptions: FronteggThemeOptions;
+    constructor(name: string, themeOptions: FronteggThemeOptions, store?: EnhancedStore, appOptions?: Partial<FronteggAppOptions>);
+    render(adminPortalContainer: HTMLElement): Promise<void>;
+    setStaticRoute(staticRoute: string): void;
+    unmount(): void;
+    setTheme(themeOptions: FronteggThemeOptions): void;
+}
+export default AdminPortalRenderer;

package/AdminPortalRenderer/index.js

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createFronteggStore } from '@frontegg/redux-store';
+import { Metadata } from '@frontegg/types';
+import { FronteggApp } from '../FronteggApp';
+export class AdminPortalRenderer {
+  constructor(name, themeOptions, store, appOptions) {
+    this.app = void 0;
+    this.options = void 0;
+    this.store = void 0;
+
+    this.setRoute = () => {};
+
+    this.themeSetter = void 0;
+    this.themeOptions = {};
+    const contextOptions = {
+      baseUrl: 'preview'
+    };
+    this.store = store != null ? store : createFronteggStore({
+      context: contextOptions
+    }, this, true, undefined, undefined, true);
+    this.options = _extends({
+      themeOptions,
+      iframeRendering: true,
+      metadata: {},
+      previewMode: true,
+      builderMode: true,
+      store: this.store,
+      contextOptions
+    }, appOptions);
+    this.app = new FronteggApp(this.options, name, true);
+    Metadata.set({}, name);
+  }
+
+  async render(adminPortalContainer) {
+    let adminPortalEl = adminPortalContainer.querySelector('#root');
+
+    if (!adminPortalEl) {
+      adminPortalEl = adminPortalContainer.ownerDocument.createElement('div');
+      adminPortalEl.setAttribute('id', 'root');
+      adminPortalContainer.appendChild(adminPortalEl);
+    }
+
+    this.app.adminPortalContainer = adminPortalContainer;
+    this.app.adminPortalEl = adminPortalEl;
+
+    const setThemeSetter = themeSetter => {
+      this.themeSetter = themeSetter;
+    };
+
+    const setStaticRouteSetter = setStaticRoute => {
+      this.setRoute = setStaticRoute;
+    };
+
+    const FronteggAdminPortal = await this.app.loadScript('FronteggAdminPortal');
+    this.app.adminPortalRenderer = FronteggAdminPortal.renderPage(adminPortalEl, {
+      options: this.options,
+      injector: this.app,
+      setThemeSetter,
+      setStaticRouteSetter
+    });
+    this.app.loading = false;
+  }
+
+  setStaticRoute(staticRoute) {
+    var _this$setRoute;
+
+    (_this$setRoute = this.setRoute) == null ? void 0 : _this$setRoute.call(this, staticRoute);
+  }
+
+  unmount() {
+    try {
+      var _this$app$adminPortal;
+
+      (_this$app$adminPortal = this.app.adminPortalRenderer) == null ? void 0 : _this$app$adminPortal.unmount();
+    } catch (e) {
+      console.error('Failed to unmount admin Portal renderer', e);
+    }
+  }
+
+  setTheme(themeOptions) {
+    var _this$themeSetter;
+
+    this.themeOptions = themeOptions;
+    (_this$themeSetter = this.themeSetter) == null ? void 0 : _this$themeSetter.call(this, this.themeOptions);
+  }
+
+}
+export default AdminPortalRenderer;

package/AdminPortalRenderer/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/AdminPortalRenderer/index.js",
+  "types": "./index.d.ts"
+}

package/FronteggApp/FronteggApp.d.ts

@@ -14,13 +14,17 @@ export declare class FronteggApp {
     readonly iframeRendering: boolean;
     options: FronteggAppOptions;
     loading: boolean;
+    cdnUrl: string;
     customElementName: string;
     adminPortalEl?: HTMLElement;
+    adminPortalRenderer?: any;
     loginBoxEl?: HTMLElement;
     checkoutDialogEl?: HTMLElement;
+    checkoutDialogRenderer?: any;
     adminPortalContainer?: HTMLElement;
     loginBoxContainer?: HTMLElement;
     checkoutDialogContainer?: HTMLElement;
+    loginBoxRenderer?: any;
     store: Omit<EnhancedStore<RootState>, 'dispatch'> & {
         dispatch: Dispatch;
     };
@@ -33,11 +37,11 @@ export declare class FronteggApp {
     updateLocalizationsSetter: (localizationUpdateFn: (localizations: LocalizationsOverrides) => void) => void;
     updateMetadata(metadata: FronteggAppOptions['metadata']): void;
     addOnLoadedListener(listener: () => void): void;
-    loadScript(url: string, component: string): Promise<unknown>;
+    loadScript(component: string): Promise<unknown>;
     loadLoginBox(): Promise<void>;
     showAdminPortal(): Promise<void>;
     hideAdminPortal(): void;
-    showCheckoutDialog(opts: FronteggCheckoutDialogOptions): void;
+    showCheckoutDialog(opts: FronteggCheckoutDialogOptions): Promise<void>;
     hideCheckoutDialog(): void;
     close(): void;
 }

package/FronteggApp/FronteggApp.js

@@ -7,19 +7,23 @@ import { fetch as FronteggFetch } from '@frontegg/rest-api';
 import versions from '../version';
 export class FronteggApp {
   constructor(_options, name, iframeRendering = false) {
-    var _this$options$store, _this$options$authOpt, _this$options$authOpt2, _this$options$auditsO;
+    var _this$options$store, _this$options$authOpt, _this$options$auditsO;
 
     this.name = void 0;
     this.iframeRendering = void 0;
     this.options = void 0;
     this.loading = true;
+    this.cdnUrl = `https://assets.frontegg.com/admin-box/${versions.cdnVersion}`;
     this.customElementName = '';
     this.adminPortalEl = void 0;
+    this.adminPortalRenderer = void 0;
     this.loginBoxEl = void 0;
     this.checkoutDialogEl = void 0;
+    this.checkoutDialogRenderer = void 0;
     this.adminPortalContainer = void 0;
     this.loginBoxContainer = void 0;
     this.checkoutDialogContainer = void 0;
+    this.loginBoxRenderer = void 0;
     this.store = void 0;
     this.loadingListeners = [];
     this.updateLocalizations = void 0;
@@ -67,11 +71,21 @@ export class FronteggApp {
         requestCredentials: 'include'
       }, _options.contextOptions)
     });
+
+    if (this.options.cdnUrl) {
+      this.cdnUrl = this.options.cdnUrl;
+    }
+
     this.customElementName = customElementName;
+    const authOptions = this.options.authOptions ? _extends({}, this.options.authOptions, {
+      hostedLoginBox: this.options.hostedLoginBox
+    }) : {
+      hostedLoginBox: this.options.hostedLoginBox
+    };
     this.store = (_this$options$store = this.options.store) != null ? _this$options$store : createFronteggStore({
       context: this.options.contextOptions
-    }, this, this.options.previewMode, (_this$options$authOpt = this.options.authOptions) != null ? _this$options$authOpt : {}, {
-      auth: (_this$options$authOpt2 = this.options.authOptions) != null ? _this$options$authOpt2 : {},
+    }, this, this.options.previewMode, authOptions, {
+      auth: (_this$options$authOpt = this.options.authOptions) != null ? _this$options$authOpt : {},
       audits: (_this$options$auditsO = this.options.auditsOptions) != null ? _this$options$auditsO : {}
     });
     AppHolder.setInstance(appName, this);
@@ -95,7 +109,7 @@ export class FronteggApp {
       this.loadLoginBox();
     }
 
-    this.loadScript(`https://assets.frontegg.com/admin-box/admin-portal/${versions.cdnVersion}/index.js`, 'FronteggAdminPortal');
+    this.loadScript('FronteggAdminPortal');
   }
 
   updateMetadata(metadata) {
@@ -117,15 +131,21 @@ export class FronteggApp {
     this.loadingListeners.push(listener);
   }
 
-  loadScript(url, component) {
+  loadScript(component) {
     return new Promise((resolve, reject) => {
       if (window[component]) {
         resolve(window[component]);
         return;
       }
 
+      const entries = {
+        FronteggLoginBox: 'login-box/index.js',
+        FronteggAdminPortal: 'admin-portal/index.js'
+      };
       const script = document.createElement('script');
-      script.src = url;
+      script.src = `${this.cdnUrl}/${entries[component]}`;
+      script.setAttribute('id', `${component}Script`);
+      script.setAttribute('cdn-url', this.cdnUrl);
 
       script.onload = () => {
         resolve(window[component]);
@@ -141,7 +161,7 @@ export class FronteggApp {
   }
 
   async loadLoginBox() {
-    const FronteggLoginBox = await this.loadScript(`https://assets.frontegg.com/admin-box/login-box/${versions.cdnVersion}/index.js`, 'FronteggLoginBox');
+    const FronteggLoginBox = await this.loadScript('FronteggLoginBox');
     FronteggLoginBox.render(this.loginBoxEl, {
       injector: this,
       options: this.options
@@ -156,19 +176,45 @@ export class FronteggApp {
   }
 
   async showAdminPortal() {
-    const FronteggAdminPortal = await this.loadScript(`https://assets.frontegg.com/admin-box/admin-portal/${versions.cdnVersion}/index.js`, 'FronteggAdminPortal');
-    FronteggAdminPortal.render(this.adminPortalEl, {
+    const FronteggAdminPortal = await this.loadScript('FronteggAdminPortal');
+    this.adminPortalRenderer = FronteggAdminPortal.render(this.adminPortalEl, {
       injector: this,
       options: this.options
     });
   }
 
-  hideAdminPortal() {}
+  hideAdminPortal() {
+    try {
+      var _this$adminPortalRend;
+
+      (_this$adminPortalRend = this.adminPortalRenderer) == null ? void 0 : _this$adminPortalRend.unmount();
+    } catch (e) {
+      console.error('Failed to unmount admin portal', e);
+    }
+  }
+
+  async showCheckoutDialog(opts) {
+    const FronteggAdminPortal = await this.loadScript('FronteggAdminPortal');
+    this.checkoutDialogRenderer = FronteggAdminPortal.renderCheckoutDialog(this.checkoutDialogEl, _extends({
+      injector: this
+    }, opts, {
+      options: this.options
+    }));
+  }
 
-  showCheckoutDialog(opts) {}
+  hideCheckoutDialog() {
+    try {
+      var _this$checkoutDialogR;
 
-  hideCheckoutDialog() {}
+      (_this$checkoutDialogR = this.checkoutDialogRenderer) == null ? void 0 : _this$checkoutDialogR.unmount();
+    } catch (e) {
+      console.error('Failed to unmount checkout dialog', e);
+    }
+  }
 
-  close() {}
+  close() {
+    this.hideAdminPortal();
+    this.hideCheckoutDialog();
+  }
 
 }

package/LoginBoxRenderer/index.d.ts

@@ -0,0 +1,20 @@
+import { EnhancedStore, FronteggState } from '@frontegg/redux-store';
+import { FronteggAppOptions, FronteggThemeOptions } from '@frontegg/types';
+import { FronteggApp } from '../FronteggApp';
+declare const defaultTheme = "modern";
+export { defaultTheme };
+export declare class LoginBoxRenderer {
+    app: FronteggApp;
+    options: FronteggAppOptions;
+    store: EnhancedStore;
+    themeSetter: ((themeOptions: FronteggThemeOptions) => {}) | undefined;
+    setRoute: (route: string) => void;
+    themeOptions: FronteggThemeOptions;
+    constructor(name: string, themeOptions: FronteggThemeOptions, store?: EnhancedStore, appOptions?: Partial<FronteggAppOptions>);
+    render(loginBoxContainer: HTMLElement): Promise<void>;
+    unmount(): void;
+    setTheme(themeOptions: FronteggThemeOptions): void;
+    setStaticRoute(staticRoute: string): void;
+    setStore(state: Partial<FronteggState['auth']>): void;
+}
+export default LoginBoxRenderer;

package/LoginBoxRenderer/index.js

@@ -0,0 +1,100 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createFronteggStore } from '@frontegg/redux-store';
+import { Metadata } from '@frontegg/types';
+import { FronteggApp } from '../FronteggApp';
+const defaultTheme = 'modern';
+export { defaultTheme };
+export class LoginBoxRenderer {
+  constructor(name, themeOptions, store, appOptions) {
+    this.app = void 0;
+    this.options = void 0;
+    this.store = void 0;
+    this.themeSetter = void 0;
+
+    this.setRoute = () => {};
+
+    this.themeOptions = {};
+    const contextOptions = {
+      baseUrl: 'preview'
+    };
+    this.store = store != null ? store : createFronteggStore({
+      context: contextOptions
+    }, this, true, undefined, undefined, true);
+    this.options = _extends({
+      themeOptions,
+      iframeRendering: true,
+      metadata: {},
+      previewMode: true,
+      builderMode: true,
+      store: this.store,
+      contextOptions,
+      onRedirectTo: () => {
+        console.debug('path');
+      }
+    }, appOptions);
+    this.app = new FronteggApp(this.options, name, true);
+    Metadata.set({}, name);
+  }
+
+  async render(loginBoxContainer) {
+    let loginBoxEl = loginBoxContainer.querySelector('#root');
+
+    if (!loginBoxEl) {
+      loginBoxEl = loginBoxContainer.ownerDocument.createElement('div');
+      loginBoxEl.setAttribute('id', 'root');
+      loginBoxContainer.appendChild(loginBoxEl);
+    }
+
+    this.app.loginBoxContainer = loginBoxContainer;
+    this.app.loginBoxEl = loginBoxEl;
+
+    const setThemeSetter = themeSetter => {
+      this.themeSetter = themeSetter;
+    };
+
+    const setStaticRouteSetter = setStaticRoute => {
+      this.setRoute = setStaticRoute;
+    };
+
+    const FronteggAdminPortal = await this.app.loadScript('FronteggLoginBox');
+    this.app.loginBoxRenderer = FronteggAdminPortal.renderPage(loginBoxEl, {
+      options: this.options,
+      injector: this.app,
+      setThemeSetter,
+      setStaticRouteSetter,
+      staticRoute: '/account/login'
+    });
+  }
+
+  unmount() {
+    try {
+      var _this$app$loginBoxRen;
+
+      (_this$app$loginBoxRen = this.app.loginBoxRenderer) == null ? void 0 : _this$app$loginBoxRen.unmount();
+    } catch (e) {
+      console.error('Failed to unmount login box renderer', e);
+    }
+  }
+
+  setTheme(themeOptions) {
+    var _this$themeSetter;
+
+    this.themeOptions = themeOptions;
+    (_this$themeSetter = this.themeSetter) == null ? void 0 : _this$themeSetter.call(this, this.themeOptions);
+  }
+
+  setStaticRoute(staticRoute) {
+    var _this$setRoute;
+
+    (_this$setRoute = this.setRoute) == null ? void 0 : _this$setRoute.call(this, staticRoute);
+  }
+
+  setStore(state) {
+    this.store.dispatch({
+      type: 'auth/setState',
+      payload: state
+    });
+  }
+
+}
+export default LoginBoxRenderer;

package/LoginBoxRenderer/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/LoginBoxRenderer/index.js",
+  "types": "./index.d.ts"
+}

package/index.d.ts

@@ -3,4 +3,6 @@ export * from './FronteggApp';
 export * from './HostedLogin';
 export * from './AdminPortal';
 export * from './CheckoutDialog';
+export * from './AdminPortalRenderer';
+export * from './LoginBoxRenderer';
 export * from './initialize';

package/index.js

@@ -1,4 +1,4 @@
-/** @license Frontegg v6.0.1-alpha.5
+/** @license Frontegg v6.0.3-alpha.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,4 +8,6 @@ export * from './FronteggApp';
 export * from './HostedLogin';
 export * from './AdminPortal';
 export * from './CheckoutDialog';
+export * from './AdminPortalRenderer';
+export * from './LoginBoxRenderer';
 export * from './initialize';

package/node/AdminPortalRenderer/index.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AdminPortalRenderer = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _reduxStore = require("@frontegg/redux-store");
+
+var _types = require("@frontegg/types");
+
+var _FronteggApp = require("../FronteggApp");
+
+class AdminPortalRenderer {
+  constructor(name, themeOptions, store, appOptions) {
+    this.app = void 0;
+    this.options = void 0;
+    this.store = void 0;
+
+    this.setRoute = () => {};
+
+    this.themeSetter = void 0;
+    this.themeOptions = {};
+    const contextOptions = {
+      baseUrl: 'preview'
+    };
+    this.store = store != null ? store : (0, _reduxStore.createFronteggStore)({
+      context: contextOptions
+    }, this, true, undefined, undefined, true);
+    this.options = (0, _extends2.default)({
+      themeOptions,
+      iframeRendering: true,
+      metadata: {},
+      previewMode: true,
+      builderMode: true,
+      store: this.store,
+      contextOptions
+    }, appOptions);
+    this.app = new _FronteggApp.FronteggApp(this.options, name, true);
+
+    _types.Metadata.set({}, name);
+  }
+
+  async render(adminPortalContainer) {
+    let adminPortalEl = adminPortalContainer.querySelector('#root');
+
+    if (!adminPortalEl) {
+      adminPortalEl = adminPortalContainer.ownerDocument.createElement('div');
+      adminPortalEl.setAttribute('id', 'root');
+      adminPortalContainer.appendChild(adminPortalEl);
+    }
+
+    this.app.adminPortalContainer = adminPortalContainer;
+    this.app.adminPortalEl = adminPortalEl;
+
+    const setThemeSetter = themeSetter => {
+      this.themeSetter = themeSetter;
+    };
+
+    const setStaticRouteSetter = setStaticRoute => {
+      this.setRoute = setStaticRoute;
+    };
+
+    const FronteggAdminPortal = await this.app.loadScript('FronteggAdminPortal');
+    this.app.adminPortalRenderer = FronteggAdminPortal.renderPage(adminPortalEl, {
+      options: this.options,
+      injector: this.app,
+      setThemeSetter,
+      setStaticRouteSetter
+    });
+    this.app.loading = false;
+  }
+
+  setStaticRoute(staticRoute) {
+    var _this$setRoute;
+
+    (_this$setRoute = this.setRoute) == null ? void 0 : _this$setRoute.call(this, staticRoute);
+  }
+
+  unmount() {
+    try {
+      var _this$app$adminPortal;
+
+      (_this$app$adminPortal = this.app.adminPortalRenderer) == null ? void 0 : _this$app$adminPortal.unmount();
+    } catch (e) {
+      console.error('Failed to unmount admin Portal renderer', e);
+    }
+  }
+
+  setTheme(themeOptions) {
+    var _this$themeSetter;
+
+    this.themeOptions = themeOptions;
+    (_this$themeSetter = this.themeSetter) == null ? void 0 : _this$themeSetter.call(this, this.themeOptions);
+  }
+
+}
+
+exports.AdminPortalRenderer = AdminPortalRenderer;
+var _default = AdminPortalRenderer;
+exports.default = _default;

package/node/FronteggApp/FronteggApp.js

@@ -23,19 +23,23 @@ var _version = _interopRequireDefault(require("../version"));
 
 class FronteggApp {
   constructor(_options, name, iframeRendering = false) {
-    var _this$options$store, _this$options$authOpt, _this$options$authOpt2, _this$options$auditsO;
+    var _this$options$store, _this$options$authOpt, _this$options$auditsO;
 
     this.name = void 0;
     this.iframeRendering = void 0;
     this.options = void 0;
     this.loading = true;
+    this.cdnUrl = `https://assets.frontegg.com/admin-box/${_version.default.cdnVersion}`;
     this.customElementName = '';
     this.adminPortalEl = void 0;
+    this.adminPortalRenderer = void 0;
     this.loginBoxEl = void 0;
     this.checkoutDialogEl = void 0;
+    this.checkoutDialogRenderer = void 0;
     this.adminPortalContainer = void 0;
     this.loginBoxContainer = void 0;
     this.checkoutDialogContainer = void 0;
+    this.loginBoxRenderer = void 0;
     this.store = void 0;
     this.loadingListeners = [];
     this.updateLocalizations = void 0;
@@ -83,11 +87,21 @@ class FronteggApp {
         requestCredentials: 'include'
       }, _options.contextOptions)
     });
+
+    if (this.options.cdnUrl) {
+      this.cdnUrl = this.options.cdnUrl;
+    }
+
     this.customElementName = customElementName;
+    const authOptions = this.options.authOptions ? (0, _extends2.default)({}, this.options.authOptions, {
+      hostedLoginBox: this.options.hostedLoginBox
+    }) : {
+      hostedLoginBox: this.options.hostedLoginBox
+    };
     this.store = (_this$options$store = this.options.store) != null ? _this$options$store : (0, _reduxStore.createFronteggStore)({
       context: this.options.contextOptions
-    }, this, this.options.previewMode, (_this$options$authOpt = this.options.authOptions) != null ? _this$options$authOpt : {}, {
-      auth: (_this$options$authOpt2 = this.options.authOptions) != null ? _this$options$authOpt2 : {},
+    }, this, this.options.previewMode, authOptions, {
+      auth: (_this$options$authOpt = this.options.authOptions) != null ? _this$options$authOpt : {},
       audits: (_this$options$auditsO = this.options.auditsOptions) != null ? _this$options$auditsO : {}
     });
 
@@ -112,7 +126,7 @@ class FronteggApp {
       this.loadLoginBox();
     }
 
-    this.loadScript(`https://assets.frontegg.com/admin-box/admin-portal/${_version.default.cdnVersion}/index.js`, 'FronteggAdminPortal');
+    this.loadScript('FronteggAdminPortal');
   }
 
   updateMetadata(metadata) {
@@ -134,15 +148,21 @@ class FronteggApp {
     this.loadingListeners.push(listener);
   }
 
-  loadScript(url, component) {
+  loadScript(component) {
     return new Promise((resolve, reject) => {
       if (window[component]) {
         resolve(window[component]);
         return;
       }
 
+      const entries = {
+        FronteggLoginBox: 'login-box/index.js',
+        FronteggAdminPortal: 'admin-portal/index.js'
+      };
       const script = document.createElement('script');
-      script.src = url;
+      script.src = `${this.cdnUrl}/${entries[component]}`;
+      script.setAttribute('id', `${component}Script`);
+      script.setAttribute('cdn-url', this.cdnUrl);
 
       script.onload = () => {
         resolve(window[component]);
@@ -158,7 +178,7 @@ class FronteggApp {
   }
 
   async loadLoginBox() {
-    const FronteggLoginBox = await this.loadScript(`https://assets.frontegg.com/admin-box/login-box/${_version.default.cdnVersion}/index.js`, 'FronteggLoginBox');
+    const FronteggLoginBox = await this.loadScript('FronteggLoginBox');
     FronteggLoginBox.render(this.loginBoxEl, {
       injector: this,
       options: this.options
@@ -173,20 +193,46 @@ class FronteggApp {
   }
 
   async showAdminPortal() {
-    const FronteggAdminPortal = await this.loadScript(`https://assets.frontegg.com/admin-box/admin-portal/${_version.default.cdnVersion}/index.js`, 'FronteggAdminPortal');
-    FronteggAdminPortal.render(this.adminPortalEl, {
+    const FronteggAdminPortal = await this.loadScript('FronteggAdminPortal');
+    this.adminPortalRenderer = FronteggAdminPortal.render(this.adminPortalEl, {
       injector: this,
       options: this.options
     });
   }
 
-  hideAdminPortal() {}
+  hideAdminPortal() {
+    try {
+      var _this$adminPortalRend;
+
+      (_this$adminPortalRend = this.adminPortalRenderer) == null ? void 0 : _this$adminPortalRend.unmount();
+    } catch (e) {
+      console.error('Failed to unmount admin portal', e);
+    }
+  }
+
+  async showCheckoutDialog(opts) {
+    const FronteggAdminPortal = await this.loadScript('FronteggAdminPortal');
+    this.checkoutDialogRenderer = FronteggAdminPortal.renderCheckoutDialog(this.checkoutDialogEl, (0, _extends2.default)({
+      injector: this
+    }, opts, {
+      options: this.options
+    }));
+  }
 
-  showCheckoutDialog(opts) {}
+  hideCheckoutDialog() {
+    try {
+      var _this$checkoutDialogR;
 
-  hideCheckoutDialog() {}
+      (_this$checkoutDialogR = this.checkoutDialogRenderer) == null ? void 0 : _this$checkoutDialogR.unmount();
+    } catch (e) {
+      console.error('Failed to unmount checkout dialog', e);
+    }
+  }
 
-  close() {}
+  close() {
+    this.hideAdminPortal();
+    this.hideCheckoutDialog();
+  }
 
 }
 

package/node/LoginBoxRenderer/index.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultTheme = exports.default = exports.LoginBoxRenderer = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _reduxStore = require("@frontegg/redux-store");
+
+var _types = require("@frontegg/types");
+
+var _FronteggApp = require("../FronteggApp");
+
+const defaultTheme = 'modern';
+exports.defaultTheme = defaultTheme;
+
+class LoginBoxRenderer {
+  constructor(name, themeOptions, store, appOptions) {
+    this.app = void 0;
+    this.options = void 0;
+    this.store = void 0;
+    this.themeSetter = void 0;
+
+    this.setRoute = () => {};
+
+    this.themeOptions = {};
+    const contextOptions = {
+      baseUrl: 'preview'
+    };
+    this.store = store != null ? store : (0, _reduxStore.createFronteggStore)({
+      context: contextOptions
+    }, this, true, undefined, undefined, true);
+    this.options = (0, _extends2.default)({
+      themeOptions,
+      iframeRendering: true,
+      metadata: {},
+      previewMode: true,
+      builderMode: true,
+      store: this.store,
+      contextOptions,
+      onRedirectTo: () => {
+        console.debug('path');
+      }
+    }, appOptions);
+    this.app = new _FronteggApp.FronteggApp(this.options, name, true);
+
+    _types.Metadata.set({}, name);
+  }
+
+  async render(loginBoxContainer) {
+    let loginBoxEl = loginBoxContainer.querySelector('#root');
+
+    if (!loginBoxEl) {
+      loginBoxEl = loginBoxContainer.ownerDocument.createElement('div');
+      loginBoxEl.setAttribute('id', 'root');
+      loginBoxContainer.appendChild(loginBoxEl);
+    }
+
+    this.app.loginBoxContainer = loginBoxContainer;
+    this.app.loginBoxEl = loginBoxEl;
+
+    const setThemeSetter = themeSetter => {
+      this.themeSetter = themeSetter;
+    };
+
+    const setStaticRouteSetter = setStaticRoute => {
+      this.setRoute = setStaticRoute;
+    };
+
+    const FronteggAdminPortal = await this.app.loadScript('FronteggLoginBox');
+    this.app.loginBoxRenderer = FronteggAdminPortal.renderPage(loginBoxEl, {
+      options: this.options,
+      injector: this.app,
+      setThemeSetter,
+      setStaticRouteSetter,
+      staticRoute: '/account/login'
+    });
+  }
+
+  unmount() {
+    try {
+      var _this$app$loginBoxRen;
+
+      (_this$app$loginBoxRen = this.app.loginBoxRenderer) == null ? void 0 : _this$app$loginBoxRen.unmount();
+    } catch (e) {
+      console.error('Failed to unmount login box renderer', e);
+    }
+  }
+
+  setTheme(themeOptions) {
+    var _this$themeSetter;
+
+    this.themeOptions = themeOptions;
+    (_this$themeSetter = this.themeSetter) == null ? void 0 : _this$themeSetter.call(this, this.themeOptions);
+  }
+
+  setStaticRoute(staticRoute) {
+    var _this$setRoute;
+
+    (_this$setRoute = this.setRoute) == null ? void 0 : _this$setRoute.call(this, staticRoute);
+  }
+
+  setStore(state) {
+    this.store.dispatch({
+      type: 'auth/setState',
+      payload: state
+    });
+  }
+
+}
+
+exports.LoginBoxRenderer = LoginBoxRenderer;
+var _default = LoginBoxRenderer;
+exports.default = _default;

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license Frontegg v6.0.1-alpha.5
+/** @license Frontegg v6.0.3-alpha.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -74,6 +74,32 @@ Object.keys(_CheckoutDialog).forEach(function (key) {
   });
 });
 
+var _AdminPortalRenderer = require("./AdminPortalRenderer");
+
+Object.keys(_AdminPortalRenderer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AdminPortalRenderer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AdminPortalRenderer[key];
+    }
+  });
+});
+
+var _LoginBoxRenderer = require("./LoginBoxRenderer");
+
+Object.keys(_LoginBoxRenderer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _LoginBoxRenderer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _LoginBoxRenderer[key];
+    }
+  });
+});
+
 var _initialize = require("./initialize");
 
 Object.keys(_initialize).forEach(function (key) {

package/node/version.js

@@ -5,6 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _default = {
-  "cdnVersion": "6.0.1-alpha.5"
+  "cdnVersion": "6.0.3-alpha.1"
 };
 exports.default = _default;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@frontegg/js",
-  "version": "6.0.1-alpha.5",
+  "version": "6.0.3-alpha.1",
   "main": "./node/index.js",
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@frontegg/types": "6.0.1-alpha.5"
+    "@frontegg/types": "6.0.3-alpha.1"
   },
   "sideEffects": false,
   "private": false,

package/version.js

@@ -1,3 +1,3 @@
 export default {
-  "cdnVersion": "6.0.1-alpha.5"
+  "cdnVersion": "6.0.3-alpha.1"
 };