From d1981e72bf481fc58ce478fc62d5b861f1ca3df2 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tstanciu@totalsoft.ro>
Date: Fri, 3 Mar 2023 08:48:10 +0200
Subject: [PATCH 01/12] Added app menu

---
 package-lock.json                         |  22 +-
 package.json                              |   2 +-
 src/components/App.js                     |  96 ++++----
 src/components/Layout.js                  | 253 ++++++++++++++++++++++
 src/components/layout/Main.js             |  25 +--
 src/components/layout/Switcher.js         |   4 +-
 src/constants/steps.js                    |   2 +-
 src/index.css                             |   1 +
 src/index.js                              |  21 +-
 src/providers/ApplicationStateProvider.js |  28 +++
 src/providers/ToastProvider.js            |  26 +++
 11 files changed, 393 insertions(+), 87 deletions(-)
 create mode 100644 src/components/Layout.js
 create mode 100644 src/providers/ApplicationStateProvider.js
 create mode 100644 src/providers/ToastProvider.js

diff --git a/package-lock.json b/package-lock.json
index 17c4552..1e14487 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1327,6 +1327,11 @@
         }
       }
     },
+    "@flare/js-utils": {
+      "version": "1.0.3",
+      "resolved": "https://lab.code-rove.com/public-node-registry/@flare/js-utils/-/js-utils-1.0.3.tgz",
+      "integrity": "sha512-VgXQHoQEVZ/71B6YQHQP8/Yd/w1smGD+kCCiNvJKZ1xMD3nkN9mjoHxIqbOJMZ2q5PZlV6gXYT7eVol8Wm+D0A=="
+    },
     "@flare/tuitio-client": {
       "version": "1.0.4",
       "resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client/-/tuitio-client-1.0.4.tgz",
@@ -1336,15 +1341,10 @@
         "axios": "^1.3.2"
       },
       "dependencies": {
-        "@flare/js-utils": {
-          "version": "1.0.3",
-          "resolved": "https://lab.code-rove.com/public-node-registry/@flare/js-utils/-/js-utils-1.0.3.tgz",
-          "integrity": "sha512-VgXQHoQEVZ/71B6YQHQP8/Yd/w1smGD+kCCiNvJKZ1xMD3nkN9mjoHxIqbOJMZ2q5PZlV6gXYT7eVol8Wm+D0A=="
-        },
         "axios": {
-          "version": "1.3.3",
-          "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.3.tgz",
-          "integrity": "sha512-eYq77dYIFS77AQlhzEL937yUBSepBfPIe8FcgEDN35vMNZKMrs81pgnyrQpwfy4NF4b4XWX1Zgx7yX+25w8QJA==",
+          "version": "1.3.4",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
+          "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
           "requires": {
             "follow-redirects": "^1.15.0",
             "form-data": "^4.0.0",
@@ -1354,9 +1354,9 @@
       }
     },
     "@flare/tuitio-client-react": {
-      "version": "1.0.0",
-      "resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client-react/-/tuitio-client-react-1.0.0.tgz",
-      "integrity": "sha512-iIsyteZaCLXQCAFAnifYq6Stw7Jg72id7Ky/b3hB8ZGaNkrTDKDsmLTW7a2bHWljcFbCbYuRXrmHgpt8YJ6Hzg==",
+      "version": "1.0.1",
+      "resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client-react/-/tuitio-client-react-1.0.1.tgz",
+      "integrity": "sha512-WA+1UzfBgZ4gGdcT0AT6lQ9zOQ3mxc5UxQvxoM1SBR5i5tbIuQQCY6M8dudm1l02fNfwNQqJIcrtuOTTXZqMOA==",
       "requires": {
         "@flare/tuitio-client": "^1.0.4"
       }
diff --git a/package.json b/package.json
index da674e5..bdda783 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
   },
   "private": true,
   "dependencies": {
-    "@flare/tuitio-client-react": "^1.0.0",
+    "@flare/tuitio-client-react": "^1.0.1",
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.6",
diff --git a/src/components/App.js b/src/components/App.js
index 6b1ffa8..2ca86d7 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,46 +1,62 @@
-import React, { useReducer, useMemo } from "react";
-import Main from "./layout/Main";
-import { initialState } from "../state/initialState";
-import {
-  reducer,
-  dispatchActions as reducerDispatchActions
-} from "../state/reducer";
-import {
-  ApplicationStateContext,
-  ApplicationDispatchContext
-} from "../state/ApplicationContexts";
-import { ToastContainer, Slide } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
+import React from "react";
+import Layout from "./Layout";
+import { BrowserRouter, Switch, Redirect, Route } from "react-router-dom";
+import { useTuitioToken } from "@flare/tuitio-client-react";
+import LoginContainer from "../features/login/components/LoginContainer";
 
-const App = () => {
-  const [state, dispatch] = useReducer(reducer, initialState);
-  const dispatchActions = useMemo(
-    () => reducerDispatchActions(dispatch),
-    [dispatch]
-  );
+const PrivateRoute = ({ component, ...rest }) => {
+  const { valid } = useTuitioToken();
 
   return (
-    <>
-      <ApplicationStateContext.Provider value={state}>
-        <ApplicationDispatchContext.Provider value={dispatchActions}>
-          <Main />
-        </ApplicationDispatchContext.Provider>
-      </ApplicationStateContext.Provider>
-      <ToastContainer
-        position="bottom-right"
-        transition={Slide}
-        autoClose={3000}
-        hideProgressBar={false}
-        newestOnTop={false}
-        closeOnClick
-        rtl={false}
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover
-        limit={5}
-      />
-    </>
+    <Route
+      {...rest}
+      render={props =>
+        valid ? (
+          React.createElement(component, props)
+        ) : (
+          <Redirect
+            to={{
+              pathname: "/login",
+              state: {
+                from: props.location
+              }
+            }}
+          />
+        )
+      }
+    />
   );
 };
 
-export default App;
+const PublicRoute = ({ component, ...rest }) => {
+  const { valid } = useTuitioToken();
+  return (
+    <Route
+      {...rest}
+      render={props =>
+        valid ? (
+          <Redirect
+            to={{
+              pathname: "/"
+            }}
+          />
+        ) : (
+          React.createElement(component, props)
+        )
+      }
+    />
+  );
+};
+
+const AppWrapper = () => {
+  return (
+    <BrowserRouter basename={process.env.PUBLIC_URL || ""}>
+      <Switch>
+        <PublicRoute path="/login" component={LoginContainer} />
+        <PrivateRoute path="/" component={Layout} />
+      </Switch>
+    </BrowserRouter>
+  );
+};
+
+export default AppWrapper;
diff --git a/src/components/Layout.js b/src/components/Layout.js
new file mode 100644
index 0000000..e5827d7
--- /dev/null
+++ b/src/components/Layout.js
@@ -0,0 +1,253 @@
+import React from "react";
+import clsx from "clsx";
+import { makeStyles, useTheme } from "@material-ui/core/styles";
+import Drawer from "@material-ui/core/Drawer";
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import List from "@material-ui/core/List";
+import Typography from "@material-ui/core/Typography";
+import Divider from "@material-ui/core/Divider";
+import IconButton from "@material-ui/core/IconButton";
+import MenuIcon from "@material-ui/icons/Menu";
+import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
+import ChevronRightIcon from "@material-ui/icons/ChevronRight";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import InboxIcon from "@material-ui/icons/MoveToInbox";
+import MailIcon from "@material-ui/icons/Mail";
+import DnsIcon from "@material-ui/icons/Dns";
+import MenuItem from "@material-ui/core/MenuItem";
+import Menu from "@material-ui/core/Menu";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+import SettingsIcon from "@material-ui/icons/Settings";
+import Main from "./layout/Main";
+import { useHistory } from "react-router-dom";
+import { useTuitioClient } from "@flare/tuitio-client-react";
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: "flex"
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    })
+  },
+  appBarShift: {
+    marginLeft: drawerWidth,
+    width: `calc(100% - ${drawerWidth}px)`,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen
+    })
+  },
+  menuButton: {
+    marginRight: 36
+  },
+  hide: {
+    display: "none"
+  },
+  drawer: {
+    width: drawerWidth,
+    flexShrink: 0,
+    whiteSpace: "nowrap"
+  },
+  drawerOpen: {
+    width: drawerWidth,
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen
+    })
+  },
+  drawerClose: {
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    }),
+    overflowX: "hidden",
+    width: theme.spacing(7) + 1,
+    [theme.breakpoints.up("sm")]: {
+      width: theme.spacing(9) + 1
+    }
+  },
+  toolbar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    padding: theme.spacing(0, 1),
+    // necessary for content to be below app bar
+    ...theme.mixins.toolbar
+  },
+  title: {
+    flexGrow: 1
+  },
+  content: {
+    flexGrow: 1,
+    padding: theme.spacing(2)
+  }
+}));
+
+export default function MiniDrawer() {
+  const classes = useStyles();
+  const theme = useTheme();
+  const [open, setOpen] = React.useState(false);
+  const history = useHistory();
+  const { logout } = useTuitioClient();
+
+  const handleDrawerOpen = () => {
+    setOpen(true);
+  };
+
+  const handleDrawerClose = () => {
+    setOpen(false);
+  };
+
+  const [userAnchorEl, setUserAnchorEl] = React.useState(null);
+  const openUser = Boolean(userAnchorEl);
+
+  const handleMenu = event => {
+    setUserAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setUserAnchorEl(null);
+  };
+
+  return (
+    <div className={classes.root}>
+      <AppBar
+        position="fixed"
+        className={clsx(classes.appBar, {
+          [classes.appBarShift]: open
+        })}
+      >
+        <Toolbar>
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            onClick={handleDrawerOpen}
+            edge="start"
+            className={clsx(classes.menuButton, {
+              [classes.hide]: open
+            })}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" noWrap className={classes.title}>
+            Network resurrector
+          </Typography>
+          <div>
+            <IconButton
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={handleMenu}
+              color="inherit"
+            >
+              <AccountCircle />
+            </IconButton>
+            <Menu
+              id="menu-appbar"
+              anchorEl={userAnchorEl}
+              anchorOrigin={{
+                vertical: "top",
+                horizontal: "right"
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "right"
+              }}
+              open={openUser}
+              onClose={handleClose}
+            >
+              <MenuItem
+                onClick={() => {
+                  history.push("/user-profile");
+                  handleClose();
+                }}
+              >
+                Profile
+              </MenuItem>
+              <MenuItem onClick={() => logout()}>Logout</MenuItem>
+            </Menu>
+          </div>
+        </Toolbar>
+      </AppBar>
+      <Drawer
+        variant="permanent"
+        className={clsx(classes.drawer, {
+          [classes.drawerOpen]: open,
+          [classes.drawerClose]: !open
+        })}
+        classes={{
+          paper: clsx({
+            [classes.drawerOpen]: open,
+            [classes.drawerClose]: !open
+          })
+        }}
+      >
+        <div className={classes.toolbar}>
+          <IconButton onClick={handleDrawerClose}>
+            {theme.direction === "rtl" ? (
+              <ChevronRightIcon />
+            ) : (
+              <ChevronLeftIcon />
+            )}
+          </IconButton>
+        </div>
+        <Divider />
+        <List>
+          {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
+            <ListItem button key={text}>
+              <ListItemIcon>
+                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+              </ListItemIcon>
+              <ListItemText primary={text} />
+            </ListItem>
+          ))}
+        </List>
+        <Divider />
+        <List>
+          <ListItem
+            button
+            key="machines"
+            onClick={() => history.push("/machines")}
+          >
+            <ListItemIcon>
+              <DnsIcon />
+            </ListItemIcon>
+            <ListItemText primary={"Machines"} />
+          </ListItem>
+          <ListItem
+            button
+            key="settings"
+            onClick={() => history.push("/settings")}
+          >
+            <ListItemIcon>
+              <SettingsIcon />
+            </ListItemIcon>
+            <ListItemText primary={"Settings"} />
+          </ListItem>
+          {["All mail", "Trash", "Spam"].map((text, index) => (
+            <ListItem button key={text}>
+              <ListItemIcon>
+                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+              </ListItemIcon>
+              <ListItemText primary={text} />
+            </ListItem>
+          ))}
+        </List>
+      </Drawer>
+      <main className={classes.content}>
+        <div className={classes.toolbar} />
+        <Main />
+      </main>
+    </div>
+  );
+}
diff --git a/src/components/layout/Main.js b/src/components/layout/Main.js
index db0702a..76aeafd 100644
--- a/src/components/layout/Main.js
+++ b/src/components/layout/Main.js
@@ -1,36 +1,13 @@
 import React from "react";
