asab_webui_shell 25.1.1

package/dist/containers/Toast/ToastComponent.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Toast, ToastBody, ToastHeader, Button } from 'reactstrap'
+import { DEL_TOAST } from '../../actions';
+// import { timeToString } from 'asab_webui_components';
+
+// Component for displaying Toast messages
+export function ToastComponent({ app, content, dispatch }) {
+
+	return(
+		<Toast
+			fade={true}
+			className='toast d-print-none'
+		>
+			<ToastHeader
+				toggle={() => dispatch({ type: DEL_TOAST, key: content.key })}
+				className='toast-header'
+				icon={content?.level ? `${content.level}` : 'secondary'}
+			>
+				{content?.title ? content.title : ':-('}
+				{/*TODO add datetime info (the relative time)*/}
+				{/*timeToString(1694691607)?.distanceToNow*/}
+			</ToastHeader>
+			<ToastBody>
+				{content?.message ? content.message : 'Ooops, mistake is on our side. Message has not been defined!'}
+			</ToastBody>
+		</Toast>
+	)
+}

package/dist/containers/Toast/ToastContainer.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ToastContainer;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRedux = require("react-redux");
+var _actions = require("../../actions");
+var _ToastComponent = require("./ToastComponent.js");
+var _reducer = require("./reducer.js");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+// Toast container
+function ToastContainer(props) {
+  var _attentionRequired$be;
+  // Get the toast data from Redux (assuming it comes from `attentionrequired.beacon`)
+  var attentionRequired = (0, _reactRedux.useSelector)(function (state) {
+    var _state$attentionrequi;
+    return (_state$attentionrequi = state.attentionrequired) === null || _state$attentionrequi === void 0 ? void 0 : _state$attentionrequi.beacon;
+  });
+  var toastData = (attentionRequired === null || attentionRequired === void 0 || (_attentionRequired$be = attentionRequired['beacon.toast']) === null || _attentionRequired$be === void 0 ? void 0 : _attentionRequired$be.data) || [];
+
+  // useReducer to manage the local state of toasts
+  var _useReducer = (0, _react.useReducer)(_reducer.toastReducer, {
+      toasts: []
+    }),
+    _useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+
+  // Handle new toast data from attention required store
+  (0, _react.useEffect)(function () {
+    if (toastData && toastData.length > 0) {
+      toastData.forEach(function (reduxToast) {
+        // Add new toast into the toast redux store
+        dispatch({
+          type: _actions.ADD_TOAST,
+          title: reduxToast === null || reduxToast === void 0 ? void 0 : reduxToast.title,
+          message: reduxToast === null || reduxToast === void 0 ? void 0 : reduxToast.message,
+          level: reduxToast === null || reduxToast === void 0 ? void 0 : reduxToast.level,
+          // 'info', 'warning', etc.
+          expire: (reduxToast === null || reduxToast === void 0 ? void 0 : reduxToast.expire) || 30 // Toast expiration time (in seconds)
+        });
+      });
+    }
+  }, [toastData, dispatch]);
+
+  // useEffect to automatically remove expired toasts
+  (0, _react.useEffect)(function () {
+    var interval = setInterval(function () {
+      var now = new Date();
+      state === null || state === void 0 || state.toasts.forEach(function (toast) {
+        if (toast.expire <= now) {
+          dispatch({
+            type: _actions.DEL_TOAST,
+            key: toast.key
+          }); // Remove expired toast
+        }
+      });
+    }, 2000); // Check for expiration every 2 seconds
+
+    return function () {
+      return clearInterval(interval);
+    }; // Cleanup interval on component unmount
+  }, [state === null || state === void 0 ? void 0 : state.toasts, dispatch]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "toast-container position-fixed bottom-0 end-0 p-3"
+  }, (state === null || state === void 0 ? void 0 : state.toasts) && (state === null || state === void 0 ? void 0 : state.toasts.length) > 0 && (state === null || state === void 0 ? void 0 : state.toasts.map(function (toast, idx) {
+    return /*#__PURE__*/_react["default"].createElement(_ToastComponent.ToastComponent, {
+      key: idx,
+      app: props.app,
+      content: toast,
+      dispatch: dispatch
+    });
+  })));
+}

