andoncloud-sdk 1.3.0 → 1.3.3

package/dist/andoncloud-sdk.js

@@ -2,12 +2,13 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
+var mobx = require('mobx');
 var reactRouterDom = require('react-router-dom');
 var propTypes = require('prop-types');
 var CssBaseline = _interopDefault(require('@mui/material/CssBaseline'));
 var styles = require('@mui/material/styles');
-var mobx = require('mobx');
 var material = require('@mui/material');
+var loader = _interopDefault(require('./images/loader.svg'));
 var mobxReactLite = require('mobx-react-lite');
 var Dialog = _interopDefault(require('@mui/material/Dialog'));
 var DialogContent = _interopDefault(require('@mui/material/DialogContent'));
@@ -25,7 +26,7 @@ var IconButton = _interopDefault(require('@mui/material/IconButton'));
 var MenuItem = _interopDefault(require('@mui/material/MenuItem'));
 var Menu = _interopDefault(require('@mui/material/Menu'));
 var AccessTimeIcon = _interopDefault(require('@mui/icons-material/AccessTime'));
-var styles$1 = require('@mui/styles');
+var backdropPattern = _interopDefault(require('./images/backdropPattern.svg'));
 
 let e={data:""},t=t=>"object"==typeof window?((t?t.querySelector("#_goober"):window._goober)||Object.assign((t||document.head).appendChild(document.createElement("style")),{innerHTML:" ",id:"_goober"})).firstChild:t||e,l=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g,a=/\/\*[^]*?\*\/|\s\s+|\n/g,n=(e,t)=>{let r="",l="",a="";for(let o in e){let s=e[o];"@"==o[0]?"i"==o[1]?r=o+" "+s+";":l+="f"==o[1]?n(s,o):o+"{"+n(s,"k"==o[1]?"":t)+"}":"object"==typeof s?l+=n(s,t?t.replace(/([^,])+/g,e=>o.replace(/(^:.*)|([^,])+/g,t=>/&/.test(t)?t.replace(/&/g,e):e?e+" "+t:t)):o):null!=s&&(o=/^--/.test(o)?o:o.replace(/[A-Z]/g,"-$&").toLowerCase(),a+=n.p?n.p(o,s):o+":"+s+";");}return r+(t&&a?t+"{"+a+"}":a)+l},o={},s=e=>{if("object"==typeof e){let t="";for(let r in e)t+=r+s(e[r]);return t}return e},c=(e,t,r,c,i)=>{let u=s(e),p=o[u]||(o[u]=(e=>{let t=0,r=11;for(;t<e.length;)r=101*r+e.charCodeAt(t++)>>>0;return "go"+r})(u));if(!o[p]){let t=u!==e?e:(e=>{let t,r=[{}];for(;t=l.exec(e.replace(a,""));)t[4]?r.shift():t[3]?r.unshift(r[0][t[3]]=r[0][t[3]]||{}):r[0][t[1]]=t[2];return r[0]})(e);o[p]=n(i?{["@keyframes "+p]:t}:t,r?"":"."+p);}return ((e,t,r)=>{-1==t.data.indexOf(e)&&(t.data=r?e+t.data:t.data+e);})(o[p],t,c),p},i=(e,t,r)=>e.reduce((e,l,a)=>{let o=t[a];if(o&&o.call){let e=o(r),t=e&&e.props&&e.props.className||/^go/.test(e)&&e;o=t?"."+t:e&&"object"==typeof e?e.props?"":n(e,""):!1===e?"":e;}return e+l+(null==o?"":o)},"");function u(e){let r=this||{},l=e.call?e(r.p):e;return c(l.unshift?l.raw?i(l,[].slice.call(arguments,1),r.p):l.reduce((e,t)=>Object.assign(e,t&&t.call?t(r.p):t),{}):l,t(r.target),r.g,r.o,r.k)}let p,d,f,g=u.bind({g:1}),b=u.bind({k:1});function h(e,t,r,l){n.p=t,p=e,d=r,f=l;}function m(e,t){let r=this||{};return function(){let l=arguments;function a(n,o){let s=Object.assign({},n),c=s.className||a.className;r.p=Object.assign({theme:d&&d()},s),r.o=/ *go\d+/.test(c),s.className=u.apply(r,l)+(c?" "+c:""),t&&(s.ref=o);let i=e;return e[0]&&(i=s.as||e,delete s.as),f&&i[0]&&f(s),p(i,s)}return t?t(a):a}}
 
