asab_webui_shell 25.1.1

package/dist/modules/tenant/access/AccessDeniedCard.js

@@ -0,0 +1,107 @@
+"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 _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _locationReplace = require("../../../components/locationReplace");
+require("./AccessDeniedCard.scss");
+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 AccessDeniedCard(props) {
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    accessDenied = _useState2[0],
+    setAccessDenied = _useState2[1];
+  var _useState3 = (0, _react.useState)(""),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    deniedTenant = _useState4[0],
+    setDeniedTenant = _useState4[1];
+  (0, _react.useEffect)(function () {
+    var qs = new URLSearchParams(window.location.search);
+    var errorType = qs.get('error');
+    /*
+    	If error appears in the URL search params and is NOT
+    	tenant_access_denied, user will stay in splashscreen
+    	with Access denied card
+    */
+    if (errorType != undefined && errorType != 'tenant_access_denied') {
+      setAccessDenied(true);
+      if (errorType.includes("no_tenants")) {
+        setDeniedTenant(t("AccessDeniedCard|is not assigned!"));
+      } else {
+        var tenantParameter = qs.get('tenant');
+        setDeniedTenant(tenantParameter);
+      }
+    }
+  }, []);
+
+  /*
+  	We can't use logout/redirection to login via /openidconnect/logout,
+  	since we dont have a oauth token here (access denied)
+  */
+  var continueToLogin = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var SeaCatAuthAPI, response;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            SeaCatAuthAPI = props.app.axiosCreate('seacat-auth');
+            _context.prev = 1;
+            _context.next = 4;
+            return SeaCatAuthAPI.put('/public/logout');
+          case 4:
+            response = _context.sent;
+            _context.next = 10;
+            break;
+          case 7:
+            _context.prev = 7;
+            _context.t0 = _context["catch"](1);
+            props.app.addAlertFromException(_context.t0, t("AccessDeniedCard|Silly as it sounds, the logout failed"));
+          case 10:
+            _context.next = 12;
+            return (0, _locationReplace.locationReplace)("".concat(window.location.pathname));
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1, 7]]);
+    }));
+    return function continueToLogin() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  return props.app.Services.TenantService && props.app.Modules.filter(function (obj) {
+    return obj.Name === "AuthModule";
+  }).length > 0 && accessDenied == true ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "access-denied-wrapper"
+  }, /*#__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 text-center"
+  }, /*#__PURE__*/_react["default"].createElement("h2", {
+    className: "text-primary"
+  }, t("AccessDeniedCard|Access denied")))), /*#__PURE__*/_react["default"].createElement(_reactstrap.CardBody, null, /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text-center"
+  }, t("AccessDeniedCard|Please contact application administrator for assigning appropriate access rights.")), deniedTenant && /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text-center tenant-text"
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "Tenant "), deniedTenant), /*#__PURE__*/_react["default"].createElement(_reactstrap.Button, {
+    className: "justify-content-center",
+    block: true,
+    color: "primary",
+    onClick: function onClick() {
+      continueToLogin();
+    }
+  }, t("AccessDeniedCard|Leave"))))) : null;
+}
+var _default = exports["default"] = AccessDeniedCard;

package/dist/modules/tenant/access/AccessDeniedCard.scss

@@ -0,0 +1,6 @@
+.access-denied-wrapper {
+	position: absolute;
+	z-index: 99999;
+	left: 50%; /*Horizontally center*/
+	transform: translateX(-50%); /*Horizontally center*/
+}

package/dist/modules/tenant/actions.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.types = void 0;
+var types = exports.types = {
+  TENANTS_CHANGED: "asab/TenantService/CHANGED",
+  TENANT_SELECTED: "asab/TenantService/SELECT_TENANT"
+};

package/dist/modules/tenant/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+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 = _interopRequireDefault(require("react"));
+var _asab_webui_components = require("asab_webui_components");
+var _service = _interopRequireDefault(require("./service"));
+var _TenantDropdown = _interopRequireDefault(require("./TenantDropdown"));
+var _reducer = _interopRequireDefault(require("./reducer"));
+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 TenantModule = exports["default"] = /*#__PURE__*/function (_Module) {
+  function TenantModule(app, name) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, TenantModule);
+    _this = _callSuper(this, TenantModule, [app, "TenantModule"]);
+    _this.App = app;
+    _this.TenantService = new _service["default"](app, "TenantService");
+    _this.App.ReduxService.addReducer("tenant", _reducer["default"]);
+    return _this;
+  }
+  (0, _inherits2["default"])(TenantModule, _Module);
+  return (0, _createClass2["default"])(TenantModule, [{
+    key: "initialize",
+    value: function initialize() {
+      var headerService = this.App.locateService("HeaderService");
+      headerService.addComponent({
+        component: _TenantDropdown["default"],
+        order: 600
+      });
+    }
+  }]);
+}(_asab_webui_components.Module);