package/dist/containers/Toast/ToastContainer.jsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useReducer } from 'react';
+import { useSelector } from 'react-redux';
+import { DEL_TOAST, ADD_TOAST } from '../../actions';
+
+import { ToastComponent } from './ToastComponent.jsx';
+import { toastReducer } from './reducer.jsx';
+
+// Toast container
+export default function ToastContainer(props) {
+	// Get the toast data from Redux (assuming it comes from `attentionrequired.beacon`)
+	const attentionRequired = useSelector((state) => state.attentionrequired?.beacon);
+	const toastData = attentionRequired?.['beacon.toast']?.data || [];
+
+	// useReducer to manage the local state of toasts
+	const [state, dispatch] = useReducer(toastReducer, { toasts: [] });
+
+	// Handle new toast data from attention required store
+	useEffect(() => {
+		if (toastData && toastData.length > 0) {
+			toastData.forEach((reduxToast) => {
+				// Add new toast into the toast redux store
+				dispatch({
+					type: ADD_TOAST,
+					title: reduxToast?.title,
+					message: reduxToast?.message,
+					level: reduxToast?.level, // 'info', 'warning', etc.
+					expire: reduxToast?.expire || 30, // Toast expiration time (in seconds)
+				});
+			});
+		}
+	}, [toastData, dispatch]);
+
+	// useEffect to automatically remove expired toasts
+	useEffect(() => {
+		const interval = setInterval(() => {
+			const now = new Date();
+			state?.toasts.forEach((toast) => {
+				if (toast.expire <= now) {
+					dispatch({ type: DEL_TOAST, key: toast.key }); // Remove expired toast
+				}
+			});
+		}, 2000); // Check for expiration every 2 seconds
+
+		return () => clearInterval(interval); // Cleanup interval on component unmount
+	}, [state?.toasts, dispatch]);
+
+	return (
+		<div className="toast-container position-fixed bottom-0 end-0 p-3">
+			{state?.toasts && state?.toasts.length > 0 && state?.toasts.map((toast, idx) => (
+				<ToastComponent
+					key={idx}
+					app={props.app}
+					content={toast}
+					dispatch={dispatch}
+				/>
+			))}
+		</div>
+	);
+}

package/dist/containers/Toast/reducer.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toastReducer = toastReducer;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _actions = require("../../actions");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // Actions
+var initialState = {
+  toasts: []
+};
+
+// Reducer for toast actions
+function toastReducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var action = arguments.length > 1 ? arguments[1] : undefined;
+  switch (action.type) {
+    case _actions.ADD_TOAST:
+      {
+        // Set expiration time
+        var expire = new Date();
+        expire.setSeconds(expire.getSeconds() + action.expire);
+
+        // Generate a new toast
+        var newToast = {
+          key: Math.floor(Math.random() * 65536),
+          title: action.title,
+          message: action.message,
+          level: action.level,
+          _c: action._c,
+          expire: expire
+        };
+
+        // Return new state with added toast
+        return _objectSpread(_objectSpread({}, state), {}, {
+          toasts: state !== null && state !== void 0 && state.toasts ? [].concat((0, _toConsumableArray2["default"])(state === null || state === void 0 ? void 0 : state.toasts), [newToast]) : initialState.toasts
+        });
+      }
+    case _actions.DEL_TOAST:
+      {
+        // Filter out the toast to be deleted by key
+        return _objectSpread(_objectSpread({}, state), {}, {
+          toasts: state === null || state === void 0 ? void 0 : state.toasts.filter(function (toast) {
+            return toast.key !== action.key;
+          })
+        });
+      }
+    default:
+      return state;
+  }
+}

package/dist/containers/Toast/reducer.jsx

@@ -0,0 +1,45 @@
+// Actions
+import { ADD_TOAST, DEL_TOAST } from '../../actions';
+
+const initialState = {
+	toasts: [],
+};
+
+// Reducer for toast actions
+export function toastReducer(state = initialState, action) {
+	switch (action.type) {
+
+		case ADD_TOAST: {
+			// Set expiration time
+			const expire = new Date();
+			expire.setSeconds(expire.getSeconds() + action.expire);
+
+			// Generate a new toast
+			const newToast = {
+				key: Math.floor(Math.random() * 65536),
+				title: action.title,
+				message: action.message,
+				level: action.level,
+				_c: action._c,
+				expire: expire,
+			};
+
+			// Return new state with added toast
+			return {
+				...state,
+				toasts: state?.toasts ? [...state?.toasts, newToast] : initialState.toasts,
+			};
+		}
+
+		case DEL_TOAST: {
+			// Filter out the toast to be deleted by key
+			return {
+				...state,
+				toasts: state?.toasts.filter(toast => toast.key !== action.key),
+			};
+		}
+
+		default:
+			return state;
+	}
+}

