@dexteel/mesf-core 3.8.0 → 3.9.1

package/CHANGELOG.md

@@ -1,4 +1,11 @@
 # CHANGELOG
+## 3.9.1
+- When creating axiosInstance, add token
+## 3.9.0
+- Add axiosInstance
+## 3.8.0
+- Fix logout issues
+- Add uploadFiles method in MES API Service
 ## 3.7.1
 - Fix typo in navbar (MESFAAA)
 ## 3.7.0

package/dist/account/AuthProvider.d.ts

@@ -1,5 +1,14 @@
 import React from 'react';
-export declare const AuthContext: React.Context<any>;
+export declare const AuthContext: React.Context<{
+    getUserName: () => string;
+    saveUserData: (userToken: any) => void;
+    clearUserData: () => void;
+    getFirstName: () => any;
+    getLastName: () => any;
+    getUserId: () => any;
+    hasPermission: (permissionId: number) => boolean;
+    token: string;
+}>;
 export type AuthConfig = {
     guestIsEnabled: boolean;
     useEmailAndPassword: boolean;

package/dist/account/useToken.d.ts

@@ -1,10 +1,11 @@
+export declare const getTokenFromLS: () => string;
 export declare function useToken(): {
     getUserName: () => string;
-    setToken: (userToken: any) => void;
-    clearToken: () => void;
+    saveUserData: (userToken: any) => void;
+    clearUserData: () => void;
     getFirstName: () => any;
     getLastName: () => any;
     getUserId: () => any;
     hasPermission: (permissionId: number) => boolean;
-    token: any;
+    token: string;
 };

package/dist/context/axiosInstance.d.ts

@@ -0,0 +1,2 @@
+export declare function renewToken(): Promise<any[]>;
+export declare const axiosInstance: import("axios").AxiosInstance;

package/dist/context/userContext.d.ts

@@ -5,7 +5,6 @@ export declare const useUserContext: () => {
         userId: number | null;
         defaultAreaId: string | number | null;
         defaultAreaName: string | null;
-        userLoged: boolean;
     };
     actions: import("@reduxjs/toolkit").CaseReducerActions<{
         setUserId(state: import("immer/dist/internal").WritableDraft<{
@@ -13,7 +12,6 @@ export declare const useUserContext: () => {
             userId: number | null;
             defaultAreaId: string | number | null;
             defaultAreaName: string | null;
-            userLoged: boolean;
         }>, { payload }: {
             payload: any;
             type: string;
@@ -23,7 +21,6 @@ export declare const useUserContext: () => {
             userId: number | null;
             defaultAreaId: string | number | null;
             defaultAreaName: string | null;
-            userLoged: boolean;
         }>, { payload }: {
             payload: any;
             type: string;
@@ -33,7 +30,6 @@ export declare const useUserContext: () => {
             userId: number | null;
             defaultAreaId: string | number | null;
             defaultAreaName: string | null;
-            userLoged: boolean;
         }>, { payload }: {
             payload: any;
             type: string;
@@ -43,17 +39,6 @@ export declare const useUserContext: () => {
             userId: number | null;
             defaultAreaId: string | number | null;
             defaultAreaName: string | null;
-            userLoged: boolean;
-        }>, { payload }: {
-            payload: any;
-            type: string;
-        }): void;
-        setUserLoged(state: import("immer/dist/internal").WritableDraft<{
-            userLastName: string;
-            userId: number | null;
-            defaultAreaId: string | number | null;
-            defaultAreaName: string | null;
-            userLoged: boolean;
         }>, { payload }: {
             payload: any;
             type: string;

package/dist/index.d.ts

@@ -7,3 +7,4 @@ export * from "./controls";
 export * from "./MESFMain";
 export * from "./services";
 export * from "./utils";
+export * from "./context/axiosInstance";

package/dist/index.esm.js

@@ -2,48 +2,39 @@ import { Typography, TextField, FormHelperText, CircularProgress as CircularProg
 import { get as get$1, isEmpty } from 'lodash-es';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, Component, createContext, useContext, useCallback, lazy, Suspense } from 'react';
-import PropTypes from 'prop-types';
-import { ResponsiveBar } from '@nivo/bar';
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
-import { withStyles, alpha, makeStyles, createStyles, useTheme } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
+import { Alert as Alert$1, Modal as Modal$2, Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
 import DialogTitle$1 from '@material-ui/core/DialogTitle';
 import DialogContent$1 from '@material-ui/core/DialogContent';
 import DialogActions$1 from '@material-ui/core/DialogActions';
 import Dialog from '@material-ui/core/Dialog';
-import TreeView from '@material-ui/lab/TreeView';
-import SvgIcon from '@material-ui/core/SvgIcon';
-import TreeItem from '@material-ui/lab/TreeItem';
-import Collapse from '@material-ui/core/Collapse';
-import Code from '@material-ui/icons/Code';
-import Folder from '@material-ui/icons/Folder';
-import { useSpring, animated } from 'react-spring';
+import Button from '@material-ui/core/Button';
+import { Outlet, useNavigate, useSearchParams, Link, useParams, Navigate, Routes, Route, BrowserRouter } from 'react-router-dom';
+import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
-import { DataGrid, GridOverlay } from '@material-ui/data-grid';
-import Card from '@material-ui/core/Card';
-import CardActions from '@material-ui/core/CardActions';
-import CardContent from '@material-ui/core/CardContent';
-import Typography$1 from '@material-ui/core/Typography';
-import { Alert as Alert$1, Modal as Modal$2, Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
 import { useMsal, MsalProvider } from '@azure/msal-react';
 import { LogLevel, PublicClientApplication } from '@azure/msal-browser';
-import { Outlet, useNavigate, useSearchParams, Link, useParams, Navigate, Routes, Route, BrowserRouter } from 'react-router-dom';
-import Paper from '@material-ui/core/Paper';
+import MenuItem from '@material-ui/core/MenuItem';
 import MenuList from '@material-ui/core/MenuList';
+import axios from 'axios';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
 import { useComplexState } from 'use-complex-state';
 import { createSlice } from '@reduxjs/toolkit';
 import moment from 'moment';
+import { withStyles, alpha, makeStyles, createStyles, useTheme } from '@material-ui/core/styles';
 import { get, useForm, Controller } from 'react-hook-form';
 import DialogContentText from '@material-ui/core/DialogContentText';
+import Typography$1 from '@material-ui/core/Typography';
+import { DataGrid, GridOverlay } from '@material-ui/data-grid';
 import Snackbar from '@material-ui/core/Snackbar';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import MuiAlert from '@material-ui/lab/Alert';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
 import TextField$1 from '@material-ui/core/TextField';
 import { Alert as Alert$2, AlertTitle } from '@material-ui/lab';
 import { MuiPickersUtilsProvider, KeyboardDatePicker, KeyboardTimePicker } from '@material-ui/pickers';
 import MomentUtils from '@date-io/moment';
+import Select from '@material-ui/core/Select';
 import InputLabel from '@material-ui/core/InputLabel';
 import FormControl from '@material-ui/core/FormControl';
 import FormGroup from '@material-ui/core/FormGroup';
@@ -58,6 +49,16 @@ import Chip from '@material-ui/core/Chip';
 import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
+import PropTypes from 'prop-types';
+import { ResponsiveBar } from '@nivo/bar';
+import TreeView from '@material-ui/lab/TreeView';
+import SvgIcon from '@material-ui/core/SvgIcon';
+import TreeItem from '@material-ui/lab/TreeItem';
+import Collapse from '@material-ui/core/Collapse';
+import Code from '@material-ui/icons/Code';
+import Folder from '@material-ui/icons/Folder';
+import { useSpring, animated } from 'react-spring';
+import CardActions from '@material-ui/core/CardActions';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -4658,7 +4659,7 @@ var Configuration$1 = /** @class */ (function () {
     return Configuration;
 }());
 
-var base$1 = document.getElementsByTagName('base')[0].getAttribute('href') || '/';
+var base$2 = document.getElementsByTagName('base')[0].getAttribute('href') || '/';
 var MESApiService = /** @class */ (function () {
     function MESApiService() {
         this.config = new Configuration$1();
@@ -4685,7 +4686,7 @@ var MESApiService = /** @class */ (function () {
                         mode: "cors",
                         headers: {
                             "Content-Type": "application/json",
-                            'Authorization': 'Bearer ' + this.TOKEN
+                            'Authorization': 'Bearer ' + getTokenFromLS()
                         },
                         body: JSON.stringify(data)
                     })["catch"](function (errorMsg) {
@@ -4835,7 +4836,7 @@ var MESApiService = /** @class */ (function () {
                         mode: "cors",
                         headers: {
                             "Content-Type": "application/json",
-                            'Authorization': 'Bearer ' + this.TOKEN
+                            'Authorization': 'Bearer ' + getTokenFromLS()
                         },
                         body: JSON.stringify(data)
                     })["catch"](function (errorMsg) {
@@ -4843,7 +4844,7 @@ var MESApiService = /** @class */ (function () {
                     })
                         .then(function (response) {
                         if (response.status === 401) {
-                            window.location.href = "".concat(base$1, "logout?message=Session%20expired&redirectTo=").concat(window.location.href);
+                            window.location.href = "".concat(base$2, "logout?message=Session%20expired&redirectTo=").concat(window.location.href);
                         }
                         isError = { ok: response.ok, status: response.status, statusText: response.statusText };
                         return response.json();
@@ -4887,7 +4888,7 @@ var MESApiService = /** @class */ (function () {
                         mode: "cors",
                         headers: {
                             "Content-Type": "application/json",
-                            'Authorization': 'Bearer ' + this.TOKEN
+                            'Authorization': 'Bearer ' + getTokenFromLS()
                         },
                         body: JSON.stringify(data)
                     })["catch"](function (errorMsg) {
@@ -4895,7 +4896,7 @@ var MESApiService = /** @class */ (function () {
                     })
                         .then(function (response) {
                         if (response.status === 401) {
-                            window.location.href = "".concat(base$1, "logout?message=Session%20expired&redirectTo=").concat(window.location.href);
+                            window.location.href = "".concat(base$2, "logout?message=Session%20expired&redirectTo=").concat(window.location.href);
                         }
                         isError = { ok: response.ok, status: response.status, statusText: response.statusText };
                         return response.json();
@@ -4942,7 +4943,7 @@ var MESApiService = /** @class */ (function () {
                         method: "POST",
                         mode: "cors",
                         headers: {
-                            'Authorization': 'Bearer ' + this.TOKEN
+                            'Authorization': 'Bearer ' + getTokenFromLS()
                         },
                         body: formData
                     })["catch"](function (errorMsg) {
@@ -4950,7 +4951,7 @@ var MESApiService = /** @class */ (function () {
                     })
                         .then(function (response) {
                         if (response.status === 401) {
-                            window.location.href = "".concat(base$1, "logout?message=Session%20expired&redirectTo=").concat(window.location.href);
+                            window.location.href = "".concat(base$2, "logout?message=Session%20expired&redirectTo=").concat(window.location.href);
                         }
                         isError = { ok: response.ok, status: response.status, statusText: response.statusText };
                         return response.json();
@@ -4995,7 +4996,7 @@ var MESApiService = /** @class */ (function () {
                         mode: "cors",
                         headers: {
                             "Content-Type": "application/json",
-                            'Authorization': 'Bearer ' + this.TOKEN
+                            'Authorization': 'Bearer ' + getTokenFromLS()
                         },
                         body: JSON.stringify(data)
                     })["catch"](function (errorMsg) {
@@ -5003,7 +5004,7 @@ var MESApiService = /** @class */ (function () {
                     })
                         .then(function (response) {
                         if (response.status === 401) {
-                            window.location.href = "".concat(base$1, "logout?message=Session%20expired&redirectTo=").concat(window.location.href);
+                            window.location.href = "".concat(base$2, "logout?message=Session%20expired&redirectTo=").concat(window.location.href);
                         }
                         isError = { ok: response.ok, status: response.status, statusText: response.statusText };
                         if (!isError.ok)
@@ -5064,7 +5065,7 @@ var MESApiService = /** @class */ (function () {
                         mode: "cors",
                         headers: {
                             "Content-Type": "application/json",
-                            'Authorization': 'Bearer ' + this.TOKEN
+                            'Authorization': 'Bearer ' + getTokenFromLS()
                         },
                         body: JSON.stringify(data)
                     })["catch"](function (errorMsg) {
@@ -5072,7 +5073,7 @@ var MESApiService = /** @class */ (function () {
                     })
                         .then(function (response) {
                         if (response.status === 401) {
-                            window.location.href = "".concat(base$1, "logout?message=Session%20expired&redirectTo=").concat(window.location.href);
+                            window.location.href = "".concat(base$2, "logout?message=Session%20expired&redirectTo=").concat(window.location.href);
                         }
                         isError = { ok: response.ok, status: response.status, statusText: response.statusText };
                         if (!isError.ok)
@@ -5241,7 +5242,7 @@ var UserInitialState = {
     userId: null,
     defaultAreaId: null,
     defaultAreaName: "",
-    userLoged: false
+    userLogged: false
 };
 var UserReducer = createSlice({
     name: "__",
@@ -5263,9 +5264,9 @@ var UserReducer = createSlice({
             var payload = _a.payload;
             state.defaultAreaName = payload;
         },
-        setUserLoged: function (state, _a) {
+        setUserLogged: function (state, _a) {
             var payload = _a.payload;
-            state.userLoged = payload;
+            state.userLogged = payload;
         }
     }
 });
@@ -5284,47 +5285,47 @@ var UserProvider = function (_a) {
     return (React__default.createElement(UserContext.Provider, { value: { state: state, actions: actions } }, children));
 };
 
+var getTokenFromLS = function () {
+    return localStorage.getItem('token');
+};
 function useToken() {
-    var setUserLoged = useUserContext().actions.setUserLoged;
-    var getToken = function () {
-        var tokenString = localStorage.getItem("userMESData");
-        var userToken = JSON.parse(tokenString);
-        return userToken === null || userToken === void 0 ? void 0 : userToken.token;
-    };
-    var _a = useState(getToken()), token = _a[0], setToken = _a[1];
-    var saveToken = function (userToken) {
-        localStorage.setItem("userMESData", JSON.stringify(userToken));
-        setToken(userToken.token);
+    var setUserLogged = useUserContext().actions.setUserLogged;
+    var _a = useState(getTokenFromLS()), token = _a[0], setToken = _a[1];
+    var saveUserData = function (userToken) {
+        localStorage.setItem('userMESData', JSON.stringify(userToken));
+        localStorage.setItem('refreshToken', userToken['refreshToken']);
+        localStorage.setItem('token', userToken['token']);
+        setToken(userToken['token']);
+        setUserLogged(true);
     };
     var clearUserData = function () {
-        localStorage.removeItem("userMESData");
-        setToken(undefined);
+        localStorage.removeItem('userMESData');
+        setToken('');
+        setUserLogged(false);
     };
     var getUserName = function () {
-        var sessionData = localStorage.getItem("userMESData");
+        var sessionData = localStorage.getItem('userMESData');
         var userData = JSON.parse(sessionData);
-        return (((userData || {}).lastName || "") +
-            ", " +
-            ((userData || {}).firstName || ""));
+        return ((userData || {}).lastName || '') + ', ' + ((userData || {}).firstName || '');
     };
     var getFirstName = function () {
-        var sessionData = localStorage.getItem("userMESData");
+        var sessionData = localStorage.getItem('userMESData');
         var userData = JSON.parse(sessionData);
-        return (userData || {}).firstName || "";
+        return ((userData || {}).firstName || '');
     };
     var getLastName = function () {
-        var sessionData = localStorage.getItem("userMESData");
+        var sessionData = localStorage.getItem('userMESData');
         var userData = JSON.parse(sessionData);
-        return (userData || {}).lastName || "";
+        return ((userData || {}).lastName || '');
     };
     var getUserId = function () {
-        var sessionData = localStorage.getItem("userMESData");
+        var sessionData = localStorage.getItem('userMESData');
         var userData = JSON.parse(sessionData);
-        setUserLoged(true);
-        return (userData || {}).id || -1;
+        setUserLogged(true);
+        return ((userData || {}).id || (-1));
     };
     var hasPermission = function (permissionId) {
-        var sessionData = localStorage.getItem("userMESData");
+        var sessionData = localStorage.getItem('userMESData');
         if (sessionData === undefined)
             return false;
         var userData = JSON.parse(sessionData);
@@ -5333,8 +5334,8 @@ function useToken() {
     };
     return {
         getUserName: getUserName,
-        setToken: saveToken,
-        clearToken: clearUserData,
+        saveUserData: saveUserData,
+        clearUserData: clearUserData,
         getFirstName: getFirstName,
         getLastName: getLastName,
         getUserId: getUserId,
@@ -5441,6 +5442,7 @@ var AuthContext = React__default.createContext({});
 var AuthProvider = function (_a) {
     var children = _a.children, authConfig = _a.authConfig;
     var useTokenHook = useToken();
+    console.log(useTokenHook.token);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(AuthContext.Provider, { value: useTokenHook },
             !!useTokenHook.token && React__default.createElement(Authenticated, null, children),
@@ -5460,14 +5462,14 @@ var LoginWithEmailAndPassword = function () {
     var _b = useState(''), password = _b[0], setPassword = _b[1];
     var _c = React__default.useState(false), showError = _c[0], setShowError = _c[1];
     var _d = React__default.useState(undefined), error = _d[0], setError = _d[1];
-    var setToken = React__default.useContext(AuthContext).setToken;
-    var apiService = new MESApiService();
+    var saveUserData = React__default.useContext(AuthContext).saveUserData;
     var login = function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        var response;
+        var apiService, response;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     e.preventDefault();
+                    apiService = new MESApiService();
                     return [4 /*yield*/, apiService.authenticate(username, password)];
                 case 1:
                     response = _a.sent();
@@ -5476,17 +5478,12 @@ var LoginWithEmailAndPassword = function () {
                         setError(apiService.error);
                     }
                     else {
-                        setToken(response);
+                        saveUserData(response);
                     }
                     return [2 /*return*/];
             }
         });
     }); };
-    var handleKeypress = function (e) {
-        if (e.charCode === 13) {
-            login(e);
-        }
-    };
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("form", { onSubmit: login },
             React__default.createElement(Alert$1, { show: showError, variant: "danger", dismissible: true, onClose: function () {
@@ -5501,7 +5498,7 @@ var LoginWithEmailAndPassword = function () {
             React__default.createElement("div", { className: "form-group row" },
                 React__default.createElement("input", { id: "txtUserName", placeholder: "User", name: "userName", onChange: function (e) { return setUserName(e.target.value); }, type: "text", autoComplete: "off", className: "form-control" })),
             React__default.createElement("div", { className: "form-group row" },
-                React__default.createElement("input", { id: "txtPassword", placeholder: "Password", name: "password", onChange: function (e) { return setPassword(e.target.value); }, onKeyPress: handleKeypress, type: "password", className: "form-control" })),
+                React__default.createElement("input", { id: "txtPassword", placeholder: "Password", name: "password", onChange: function (e) { return setPassword(e.target.value); }, type: "password", className: "form-control" })),
             React__default.createElement("div", { className: "row" },
                 React__default.createElement("button", { className: "btn btn-primary mes-button-primary mx-auto col-md-12 mt-3 ", type: "submit", disabled: password.length === 0 || username.length === 0 }, "Login")))));
 };
@@ -5560,7 +5557,7 @@ var loginRequest = {
 };
 
 var LoginWithAzureADForm = function () {
-    var setToken = React__default.useContext(AuthContext).setToken;
+    var saveUserData = React__default.useContext(AuthContext).saveUserData;
     var instance = useMsal().instance;
     var login = function (e) { return __awaiter(void 0, void 0, void 0, function () {
         var result, api, loginResponse, e_1, e_2;
@@ -5581,7 +5578,7 @@ var LoginWithAzureADForm = function () {
                     return [4 /*yield*/, api.loginWithAzureAD(result.accessToken)];
                 case 4:
                     loginResponse = _a.sent();
-                    setToken(loginResponse);
+                    saveUserData(loginResponse);
                     return [3 /*break*/, 6];
                 case 5:
                     e_1 = _a.sent();
@@ -5614,7 +5611,7 @@ var LoginWithAzureAD = function (_a) {
 var LoginAsGuest = function () {
     var _a = React__default.useState(false), showError = _a[0], setShowError = _a[1];
     var _b = React__default.useState(undefined), error = _b[0], setError = _b[1];
-    var setToken = React__default.useContext(AuthContext).setToken;
+    var saveUserData = React__default.useContext(AuthContext).saveUserData;
     var apiService = new MESApiService();
     var loginAsGuest = function (e) { return __awaiter(void 0, void 0, void 0, function () {
         var response;
@@ -5630,7 +5627,7 @@ var LoginAsGuest = function () {
                         setError(apiService.error);
                     }
                     else {
-                        setToken(response);
+                        saveUserData(response);
                     }
                     return [2 /*return*/];
             }
@@ -5690,14 +5687,14 @@ function Login(_a) {
 
 function Logout() {
     var _this = this;
-    var clearToken = useContext(AuthContext).clearToken;
+    var clearUserData = useContext(AuthContext).clearUserData;
     var navigate = useNavigate();
     var _a = useSearchParams(), params = _a[0]; _a[1];
-    var setUserLoged = useUserContext().actions.setUserLoged;
+    var setUserLogged = useUserContext().actions.setUserLogged;
     var logout = function () { return __awaiter(_this, void 0, void 0, function () {
         return __generator(this, function (_a) {
-            setUserLoged(false);
-            clearToken();
+            setUserLogged(false);
+            clearUserData();
             navigate("/?".concat(params.toString()));
             return [2 /*return*/];
         });
@@ -5780,7 +5777,7 @@ function Header(_a) {
     var CustomNavbar = useContext(NavbarContext);
     var userName = useState(getUserName())[0];
     var searchAssets = useSearchAssets().searchAssets;
-    var userLoged = useUserContext().state.userLoged;
+    var userLogged = useUserContext().state.userLogged;
     var tick = function () {
         setDate(new Date());
     };
@@ -5792,9 +5789,11 @@ function Header(_a) {
             clearTimeout(timerID);
         };
     });
-    useEffect(function () { if (showAreaSelector && userLoged) {
-        searchAssets();
-    } }, [userLoged]);
+    useEffect(function () {
+        if (showAreaSelector && userLogged) {
+            searchAssets();
+        }
+    }, [userLogged]);
     return (React__default.createElement(Navbar, { variant: "dark", expand: "lg", className: "mes-primary-color mes-menu-top" },
         React__default.createElement(Container, { fluid: true },
             React__default.createElement(Navbar.Brand, { as: Link, to: "/home" }, "MESF"),
@@ -5908,7 +5907,6 @@ var Navigation = function (_a) {
     var _c = useSearchParams(), params = _c[0]; _c[1];
     var mounted = useRef(true);
     useEffect(function () {
-        mounted.current = true;
         if (params.has('redirectTo')) {
             setTimeout(function () {
                 if (mounted.current) {
@@ -5928,7 +5926,7 @@ var Navigation = function (_a) {
 var css = "body {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  background-color: #fafbfc !important;\n}\n.container-fluid-main{\n  padding-right: 0px !important; \n  padding-left: 0px !important;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n    monospace;\n}\n\n.mes-primary-color {\n  background-color: #479dc4 !important;\n}\n.mes-button-primary{\n  background-color: #479dc4 !important;\n  border-color: #479dc4 !important;\n}\n\n.mes-selectable-datagrid .MuiDataGrid-row{\n  cursor: pointer;\n}\n\n.mes-menu-top .navbar-brand{\n  color: #FFFF !important;\n}\n.mes-menu-top .nav-link {\n  color: #FFFF !important;\n}\n.mes-menu-top .navbar-toggler {\n  color: #FFFF !important;\n}\n.mes-menu-top .navbar-text {\n  color: #FFFF !important;\n}\n.mes-footer-login{\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  height: 10em;\n  line-height: 60px;\n  text-align:center;\n}\n.mes-filter-datepicker{\n  padding: unset !important;\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n  padding-top: 0.375rem !important;\n  padding-bottom: 0.375rem !important;\n  padding-left: 0.75rem !important;\n  cursor: pointer !important;\n  max-width: 120px;\n}\n.mes-filter-datetimepicker{\n  max-width: 97px;\n}\n.mes-not-rounded{\n  border-radius: unset !important;\n}\n\n.mes-numeric{\n  text-align: right;\n}\n.mes-drag-over{\n  border: 3px dotted #666;\n  background-color: #479dc4 !important;\n}\n.mes-drag-start{\n  border: 3px solid #666;\n}\n\n.mes-selectable{\n  cursor: pointer !important;\n}\n\n.mes-custom-select{\n  width: auto !important;\n  padding: 0.375rem 0 0.375rem 0 !important;\n  background: unset !important;\n  font-family: inherit !important;\n}\n.mes-custom-select .MuiSelect-select{\n  padding-left: 14px;\n}\n\n.mes-custom-select::before{\n  border-bottom: unset !important;\n}\n.mes-custom-select::after{\n  border-bottom: unset !important;\n}\n.mes-no-border{\n  border: unset;\n}\n.mes-no-border:focus-visible {\n  outline: unset;\n}\n.mes-div-submenu{\n  border-right: 1px solid #cfdbe2; \n}\n.mes-submenu a{\n  width: 100% !important;\n  /* color: rgba(0, 0, 0, 0.87); */\n  color: #479dc4\n}\n.mes-submenu .Mui-selected{\n  border-right: 3px solid #479dc4; \n}\n.mes-menu-group{\n    font-size: 20px;\n    line-height: 1.1;\n    color: #929292;  \n    font-weight: normal;    \n}\n\n/********************MUI DATAGRID*****************************/\n.Mui-selected{\n  font-weight: bolder !important;\n  opacity: 1 !important;\n}\n\n.mes-upload-control{\n\n}\n.mes-upload-control .file-box{\n  /* border : 1px solid black; */\n  height : 100px;\n  position: relative;  \n}\n.mes-upload-control .file-detail{\n  position: absolute;\n  left: 0px;\n  top: 0px; \n  z-index: 1;\n  height: 100%;\n  width: 100%;\n}\n\n.mes-upload-control input[type=file]{\n  left: 0px;\n  top: 0px;\n  opacity: 0;\n  z-index: 10000;\n  height: 100%;\n  cursor: pointer;\n}\n.mes-upload-control table{\n  width: 100%;\n}\n.mes-upload-control td{\n  font-size: 0.8rem !important;\n  max-width:0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\n}\n\n\n.input-group-text{\n  background-color: #ced2cc !important;\n  /* border: 1px solid #ced4da !important; */\n  /* color: #000000 !important; */\n}\n\n\n\n\n.content-wrapper {\n  padding: 15px;\n  width: 100%;\n  border-top: 1px solid rgba(0, 0, 0, 0.15);\n  margin-top: -1px;\n}\n.content-wrapper > .unwrap {\n  margin: -15px;\n}\n@media only screen and (min-width: 768px) {\n  .content-wrapper > .unwrap {\n    margin: -20px;\n  }\n}\n.content-wrapper > h3,\n.content-wrapper > .content-heading {\n  font-size: 24px;\n  line-height: 1.1;\n  color: #929292;\n  margin: -15px;\n  margin-bottom: 20px;\n  padding: 15px;\n  font-weight: normal;\n  background-color: #fafbfc;\n  border-bottom: 1px solid #cfdbe2;\n}\n.content-wrapper > h3 > small,\n.content-wrapper > .content-heading > small {\n  display: block;\n  font-size: 12px;\n  color: #909fa7;\n}\n.content-wrapper > button,\n.content-wrapper > .btn {\n  margin: 10px 10px 0 0;\n}\n.content-wrapper .container,\n.content-wrapper .container-fluid {\n  padding-left: 0;\n  padding-right: 0;\n}\n@media only screen and (min-width: 768px) {\n  .content-wrapper {\n    padding: 20px;\n  }\n  .content-wrapper > h3,\n  .content-wrapper > .content-heading {\n    margin: -20px;\n    margin-bottom: 5px;\n    padding: 15px;\n  }\n  .content-wrapper > button,\n  .content-wrapper > .btn {\n    margin: 0;\n  }\n}\n\n  @media print {\n    .sidebar,\n    .topnavbar,\n    .offsidebar,\n    .btn {\n      display: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    }\n    .wrapper,\n    .wrapper > section,\n    .content-wrapper {\n      margin: 0 !important;\n      /* remove margin used for sidebar and expand the content */\n      padding: 0 !important;\n      width: 100% !important;\n    }\n    .content-wrapper {\n      overflow: hidden !important;\n    }\n  }\n  ";
 n(css,{});
 
-var base = document.getElementsByTagName('base')[0].getAttribute('href') || '/';
+var base$1 = document.getElementsByTagName('base')[0].getAttribute('href') || '/';
 function MESFMain(_a) {
     var authentication = _a.authentication, routes = _a.routes, navbar = _a.navbar, configurations = _a.configurations, _b = _a.showAreaSelector, showAreaSelector = _b === void 0 ? false : _b;
     return (React__default.createElement(AuthProvider, { authConfig: authentication },
@@ -5937,12 +5935,113 @@ function MESFMain(_a) {
                 React__default.createElement(RouterContext.Provider, { value: routes },
                     React__default.createElement(NavbarContext.Provider, { value: navbar },
                         React__default.createElement(ConfigurationContext.Provider, { value: configurations },
-                            React__default.createElement(BrowserRouter, { basename: base },
+                            React__default.createElement(BrowserRouter, { basename: base$1 },
                                 React__default.createElement(Routes, null,
                                     React__default.createElement(Route, { path: "/logout", element: React__default.createElement(Logout, null) })),
                                 React__default.createElement(Navigation, { showAreaSelector: showAreaSelector })))))))));
 }
 
+var base = document.getElementsByTagName('base')[0].getAttribute('href') || '/';
+function renewToken() {
+    return __awaiter(this, void 0, void 0, function () {
+        var refreshToken, config, fd, response, token;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    refreshToken = localStorage.getItem("refreshToken");
+                    if (!refreshToken) {
+                        throw new Error('refresh token does not exist');
+                    }
+                    config = new Configuration$1();
+                    fd = new FormData();
+                    fd.append('refreshToken', refreshToken);
+                    return [4 /*yield*/, axios.post("".concat(config.API_AUTH_URL, "/refresh"), fd, {
+                            headers: {
+                                "Content-Type": 'application/json'
+                            },
+                            params: {
+                                refreshToken: refreshToken
+                            }
+                        })];
+                case 1:
+                    response = _a.sent();
+                    token = response.data.result;
+                    if (token) {
+                        return [2 /*return*/, [token, refreshToken]];
+                    }
+                    else {
+                        throw new Error("Token is not valid");
+                    }
+            }
+        });
+    });
+}
+function isUnauthorizedError(error) {
+    var _a = error.response, status = _a.status; _a.statusText;
+    return status === 401;
+}
+var axiosInstance = axios.create({
+    headers: {
+        Authorization: "Bearer ".concat(getTokenFromLS())
+    }
+});
+var refreshingFunc;
+axiosInstance.interceptors.response.use(function (res) { return res; }, function (error) { return __awaiter(void 0, void 0, void 0, function () {
+    var originalConfig, token, _a, newToken, newRefreshToken, innerError_1;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
+            case 0:
+                originalConfig = error.config;
+                if (originalConfig.headers.MESF_Retries === 1) {
+                    localStorage.removeItem("token");
+                    localStorage.removeItem("refreshToken");
+                    window.location.href = "".concat(base, "logout?message=Session%20expired&redirectTo=").concat(window.location.href);
+                }
+                token = getTokenFromLS();
+                if (!token || !isUnauthorizedError(error)) {
+                    return [2 /*return*/, Promise.reject(error)];
+                }
+                _b.label = 1;
+            case 1:
+                _b.trys.push([1, 7, 8, 9]);
+                // the trick here, that `refreshingFunc` is global, e.g. 2 expired requests will get the same function pointer and await same function.
+                if (!refreshingFunc)
+                    refreshingFunc = renewToken();
+                return [4 /*yield*/, refreshingFunc];
+            case 2:
+                _a = _b.sent(), newToken = _a[0], newRefreshToken = _a[1];
+                localStorage.setItem("token", newToken);
+                localStorage.setItem("refreshToken", newRefreshToken);
+                axiosInstance.defaults.headers.Authorization = "Bearer ".concat(newToken);
+                originalConfig.headers.Authorization = "Bearer ".concat(newToken);
+                originalConfig.headers.MESF_Retries = 1;
+                _b.label = 3;
+            case 3:
+                _b.trys.push([3, 5, , 6]);
+                return [4 /*yield*/, axios.request(originalConfig)];
+            case 4: return [2 /*return*/, _b.sent()];
+            case 5:
+                innerError_1 = _b.sent();
+                // if original req failed with 401 again - it means server returned not valid token for refresh request
+                if (isUnauthorizedError(innerError_1)) {
+                    return [2 /*return*/, innerError_1];
+                }
+                return [2 /*return*/, innerError_1];
+            case 6: return [3 /*break*/, 9];
+            case 7:
+                _b.sent();
+                localStorage.removeItem("token");
+                localStorage.removeItem("refreshToken");
+                window.location.href = "".concat(base, "logout?message=Session%20expired&redirectTo=").concat(window.location.href);
+                return [3 /*break*/, 9];
+            case 8:
+                refreshingFunc = undefined;
+                return [7 /*endfinally*/];
+            case 9: return [2 /*return*/];
+        }
+    });
+}); }, {});
+
 var useDefaultAreaId = function () {
     var _a = useUserContext(), userId = _a.state.userId, setDefaultAreaId = _a.actions.setDefaultAreaId;
     return function () {
@@ -6072,4 +6171,4 @@ var areaSelector = /*#__PURE__*/Object.freeze({
     AreaSelector: AreaSelector
 });
 
-export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HorizontalTextControl, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, NumericTextControl, SimplePasswordControl, SimpleSelectorControl, SimpleTextAreaControl, SimpleTextControl, TimeFormatter, TreePickerControl, USER_LABELS, UploadFileControl, UserProvider, formatNumber, getCrewStyle, getShiftStyle, useAssetContext, useToken, useUserContext };
+export { Account, AssetProvider, AuthContext, AuthProvider, BarChartControl, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HorizontalTextControl, IntegerFormatter, Login, Logout, LongFilterPanel, MESApiService, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, NumericTextControl, SimplePasswordControl, SimpleSelectorControl, SimpleTextAreaControl, SimpleTextControl, TimeFormatter, TreePickerControl, USER_LABELS, UploadFileControl, UserProvider, axiosInstance, formatNumber, getCrewStyle, getShiftStyle, getTokenFromLS, renewToken, useAssetContext, useToken, useUserContext };

package/dist/reducers/UserReducer.d.ts

@@ -3,14 +3,14 @@ export declare const UserReducer: import("@reduxjs/toolkit").Slice<{
     userId: number | null;
     defaultAreaId: number | string | null;
     defaultAreaName: string | null;
-    userLoged: boolean;
+    userLogged: boolean;
 }, {
     setUserId(state: import("immer/dist/internal").WritableDraft<{
         userLastName: string;
         userId: number | null;
         defaultAreaId: number | string | null;
         defaultAreaName: string | null;
-        userLoged: boolean;
+        userLogged: boolean;
     }>, { payload }: {
         payload: any;
         type: string;
@@ -20,7 +20,7 @@ export declare const UserReducer: import("@reduxjs/toolkit").Slice<{
         userId: number | null;
         defaultAreaId: number | string | null;
         defaultAreaName: string | null;
-        userLoged: boolean;
+        userLogged: boolean;
     }>, { payload }: {
         payload: any;
         type: string;
@@ -30,7 +30,7 @@ export declare const UserReducer: import("@reduxjs/toolkit").Slice<{
         userId: number | null;
         defaultAreaId: number | string | null;
         defaultAreaName: string | null;
-        userLoged: boolean;
+        userLogged: boolean;
     }>, { payload }: {
         payload: any;
         type: string;
@@ -40,17 +40,17 @@ export declare const UserReducer: import("@reduxjs/toolkit").Slice<{
         userId: number | null;
         defaultAreaId: number | string | null;
         defaultAreaName: string | null;
-        userLoged: boolean;
+        userLogged: boolean;
     }>, { payload }: {
         payload: any;
         type: string;
     }): void;
-    setUserLoged(state: import("immer/dist/internal").WritableDraft<{
+    setUserLogged(state: import("immer/dist/internal").WritableDraft<{
         userLastName: string;
         userId: number | null;
         defaultAreaId: number | string | null;
         defaultAreaName: string | null;
-        userLoged: boolean;
+        userLogged: boolean;
     }>, { payload }: {
         payload: any;
         type: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dexteel/mesf-core",
-  "version": "3.8.0",
+  "version": "3.9.1",
   "author": "Dexteel Team",
   "module": "dist/index.esm.js",
   "typings": "dist/index.d.ts",
@@ -70,9 +70,9 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.1",
     "react-spring": "^9.4.3",
+    "rimraf": "^3.0.2",
     "string-to-color": "^2.2.2",
-    "use-complex-state": "^1.1.0",
-    "rimraf": "^3.0.2"
+    "use-complex-state": "^1.1.0"
   },
   "browserslist": {
     "production": [
@@ -90,6 +90,7 @@
     "@azure/msal-browser": "^2.18.0",
     "@azure/msal-react": "^1.1.0",
     "@date-io/moment": "^1.3.13",
+    "axios": "^1.3.5",
     "lodash-es": "^4.17.21",
     "string-to-color": "^2.2.2",
     "tsc": "^2.0.3"