package/dist/modules/tenant/reducer.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = reducer;
+var _actions = require("./actions");
+// Actions
+
+var initialState = {
+  tenants: [],
+  current: null
+};
+function reducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var action = arguments.length > 1 ? arguments[1] : undefined;
+  switch (action.type) {
+    case _actions.types.TENANTS_CHANGED:
+      return {
+        tenants: action.tenants_list,
+        current: action.current
+      };
+    default:
+      return state;
+  }
+}

package/dist/modules/tenant/service.js

@@ -0,0 +1,228 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = 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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _asab_webui_components = require("asab_webui_components");
+var _actions = require("./actions");
+var _locationReplace = require("../../components/locationReplace");
+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 TenantService = exports["default"] = /*#__PURE__*/function (_Service) {
+  function TenantService(app) {
+    var _this;
+    var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'TenantService';
+    (0, _classCallCheck2["default"])(this, TenantService);
+    _this = _callSuper(this, TenantService, [app, name]);
+    // Tenant data cache
+    _this.TenantDataCache = {};
+    return _this;
+  }
+  (0, _inherits2["default"])(TenantService, _Service);
+  return (0, _createClass2["default"])(TenantService, [{
+    key: "initialize",
+    value: function () {
+      var _initialize = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        var tenants, tenants_list, i;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              // If the tenant list is in the configuration, use it
+              // This is useful when tenants are present but auth not
+              tenants = this.App.Config.get('tenants');
+              if (!(tenants != null)) {
+                _context.next = 6;
+                break;
+              }
+              tenants_list = [];
+              for (i = 0; tenants[i] != undefined; i++) {
+                tenants_list.push(tenants[i]);
+              }
+              _context.next = 6;
+              return this.setTenants(tenants_list);
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function initialize() {
+        return _initialize.apply(this, arguments);
+      }
+      return initialize;
+    }()
+    /*
+    	setTenants updates the current active tenant and the list of available tenants
+    	and dispatches that information into the application store
+    */
+  }, {
+    key: "setTenants",
+    value: (function () {
+      var _setTenants = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(availableTenants) {
+        var authorizedTenant,
+          tenantFromUrl,
+          currentTenant,
+          _args2 = arguments;
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              authorizedTenant = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : undefined;
+              // Extract the current tenant from URL params
+              tenantFromUrl = this._extractTenantFromUrl();
+              /* If tenant has not been provided in access URL, insert the authorized tenant 
+              or the first available tenant into the URL and reload the application */
+              if (!(tenantFromUrl == null)) {
+                _context2.next = 13;
+                break;
+              }
+              if (!authorizedTenant) {
+                _context2.next = 9;
+                break;
+              }
+              _context2.next = 6;
+              return (0, _locationReplace.locationReplace)("".concat(window.location.pathname, "?tenant=").concat(authorizedTenant).concat(window.location.hash));
+            case 6:
+              return _context2.abrupt("return");
+            case 9:
+              if (!(availableTenants && availableTenants.length > 0)) {
+                _context2.next = 13;
+                break;
+              }
+              _context2.next = 12;
+              return (0, _locationReplace.locationReplace)("".concat(window.location.pathname, "?tenant=").concat(availableTenants[0]).concat(window.location.hash));
+            case 12:
+              return _context2.abrupt("return");
+            case 13:
+              if (!(!availableTenants || availableTenants.length == 0)) {
+                _context2.next = 17;
+                break;
+              }
+              _context2.next = 16;
+              return (0, _locationReplace.locationReplace)(window.location.pathname + window.location.hash);
+            case 16:
+              return _context2.abrupt("return");
+            case 17:
+              if (availableTenants) {
+                if (!availableTenants.includes(tenantFromUrl)) {
+                  // Display Invalid tenant alert message only when authorization is disabled
+                  if (this.App.Config.get('authorization') === 'disabled') {
+                    this.App.addAlert('danger', 'ASABTenantModule|Invalid tenant', 40000, true);
+                  }
+                }
+                currentTenant = tenantFromUrl;
+                // Sort available tenants
+                availableTenants.sort(function (a, b) {
+                  var _a$toString, _b$toString;
+                  var tenantA = (a === null || a === void 0 || (_a$toString = a.toString()) === null || _a$toString === void 0 ? void 0 : _a$toString.toLowerCase()) || '';
+                  var tenantB = (b === null || b === void 0 || (_b$toString = b.toString()) === null || _b$toString === void 0 ? void 0 : _b$toString.toLowerCase()) || '';
+                  return tenantA.localeCompare(tenantB);
+                });
+              } else {
+                currentTenant = undefined;
+              }
+
+              // Dispatch tenants obtained from userinfo
+              this.App.Store.dispatch({
+                type: _actions.types.TENANTS_CHANGED,
+                tenants_list: availableTenants,
+                current: currentTenant
+              });
+            case 19:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function setTenants(_x) {
+        return _setTenants.apply(this, arguments);
+      }
+      return setTenants;
+    }()
+    /*
+    	getTenantData() method is used for returning the tenant data
+    	It requires SeaCat Auth service
+    */
+    )
+  }, {
+    key: "getTenantData",
+    value: (function () {
+      var _getTenantData = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+        var currentTenant, tenantData, SeaCatAuthAPI, response;
+        return _regenerator["default"].wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              currentTenant = this.getCurrentTenant(); // If tenant data being cached already, then return the data
+              if (!this.TenantDataCache[currentTenant]) {
+                _context3.next = 3;
+                break;
+              }
+              return _context3.abrupt("return", this.TenantDataCache[currentTenant]);
+            case 3:
+              tenantData = {};
+              if (!currentTenant) {
+                _context3.next = 19;
+                break;
+              }
+              SeaCatAuthAPI = this.App.axiosCreate('seacat-auth');
+              _context3.prev = 6;
+              _context3.next = 9;
+              return SeaCatAuthAPI.get("/tenant/".concat(currentTenant));
+            case 9:
+              response = _context3.sent;
+              tenantData = response.data;
+              this.TenantDataCache[currentTenant] = tenantData;
+              _context3.next = 19;
+              break;
+            case 14:
+              _context3.prev = 14;
+              _context3.t0 = _context3["catch"](6);
+              console.warn("Tenant service can't retrieve data for ".concat(currentTenant));
+              console.error(_context3.t0);
+              // Remove data from the TenantDataCache eventually
+              delete this.TenantDataCache[currentTenant];
+            case 19:
+              return _context3.abrupt("return", tenantData);
+            case 20:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this, [[6, 14]]);
+      }));
+      function getTenantData() {
+        return _getTenantData.apply(this, arguments);
+      }
+      return getTenantData;
+    }() // getCurrentTenant() method is used for obtaining current tenant
+    )
+  }, {
+    key: "getCurrentTenant",
+    value: function getCurrentTenant() {
+      var state = this.App.Store.getState();
+      var currentTenant = state.tenant.current;
+      // If current tenant is not in redux store yet, get it from the URL params
+      if (!currentTenant) {
+        currentTenant = this._extractTenantFromUrl();
+      }
+      return currentTenant;
+    }
+
+    // Extract tenant from URL params
+  }, {
+    key: "_extractTenantFromUrl",
+    value: function _extractTenantFromUrl() {
+      var search = window.location.search;
+      var params = new URLSearchParams(search);
+      var tenant = params.get('tenant');
+      return tenant;
+    }
+  }]);
+}(_asab_webui_components.Service);