@@ -1432,15 +1433,31 @@ var SessionAPI = /*#__PURE__*/function () {
 var SessionStore = /*#__PURE__*/function () {
   function SessionStore() {
     this.loading = false;
+    this.loginStatus = {
+      status: "not_authorized"
+    };
     this.api = new SessionAPI();
     this.networkError = null;
     mobx.makeObservable(this, {
-      loading: mobx.observable
+      loading: mobx.observable,
+      loginStatus: mobx.observable.deep
     });
   }
 
   var _proto2 = SessionStore.prototype;
 
+  _proto2.updateLoginStatus = function updateLoginStatus() {
+    this.loginStatus = {
+      status: "connected",
+      authResponse: {
+        user: this.session.user,
+        accessToken: this.session.accessToken,
+        tokenType: this.session.tokenType,
+        expiresIn: this.session.expiresIn
+      }
+    };
+  };
+
   _proto2.setAuthConfig = function setAuthConfig(config) {
     this.api.setAuthConfig(config);
   };
@@ -1466,24 +1483,6 @@ var SessionStore = /*#__PURE__*/function () {
     };
   };
 
-  _proto2.getLoginStatus = function getLoginStatus() {
-    if (this.isLoggedIn()) {
-      return {
-        status: "connected",
-        authResponse: {
-          user: this.session.user,
-          accessToken: this.session.accessToken,
-          tokenType: this.session.tokenType,
-          expiresIn: this.session.expiresIn
-        }
-      };
-    }
-
-    return {
-      status: "not_authorized"
-    };
-  };
-
   _proto2.authorize = function authorize(credentials, storeSession) {
     if (storeSession === void 0) {
       storeSession = true;
@@ -1506,6 +1505,8 @@ var SessionStore = /*#__PURE__*/function () {
           _this8.storeSession();
 
           _this8.setCurrentUser(session.user);
+
+          _this8.updateLoginStatus();
         }
 
         return session;
@@ -1528,6 +1529,8 @@ var SessionStore = /*#__PURE__*/function () {
           if (_this10.session) {
             return Promise.resolve(_this10.api.getUserData()).then(function (user) {
               _this10.setCurrentUser(user);
+
+              _this10.updateLoginStatus();
             });
           }
         }();
@@ -1549,6 +1552,10 @@ var SessionStore = /*#__PURE__*/function () {
             _this12.removeSession();
 
             _this12.removeCurrentUser();
+
+            _this12.loginStatus = {
+              status: "not_authorized"
+            };
           });
         }
       }();
@@ -1743,6 +1750,23 @@ var defaultTheme = styles.createTheme(styles.adaptV4Theme({
   }
 }));
 
+var Loader = function Loader(_ref) {
+  var width = _ref.width,
+      dataTestId = _ref["data-testid"];
+  return /*#__PURE__*/React__default.createElement(material.Box, {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    height: "100vh"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    "data-testid": dataTestId,
+    alt: "loader",
+    width: width,
+    src: loader
+  }));
+};
+
 var useQueryParams = function useQueryParams() {
   return new URLSearchParams(reactRouterDom.useLocation().search);
 };
@@ -2896,54 +2920,51 @@ var useLogin = function useLogin(scope, loginProps) {
   };
 };
 