package/dist/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AboutModule", {
+  enumerable: true,
+  get: function get() {
+    return _about["default"];
+  }
+});
+Object.defineProperty(exports, "Application", {
+  enumerable: true,
+  get: function get() {
+    return _Application["default"];
+  }
+});
+Object.defineProperty(exports, "AuthModule", {
+  enumerable: true,
+  get: function get() {
+    return _auth["default"];
+  }
+});
+Object.defineProperty(exports, "I18nModule", {
+  enumerable: true,
+  get: function get() {
+    return _i18n["default"];
+  }
+});
+Object.defineProperty(exports, "TenantModule", {
+  enumerable: true,
+  get: function get() {
+    return _tenant["default"];
+  }
+});
+Object.defineProperty(exports, "getBrandImage", {
+  enumerable: true,
+  get: function get() {
+    return _BrandImage.getBrandImage;
+  }
+});
+var _Application = _interopRequireDefault(require("./containers/Application"));
+var _BrandImage = require("./components/branding/BrandImage");
+var _i18n = _interopRequireDefault(require("./modules/i18n"));
+var _tenant = _interopRequireDefault(require("./modules/tenant"));
+var _auth = _interopRequireDefault(require("./modules/auth"));
+var _about = _interopRequireDefault(require("./modules/about"));

package/dist/modules/about/AboutScreen.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactRedux = require("react-redux");
+var _reactstrap = require("reactstrap");
+function AboutScreen(props) {
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.Container, {
+    className: "pt-5"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Row, {
+    className: "justify-content-center"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Col, {
+    md: "6"
+  }, /*#__PURE__*/_react["default"].createElement(AboutCard, {
+    app: props.app
+  }))));
+}
+var _default = exports["default"] = AboutScreen;
+/*
+
+	Language localizations for AboutCard can be added to the translation.json files of
+	public/locales/en & public/locales/cs
+
+	Example:
+
+	{
+		"AboutCard": {
+			"Vendor": "Vendor Ltd"
+			"Web site": "https://example.com",
+		}
+	}
+
+*/
+// TODO: add info about version release and date of the release
+function AboutCard(props) {
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var title = (0, _reactRedux.useSelector)(function (state) {
+    var _state$config;
+    return (_state$config = state.config) === null || _state$config === void 0 ? void 0 : _state$config.title;
+  });
+  var vendor = (0, _reactRedux.useSelector)(function (state) {
+    var _state$config2;
+    return (_state$config2 = state.config) === null || _state$config2 === void 0 ? void 0 : _state$config2.vendor;
+  });
+  var website = (0, _reactRedux.useSelector)(function (state) {
+    var _state$config3;
+    return (_state$config3 = state.config) === null || _state$config3 === void 0 ? void 0 : _state$config3.website;
+  });
+  var email = (0, _reactRedux.useSelector)(function (state) {
+    var _state$config4;
+    return (_state$config4 = state.config) === null || _state$config4 === void 0 ? void 0 : _state$config4.email;
+  });
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.Card, null, /*#__PURE__*/_react["default"].createElement(_reactstrap.CardHeader, {
+    className: "card-header-flex"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "flex-fill"
+  }, /*#__PURE__*/_react["default"].createElement("h3", null, t('AboutCard|About'), " ", title))), /*#__PURE__*/_react["default"].createElement("ul", {
+    className: "list-group list-group-flush"
+  }, vendor && /*#__PURE__*/_react["default"].createElement("li", {
+    className: "list-group-item"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactstrap.Col, {
+    className: "col-6"
+  }, t('AboutCard|Vendor')), /*#__PURE__*/_react["default"].createElement(_reactstrap.Col, null, vendor))), website && /*#__PURE__*/_react["default"].createElement("li", {
+    className: "list-group-item"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactstrap.Col, {
+    className: "col-6"
+  }, t('AboutCard|Website')), /*#__PURE__*/_react["default"].createElement(_reactstrap.Col, null, /*#__PURE__*/_react["default"].createElement("a", {
+    href: website,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, website)))), website && /*#__PURE__*/_react["default"].createElement("li", {
+    className: "list-group-item"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactstrap.Col, {
+    className: "col-6"
+  }, t('AboutCard|Email')), /*#__PURE__*/_react["default"].createElement(_reactstrap.Col, null, /*#__PURE__*/_react["default"].createElement("a", {
+    href: "mailto:".concat(email)
+  }, email))))));
+}