package/dist/screens/InvalidRouteScreen.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = InvalidRouteScreen;
+var _react = _interopRequireDefault(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+require("./InvalidRouteScreen.scss");
+function InvalidRouteScreen(props) {
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.Container, {
+    className: "invalid-route-container h-100",
+    fluid: true
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Card, {
+    className: "invalid-route-card"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.CardBody, {
+    className: "text-center invalid-route-cardbody"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Row, {
+    className: "justify-content-center"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Col, null, /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "bi bi-emoji-frown fs-1 text-primary",
+    title: t("InvalidRouteScreen|Nothing here")
+  })), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "card-text"
+  }, t("InvalidRouteScreen|Sorry, we can't find the page you are looking for.")))))));
+}

package/dist/screens/InvalidRouteScreen.scss

@@ -0,0 +1,19 @@
+.invalid-route-container {
+	overflow: hidden;
+}
+
+.invalid-route-card {
+	height: 80%;
+	width: 50%;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	border: 1px solid var(--bs-primary);
+}
+
+.invalid-route-cardbody {
+	display: flex;
+	align-items: center; /* Vertically center */
+	justify-content: center; /* Horizontally center */
+}

package/dist/screens/SuspenseScreen.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = SuspenseScreen;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRedux = require("react-redux");
+var _asab_webui_components = require("asab_webui_components");
+var _reactstrap = require("reactstrap");
+var _BrandImage = require("../components/branding/BrandImage");
+require("./SuspenseScreen.scss");
+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 SuspenseScreen(props) {
+  var _useState = (0, _react.useState)(undefined),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    brandImage = _useState2[0],
+    setBrandImage = _useState2[1];
+  var theme = (0, _reactRedux.useSelector)(function (state) {
+    return state.theme;
+  });
+  (0, _react.useEffect)(function () {
+    setBrandImage((0, _BrandImage.getBrandImage)(props, theme));
+  }, [theme]);
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.Container, {
+    className: "h-100",
+    fluid: true
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "h-100 suspense-content-wrapper"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Col, null, /*#__PURE__*/_react["default"].createElement(_reactstrap.Row, {
+    className: "justify-content-center mb-4"
+  }, brandImage ? /*#__PURE__*/_react["default"].createElement("img", {
+    className: "suspense-img",
+    src: brandImage === null || brandImage === void 0 ? void 0 : brandImage.full,
+    alt: "Loading..."
+  }) : /*#__PURE__*/_react["default"].createElement("h2", {
+    className: "text-center text-primary"
+  }, "Loading...")), /*#__PURE__*/_react["default"].createElement(_asab_webui_components.Spinner, null))));
+}