-import ApplicationStepper from "./stepper/ApplicationStepper";
 import Switcher from "./Switcher";
-import { makeStyles } from "@material-ui/core/styles";
 import { useTuitioToken } from "@flare/tuitio-client-react";
 import LoginContainer from "../../features/login/components/LoginContainer";
 
-const useStyles = makeStyles(() => ({
-  app: {
-    backgroundColor: "#282c34",
-    minHeight: "100vh",
-    display: "flex",
-    flexDirection: "column"
-  }
-}));
-
 const Main = () => {
-  const classes = useStyles();
   const { validate: validateToken } = useTuitioToken();
   const tokenIsValid = validateToken();
 
-  return (
-    <div className={classes.app}>
-      {tokenIsValid ? (
-        <>
-          <ApplicationStepper />
-          <Switcher />
-        </>
-      ) : (
-        <LoginContainer />
-      )}
-    </div>
-  );
+  return <>{tokenIsValid ? <Switcher /> : <LoginContainer />}</>;
 };
 
 export default Main;
diff --git a/src/components/layout/Switcher.js b/src/components/layout/Switcher.js
index 9cb45d5..471c4ef 100644
--- a/src/components/layout/Switcher.js
+++ b/src/components/layout/Switcher.js
@@ -8,8 +8,8 @@ import SettingsContainer from "../../features/settings/components/SettingsContai
 const Switcher = () => {
   return (
     <Switch>
-      <Route exact path="/" component={LoginContainer} />
-      <Route exact path="/network" component={NetworkContainer} />
+      <Route exact path="/user-profile" component={LoginContainer} />
+      <Route exact path="/machines" component={NetworkContainer} />
       <Route exact path="/settings" component={SettingsContainer} />
       <Route component={PageNotFound} />
     </Switch>
diff --git a/src/constants/steps.js b/src/constants/steps.js
index 7cc158e..f38d65f 100644
--- a/src/constants/steps.js
+++ b/src/constants/steps.js
@@ -11,7 +11,7 @@ const steps = [
   {
     id: 1,
     title: "Steps.Network",
-    route: "/network",
+    route: "/machines",
     disabled: false,
     icon: <Router />
   },
diff --git a/src/index.css b/src/index.css
index 4a1df4d..9f93577 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,6 @@
 body {
   margin: 0;
+  background-color: #282c34;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
diff --git a/src/index.js b/src/index.js
index b9d2971..a699898 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,17 +2,22 @@ import React, { Suspense } from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
 import "./utils/i18n";
+import CssBaseline from "@material-ui/core/CssBaseline";
 import App from "./components/App";
-import { BrowserRouter as Router } from "react-router-dom";
 import { TuitioProvider } from "@flare/tuitio-client-react";
+import ApplicationStateProvider from "./providers/ApplicationStateProvider";
+import ToastProvider from "./providers/ToastProvider";
 
 ReactDOM.render(
-  <Router basename={process.env.PUBLIC_URL || ""}>
-    <Suspense fallback={<div>Loading...</div>}>
-      <TuitioProvider tuitioUrl={process.env.REACT_APP_TUITIO_URL}>
-        <App />
-      </TuitioProvider>
-    </Suspense>
-  </Router>,
+  <TuitioProvider tuitioUrl={process.env.REACT_APP_TUITIO_URL}>
+    <ApplicationStateProvider>
+      <CssBaseline />
+      <Suspense fallback={<div>Loading...</div>}>
+        <ToastProvider>
+          <App />
+        </ToastProvider>
+      </Suspense>
+    </ApplicationStateProvider>
+  </TuitioProvider>,
   document.getElementById("root")
 );
diff --git a/src/providers/ApplicationStateProvider.js b/src/providers/ApplicationStateProvider.js
new file mode 100644
index 0000000..44ee81f
--- /dev/null
+++ b/src/providers/ApplicationStateProvider.js
@@ -0,0 +1,28 @@
+import React, { useReducer, useMemo } from "react";
+import {
+  ApplicationStateContext,
+  ApplicationDispatchContext
+} from "../state/ApplicationContexts";
+import {
+  reducer,
+  dispatchActions as reducerDispatchActions
+} from "../state/reducer";
+import { initialState } from "../state/initialState";
+
+const ApplicationStateProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const dispatchActions = useMemo(
+    () => reducerDispatchActions(dispatch),
+    [dispatch]
+  );
+
+  return (
+    <ApplicationStateContext.Provider value={state}>
+      <ApplicationDispatchContext.Provider value={dispatchActions}>
+        {children}
+      </ApplicationDispatchContext.Provider>
+    </ApplicationStateContext.Provider>
+  );
+};
+
+export default ApplicationStateProvider;
diff --git a/src/providers/ToastProvider.js b/src/providers/ToastProvider.js
new file mode 100644
index 0000000..1a3a836
--- /dev/null
+++ b/src/providers/ToastProvider.js
@@ -0,0 +1,26 @@
+import React from "react";
+import { ToastContainer, Slide } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+const ToastProvider = ({ children }) => {
+  return (
+    <>
+      {children}
+      <ToastContainer
+        position="bottom-right"
+        transition={Slide}
+        autoClose={3000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        limit={5}
+      />
+    </>
+  );
+};
+
+export default ToastProvider;

From a7a23144a9ac46f37005cc1047c4aa29ec0e260b Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tstanciu@totalsoft.ro>
Date: Fri, 3 Mar 2023 18:56:30 +0200
Subject: [PATCH 02/12] login fix and theme implementation

---
 private/Notes.txt                             |  5 ++-
 src/components/Layout.js                      | 42 +++++++++----------
 src/components/common/PageTitle.js            | 27 ++++++++++++
 src/components/layout/Switcher.js             |  2 +
 .../components/DashboardContainer.js          |  5 +++
 .../machines/components/MachinesContainer.js  |  8 +++-
 src/index.css                                 | 14 -------
 src/index.js                                  | 19 +++++----
 src/themes/default.js                         | 35 ++++++++++++++++
 src/themes/index.js                           | 40 ++++++++++++++++++
 10 files changed, 152 insertions(+), 45 deletions(-)
 create mode 100644 src/components/common/PageTitle.js
 create mode 100644 src/features/dashboard/components/DashboardContainer.js
 delete mode 100644 src/index.css
 create mode 100644 src/themes/default.js
 create mode 100644 src/themes/index.js

diff --git a/private/Notes.txt b/private/Notes.txt
index 29e5673..d291f00 100644
--- a/private/Notes.txt
+++ b/private/Notes.txt
@@ -1,3 +1,6 @@
 REACT v4:
 https://v4.mui.com/getting-started/installation/
-https://v4.mui.com/components/material-icons/
\ No newline at end of file
+https://v4.mui.com/components/material-icons/
+
+Theming:
+https://v4.mui.com/customization/palette/ (Dark theme)
\ No newline at end of file
diff --git a/src/components/Layout.js b/src/components/Layout.js
index e5827d7..47b0b8c 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -14,13 +14,13 @@ import ChevronRightIcon from "@material-ui/icons/ChevronRight";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
-import InboxIcon from "@material-ui/icons/MoveToInbox";
-import MailIcon from "@material-ui/icons/Mail";
+import DeleteIcon from "@material-ui/icons/Delete";
 import DnsIcon from "@material-ui/icons/Dns";
 import MenuItem from "@material-ui/core/MenuItem";
 import Menu from "@material-ui/core/Menu";
 import AccountCircle from "@material-ui/icons/AccountCircle";
 import SettingsIcon from "@material-ui/icons/Settings";
+import DashboardIcon from "@material-ui/icons/Dashboard";
 import Main from "./layout/Main";
 import { useHistory } from "react-router-dom";
 import { useTuitioClient } from "@flare/tuitio-client-react";
@@ -203,17 +203,16 @@ export default function MiniDrawer() {
         </div>
         <Divider />
         <List>
-          {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
-            <ListItem button key={text}>
-              <ListItemIcon>
-                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-              </ListItemIcon>
-              <ListItemText primary={text} />
-            </ListItem>
-          ))}
-        </List>
-        <Divider />
-        <List>
+          <ListItem
+            button
+            key="dashboard"
+            onClick={() => history.push("/dashboard")}
+          >
+            <ListItemIcon>
+              <DashboardIcon />
+            </ListItemIcon>
+            <ListItemText primary={"Dashboard"} />
+          </ListItem>
           <ListItem
             button
             key="machines"
@@ -224,6 +223,15 @@ export default function MiniDrawer() {
             </ListItemIcon>
             <ListItemText primary={"Machines"} />
           </ListItem>
+        </List>
+        <Divider />
+        <List>
+          <ListItem button key="trash" onClick={() => history.push("/trash")}>
+            <ListItemIcon>
+              <DeleteIcon />
+            </ListItemIcon>
+            <ListItemText primary={"Trash"} />
+          </ListItem>
           <ListItem
             button
             key="settings"
@@ -234,14 +242,6 @@ export default function MiniDrawer() {
             </ListItemIcon>
             <ListItemText primary={"Settings"} />
           </ListItem>
-          {["All mail", "Trash", "Spam"].map((text, index) => (
-            <ListItem button key={text}>
-              <ListItemIcon>
-                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-              </ListItemIcon>
-              <ListItemText primary={text} />
-            </ListItem>
-          ))}
         </List>
       </Drawer>
       <main className={classes.content}>
diff --git a/src/components/common/PageTitle.js b/src/components/common/PageTitle.js
new file mode 100644
index 0000000..c428197
--- /dev/null
+++ b/src/components/common/PageTitle.js
@@ -0,0 +1,27 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { Typography } from "@material-ui/core";
+
+const useStyles = makeStyles(theme => ({
+  box: {
+    display: "flex",
+    justifyContent: "space-between",
+    marginBottom: theme.spacing(2),
+    marginTop: theme.spacing(0)
+  },
+  title: { textTransform: "uppercase" }
+}));
+
+const PageTitle = ({ text }) => {
+  var classes = useStyles();
+
+  return (
+    <div className={classes.box}>
+      <Typography className={classes.title} variant="h3" size="sm">
+        {text}
+      </Typography>
+    </div>
+  );
+};
+
+export default PageTitle;
diff --git a/src/components/layout/Switcher.js b/src/components/layout/Switcher.js
index 471c4ef..14c57a5 100644
--- a/src/components/layout/Switcher.js
+++ b/src/components/layout/Switcher.js
@@ -4,10 +4,12 @@ import PageNotFound from "./PageNotFound";
 import LoginContainer from "../../features/login/components/LoginContainer";
 import NetworkContainer from "../../features/network/components/NetworkContainer";
 import SettingsContainer from "../../features/settings/components/SettingsContainer";
+import DashboardContainer from "../../features/dashboard/components/DashboardContainer";
 
 const Switcher = () => {
   return (
     <Switch>
+      <Route exact path="/dashboard" component={DashboardContainer} />
       <Route exact path="/user-profile" component={LoginContainer} />
       <Route exact path="/machines" component={NetworkContainer} />
       <Route exact path="/settings" component={SettingsContainer} />
diff --git a/src/features/dashboard/components/DashboardContainer.js b/src/features/dashboard/components/DashboardContainer.js
new file mode 100644
index 0000000..88c8ee0
--- /dev/null
+++ b/src/features/dashboard/components/DashboardContainer.js
@@ -0,0 +1,5 @@
+import React from "react";
+
+const DashboardContainer = () => <h2>In development...</h2>;
+
+export default DashboardContainer;
diff --git a/src/features/machines/components/MachinesContainer.js b/src/features/machines/components/MachinesContainer.js
index 7c59cbf..5708861 100644
--- a/src/features/machines/components/MachinesContainer.js
+++ b/src/features/machines/components/MachinesContainer.js
@@ -5,6 +5,7 @@ import {
 } from "../../../state/ApplicationContexts";
 import useApi from "../../../api";
 import MachinesList from "./MachinesList";
+import PageTitle from "../../../components/common/PageTitle";
 
 const MachinesContainer = () => {
   const state = useContext(ApplicationStateContext);
@@ -27,7 +28,12 @@ const MachinesContainer = () => {
     }
   }, [handleReadMachines, state.network.machines.loaded]);
 
-  return <MachinesList dense={true} machines={state.network.machines} />;
+  return (
+    <>
+      <PageTitle text="Machines" />
+      <MachinesList dense={true} machines={state.network.machines} />
+    </>
+  );
 };
 
 export default MachinesContainer;
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 9f93577..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,14 +0,0 @@
-body {
-  margin: 0;
-  background-color: #282c34;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
diff --git a/src/index.js b/src/index.js
index a699898..6fdef0e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,22 +1,25 @@
 import React, { Suspense } from "react";
 import ReactDOM from "react-dom";
-import "./index.css";
-import "./utils/i18n";
+import { ThemeProvider } from "@material-ui/styles";
+import Themes from "./themes";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import App from "./components/App";
 import { TuitioProvider } from "@flare/tuitio-client-react";
 import ApplicationStateProvider from "./providers/ApplicationStateProvider";
 import ToastProvider from "./providers/ToastProvider";
+import "./utils/i18n";
 
 ReactDOM.render(
   <TuitioProvider tuitioUrl={process.env.REACT_APP_TUITIO_URL}>
     <ApplicationStateProvider>
-      <CssBaseline />
-      <Suspense fallback={<div>Loading...</div>}>
-        <ToastProvider>
-          <App />
-        </ToastProvider>
-      </Suspense>
+      <ThemeProvider theme={Themes.default}>
+        <CssBaseline />
+        <Suspense fallback={<div>Loading...</div>}>
+          <ToastProvider>
+            <App />
+          </ToastProvider>
+        </Suspense>
+      </ThemeProvider>
     </ApplicationStateProvider>
   </TuitioProvider>,
   document.getElementById("root")
diff --git a/src/themes/default.js b/src/themes/default.js
new file mode 100644
index 0000000..eb6dad5
--- /dev/null
+++ b/src/themes/default.js
@@ -0,0 +1,35 @@
+const primary = "#00695C";
+const secondary = "#FF5C93";
+const warning = "#ff9800";
+const success = "#4caf50";
+const info = "#2196f3";
+
+const defaultTheme = {
+  palette: {
+    primary: {
+      main: primary
+    },
+    secondary: {
+      main: secondary,
+      contrastText: "#ffcc00"
+    },
+    warning: {
+      main: warning
+    },
+    success: {
+      main: success
+    },
+    info: {
+      main: info
+    }
+  },
+  overrides: {
+    MuiBackdrop: {
+      root: {
+        backgroundColor: "#4A4A4A1A"
+      }
+    }
+  }
+};
+
+export default defaultTheme;
diff --git a/src/themes/index.js b/src/themes/index.js
new file mode 100644
index 0000000..a0830ec
--- /dev/null
+++ b/src/themes/index.js
@@ -0,0 +1,40 @@
+import defaultTheme from "./default";
+import { createTheme } from "@material-ui/core/styles";
+
+const prefersDarkMode = false;
+
+const overrides = {
+  palette: {
+    type: prefersDarkMode ? "dark" : "light"
+  },
+  typography: {
+    h1: {
+      fontSize: "3rem"
+    },
+    h2: {
+      fontSize: "2rem"
+    },
+    h3: {
+      fontSize: "1.64rem"
+    },
+    h4: {
+      fontSize: "1.5rem"
+    },
+    h5: {
+      fontSize: "1.285rem"
+    },
+    h6: {
+      fontSize: "1.142rem"
+    }
+  }
+};
+
+const themes = {
+  default: createTheme({
+    ...defaultTheme,
+    ...overrides,
+    palette: { ...defaultTheme.palette, ...overrides.palette }
+  })
+};
+
+export default themes;

From 6f549512f701cdf9cd3a47c19195612533703701 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tstanciu@totalsoft.ro>
Date: Fri, 3 Mar 2023 23:18:02 +0200
Subject: [PATCH 03/12] axios upgrade

---
 package-lock.json | 105 ++++++++++++++++++++++++++++++++++++----------
 package.json      |  11 +++--
 2 files changed, 90 insertions(+), 26 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1e14487..959f689 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,8 @@
     "@adobe/css-tools": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz",
-      "integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g=="
+      "integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==",
+      "dev": true
     },
     "@ampproject/remapping": {
       "version": "2.2.0",
@@ -1695,6 +1696,7 @@
       "version": "29.3.1",
       "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.3.1.tgz",
       "integrity": "sha512-wlrznINZI5sMjwvUoLVk617ll/UYfGIZNxmbU+Pa7wmkL4vYzhV9R2pwVqUh4NWWuLQWkI8+8mOkxs//prKQ3g==",
+      "dev": true,
       "requires": {
         "jest-get-type": "^29.2.0"
       }
@@ -2012,6 +2014,7 @@
       "version": "29.0.0",
       "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.0.0.tgz",
       "integrity": "sha512-3Ab5HgYIIAnS0HjqJHQYZS+zXc4tUmTmBH3z83ajI6afXp8X3ZtdLX+nXx+I7LNkJD7uN9LAVhgnjDgZa2z0kA==",
+      "dev": true,
       "requires": {
         "@sinclair/typebox": "^0.24.1"
       }
@@ -2162,6 +2165,7 @@
       "version": "29.3.1",
       "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.3.1.tgz",
       "integrity": "sha512-d0S0jmmTpjnhCmNpApgX3jrUZgZ22ivKJRvL2lli5hpCRoNnp1f85r2/wpKfXuYu8E7Jjh1hGfhPyup1NM5AmA==",
+      "dev": true,
       "requires": {
         "@jest/schemas": "^29.0.0",
         "@types/istanbul-lib-coverage": "^2.0.0",
@@ -2175,6 +2179,7 @@
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
           "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -2441,7 +2446,8 @@
     "@sinclair/typebox": {
       "version": "0.24.51",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
-      "integrity": "sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA=="
+      "integrity": "sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==",
+      "dev": true
     },
     "@sinonjs/commons": {
       "version": "1.8.6",
@@ -2581,6 +2587,7 @@
       "version": "7.31.2",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.31.2.tgz",
       "integrity": "sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ==",
+      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -2596,6 +2603,7 @@
           "version": "26.6.2",
           "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
           "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
+          "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
             "@types/istanbul-reports": "^3.0.0",
@@ -2608,6 +2616,7 @@
           "version": "15.0.14",
           "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.14.tgz",
           "integrity": "sha512-yEJzHoxf6SyQGhBhIYGXQDSCkJjB6HohDShto7m8vaKg9Yp0Yn8+71J9eakh2bnPg6BfsH9PRMhiRTZnd4eXGQ==",
+          "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
           }
@@ -2616,6 +2625,7 @@
           "version": "4.2.2",
           "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
           "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
+          "dev": true,
           "requires": {
             "@babel/runtime": "^7.10.2",
             "@babel/runtime-corejs3": "^7.10.2"
@@ -2625,6 +2635,7 @@
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
           "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -2634,6 +2645,7 @@
           "version": "26.6.2",
           "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
           "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
+          "dev": true,
           "requires": {
             "@jest/types": "^26.6.2",
             "ansi-regex": "^5.0.0",
@@ -2647,6 +2659,7 @@
       "version": "5.16.5",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz",
       "integrity": "sha512-N5ixQ2qKpi5OLYfwQmUb/5mSV9LneAcaUfp32pn4yCnpb8r/Yz0pXFPck21dIicKmi+ta5WRAknkZCfA8refMA==",
+      "dev": true,
       "requires": {
         "@adobe/css-tools": "^4.0.1",
         "@babel/runtime": "^7.9.2",
@@ -2663,6 +2676,7 @@
       "version": "11.2.7",
       "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.7.tgz",
       "integrity": "sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA==",
+      "dev": true,
       "requires": {
         "@babel/runtime": "^7.12.5",
         "@testing-library/dom": "^7.28.1"
@@ -2672,6 +2686,7 @@
       "version": "12.8.3",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.8.3.tgz",
       "integrity": "sha512-IR0iWbFkgd56Bu5ZI/ej8yQwrkCv8Qydx6RzwbKz9faXazR/+5tvYKsZQgyXJiwgpcva127YO6JcWy7YlCfofQ==",
+      "dev": true,
       "requires": {
         "@babel/runtime": "^7.12.5"
       }
@@ -2684,7 +2699,8 @@
     "@types/aria-query": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz",
-      "integrity": "sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig=="
+      "integrity": "sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==",
+      "dev": true
     },
     "@types/babel__core": {
       "version": "7.1.20",
@@ -2784,6 +2800,7 @@
       "version": "29.2.4",
       "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.2.4.tgz",
       "integrity": "sha512-PipFB04k2qTRPePduVLTRiPzQfvMeLwUN3Z21hsAKaB/W9IIzgB2pizCL466ftJlcyZqnHoC9ZHpxLGl3fS86A==",
+      "dev": true,
       "requires": {
         "expect": "^29.0.0",
         "pretty-format": "^29.0.0"
@@ -2891,6 +2908,7 @@
       "version": "5.14.5",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz",
       "integrity": "sha512-SBwbxYoyPIvxHbeHxTZX2Pe/74F/tX2/D3mMvzabdeJ25bBojfW0TyB8BHrbq/9zaaKICJZjLP+8r6AeZMFCuQ==",
+      "dev": true,
       "requires": {
         "@types/jest": "*"
       }
@@ -2956,6 +2974,7 @@
       "version": "17.0.18",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.18.tgz",
       "integrity": "sha512-eIJR1UER6ur3EpKM3d+2Pgd+ET+k6Kn9B4ZItX0oPjjVI5PrfaRjKyLT5UYendDpLuoiJMNJvovLQbEXqhsPaw==",
+      "dev": true,
       "requires": {
         "@types/yargs-parser": "*"
       }
@@ -3413,6 +3432,7 @@
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
       "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
+      "dev": true,
       "requires": {
         "deep-equal": "^2.0.5"
       }
@@ -3639,7 +3659,8 @@
     "available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw=="
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "dev": true
     },
     "axe-core": {
       "version": "4.6.1",
@@ -3647,12 +3668,13 @@
       "integrity": "sha512-lCZN5XRuOnpG4bpMq8v0khrWtUOn+i8lZSb6wHZH56ZfbIEv6XwJV84AAueh9/zi7qPVJ/E4yz6fmsiyOmXR4w=="
     },
     "axios": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
-      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
+      "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
       "requires": {
-        "follow-redirects": "^1.14.9",
-        "form-data": "^4.0.0"
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
       }
     },
     "axobject-query": {
@@ -4482,6 +4504,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
       "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dev": true,
       "requires": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -4526,7 +4549,8 @@
     "ci-info": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.7.0.tgz",
-      "integrity": "sha512-2CpRNYmImPx+RXKLq6jko/L07phmS9I02TyqkcNU20GCF/GgaWvc58hPtjxDX8lPpkdwc9sNh72V9k00S7ezog=="
+      "integrity": "sha512-2CpRNYmImPx+RXKLq6jko/L07phmS9I02TyqkcNU20GCF/GgaWvc58hPtjxDX8lPpkdwc9sNh72V9k00S7ezog==",
+      "dev": true
     },
     "cipher-base": {
       "version": "1.0.4",
@@ -5169,7 +5193,8 @@
     "css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-      "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s="
+      "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
+      "dev": true
     },
     "cssdb": {
       "version": "4.4.0",
@@ -5428,6 +5453,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.1.0.tgz",
       "integrity": "sha512-2pxgvWu3Alv1PoWEyVg7HS8YhGlUFUV7N5oOvfL6d+7xAmLSemMwv/c8Zv/i9KFzxV5Kt5CAvQc70fLwVuf4UA==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "es-get-iterator": "^1.1.2",
@@ -5628,7 +5654,8 @@
     "diff-sequences": {
       "version": "29.3.1",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.3.1.tgz",
-      "integrity": "sha512-hlM3QR272NXCi4pq+N4Kok4kOp6EsgOM3ZSpJI7Da3UAs+Ttsi8MRmB6trM/lhyzUxGfOgnpkHtgqm5Q/CTcfQ=="
+      "integrity": "sha512-hlM3QR272NXCi4pq+N4Kok4kOp6EsgOM3ZSpJI7Da3UAs+Ttsi8MRmB6trM/lhyzUxGfOgnpkHtgqm5Q/CTcfQ==",
+      "dev": true
     },
     "diffie-hellman": {
       "version": "5.0.3",
@@ -5688,7 +5715,8 @@
     "dom-accessibility-api": {
       "version": "0.5.14",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz",
-      "integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg=="
+      "integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==",
+      "dev": true
     },
     "dom-converter": {
       "version": "0.2.0",
@@ -5992,6 +6020,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.2.tgz",
       "integrity": "sha512-+DTO8GYwbMCwbywjimwZMHp8AuYXOS2JZFWoi2AlPOS3ebnII9w/NLpNZtA7A0YLaVDw+O7KFCeoIV7OPvM7hQ==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.1.0",
@@ -6780,6 +6809,7 @@
       "version": "29.3.1",
       "resolved": "https://registry.npmjs.org/expect/-/expect-29.3.1.tgz",
       "integrity": "sha512-gGb1yTgU30Q0O/tQq+z30KBWv24ApkMgFUpvKBkyLUBL68Wv8dHdJxTBZFl/iT8K/bqDHvUYRH6IIN3rToopPA==",
+      "dev": true,
       "requires": {
         "@jest/expect-utils": "^29.3.1",
         "jest-get-type": "^29.2.0",
@@ -7143,6 +7173,7 @@
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
       "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
       "requires": {
         "is-callable": "^1.1.3"
       }
@@ -8451,7 +8482,8 @@
     "is-map": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
-      "integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg=="
+      "integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==",
+      "dev": true
     },
     "is-module": {
       "version": "1.0.0",
@@ -8547,7 +8579,8 @@
     "is-set": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
-      "integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g=="
+      "integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==",
+      "dev": true
     },
     "is-shared-array-buffer": {
       "version": "1.0.2",
@@ -8582,6 +8615,7 @@
       "version": "1.1.10",
       "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
       "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
+      "dev": true,
       "requires": {
         "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
@@ -8598,7 +8632,8 @@
     "is-weakmap": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
-      "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA=="
+      "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==",
+      "dev": true
     },
     "is-weakref": {
       "version": "1.0.2",
@@ -8612,6 +8647,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.2.tgz",
       "integrity": "sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.1.1"
@@ -8633,7 +8669,8 @@
     "isarray": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true
     },
     "isexe": {
       "version": "2.0.0",
@@ -9156,6 +9193,7 @@
       "version": "29.3.1",
       "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.3.1.tgz",
       "integrity": "sha512-vU8vyiO7568tmin2lA3r2DP8oRvzhvRcD4DjpXc6uGveQodyk7CKLhQlCSiwgx3g0pFaE88/KLZ0yaTWMc4Uiw==",
+      "dev": true,
       "requires": {
         "chalk": "^4.0.0",
         "diff-sequences": "^29.3.1",
@@ -9167,6 +9205,7 @@
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
           "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -9372,7 +9411,8 @@
     "jest-get-type": {
       "version": "29.2.0",
       "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.2.0.tgz",
-      "integrity": "sha512-uXNJlg8hKFEnDgFsrCjznB+sTxdkuqiCL6zMgA75qEbAJjJYTs9XPrvDctrEig2GDow22T/LvHgO57iJhXB/UA=="
+      "integrity": "sha512-uXNJlg8hKFEnDgFsrCjznB+sTxdkuqiCL6zMgA75qEbAJjJYTs9XPrvDctrEig2GDow22T/LvHgO57iJhXB/UA==",
+      "dev": true
     },
     "jest-haste-map": {
       "version": "26.6.2",
@@ -9640,6 +9680,7 @@
       "version": "29.3.1",
       "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.3.1.tgz",
       "integrity": "sha512-fkRMZUAScup3txIKfMe3AIZZmPEjWEdsPJFK3AIy5qRohWqQFg1qrmKfYXR9qEkNc7OdAu2N4KPHibEmy4HPeQ==",
+      "dev": true,
       "requires": {
         "chalk": "^4.0.0",
         "jest-diff": "^29.3.1",
@@ -9651,6 +9692,7 @@
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
           "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -9662,6 +9704,7 @@
       "version": "29.3.1",
       "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.3.1.tgz",
       "integrity": "sha512-lMJTbgNcDm5z+6KDxWtqOFWlGQxD6XaYwBqHR8kmpkP+WWWG90I35kdtQHY67Ay5CSuydkTBbJG+tH9JShFCyA==",
+      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.12.13",
         "@jest/types": "^29.3.1",
@@ -9678,6 +9721,7 @@
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
           "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -10240,6 +10284,7 @@
       "version": "29.3.1",
       "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.3.1.tgz",
       "integrity": "sha512-7YOVZaiX7RJLv76ZfHt4nbNEzzTRiMW/IiOG7ZOKmTXmoGBxUDefgMAxQubu6WPVqP5zSzAdZG0FfLcC7HOIFQ==",
+      "dev": true,
       "requires": {
         "@jest/types": "^29.3.1",
         "@types/node": "*",
@@ -10253,6 +10298,7 @@
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
           "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -10809,7 +10855,8 @@
     "lz-string": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
-      "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY="
+      "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=",
+      "dev": true
     },
     "magic-string": {
       "version": "0.25.9",
@@ -10961,7 +11008,8 @@
     "min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
-      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true
     },
     "mini-css-extract-plugin": {
       "version": "0.11.3",
@@ -12977,6 +13025,12 @@
       "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
       "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
     },
+    "prettier": {
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
+      "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
+      "dev": true
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -12995,6 +13049,7 @@
       "version": "29.3.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.3.1.tgz",
       "integrity": "sha512-FyLnmb1cYJV8biEIiRyzRFvs2lry7PPIvOqKVe1GCUEYg4YGmlx1qG9EJNMxArYm7piII4qb8UV1Pncq5dxmcg==",
+      "dev": true,
       "requires": {
         "@jest/schemas": "^29.0.0",
         "ansi-styles": "^5.0.0",
@@ -13004,12 +13059,14 @@
         "ansi-styles": {
           "version": "5.2.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-          "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="
+          "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+          "dev": true
         },
         "react-is": {
           "version": "18.2.0",
           "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+          "dev": true
         }
       }
     },
@@ -13740,6 +13797,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
       "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
       "requires": {
         "indent-string": "^4.0.0",
         "strip-indent": "^3.0.0"
@@ -15282,6 +15340,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
       "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
       "requires": {
         "min-indent": "^1.0.0"
       }
@@ -17325,6 +17384,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz",
       "integrity": "sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==",
+      "dev": true,
       "requires": {
         "is-map": "^2.0.1",
         "is-set": "^2.0.1",
@@ -17341,6 +17401,7 @@
       "version": "1.1.9",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
       "integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
+      "dev": true,
       "requires": {
         "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
diff --git a/package.json b/package.json
index bdda783..c83c918 100644
--- a/package.json
+++ b/package.json
@@ -16,10 +16,7 @@
     "@flare/tuitio-client-react": "^1.0.1",
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.2.2",
-    "@testing-library/user-event": "^12.5.0",
-    "axios": "^0.27.2",
+    "axios": "^1.3.4",
     "i18next": "^19.4.4",
     "i18next-browser-languagedetector": "^4.1.1",
     "i18next-http-backend": "^1.4.0",
@@ -33,6 +30,12 @@
     "react-scripts": "4.0.1",
     "react-toastify": "^6.2.0"
   },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.5.0",
+    "prettier": "^2.5.1"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

From 9757bf7561e16c29e46880551136fc11399ca0db Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tstanciu@totalsoft.ro>
Date: Fri, 3 Mar 2023 23:22:27 +0200
Subject: [PATCH 04/12] moved stepper

---
 src/components/{layout => common}/stepper/ApplicationStepper.js | 2 +-
 .../{layout => common}/stepper/CustomStepConnector.js           | 0
 src/components/{layout => common}/stepper/StepIcon.js           | 2 +-
 src/{constants => components/common/stepper}/steps.js           | 0
 4 files changed, 2 insertions(+), 2 deletions(-)
 rename src/components/{layout => common}/stepper/ApplicationStepper.js (97%)
 rename src/components/{layout => common}/stepper/CustomStepConnector.js (100%)
 rename src/components/{layout => common}/stepper/StepIcon.js (96%)
 rename src/{constants => components/common/stepper}/steps.js (100%)

diff --git a/src/components/layout/stepper/ApplicationStepper.js b/src/components/common/stepper/ApplicationStepper.js
similarity index 97%
rename from src/components/layout/stepper/ApplicationStepper.js
rename to src/components/common/stepper/ApplicationStepper.js
index a1cb099..0faf8e7 100644
--- a/src/components/layout/stepper/ApplicationStepper.js
+++ b/src/components/common/stepper/ApplicationStepper.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import steps from "../../../constants/steps";
+import steps from "./steps";
 import {
   Card,
   Stepper,
diff --git a/src/components/layout/stepper/CustomStepConnector.js b/src/components/common/stepper/CustomStepConnector.js
similarity index 100%
rename from src/components/layout/stepper/CustomStepConnector.js
rename to src/components/common/stepper/CustomStepConnector.js
diff --git a/src/components/layout/stepper/StepIcon.js b/src/components/common/stepper/StepIcon.js
similarity index 96%
rename from src/components/layout/stepper/StepIcon.js
rename to src/components/common/stepper/StepIcon.js
index b3c461b..01628e8 100644
--- a/src/components/layout/stepper/StepIcon.js
+++ b/src/components/common/stepper/StepIcon.js
@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
 import { makeStyles } from "@material-ui/core/styles";
-import steps from "../../../constants/steps";
+import steps from "./steps";
 
 const useStepIconStyles = makeStyles({
   root: {
diff --git a/src/constants/steps.js b/src/components/common/stepper/steps.js
similarity index 100%
rename from src/constants/steps.js
rename to src/components/common/stepper/steps.js

From 956d7b34fff6c9cfe8662447a7f2f0486c2e914b Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tstanciu@totalsoft.ro>
Date: Fri, 3 Mar 2023 23:56:31 +0200
Subject: [PATCH 05/12] fix eslint errors

---
 .eslintrc.json                                | 38 +++++++++++++++++++
 package-lock.json                             | 28 ++++++++++++++
 package.json                                  |  1 +
 src/components/App.js                         | 14 ++++++-
 src/components/common/PageTitle.js            |  7 +++-
 src/components/common/inputs/PasswordField.js |  5 +++
 .../login/components/LoginContainer.js        |  2 +-
 src/features/machines/components/Machine.js   | 12 ++++++
 src/providers/ApplicationStateProvider.js     |  5 +++
 src/providers/ToastProvider.js                |  5 +++
 10 files changed, 113 insertions(+), 4 deletions(-)
 create mode 100644 .eslintrc.json

diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..90f072a
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,38 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:jest/recommended"
+  ],
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "requireConfigFile": false,
+    "babelOptions": {
+      "presets": ["@babel/preset-react"]
+    },
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": ["react", "react-hooks", "jest"],
+  "ignorePatterns": ["**/public"],
+  "rules": {
+    "indent": 0,
+    "linebreak-style": 0,
+    "quotes": 0,
+    "semi": 0,
+    "no-console": 0,
+    "no-debugger": "warn",
+    "react/display-name": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "no-unused-vars": [1, { "args": "after-used", "argsIgnorePattern": "^_" }]
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index 959f689..51203e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -73,6 +73,25 @@
         }
       }
     },
+    "@babel/eslint-parser": {
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.19.1.tgz",
+      "integrity": "sha512-AqNf2QWt1rtu2/1rLswy6CDP7H9Oh3mMhk177Y67Rg8d7RD9WfOLLv8CGn6tisFvS2htm86yIe1yLF6I1UDaGQ==",
+      "dev": true,
+      "requires": {
+        "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
+        "eslint-visitor-keys": "^2.1.0",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
     "@babel/generator": {
       "version": "7.20.7",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.20.7.tgz",
@@ -2314,6 +2333,15 @@
         "@types/whatwg-streams": "^0.0.7"
       }
     },
+    "@nicolo-ribaudo/eslint-scope-5-internals": {
+      "version": "5.1.1-v1",
+      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
+      "integrity": "sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==",
+      "dev": true,
+      "requires": {
+        "eslint-scope": "5.1.1"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
diff --git a/package.json b/package.json
index c83c918..794478f 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "react-toastify": "^6.2.0"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.16.5",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.5.0",
diff --git a/src/components/App.js b/src/components/App.js
index 2ca86d7..0935b4d 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import Layout from "./Layout";
 import { BrowserRouter, Switch, Redirect, Route } from "react-router-dom";
 import { useTuitioToken } from "@flare/tuitio-client-react";
@@ -28,6 +29,11 @@ const PrivateRoute = ({ component, ...rest }) => {
   );
 };
 
+PrivateRoute.propTypes = {
+  component: PropTypes.node.isRequired,
+  location: PropTypes.string
+};
+
 const PublicRoute = ({ component, ...rest }) => {
   const { valid } = useTuitioToken();
   return (
@@ -48,7 +54,11 @@ const PublicRoute = ({ component, ...rest }) => {
   );
 };
 
-const AppWrapper = () => {
+PublicRoute.propTypes = {
+  component: PropTypes.node.isRequired
+};
+
+const App = () => {
   return (
     <BrowserRouter basename={process.env.PUBLIC_URL || ""}>
       <Switch>
@@ -59,4 +69,4 @@ const AppWrapper = () => {
   );
 };
 
-export default AppWrapper;
+export default App;
diff --git a/src/components/common/PageTitle.js b/src/components/common/PageTitle.js
index c428197..474242e 100644
--- a/src/components/common/PageTitle.js
+++ b/src/components/common/PageTitle.js
@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import { makeStyles } from "@material-ui/core/styles";
 import { Typography } from "@material-ui/core";
 
@@ -13,7 +14,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const PageTitle = ({ text }) => {
-  var classes = useStyles();
+  const classes = useStyles();
 
   return (
     <div className={classes.box}>
@@ -24,4 +25,8 @@ const PageTitle = ({ text }) => {
   );
 };
 
+PageTitle.propTypes = {
+  text: PropTypes.string.isRequired
+};
+
 export default PageTitle;
diff --git a/src/components/common/inputs/PasswordField.js b/src/components/common/inputs/PasswordField.js
index 5ad0449..e94c1b3 100644
--- a/src/components/common/inputs/PasswordField.js
+++ b/src/components/common/inputs/PasswordField.js
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import PropTypes from "prop-types";
 import {
   InputAdornment,
   TextField,
@@ -53,4 +54,8 @@ const PasswordField = ({ label, ...rest }) => {
   );
 };
 
+PasswordField.propTypes = {
+  label: PropTypes.string
+};
+
 export default PasswordField;
diff --git a/src/features/login/components/LoginContainer.js b/src/features/login/components/LoginContainer.js
index 5909658..d14e5c7 100644
--- a/src/features/login/components/LoginContainer.js
+++ b/src/features/login/components/LoginContainer.js
@@ -14,7 +14,7 @@ const LoginContainer = () => {
   const { error } = useToast();
   const { t } = useTranslation();
   const { login, logout } = useTuitioClient({
-    onLoginFailed: response => error(t("Login.IncorrectCredentials")),
+    onLoginFailed: () => error(t("Login.IncorrectCredentials")),
     onLoginError: err => error(err.message)
   });
   const { valid: tokenIsValid } = useTuitioToken();
diff --git a/src/features/machines/components/Machine.js b/src/features/machines/components/Machine.js
index 946adac..4e8b22d 100644
--- a/src/features/machines/components/Machine.js
+++ b/src/features/machines/components/Machine.js
@@ -41,6 +41,18 @@ const ActionButton = React.forwardRef((props, _ref) => {
   );
 });
 
+ActionButton.propTypes = {
+  machine: PropTypes.shape({
+    machineId: PropTypes.number.isRequired
+  }).isRequired,
+  action: PropTypes.shape({
+    code: PropTypes.string.isRequired,
+    tooltip: PropTypes.string.isRequired,
+    system: PropTypes.bool.isRequired,
+    effect: PropTypes.func.isRequired
+  }).isRequired
+};
+
 const Machine = ({
   machine,
   actions,
diff --git a/src/providers/ApplicationStateProvider.js b/src/providers/ApplicationStateProvider.js
index 44ee81f..9c27ec0 100644
--- a/src/providers/ApplicationStateProvider.js
+++ b/src/providers/ApplicationStateProvider.js
@@ -1,4 +1,5 @@
 import React, { useReducer, useMemo } from "react";
+import PropTypes from "prop-types";
 import {
   ApplicationStateContext,
   ApplicationDispatchContext
@@ -25,4 +26,8 @@ const ApplicationStateProvider = ({ children }) => {
   );
 };
 
+ApplicationStateProvider.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
 export default ApplicationStateProvider;
diff --git a/src/providers/ToastProvider.js b/src/providers/ToastProvider.js
index 1a3a836..9213665 100644
--- a/src/providers/ToastProvider.js
+++ b/src/providers/ToastProvider.js
@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import { ToastContainer, Slide } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
@@ -23,4 +24,8 @@ const ToastProvider = ({ children }) => {
   );
 };
 
+ToastProvider.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
 export default ToastProvider;

From 735015c5163d779e846749d2364dad5c603062da Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tstanciu@totalsoft.ro>
Date: Sat, 4 Mar 2023 00:01:24 +0200
Subject: [PATCH 06/12] fix eslint errors

---
 src/components/App.js                       | 6 +++---
 src/features/machines/components/Machine.js | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 0935b4d..0a74f3d 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -30,8 +30,8 @@ const PrivateRoute = ({ component, ...rest }) => {
 };
 
 PrivateRoute.propTypes = {
-  component: PropTypes.node.isRequired,
-  location: PropTypes.string
+  component: PropTypes.func.isRequired,
+  location: PropTypes.object
 };
 
 const PublicRoute = ({ component, ...rest }) => {
@@ -55,7 +55,7 @@ const PublicRoute = ({ component, ...rest }) => {
 };
 
 PublicRoute.propTypes = {
-  component: PropTypes.node.isRequired
+  component: PropTypes.func.isRequired
 };
 
 const App = () => {
diff --git a/src/features/machines/components/Machine.js b/src/features/machines/components/Machine.js
index 4e8b22d..629c8a1 100644
--- a/src/features/machines/components/Machine.js
+++ b/src/features/machines/components/Machine.js
@@ -48,7 +48,7 @@ ActionButton.propTypes = {
   action: PropTypes.shape({
     code: PropTypes.string.isRequired,
     tooltip: PropTypes.string.isRequired,
-    system: PropTypes.bool.isRequired,
+    system: PropTypes.bool,
     effect: PropTypes.func.isRequired
   }).isRequired
 };

From dfcabbe0ce705ce452b904b1953604832bcaf2d4 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tstanciu@totalsoft.ro>
Date: Sat, 4 Mar 2023 00:37:52 +0200
Subject: [PATCH 07/12] Break layout into small pieces

---
 src/components/App.js                         |   4 +-
 src/components/Layout.js                      | 253 ------------------
 src/components/layout/AppLayout.js            |  34 +++
 .../layout/{Switcher.js => AppRoutes.js}      |   4 +-
 src/components/layout/Main.js                 |  13 -
 src/components/layout/Sidebar.js              | 102 +++++++
 src/components/layout/TopBar.js               | 104 +++++++
 src/components/layout/styles.js               |  68 +++++
 8 files changed, 312 insertions(+), 270 deletions(-)
 delete mode 100644 src/components/Layout.js
 create mode 100644 src/components/layout/AppLayout.js
 rename src/components/layout/{Switcher.js => AppRoutes.js} (94%)
 delete mode 100644 src/components/layout/Main.js
 create mode 100644 src/components/layout/Sidebar.js
 create mode 100644 src/components/layout/TopBar.js
 create mode 100644 src/components/layout/styles.js

diff --git a/src/components/App.js b/src/components/App.js
index 0a74f3d..7121687 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Layout from "./Layout";
+import AppLayout from "./layout/AppLayout";
 import { BrowserRouter, Switch, Redirect, Route } from "react-router-dom";
 import { useTuitioToken } from "@flare/tuitio-client-react";
 import LoginContainer from "../features/login/components/LoginContainer";
@@ -63,7 +63,7 @@ const App = () => {
     <BrowserRouter basename={process.env.PUBLIC_URL || ""}>
       <Switch>
         <PublicRoute path="/login" component={LoginContainer} />
-        <PrivateRoute path="/" component={Layout} />
+        <PrivateRoute path="/" component={AppLayout} />
       </Switch>
     </BrowserRouter>
   );
diff --git a/src/components/Layout.js b/src/components/Layout.js
deleted file mode 100644
index 47b0b8c..0000000
--- a/src/components/Layout.js
+++ /dev/null
@@ -1,253 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-import { makeStyles, useTheme } from "@material-ui/core/styles";
-import Drawer from "@material-ui/core/Drawer";
-import AppBar from "@material-ui/core/AppBar";
-import Toolbar from "@material-ui/core/Toolbar";
-import List from "@material-ui/core/List";
-import Typography from "@material-ui/core/Typography";
-import Divider from "@material-ui/core/Divider";
-import IconButton from "@material-ui/core/IconButton";
-import MenuIcon from "@material-ui/icons/Menu";
-import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
-import ChevronRightIcon from "@material-ui/icons/ChevronRight";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemText from "@material-ui/core/ListItemText";
-import DeleteIcon from "@material-ui/icons/Delete";
-import DnsIcon from "@material-ui/icons/Dns";
-import MenuItem from "@material-ui/core/MenuItem";
-import Menu from "@material-ui/core/Menu";
-import AccountCircle from "@material-ui/icons/AccountCircle";
-import SettingsIcon from "@material-ui/icons/Settings";
-import DashboardIcon from "@material-ui/icons/Dashboard";
-import Main from "./layout/Main";
-import { useHistory } from "react-router-dom";
-import { useTuitioClient } from "@flare/tuitio-client-react";
-
-const drawerWidth = 240;
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    display: "flex"
-  },
-  appBar: {
-    zIndex: theme.zIndex.drawer + 1,
-    transition: theme.transitions.create(["width", "margin"], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen
-    })
-  },
-  appBarShift: {
-    marginLeft: drawerWidth,
-    width: `calc(100% - ${drawerWidth}px)`,
-    transition: theme.transitions.create(["width", "margin"], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen
-    })
-  },
-  menuButton: {
-    marginRight: 36
-  },
-  hide: {
-    display: "none"
-  },
-  drawer: {
-    width: drawerWidth,
-    flexShrink: 0,
-    whiteSpace: "nowrap"
-  },
-  drawerOpen: {
-    width: drawerWidth,
-    transition: theme.transitions.create("width", {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen
-    })
-  },
-  drawerClose: {
-    transition: theme.transitions.create("width", {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen
-    }),
-    overflowX: "hidden",
-    width: theme.spacing(7) + 1,
-    [theme.breakpoints.up("sm")]: {
-      width: theme.spacing(9) + 1
-    }
-  },
-  toolbar: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    padding: theme.spacing(0, 1),
-    // necessary for content to be below app bar
-    ...theme.mixins.toolbar
-  },
-  title: {
-    flexGrow: 1
-  },
-  content: {
-    flexGrow: 1,
-    padding: theme.spacing(2)
-  }
-}));
-
-export default function MiniDrawer() {
-  const classes = useStyles();
-  const theme = useTheme();
-  const [open, setOpen] = React.useState(false);
-  const history = useHistory();
-  const { logout } = useTuitioClient();
-
-  const handleDrawerOpen = () => {
-    setOpen(true);
-  };
-
-  const handleDrawerClose = () => {
-    setOpen(false);
-  };
-
-  const [userAnchorEl, setUserAnchorEl] = React.useState(null);
-  const openUser = Boolean(userAnchorEl);
-
-  const handleMenu = event => {
-    setUserAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setUserAnchorEl(null);
-  };
-
-  return (
-    <div className={classes.root}>
-      <AppBar
-        position="fixed"
-        className={clsx(classes.appBar, {
-          [classes.appBarShift]: open
-        })}
-      >
-        <Toolbar>
-          <IconButton
-            color="inherit"
-            aria-label="open drawer"
-            onClick={handleDrawerOpen}
-            edge="start"
-            className={clsx(classes.menuButton, {
-              [classes.hide]: open
-            })}
-          >
-            <MenuIcon />
-          </IconButton>
-          <Typography variant="h6" noWrap className={classes.title}>
-            Network resurrector
-          </Typography>
-          <div>
-            <IconButton
-              aria-label="account of current user"
-              aria-controls="menu-appbar"
-              aria-haspopup="true"
-              onClick={handleMenu}
-              color="inherit"
-            >
-              <AccountCircle />
-            </IconButton>
-            <Menu
-              id="menu-appbar"
-              anchorEl={userAnchorEl}
-              anchorOrigin={{
-                vertical: "top",
-                horizontal: "right"
-              }}
-              keepMounted
-              transformOrigin={{
-                vertical: "top",
-                horizontal: "right"
-              }}
-              open={openUser}
-              onClose={handleClose}
-            >
-              <MenuItem
-                onClick={() => {
-                  history.push("/user-profile");
-                  handleClose();
-                }}
-              >
-                Profile
-              </MenuItem>
-              <MenuItem onClick={() => logout()}>Logout</MenuItem>
-            </Menu>
-          </div>
-        </Toolbar>
-      </AppBar>
-      <Drawer
-        variant="permanent"
-        className={clsx(classes.drawer, {
-          [classes.drawerOpen]: open,
-          [classes.drawerClose]: !open
-        })}
-        classes={{
-          paper: clsx({
-            [classes.drawerOpen]: open,
-            [classes.drawerClose]: !open
-          })
-        }}
-      >
-        <div className={classes.toolbar}>
-          <IconButton onClick={handleDrawerClose}>
-            {theme.direction === "rtl" ? (
-              <ChevronRightIcon />
-            ) : (
-              <ChevronLeftIcon />
-            )}
-          </IconButton>
-        </div>
-        <Divider />
-        <List>
-          <ListItem
-            button
-            key="dashboard"
-            onClick={() => history.push("/dashboard")}
-          >
-            <ListItemIcon>
-              <DashboardIcon />
-            </ListItemIcon>
-            <ListItemText primary={"Dashboard"} />
-          </ListItem>
-          <ListItem
-            button
-            key="machines"
-            onClick={() => history.push("/machines")}
-          >
-            <ListItemIcon>
-              <DnsIcon />
-            </ListItemIcon>
-            <ListItemText primary={"Machines"} />
-          </ListItem>
-        </List>
-        <Divider />
-        <List>
-          <ListItem button key="trash" onClick={() => history.push("/trash")}>
-            <ListItemIcon>
-              <DeleteIcon />
-            </ListItemIcon>
-            <ListItemText primary={"Trash"} />
-          </ListItem>
-          <ListItem
-            button
-            key="settings"
-            onClick={() => history.push("/settings")}
-          >
-            <ListItemIcon>
-              <SettingsIcon />
-            </ListItemIcon>
-            <ListItemText primary={"Settings"} />
-          </ListItem>
-        </List>
-      </Drawer>
-      <main className={classes.content}>
-        <div className={classes.toolbar} />
-        <Main />
-      </main>
-    </div>
-  );
-}
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
new file mode 100644
index 0000000..70092b3
--- /dev/null
+++ b/src/components/layout/AppLayout.js
@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import AppRoutes from "./AppRoutes";
+import TopBar from "./TopBar";
+import Sidebar from "./Sidebar";
+import styles from "./styles";
+
+const useStyles = makeStyles(styles);
+
+const AppLayout = () => {
+  const [open, setOpen] = useState(false);
+  const classes = useStyles();
+
+  const handleDrawerOpen = () => {
+    setOpen(true);
+  };
+
+  const handleDrawerClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div className={classes.root}>
+      <TopBar open={open} handleDrawerOpen={handleDrawerOpen} />
+      <Sidebar open={open} handleDrawerClose={handleDrawerClose} />
+      <main className={classes.content}>
+        <div className={classes.toolbar} />
+        <AppRoutes />
+      </main>
+    </div>
+  );
+};
+
+export default AppLayout;
diff --git a/src/components/layout/Switcher.js b/src/components/layout/AppRoutes.js
similarity index 94%
rename from src/components/layout/Switcher.js
rename to src/components/layout/AppRoutes.js
index 14c57a5..69e207f 100644
--- a/src/components/layout/Switcher.js
+++ b/src/components/layout/AppRoutes.js
@@ -6,7 +6,7 @@ import NetworkContainer from "../../features/network/components/NetworkContainer
 import SettingsContainer from "../../features/settings/components/SettingsContainer";
 import DashboardContainer from "../../features/dashboard/components/DashboardContainer";
 
-const Switcher = () => {
+const AppRoutes = () => {
   return (
     <Switch>
       <Route exact path="/dashboard" component={DashboardContainer} />
@@ -18,4 +18,4 @@ const Switcher = () => {
   );
 };
 
-export default Switcher;
+export default AppRoutes;
diff --git a/src/components/layout/Main.js b/src/components/layout/Main.js
deleted file mode 100644
index 76aeafd..0000000
--- a/src/components/layout/Main.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import Switcher from "./Switcher";
-import { useTuitioToken } from "@flare/tuitio-client-react";
-import LoginContainer from "../../features/login/components/LoginContainer";
-
-const Main = () => {
-  const { validate: validateToken } = useTuitioToken();
-  const tokenIsValid = validateToken();
-
-  return <>{tokenIsValid ? <Switcher /> : <LoginContainer />}</>;
-};
-
-export default Main;
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
new file mode 100644
index 0000000..766688b
--- /dev/null
+++ b/src/components/layout/Sidebar.js
@@ -0,0 +1,102 @@
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { makeStyles, useTheme } from "@material-ui/core/styles";
+import Drawer from "@material-ui/core/Drawer";
+import List from "@material-ui/core/List";
+import Divider from "@material-ui/core/Divider";
+import IconButton from "@material-ui/core/IconButton";
+import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
+import ChevronRightIcon from "@material-ui/icons/ChevronRight";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import DeleteIcon from "@material-ui/icons/Delete";
+import DnsIcon from "@material-ui/icons/Dns";
+import SettingsIcon from "@material-ui/icons/Settings";
+import DashboardIcon from "@material-ui/icons/Dashboard";
+import { useHistory } from "react-router-dom";
+import styles from "./styles";
+
+const useStyles = makeStyles(styles);
+
+const Sidebar = ({ open, handleDrawerClose }) => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const history = useHistory();
+
+  return (
+    <Drawer
+      variant="permanent"
+      className={clsx(classes.drawer, {
+        [classes.drawerOpen]: open,
+        [classes.drawerClose]: !open
+      })}
+      classes={{
+        paper: clsx({
+          [classes.drawerOpen]: open,
+          [classes.drawerClose]: !open
+        })
+      }}
+    >
+      <div className={classes.toolbar}>
+        <IconButton onClick={handleDrawerClose}>
+          {theme.direction === "rtl" ? (
+            <ChevronRightIcon />
+          ) : (
+            <ChevronLeftIcon />
+          )}
+        </IconButton>
+      </div>
+      <Divider />
+      <List>
+        <ListItem
+          button
+          key="dashboard"
+          onClick={() => history.push("/dashboard")}
+        >
+          <ListItemIcon>
+            <DashboardIcon />
+          </ListItemIcon>
+          <ListItemText primary={"Dashboard"} />
+        </ListItem>
+        <ListItem
+          button
+          key="machines"
+          onClick={() => history.push("/machines")}
+        >
+          <ListItemIcon>
+            <DnsIcon />
+          </ListItemIcon>
+          <ListItemText primary={"Machines"} />
+        </ListItem>
+      </List>
+      <Divider />
+      <List>
+        <ListItem button key="trash" onClick={() => history.push("/trash")}>
+          <ListItemIcon>
+            <DeleteIcon />
+          </ListItemIcon>
+          <ListItemText primary={"Trash"} />
+        </ListItem>
+        <ListItem
+          button
+          key="settings"
+          onClick={() => history.push("/settings")}
+        >
+          <ListItemIcon>
+            <SettingsIcon />
+          </ListItemIcon>
+          <ListItemText primary={"Settings"} />
+        </ListItem>
+      </List>
+    </Drawer>
+  );
+};
+
+Sidebar.propTypes = {
+  open: PropTypes.bool.isRequired,
+  handleDrawerClose: PropTypes.func.isRequired
+};
+
+export default Sidebar;
diff --git a/src/components/layout/TopBar.js b/src/components/layout/TopBar.js
new file mode 100644
index 0000000..b4e54b4
--- /dev/null
+++ b/src/components/layout/TopBar.js
@@ -0,0 +1,104 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { makeStyles } from "@material-ui/core/styles";
+
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+import IconButton from "@material-ui/core/IconButton";
+import MenuIcon from "@material-ui/icons/Menu";
+import MenuItem from "@material-ui/core/MenuItem";
+import Menu from "@material-ui/core/Menu";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+import { useHistory } from "react-router-dom";
+import { useTuitioClient } from "@flare/tuitio-client-react";
+import styles from "./styles";
+
+const useStyles = makeStyles(styles);
+
+const TopBar = ({ open, handleDrawerOpen }) => {
+  const classes = useStyles();
+  const history = useHistory();
+  const { logout } = useTuitioClient();
+
+  const [userAnchorEl, setUserAnchorEl] = useState(null);
+  const openUserMenu = Boolean(userAnchorEl);
+
+  const handleMenu = event => {
+    setUserAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setUserAnchorEl(null);
+  };
+
+  return (
+    <AppBar
+      position="fixed"
+      className={clsx(classes.appBar, {
+        [classes.appBarShift]: open
+      })}
+    >
+      <Toolbar>
+        <IconButton
+          color="inherit"
+          aria-label="open drawer"
+          onClick={handleDrawerOpen}
+          edge="start"
+          className={clsx(classes.menuButton, {
+            [classes.hide]: open
+          })}
+        >
+          <MenuIcon />
+        </IconButton>
+        <Typography variant="h6" noWrap className={classes.title}>
+          Network resurrector
+        </Typography>
+        <div>
+          <IconButton
+            aria-label="account of current user"
+            aria-controls="menu-appbar"
+            aria-haspopup="true"
+            onClick={handleMenu}
+            color="inherit"
+          >
+            <AccountCircle />
+          </IconButton>
+          <Menu
+            id="menu-appbar"
+            anchorEl={userAnchorEl}
+            anchorOrigin={{
+              vertical: "top",
+              horizontal: "right"
+            }}
+            keepMounted
+            transformOrigin={{
+              vertical: "top",
+              horizontal: "right"
+            }}
+            open={openUserMenu}
+            onClose={handleClose}
+          >
+            <MenuItem
+              onClick={() => {
+                history.push("/user-profile");
+                handleClose();
+              }}
+            >
+              Profile
+            </MenuItem>
+            <MenuItem onClick={() => logout()}>Logout</MenuItem>
+          </Menu>
+        </div>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+TopBar.propTypes = {
+  open: PropTypes.bool.isRequired,
+  handleDrawerOpen: PropTypes.func.isRequired
+};
+
+export default TopBar;
diff --git a/src/components/layout/styles.js b/src/components/layout/styles.js
new file mode 100644
index 0000000..0c06cdf
--- /dev/null
+++ b/src/components/layout/styles.js
@@ -0,0 +1,68 @@
+const drawerWidth = 240;
+
+const styles = theme => ({
+  root: {
+    display: "flex"
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    })
+  },
+  appBarShift: {
+    marginLeft: drawerWidth,
+    width: `calc(100% - ${drawerWidth}px)`,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen
+    })
+  },
+  menuButton: {
+    marginRight: 36
+  },
+  hide: {
+    display: "none"
+  },
+  drawer: {
+    width: drawerWidth,
+    flexShrink: 0,
+    whiteSpace: "nowrap"
+  },
+  drawerOpen: {
+    width: drawerWidth,
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen
+    })
+  },
+  drawerClose: {
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    }),
+    overflowX: "hidden",
+    width: theme.spacing(7) + 1,
+    [theme.breakpoints.up("sm")]: {
+      width: theme.spacing(9) + 1
+    }
+  },
+  toolbar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    padding: theme.spacing(0, 1),
+    // necessary for content to be below app bar
+    ...theme.mixins.toolbar
+  },
+  title: {
+    flexGrow: 1
+  },
+  content: {
+    flexGrow: 1,
+    padding: theme.spacing(2)
+  }
+});
+
+export default styles;

From 4e58eebd4e9947ca93938fa973366495493f4407 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tstanciu@totalsoft.ro>
Date: Sat, 4 Mar 2023 21:06:49 +0200
Subject: [PATCH 08/12] added theme dark mode toggle in settings

---
 package.json                                  |  1 +
 .../machines/components/MachinesContainer.js  |  2 +-
 .../settings/components/SettingsContainer.js  |  8 +-
 .../settings/components/ThemeSettings.js      | 23 ++++++
 src/index.js                                  |  5 +-
 src/providers/ApplicationStateProvider.js     |  2 +-
 src/providers/ThemeProvider.js                | 82 +++++++++++++++++++
 .../{ApplicationContexts.js => contexts.js}   |  0
 src/themes/index.js                           | 23 +++---
 9 files changed, 128 insertions(+), 18 deletions(-)
 create mode 100644 src/features/settings/components/ThemeSettings.js
 create mode 100644 src/providers/ThemeProvider.js
 rename src/state/{ApplicationContexts.js => contexts.js} (100%)

diff --git a/package.json b/package.json
index 794478f..a49039d 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   },
   "private": true,
   "dependencies": {
+    "@flare/js-utils": "^1.0.3",
     "@flare/tuitio-client-react": "^1.0.1",
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
diff --git a/src/features/machines/components/MachinesContainer.js b/src/features/machines/components/MachinesContainer.js
index 5708861..20cf0d6 100644
--- a/src/features/machines/components/MachinesContainer.js
+++ b/src/features/machines/components/MachinesContainer.js
@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useCallback } from "react";
 import {
   ApplicationStateContext,
   ApplicationDispatchContext
-} from "../../../state/ApplicationContexts";
+} from "../../../state/contexts";
 import useApi from "../../../api";
 import MachinesList from "./MachinesList";
 import PageTitle from "../../../components/common/PageTitle";
diff --git a/src/features/settings/components/SettingsContainer.js b/src/features/settings/components/SettingsContainer.js
index 8eebf7e..bace773 100644
--- a/src/features/settings/components/SettingsContainer.js
+++ b/src/features/settings/components/SettingsContainer.js
@@ -1,8 +1,14 @@
 import React from "react";
 import LanguageContainer from "./language/LanguageContainer";
+import ThemeSettings from "./ThemeSettings";
 
 const SettingsContainer = () => {
-  return <LanguageContainer />;
+  return (
+    <>
+      <LanguageContainer />
+      <ThemeSettings />
+    </>
+  );
 };
 
 export default SettingsContainer;
diff --git a/src/features/settings/components/ThemeSettings.js b/src/features/settings/components/ThemeSettings.js
new file mode 100644
index 0000000..cf522d3
--- /dev/null
+++ b/src/features/settings/components/ThemeSettings.js
@@ -0,0 +1,23 @@
+import React from "react";
+import { useApplicationTheme } from "../../../providers/ThemeProvider";
+import { Switch } from "@material-ui/core";
+
+const ThemeSettings = () => {
+  const { isDark, onDarkModeChanged } = useApplicationTheme();
+
+  const handleChange = event => {
+    const { checked } = event.target;
+    onDarkModeChanged(checked);
+  };
+
+  return (
+    <Switch
+      checked={isDark}
+      onChange={handleChange}
+      color="primary"
+      name="app-theme-switch"
+    />
+  );
+};
+
+export default ThemeSettings;
diff --git a/src/index.js b/src/index.js
index 6fdef0e..2dc491a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,6 @@
 import React, { Suspense } from "react";
 import ReactDOM from "react-dom";
-import { ThemeProvider } from "@material-ui/styles";
-import Themes from "./themes";
+import ThemeProvider from "./providers/ThemeProvider";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import App from "./components/App";
 import { TuitioProvider } from "@flare/tuitio-client-react";
@@ -12,7 +11,7 @@ import "./utils/i18n";
 ReactDOM.render(
   <TuitioProvider tuitioUrl={process.env.REACT_APP_TUITIO_URL}>
     <ApplicationStateProvider>
-      <ThemeProvider theme={Themes.default}>
+      <ThemeProvider>
         <CssBaseline />
         <Suspense fallback={<div>Loading...</div>}>
           <ToastProvider>
diff --git a/src/providers/ApplicationStateProvider.js b/src/providers/ApplicationStateProvider.js
index 9c27ec0..071541f 100644
--- a/src/providers/ApplicationStateProvider.js
+++ b/src/providers/ApplicationStateProvider.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import {
   ApplicationStateContext,
   ApplicationDispatchContext
-} from "../state/ApplicationContexts";
+} from "../state/contexts";
 import {
   reducer,
   dispatchActions as reducerDispatchActions
diff --git a/src/providers/ThemeProvider.js b/src/providers/ThemeProvider.js
new file mode 100644
index 0000000..bcbef66
--- /dev/null
+++ b/src/providers/ThemeProvider.js
@@ -0,0 +1,82 @@
+import React, { useReducer, useMemo, useContext } from "react";
+import PropTypes from "prop-types";
+import { ThemeProvider as MuiThemeProvider } from "@material-ui/styles";
+import { localStorage } from "@flare/js-utils";
+import { getThemes } from "../themes";
+
+const ApplicationThemeContext = React.createContext();
+const LOCAL_STORAGE_COLOR_SCHEME_KEY = "network-resurrector-color-scheme";
+
+const COLOR_SCHEME = {
+  LIGHT: "light",
+  DARK: "dark"
+};
+
+const colorScheme = localStorage.getItem(LOCAL_STORAGE_COLOR_SCHEME_KEY);
+const prefersDarkMode = window.matchMedia(
+  "(prefers-color-scheme: dark)"
+).matches;
+
+const initialState = {
+  scheme:
+    colorScheme ?? (prefersDarkMode ? COLOR_SCHEME.DARK : COLOR_SCHEME.LIGHT)
+};
+
+const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case "onColorSchemeChanged": {
+      return {
+        ...state,
+        scheme: action.scheme
+      };
+    }
+    default: {
+      return state;
+    }
+  }
+};
+
+const dispatchActions = dispatch => ({
+  onColorSchemeChanged: scheme => {
+    dispatch({ type: "onColorSchemeChanged", scheme });
+    localStorage.setItem(LOCAL_STORAGE_COLOR_SCHEME_KEY, scheme);
+  }
+});
+
+const useApplicationTheme = () => {
+  const { state, actions } = useContext(ApplicationThemeContext);
+  const { onColorSchemeChanged } = actions;
+
+  const { scheme } = state;
+  const onDarkModeChanged = active =>
+    onColorSchemeChanged(active ? COLOR_SCHEME.DARK : COLOR_SCHEME.LIGHT);
+
+  return { isDark: scheme === COLOR_SCHEME.DARK, onDarkModeChanged };
+};
+
+const ThemeProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const actions = useMemo(() => dispatchActions(dispatch), [dispatch]);
+  const themes = useMemo(
+    () => getThemes(state.scheme === COLOR_SCHEME.DARK),
+    [state.scheme]
+  );
+
+  return (
+    <ApplicationThemeContext.Provider
+      value={{
+        state,
+        actions
+      }}
+    >
+      <MuiThemeProvider theme={themes.default}>{children}</MuiThemeProvider>
+    </ApplicationThemeContext.Provider>
+  );
+};
+
+ThemeProvider.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export { ThemeProvider, ApplicationThemeContext, useApplicationTheme };
+export default ThemeProvider;
diff --git a/src/state/ApplicationContexts.js b/src/state/contexts.js
similarity index 100%
rename from src/state/ApplicationContexts.js
rename to src/state/contexts.js
diff --git a/src/themes/index.js b/src/themes/index.js
index a0830ec..07216c2 100644
--- a/src/themes/index.js
+++ b/src/themes/index.js
@@ -1,12 +1,7 @@
 import defaultTheme from "./default";
 import { createTheme } from "@material-ui/core/styles";
 
-const prefersDarkMode = false;
-
 const overrides = {
-  palette: {
-    type: prefersDarkMode ? "dark" : "light"
-  },
   typography: {
     h1: {
       fontSize: "3rem"
@@ -29,12 +24,16 @@ const overrides = {
   }
 };
 
-const themes = {
-  default: createTheme({
-    ...defaultTheme,
-    ...overrides,
-    palette: { ...defaultTheme.palette, ...overrides.palette }
-  })
+const getThemes = darkMode => {
+  const type = darkMode ? "dark" : "light";
+
+  return {
+    default: createTheme({
+      ...defaultTheme,
+      ...overrides,
+      palette: { ...defaultTheme.palette, type }
+    })
+  };
 };
 
-export default themes;
+export { getThemes };

From 9d85810f4ef615af3a0d62e14e69390491aef81a Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tstanciu@totalsoft.ro>
Date: Sat, 4 Mar 2023 21:14:47 +0200
Subject: [PATCH 09/12] refactoring

---
 src/components/layout/Sidebar.js | 14 ++++++++------
 src/components/layout/TopBar.js  | 14 ++++++++------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 766688b..4cdb1f2 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -2,15 +2,17 @@ import React from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
 import { makeStyles, useTheme } from "@material-ui/core/styles";
-import Drawer from "@material-ui/core/Drawer";
-import List from "@material-ui/core/List";
-import Divider from "@material-ui/core/Divider";
-import IconButton from "@material-ui/core/IconButton";
+import {
+  Drawer,
+  List,
+  Divider,
+  IconButton,
+  ListItemIcon,
+  ListItemText
+} from "@material-ui/core";
 import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
 import ChevronRightIcon from "@material-ui/icons/ChevronRight";
 import ListItem from "@material-ui/core/ListItem";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemText from "@material-ui/core/ListItemText";
 import DeleteIcon from "@material-ui/icons/Delete";
 import DnsIcon from "@material-ui/icons/Dns";
 import SettingsIcon from "@material-ui/icons/Settings";
diff --git a/src/components/layout/TopBar.js b/src/components/layout/TopBar.js
index b4e54b4..e115da4 100644
--- a/src/components/layout/TopBar.js
+++ b/src/components/layout/TopBar.js
@@ -2,14 +2,16 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
 import { makeStyles } from "@material-ui/core/styles";
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  IconButton,
+  Menu,
+  MenuItem
+} from "@material-ui/core";
 
-import AppBar from "@material-ui/core/AppBar";
-import Toolbar from "@material-ui/core/Toolbar";
-import Typography from "@material-ui/core/Typography";
-import IconButton from "@material-ui/core/IconButton";
 import MenuIcon from "@material-ui/icons/Menu";
-import MenuItem from "@material-ui/core/MenuItem";
-import Menu from "@material-ui/core/Menu";
 import AccountCircle from "@material-ui/icons/AccountCircle";
 import { useHistory } from "react-router-dom";
 import { useTuitioClient } from "@flare/tuitio-client-react";

From 49d2fa11bd5767e2f1155f220758d4fafc22c7df Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tstanciu@totalsoft.ro>
Date: Sat, 4 Mar 2023 21:57:00 +0200
Subject: [PATCH 10/12] light dark toggle

---
 src/components/layout/LightDarkToggle.js | 25 +++++++++
 src/components/layout/ProfileButton.js   | 62 +++++++++++++++++++++
 src/components/layout/TopBar.js          | 68 +++---------------------
 3 files changed, 93 insertions(+), 62 deletions(-)
 create mode 100644 src/components/layout/LightDarkToggle.js
 create mode 100644 src/components/layout/ProfileButton.js

diff --git a/src/components/layout/LightDarkToggle.js b/src/components/layout/LightDarkToggle.js
new file mode 100644
index 0000000..cc42262
--- /dev/null
+++ b/src/components/layout/LightDarkToggle.js
@@ -0,0 +1,25 @@
+import React from "react";
+import { IconButton } from "@material-ui/core";
+import {
+  Brightness2 as MoonIcon,
+  WbSunny as SunIcon
+} from "@material-ui/icons";
+import { useApplicationTheme } from "../../providers/ThemeProvider";
+
+const LightDarkToggle = () => {
+  const { isDark, onDarkModeChanged } = useApplicationTheme();
+
+  const handleChange = () => onDarkModeChanged(!isDark);
+
+  return (
+    <IconButton
+      aria-label="light-dark-toggle"
+      color="inherit"
+      onClick={handleChange}
+    >
+      {isDark ? <SunIcon /> : <MoonIcon />}
+    </IconButton>
+  );
+};
+
+export default LightDarkToggle;
diff --git a/src/components/layout/ProfileButton.js b/src/components/layout/ProfileButton.js
new file mode 100644
index 0000000..fbf6784
--- /dev/null
+++ b/src/components/layout/ProfileButton.js
@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { IconButton, Menu, MenuItem } from "@material-ui/core";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+import { useHistory } from "react-router-dom";
+import { useTuitioClient } from "@flare/tuitio-client-react";
+
+const ProfileButton = () => {
+  const history = useHistory();
+  const { logout } = useTuitioClient();
+
+  const [anchorEl, setAnchorEl] = useState(null);
+  const openUserMenu = Boolean(anchorEl);
+
+  const handleMenu = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div>
+      <IconButton
+        aria-label="account of current user"
+        aria-controls="menu-appbar"
+        aria-haspopup="true"
+        onClick={handleMenu}
+        color="inherit"
+      >
+        <AccountCircle />
+      </IconButton>
+      <Menu
+        id="menu-appbar"
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "right"
+        }}
+        keepMounted
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "right"
+        }}
+        open={openUserMenu}
+        onClose={handleClose}
+      >
+        <MenuItem
+          onClick={() => {
+            history.push("/user-profile");
+            handleClose();
+          }}
+        >
+          Profile
+        </MenuItem>
+        <MenuItem onClick={() => logout()}>Logout</MenuItem>
+      </Menu>
+    </div>
+  );
+};
+
+export default ProfileButton;
diff --git a/src/components/layout/TopBar.js b/src/components/layout/TopBar.js
index e115da4..026f3a4 100644
--- a/src/components/layout/TopBar.js
+++ b/src/components/layout/TopBar.js
@@ -1,39 +1,17 @@
-import React, { useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
 import { makeStyles } from "@material-ui/core/styles";
-import {
-  AppBar,
-  Toolbar,
-  Typography,
-  IconButton,
-  Menu,
-  MenuItem
-} from "@material-ui/core";
-
+import { AppBar, Toolbar, Typography, IconButton } from "@material-ui/core";
 import MenuIcon from "@material-ui/icons/Menu";
-import AccountCircle from "@material-ui/icons/AccountCircle";
-import { useHistory } from "react-router-dom";
-import { useTuitioClient } from "@flare/tuitio-client-react";
+import ProfileButton from "./ProfileButton";
+import LightDarkToggle from "./LightDarkToggle";
 import styles from "./styles";
 
 const useStyles = makeStyles(styles);
 
 const TopBar = ({ open, handleDrawerOpen }) => {
   const classes = useStyles();
-  const history = useHistory();
-  const { logout } = useTuitioClient();
-
-  const [userAnchorEl, setUserAnchorEl] = useState(null);
-  const openUserMenu = Boolean(userAnchorEl);
-
-  const handleMenu = event => {
-    setUserAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setUserAnchorEl(null);
-  };
 
   return (
     <AppBar
@@ -57,42 +35,8 @@ const TopBar = ({ open, handleDrawerOpen }) => {
         <Typography variant="h6" noWrap className={classes.title}>
           Network resurrector
         </Typography>
-        <div>
-          <IconButton
-            aria-label="account of current user"
-            aria-controls="menu-appbar"
-            aria-haspopup="true"
-            onClick={handleMenu}
-            color="inherit"
-          >
-            <AccountCircle />
-          </IconButton>
-          <Menu
-            id="menu-appbar"
-            anchorEl={userAnchorEl}
-            anchorOrigin={{
-              vertical: "top",
-              horizontal: "right"
-            }}
-            keepMounted
-            transformOrigin={{
-              vertical: "top",
-              horizontal: "right"
-            }}
-            open={openUserMenu}
-            onClose={handleClose}
-          >
-            <MenuItem
-              onClick={() => {
-                history.push("/user-profile");
-                handleClose();
-              }}
-            >
-              Profile
-            </MenuItem>
-            <MenuItem onClick={() => logout()}>Logout</MenuItem>
-          </Menu>
-        </div>
+        <LightDarkToggle />
+        <ProfileButton />
       </Toolbar>
     </AppBar>
   );

From 39216f85d3038c25864a84a6406c9441c7ed8d8b Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tstanciu@totalsoft.ro>
Date: Sat, 4 Mar 2023 22:06:55 +0200
Subject: [PATCH 11/12] translations

---
 public/locales/en/translations.json |  7 ++++---
 public/locales/ro/translations.json |  7 ++++---
 src/components/layout/Sidebar.js    | 10 ++++++----
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
index 6e31cfb..0822ee5 100644
--- a/public/locales/en/translations.json
+++ b/public/locales/en/translations.json
@@ -12,9 +12,10 @@
     "English": "English",
     "Romanian": "Romanian"
   },
-  "Steps": {
-    "Login": "Login",
-    "Network": "Network",
+  "Menu": {
+    "Dashboard": "Dashboard",
+    "Machines": "Machines",
+    "Trash": "Trash",
     "Settings": "Settings"
   },
   "Login": {
diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json
index 8b25ec5..51c3bd0 100644
--- a/public/locales/ro/translations.json
+++ b/public/locales/ro/translations.json
@@ -3,9 +3,10 @@
     "English": "Engleză",
     "Romanian": "Română"
   },
-  "Steps": {
-    "Login": "Autentificare",
-    "Network": "Rețea",
+  "Menu": {
+    "Dashboard": "Bord",
+    "Machines": "Mașini",
+    "Trash": "Gunoi",
     "Settings": "Setări"
   },
   "Login": {
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 4cdb1f2..4c2aea1 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -18,6 +18,7 @@ import DnsIcon from "@material-ui/icons/Dns";
 import SettingsIcon from "@material-ui/icons/Settings";
 import DashboardIcon from "@material-ui/icons/Dashboard";
 import { useHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import styles from "./styles";
 
 const useStyles = makeStyles(styles);
@@ -26,6 +27,7 @@ const Sidebar = ({ open, handleDrawerClose }) => {
   const classes = useStyles();
   const theme = useTheme();
   const history = useHistory();
+  const { t } = useTranslation();
 
   return (
     <Drawer
@@ -60,7 +62,7 @@ const Sidebar = ({ open, handleDrawerClose }) => {
           <ListItemIcon>
             <DashboardIcon />
           </ListItemIcon>
-          <ListItemText primary={"Dashboard"} />
+          <ListItemText primary={t("Menu.Dashboard")} />
         </ListItem>
         <ListItem
           button
@@ -70,7 +72,7 @@ const Sidebar = ({ open, handleDrawerClose }) => {
           <ListItemIcon>
             <DnsIcon />
           </ListItemIcon>
-          <ListItemText primary={"Machines"} />
+          <ListItemText primary={t("Menu.Machines")} />
         </ListItem>
       </List>
       <Divider />
@@ -79,7 +81,7 @@ const Sidebar = ({ open, handleDrawerClose }) => {
           <ListItemIcon>
             <DeleteIcon />
           </ListItemIcon>
-          <ListItemText primary={"Trash"} />
+          <ListItemText primary={t("Menu.Trash")} />
         </ListItem>
         <ListItem
           button
@@ -89,7 +91,7 @@ const Sidebar = ({ open, handleDrawerClose }) => {
           <ListItemIcon>
             <SettingsIcon />
           </ListItemIcon>
-          <ListItemText primary={"Settings"} />
+          <ListItemText primary={t("Menu.Settings")} />
         </ListItem>
       </List>
     </Drawer>

From 09b60025462e3acd951414bfb074db56e9a8852f Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tstanciu@totalsoft.ro>
Date: Sat, 4 Mar 2023 22:11:39 +0200
Subject: [PATCH 12/12] redirect to dashboard from root route

---
 src/components/App.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/App.js b/src/components/App.js
index 7121687..dad60bc 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -62,6 +62,7 @@ const App = () => {
   return (
     <BrowserRouter basename={process.env.PUBLIC_URL || ""}>
       <Switch>
+        <Route exact path="/" render={() => <Redirect to="/dashboard" />} />
         <PublicRoute path="/login" component={LoginContainer} />
         <PrivateRoute path="/" component={AppLayout} />
       </Switch>