package/dist/modules/about/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _react = require("react");
+var _asab_webui_components = require("asab_webui_components");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var AboutModule = exports["default"] = /*#__PURE__*/function (_Module) {
+  function AboutModule(app, name) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, AboutModule);
+    _this = _callSuper(this, AboutModule, [app, "AboutModule"]);
+    var AboutScreen = /*#__PURE__*/(0, _react.lazy)(function () {
+      return Promise.resolve().then(function () {
+        return _interopRequireWildcard(require("./AboutScreen"));
+      });
+    });
+    app.Router.addRoute({
+      path: "/about",
+      end: true,
+      name: "About",
+      component: AboutScreen,
+      resource: "*"
+    });
+    return _this;
+  }
+  (0, _inherits2["default"])(AboutModule, _Module);
+  return (0, _createClass2["default"])(AboutModule);
+}(_asab_webui_components.Module);

package/dist/modules/auth/actions.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.types = void 0;
+var types = exports.types = {
+  AUTH_USERINFO: "SeaCat/AUTH_USERINFO",
+  AUTH_RESOURCES: "SeaCat/AUTH_RESOURCES",
+  AUTH_SESSION_EXPIRATION: "SeaCat/AUTH_SESSION_EXPIRATION"
+};

package/dist/modules/auth/api.js