package/dist/screens/SuspenseScreen.scss

@@ -0,0 +1,9 @@
+.suspense-content-wrapper {
+	display: flex;
+	align-items: center; /* Vertically center */
+	justify-content: center; /* Horizontally center */
+}
+
+.suspense-img {
+	max-width: 500px;
+}

package/dist/screens/UnauthorizedAccessScreen.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = UnauthorizedAccessScreen;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactRedux = require("react-redux");
+var _reactstrap = require("reactstrap");
+require("./UnauthorizedAccessScreen.scss");
+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; }
+/*
+	Unauthorized Access screen can be displayed only when:
+	- AuthModule is present within the application
+	- user does not have a particular resource and user is not superuser
+
+	Unauthorized Access screen replace the content of the container by its own screen with
+	information about what resource is missing to enable the access to the desired (blocked)
+	screen.
+*/
+function UnauthorizedAccessScreen(props) {
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var resources = (0, _reactRedux.useSelector)(function (state) {
+    var _state$auth;
+    return (_state$auth = state.auth) !== null && _state$auth !== void 0 && _state$auth.resources ? state.auth.resources : [];
+  });
+
+  // Check if auth module is active. If not, return the original component
+  // Check for desired resource. If present or user is superuser, return the original component
+  var isAuthorized = props.resource === "*" || props.app.Modules.filter(function (obj) {
+    return obj.Name === "AuthModule";
+  }).length === 0 || resources.indexOf(props.resource) !== -1 || resources.indexOf("authz:superuser") !== -1;
+  (0, _react.useLayoutEffect)(function () {
+    // Determine if the component should be in print-ready or print-unauthorized state
+    if (!isAuthorized) {
+      document.body.setAttribute('print-ready', 'true');
+      document.body.setAttribute('print-unauthorized', 'true');
+    } else {
+      document.body.removeAttribute('print-ready');
+      document.body.removeAttribute('print-unauthorized');
+    }
+
+    // Cleanup function to remove the attributes when the component unmounts
+    return function () {
+      document.body.removeAttribute('print-ready');
+      document.body.removeAttribute('print-unauthorized');
+    };
+  }, [isAuthorized]);
+
+  // If user is authorized, let them see the screen content
+  if (isAuthorized) {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, props.routeComponent);
+  }
+
+  // Else return the Not authorized screen
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.Container, {
+    className: "unauthorized-container h-100",
+    fluid: true
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Card, {
+    className: "unauthorized-card"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.CardBody, {
+    className: "text-center unauthorized-cardbody"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Row, {
+    className: "justify-content-center"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Col, null, /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "bi bi-exclamation-triangle text-danger fs-1",
+    title: t("UnauthorizedAccessScreen|Unauthorized access")
+  })), props.resource ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("p", {
+    className: "card-text"
+  }, t("UnauthorizedAccessScreen|You are not authorized to access this part of the application. Please ask your application administrator for following resource"), ":"), /*#__PURE__*/_react["default"].createElement("h5", {
+    className: "card-title"
+  }, props.resource)) : /*#__PURE__*/_react["default"].createElement("p", {
+    className: "card-text"
+  }, t("UnauthorizedAccessScreen|You are not authorized to access this part of the application.")))))));
+}

package/dist/screens/UnauthorizedAccessScreen.scss

@@ -0,0 +1,19 @@
+.unauthorized-container {
+	overflow: hidden;
+}
+
+.unauthorized-card {
+	height: 80%;
+	width: 50%;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	border: 1px solid var(--bs-danger);
+}
+
+.unauthorized-cardbody {
+	display: flex;
+	align-items: center; /* Vertically center */
+	justify-content: center; /* Horizontally center */
+}