-var useStyles = styles$1.makeStyles({
-  root: function root(_ref) {
-    var styles = _ref.styles;
-    return styles;
-  },
-  nav: {
-    marginRight: 10
-  },
-  user: {
-    marginRight: 20,
-    backgroundColor: "rgba(0,0,0,0.05)",
-    borderRadius: 5,
-    border: "1px solid rgba(0,0,0, 0.25)"
-  },
-  userInfo: {
-    paddingLeft: "1em"
-  },
-  button: {
-    color: "white",
-    backgroundColor: "transparent",
-    "&:hover": {
-      backgroundColor: "rgba(0,0,0,0.05)"
-    }
-  },
-  loginButton: {
-    padding: "6px 18px"
-  },
-  logoutButton: {
-    paddingRight: 18
-  },
-  avatar: {
-    paddingRight: "0.5em"
-  },
-  menu: function menu(_ref2) {
-    var menuStyles = _ref2.menuStyles;
-    return _extends$1({
-      marginTop: 48,
+var useStyles = (function (_ref) {
+  var styles = _ref.styles,
+      menuStyles = _ref.menuStyles,
+      menuDropdownStyles = _ref.menuDropdownStyles;
+  return {
+    root: styles,
+    nav: {
+      marginRight: "10px"
+    },
+    user: {
+      marginRight: "20px",
+      backgroundColor: "rgba(0,0,0,0.05)",
+      borderRadius: "5px",
+      border: "1px solid rgba(0,0,0, 0.25)"
+    },
+    userInfo: {
+      paddingLeft: "1em"
+    },
+    button: {
+      color: "white",
+      backgroundColor: "transparent",
+      "&:hover": {
+        backgroundColor: "rgba(0,0,0,0.05)"
+      }
+    },
+    loginButton: {
+      padding: "6px 18px"
+    },
+    logoutButton: {
+      paddingRight: "18px"
+    },
+    avatar: {
+      paddingRight: "0.5em"
+    },
+    menu: _extends$1({
+      marginTop: "48px",
       backgroundColor: "rgba(0,0,0,0.5)"
-    }, menuStyles);
-  },
-  popover: function popover(_ref3) {
-    var menuDropdownStyles = _ref3.menuDropdownStyles;
-    return _extends$1({
-      minWidth: "20%",
-      backgroundColor: "#2d2d2d",
-      color: "white"
-    }, menuDropdownStyles);
-  }
+    }, menuStyles, {
+      "& .MuiPaper-root": _extends$1({
+        minWidth: "20%",
+        backgroundColor: "#2d2d2d",
+        color: "white"
+      }, menuDropdownStyles)
+    })
+  };
 });
 
 var Header = function Header(_ref) {
@@ -2990,7 +3011,7 @@ var Header = function Header(_ref) {
       menuAnchorEl = _useState2[0],
       setMenuAnchorEl = _useState2[1];
 
-  var classes = useStyles({
+  var headerStyles = useStyles({
     styles: styles,
     menuStyles: menuStyles,
     menuDropdownStyles: menuDropdownStyles
@@ -3058,14 +3079,14 @@ var Header = function Header(_ref) {
     var currentUser = userStore.currentUser;
     return /*#__PURE__*/React__default.createElement(Box, {
       display: "inline-block",
-      className: classes.avatar
+      sx: headerStyles.avatar
     }, currentUser && currentUser.name);
   };
 
   var renderNav = function renderNav() {
     return navItems && /*#__PURE__*/React__default.createElement(Box, {
       display: "flex",
-      className: classes.nav
+      sx: headerStyles.nav
     }, navItems.map(function (item) {
       return /*#__PURE__*/React__default.createElement(Button, {
         key: item.label,
@@ -3073,7 +3094,7 @@ var Header = function Header(_ref) {
           return handleItemClick(item);
         },
         endIcon: item.icon,
-        className: classes.button
+        sx: headerStyles.button
       }, item.label);
     }));
   };
@@ -3082,23 +3103,23 @@ var Header = function Header(_ref) {
     var currentUser = userStore.getCurrentUserJS;
     return /*#__PURE__*/React__default.createElement(Box, {
       display: "flex",
-      className: classes.user
+      sx: headerStyles.user
     }, currentUser ? /*#__PURE__*/React__default.createElement(Box, {
       display: "flex",
       alignItems: "center",
-      className: classes.userInfo
+      sx: headerStyles.userInfo
     }, showCompanyLogo && renderUserCompanyLogo(), renderUserAvatar(), /*#__PURE__*/React__default.createElement(Button, {
       id: "logout-button",
       onClick: handleLogout,
       endIcon: /*#__PURE__*/React__default.createElement(ExitToAppIcon, null),
-      className: classes.button + " " + classes.logoutButton,
+      sx: _extends$1({}, headerStyles.button, headerStyles.logoutButton),
       "data-testid": "ac-sdk-header-logout-button"
     }, languageStore.translations.headerLogoutButton)) : /*#__PURE__*/React__default.createElement(Button, {
       id: "login-button",
       onClick: function onClick() {
         return navigate("/login");
       },
-      className: classes.button + " " + classes.loginButton,
+      sx: _extends$1({}, headerStyles.button, headerStyles.loginButton),
       "data-testid": "ac-sdk-header-login-button"
     }, languageStore.translations.headerLoginButton));
   };
@@ -3125,10 +3146,7 @@ var Header = function Header(_ref) {
       },
       open: Boolean(menuAnchorEl),
       onClose: handleMenuClose,
-      className: classes.menu,
-      PopoverClasses: {
-        paper: classes.popover
-      }
+      sx: headerStyles.menu
     }, menuItems.map(function (item) {
       return /*#__PURE__*/React__default.createElement(MenuItem, {
         key: item.label,
@@ -3142,7 +3160,7 @@ var Header = function Header(_ref) {
   return /*#__PURE__*/React__default.createElement(AppBar, {
     position: position,
     elevation: 0,
-    className: classes.root,
+    sx: headerStyles.root,
     "data-testid": dataTestID || "ac-sdk-header"
   }, /*#__PURE__*/React__default.createElement(Toolbar, {
     variant: "dense"
@@ -3237,8 +3255,6 @@ Container.defaultProps = {
   headerProps: {}
 };
 
-var backdropPattern = "backdropPattern~bkGGEBvj.svg";
-
 var FullscreenBackdrop = function FullscreenBackdrop() {
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -3399,13 +3415,11 @@ var App = mobxReactLite.observer(function (_ref) {
   React.useEffect(function () {
     var recoverSession = function recoverSession() {
       try {
-        var _temp2 = function () {
-          if (authEnabled) {
-            return Promise.resolve(sessionStore.recover()).then(function () {});
-          }
-        }();
+        if (authEnabled) {
+          return Promise.resolve(sessionStore.recover());
+        }
 
-        return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+        return Promise.resolve();
       } catch (e) {
         return Promise.reject(e);
       }
@@ -3425,10 +3439,13 @@ var App = mobxReactLite.observer(function (_ref) {
     config: _extends$1({
       baseUrl: baseUrl
     }, authProps)
-  }, sessionStore.networkError ? /*#__PURE__*/React__default.createElement(NetworkError, null) : appReady && /*#__PURE__*/React__default.createElement(Router, null, /*#__PURE__*/React__default.createElement(reactRouterDom.Route, {
+  }, sessionStore.networkError ? /*#__PURE__*/React__default.createElement(NetworkError, null) : appReady ? /*#__PURE__*/React__default.createElement(Router, null, /*#__PURE__*/React__default.createElement(reactRouterDom.Route, {
     path: "*",
     element: /*#__PURE__*/React__default.createElement(ModalProvider, null, children)
-  }))));
+  })) : /*#__PURE__*/React__default.createElement(Loader, {
+    "data-testid": "ac-sdk-app-loading",
+    width: "500px"
+  })));
 });
 App.propTypes = {
   children: propTypes.PropTypes.any.isRequired,
@@ -3448,8 +3465,19 @@ App.defaultProps = {
   muiTheme: defaultTheme
 };
 
-var getLoginStatus = function getLoginStatus() {
-  return sessionStore.getLoginStatus();
+var useLoginStatus = function useLoginStatus() {
+  var _useState = React.useState(sessionStore.loginStatus),
+      loginStatus = _useState[0],
+      setLoginStatus = _useState[1];
+
+  React.useEffect(function () {
+    return mobx.reaction(function () {
+      return mobx.toJS(sessionStore.loginStatus);
+    }, function () {
+      setLoginStatus(sessionStore.loginStatus);
+    });
+  }, []);
+  return loginStatus;
 };
 
 var logout = function logout() {
@@ -3462,9 +3490,9 @@ var setLocale = function setLocale(locale) {
 
 exports.App = App;
 exports.Container = Container;
-exports.getLoginStatus = getLoginStatus;
 exports.logout = logout;
 exports.notify = toast;
 exports.setLocale = setLocale;
 exports.useLogin = useLogin;
+exports.useLoginStatus = useLoginStatus;
 //# sourceMappingURL=andoncloud-sdk.js.map