@@ -0,0 +1,214 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SeaCatAuthApi = exports.GoogleOAuth2Api = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _axios = _interopRequireDefault(require("axios"));
+var _locationReplace = require("../../components/locationReplace");
+var SeaCatAuthApi = exports.SeaCatAuthApi = /*#__PURE__*/function () {
+  /*
+  SeaCat Auth Open ID Connect / OAuth2.0
+  
+  From config.js:
+  	module.exports = {
+  	app: {
+  		BASE_URL: 'http://localhost:3000',
+  		API_PATH: 'api',
+  		SERVICES: {openidconnect: 'openidconnect'},
+  		...
+  */
+
+  function SeaCatAuthApi(app) {
+    (0, _classCallCheck2["default"])(this, SeaCatAuthApi);
+    this.App = app;
+    var scope = this.App.Config.get('seacat.auth.scope');
+    this.Scope = scope ? scope : "openid tenant userinfo:* batman";
+    this.ClientId = "asab-webui-auth";
+    this.SeaCatAuthAPI = this.App.axiosCreate('seacat-auth');
+    this.OidcAPI = this.App.axiosCreate('openidconnect');
+  }
+
+  // This method will cause a navigation from the app to the OAuth2 login screen
+  return (0, _createClass2["default"])(SeaCatAuthApi, [{
+    key: "login",
+    value: function () {
+      var _login = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(redirect_uri, force_login_prompt) {
+        var currentTenant, scopeArray, tenantValue, loginScope, typedArray, randomIndex, stateIndex, redirectUri, state, params, oidcURL;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              /*
+              	Adding tenant directly to scope (if available).
+              */
+              currentTenant = null;
+              if (this.App.Services.TenantService) {
+                currentTenant = this.App.Services.TenantService.getCurrentTenant();
+              }
+              scopeArray = this.Scope.split(" ");
+              tenantValue = scopeArray.find(function (str) {
+                return str.includes("tenant");
+              });
+              loginScope = currentTenant != null && tenantValue != undefined ? this.Scope.replace("".concat(tenantValue), "tenant:".concat(currentTenant)) : this.Scope; // Generate random state
+              typedArray = new Uint32Array(10);
+              crypto.getRandomValues(typedArray);
+              randomIndex = Math.floor(Math.random() * typedArray.length);
+              stateIndex = typedArray[randomIndex];
+              /*
+              	As per OAuth2 specs, the redirect_uri must *exactly* match one of the URIs pre-registered 
+              	at the authorization server, hence it cannot contain variable components (query, hash).
+              	Here we use the application's base URL as the redirect_uri and store the variable parts in the state.
+              */
+              redirectUri = new URL(redirect_uri);
+              state = redirectUri.search + redirectUri.hash;
+              localStorage.setItem("oauth2_state_".concat(stateIndex), state);
+              params = new URLSearchParams({
+                response_type: "code",
+                scope: loginScope,
+                client_id: this.ClientId,
+                redirect_uri: redirectUri.origin + redirectUri.pathname,
+                state: stateIndex
+              });
+              if (force_login_prompt === true) {
+                params.append("prompt", "login");
+              }
+              oidcURL = this.App.getServiceURL('openidconnect');
+              _context.next = 17;
+              return (0, _locationReplace.locationReplace)(oidcURL + "/authorize?" + params.toString());
+            case 17:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function login(_x, _x2) {
+        return _login.apply(this, arguments);
+      }
+      return login;
+    }()
+  }, {
+    key: "logout",
+    value: function logout(access_token) {
+      return this.OidcAPI.get('/logout', {
+        headers: {
+          'Authorization': 'Bearer ' + access_token
+        }
+      });
+    }
+  }, {
+    key: "userinfo",
+    value: function userinfo(access_token) {
+      var userinfoPath = '/userinfo';
+      var headers = {};
+      // Add access bearer token to the Authorization headers
+      if (access_token != null) {
+        headers.Authorization = 'Bearer ' + access_token;
+      }
+      return this.OidcAPI.get(userinfoPath, {
+        headers: headers
+      });
+    }
+  }, {
+    key: "token_authorization_code",
+    value: function token_authorization_code(authorization_code, redirect_uri) {
+      var redirectUri = new URL(redirect_uri);
+      var qs = new URLSearchParams({
+        grant_type: "authorization_code",
+        code: authorization_code,
+        client_id: this.ClientId,
+        /*
+        	As per OAuth2 specs, the redirect_uri must *exactly* match the one provided 
+        	at the authorization endpoint, hence the application base URL.
+        */
+        redirect_uri: redirectUri.origin + redirectUri.pathname
+      });
+      return this.OidcAPI.post('/token', qs.toString());
+    }
+  }]);
+}();
+;
+var GoogleOAuth2Api = exports.GoogleOAuth2Api = /*#__PURE__*/function () {
+  /*
+  Google OAuth2 API is configured at Google API Console > Credentials > OAuth 2.0 Client IDs
+  
+  From config.js:
+  	module.exports = {
+  	app: {
+  		"google.oauth2.client_id": "<Google OAuth2 Client ID>.apps.googleusercontent.com",
+  		"google.oauth2.client_secret": "<Google OAuth2 Client secret>",
+  		...
+  */
+
+  function GoogleOAuth2Api(config) {
+    (0, _classCallCheck2["default"])(this, GoogleOAuth2Api);
+    this.Axios = _axios["default"].create({
+      timeout: 10000
+    });
+    var scope = config.get('google.oauth2.scope');
+    this.ClientId = config.get('google.oauth2.client_id');
+    this.ClientSecret = config.get('google.oauth2.client_secret');
+    this.Scope = scope ? scope : "openid https://www.googleapis.com/auth/userinfo.profile";
+  }
+
+  // This method will cause a navigation from the app to the OAuth2 login screen
+  return (0, _createClass2["default"])(GoogleOAuth2Api, [{
+    key: "login",
+    value: function () {
+      var _login2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(redirect_uri) {
+        var params;
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              params = new URLSearchParams({
+                response_type: "code",
+                scope: this.Scope,
+                client_id: this.ClientId,
+                redirect_uri: redirect_uri
+              });
+              _context2.next = 3;
+              return (0, _locationReplace.locationReplace)("https://accounts.google.com/o/oauth2/auth" + "?" + params.toString());
+            case 3:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function login(_x3) {
+        return _login2.apply(this, arguments);
+      }
+      return login;
+    }()
+  }, {
+    key: "logout",
+    value: function logout(access_token) {
+      // There is no Google logout API URL, to our best knowledge
+      return null;
+    }
+  }, {
+    key: "userinfo",
+    value: function userinfo(access_token) {
+      var qs = new URLSearchParams({
+        alt: "json",
+        access_token: access_token
+      });
+      return this.Axios.get('https://www.googleapis.com/oauth2/v1/userinfo?' + qs.toString());
+    }
+  }, {
+    key: "token_authorization_code",
+    value: function token_authorization_code(authorization_code, redirect_uri) {
+      var qs = new URLSearchParams({
+        grant_type: "authorization_code",
+        code: authorization_code,
+        client_id: this.ClientId,
+        client_secret: this.ClientSecret,
+        redirect_uri: redirect_uri
+      });
+      return this.Axios.post('https://oauth2.googleapis.com/token', qs.toString());
+    }
+  }]);
+}();