[skip ci] Optimizations/react (#186)

* Replaced the lodash module with submodules * Using lazy imports of heavy modules * Replaced the old authorization verification system with PrivateRoute * Dynamic import of all paths * Minifying the syntax highlighting library * Added missing imports * Added expires to head meta * Don't force the code to follow unnecessary redirects * Kawanaao accept CLA --------- Co-authored-by: Yann S <7872597+azukaar@users.noreply.github.com>
2026-01-05 11:49:50 -06:00 · 2024-02-04 14:37:58 +02:00
parent 5a0e81be09
commit 87c1636ff7
42 changed files with 130 additions and 112 deletions
--- a/.clabot
+++ b/.clabot
@@ -1,4 +1,4 @@
 {
-  "contributors": ["azukaar", "jwr1", "Jogai", "InterN0te", "catmandx", "revam"],
+  "contributors": ["azukaar", "jwr1", "Jogai", "InterN0te", "catmandx", "revam", "Kawanaao"],
  "message": "We require contributors to sign our [Contributor License Agreement](https://github.com/azukaar/Cosmos-Server/blob/master/cla.md). In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA."
 }
--- a/client/index.html
+++ b/client/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
+    <meta http-equiv="expires" content="0">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cosmos</title>
--- a/client/src/PrivateRoute.jsx
+++ b/client/src/PrivateRoute.jsx
@@ -0,0 +1,18 @@
+import { Suspense } from "react"
+import { Await, Navigate } from "react-router"
+import isLoggedIn from "./isLoggedIn"
+
+function PrivateRoute({ children }) {
+  return <Suspense>
+    <Await resolve={isLoggedIn()}>
+      {authStatus => {
+        switch (authStatus) {
+          case "OK": return children
+          default: return <Navigate to={authStatus} replace />
+        }
+      }}
+    </Await>
+  </Suspense>
+}
+
+export default PrivateRoute
--- a/client/src/api/authentication.jsx
+++ b/client/src/api/authentication.jsx
@@ -11,7 +11,7 @@ function login(values) {
 }

 function me() {
-  return fetch('/cosmos/api/me/', {
+  return fetch('/cosmos/api/me', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json'
@@ -21,7 +21,7 @@ function me() {
 }

 function logout() {
-  return wrap(fetch('/cosmos/api/logout/', {
+  return wrap(fetch('/cosmos/api/logout', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json'
--- a/client/src/components/third-party/Highlighter.jsx
+++ b/client/src/components/third-party/Highlighter.jsx
@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
-import { useState } from 'react';
+import { lazy, useState } from 'react';

 // material-ui
 import { Box, CardActions, Collapse, Divider, IconButton, Tooltip } from '@mui/material';

 // third-party
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import reactElementToJSXString from 'react-element-to-jsx-string';
+const reactElementToJSXString = lazy(() => import('react-element-to-jsx-string'));

 // project import
 import SyntaxHighlight from '../../utils/SyntaxHighlight';
--- a/client/src/isLoggedIn.jsx
+++ b/client/src/isLoggedIn.jsx
@@ -1,25 +1,25 @@

 import * as API from './api';
-import { useEffect } from 'react';
-import { redirectToLocal } from './utils/indexs';

-const IsLoggedIn = () => useEffect(() => {
+async function isLoggedIn() {
    const urlSearch = encodeURIComponent(window.location.search);
    const redirectToURL = (window.location.pathname + urlSearch);
+    const data = await API.auth.me();

-    API.auth.me().then((data) => {
-        if(data.status != 'OK') {
-            if(data.status == 'NEW_INSTALL') {
-                redirectToLocal('/cosmos-ui/newInstall');
-            } else if (data.status == 'error' && data.code == "HTTP004") {
-                redirectToLocal('/cosmos-ui/login?redirect=' + redirectToURL);
-            } else if (data.status == 'error' && data.code == "HTTP006") {
-                redirectToLocal('/cosmos-ui/loginmfa?redirect=' + redirectToURL);
-            } else if (data.status == 'error' && data.code == "HTTP007") {
-                redirectToLocal('/cosmos-ui/newmfa?redirect=' + redirectToURL);
-            }
-        }
-    })
-}, []);
+    if (data.status == 'NEW_INSTALL') {
+        return '/cosmos-ui/newInstall';
+    } else if (data.status == 'error' && data.code == "HTTP004") {
+        return '/cosmos-ui/login?redirect=' + redirectToURL;
+    } else if (data.status == 'error' && data.code == "HTTP006") {
+        return '/cosmos-ui/loginmfa?redirect=' + redirectToURL;
+    } else if (data.status == 'error' && data.code == "HTTP007") {
+        return '/cosmos-ui/newmfa?redirect=' + redirectToURL;
+    } else if (data.status == 'OK') {
+        return data.status
+    } else {
+        console.warn(`Status "${data.status}" does not have a navigation handler, will be interpreted as OK!`)
+        return 'OK'
+    }
+};

-export default IsLoggedIn;
+export default isLoggedIn;
--- a/client/src/pages/authentication/openid.jsx
+++ b/client/src/pages/authentication/openid.jsx
@@ -7,7 +7,6 @@ import { Checkbox, Grid, Stack, Typography } from '@mui/material';
 import AuthLogin from './auth-forms/AuthLogin';
 import AuthWrapper from './AuthWrapper';
 import { getFaviconURL } from '../../utils/routes';
-import IsLoggedIn from '../../isLoggedIn';
 import { LoadingButton } from '@mui/lab';
 import { Field, useFormik } from 'formik';
 import { useState } from 'react';
@@ -52,7 +51,6 @@ const OpenID = () => {
  }      

  return (<AuthWrapper>
-    <IsLoggedIn />
    <Grid container spacing={3}>
      <Grid item xs={12}>
        <Stack spacing={2}>
--- a/client/src/pages/config/routeConfigPage.jsx
+++ b/client/src/pages/config/routeConfigPage.jsx
@@ -7,7 +7,6 @@ import { useEffect, useState } from "react";
 import * as API  from "../../api";
 import RouteSecurity from "./routes/routeSecurity";
 import RouteOverview from "./routes/routeoverview";
-import IsLoggedIn from "../../isLoggedIn";
 import RouteMetrics from "../dashboard/routeMonitoring";
 import EventExplorerStandalone from "../dashboard/eventsExplorerStandalone";

@@ -31,7 +30,6 @@ const RouteConfigPage = () => {
  }, []);

  return <div>
-    <IsLoggedIn />
    <h2>
      <Stack spacing={1}>
      <Stack direction="row" spacing={1} alignItems="center">
--- a/client/src/pages/config/routes/newRoute.jsx
+++ b/client/src/pages/config/routes/newRoute.jsx
@@ -8,7 +8,6 @@ import Paper from '@mui/material/Paper';
 import { styled } from '@mui/material/styles';

 import * as API from '../../../api';
-import IsLoggedIn from '../../../isLoggedIn';
 import RestartModal from '../../config/users/restart';
 import RouteManagement from '../../config/routes/routeman';
 import { ValidateRoute, getFaviconURL, sanitizeRoute } from '../../../utils/routes';
--- a/client/src/pages/config/routes/routeoverview.jsx
+++ b/client/src/pages/config/routes/routeoverview.jsx
@@ -7,7 +7,6 @@ import { RouteMode, RouteSecurity } from '../../../components/routeComponents';
 import { getFaviconURL } from '../../../utils/routes';
 import * as API from '../../../api';
 import { CheckOutlined, ClockCircleOutlined, ContainerOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, InfoCircleFilled, InfoCircleOutlined, LockOutlined, NodeExpandOutlined, SafetyCertificateOutlined, UpOutlined } from "@ant-design/icons";
-import IsLoggedIn from '../../../isLoggedIn';
 import { redirectToLocal } from '../../../utils/indexs';
 import { CosmosCheckbox } from '../users/formShortcuts';
 import { Field } from 'formik';
--- a/client/src/pages/config/users/configman.jsx
+++ b/client/src/pages/config/users/configman.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import IsLoggedIn from '../../../isLoggedIn';
 import * as API from '../../../api';
 import MainCard from '../../../components/MainCard';
 import { Formik, Field } from 'formik';
@@ -60,8 +59,6 @@ const ConfigManagement = () => {
  }, []);

  return <div style={{maxWidth: '1000px', margin: ''}}>
-    <IsLoggedIn />
-
    <Stack direction="row" spacing={2} style={{marginBottom: '15px'}}>
      <Button variant="contained" color="primary" startIcon={<SyncOutlined />} onClick={() => {
          refresh();
--- a/client/src/pages/config/users/proxyman.jsx
+++ b/client/src/pages/config/users/proxyman.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import IsLoggedIn from '../../../isLoggedIn';
 import * as API from '../../../api';
 import MainCard from '../../../components/MainCard';
 import { Formik, Field } from 'formik';
@@ -32,7 +31,6 @@ import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
 import AnimateButton from '../../../components/@extended/AnimateButton';
 import RestartModal from './restart';
 import RouteManagement from '../routes/routeman';
-import { map } from 'lodash';
 import { getFaviconURL, sanitizeRoute, ValidateRoute } from '../../../utils/routes';
 import PrettyTableView from '../../../components/tableView/prettyTableView';
 import HostChip from '../../../components/hostChip';
@@ -145,7 +143,6 @@ const ProxyManagement = () => {
  let routes = config && (config.HTTPConfig.ProxyConfig.Routes || []);

  return <div style={{   }}>
-    <IsLoggedIn />
    <Stack direction="row" spacing={1} style={{ marginBottom: '20px' }}>
      <Button variant="contained" color="primary" startIcon={<SyncOutlined />} onClick={() => {
          refresh();
--- a/client/src/pages/config/users/restart.jsx
+++ b/client/src/pages/config/users/restart.jsx
@@ -20,7 +20,6 @@ import Chip from '@mui/material/Chip';
 import IconButton from '@mui/material/IconButton';
 import * as API from '../../../api';
 import MainCard from '../../../components/MainCard';
-import IsLoggedIn from '../../../isLoggedIn';
 import { useEffect, useState } from 'react';
 import { isDomain } from '../../../utils/indexs';

--- a/client/src/pages/config/users/usermanagement.jsx
+++ b/client/src/pages/config/users/usermanagement.jsx
@@ -20,7 +20,6 @@ import Chip from '@mui/material/Chip';
 import IconButton from '@mui/material/IconButton';
 import * as API from '../../../api';
 import MainCard from '../../../components/MainCard';
-import IsLoggedIn from '../../../isLoggedIn';
 import { useEffect, useState } from 'react';
 import PrettyTableView from '../../../components/tableView/prettyTableView';

@@ -64,7 +63,6 @@ const UserManagement = () => {
    }

    return <>
-        <IsLoggedIn />
        {openInviteForm ? <Dialog open={openInviteForm} onClose={() => setOpenInviteForm(false)}>
            <DialogTitle>Invite User</DialogTitle>
            <DialogContent>
--- a/client/src/pages/constellation/dns.jsx
+++ b/client/src/pages/constellation/dns.jsx
@@ -5,7 +5,6 @@ import AddDeviceModal from "./addDevice";
 import PrettyTableView from "../../components/tableView/prettyTableView";
 import { DeleteButton } from "../../components/delete";
 import { CloudOutlined, CloudServerOutlined, CompassOutlined, DesktopOutlined, LaptopOutlined, MobileOutlined, TabletOutlined } from "@ant-design/icons";
-import IsLoggedIn from "../../isLoggedIn";
 import { Alert, Button, CircularProgress, InputLabel, Stack } from "@mui/material";
 import { CosmosCheckbox, CosmosFormDivider, CosmosInputText } from "../config/users/formShortcuts";
 import MainCard from "../../components/MainCard";
--- a/client/src/pages/constellation/index.jsx
+++ b/client/src/pages/constellation/index.jsx
@@ -6,7 +6,6 @@ import { RouteMode, RouteSecurity } from '../../components/routeComponents';
 import { getFaviconURL } from '../../utils/routes';
 import * as API from '../../api';
 import { CheckOutlined, ClockCircleOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, LockOutlined, UpOutlined } from "@ant-design/icons";
-import IsLoggedIn from '../../isLoggedIn';
 import PrettyTabbedView from '../../components/tabbedView/tabbedView';
 import { useClientInfos } from '../../utils/hooks';

@@ -18,8 +17,6 @@ const ConstellationIndex = () => {
  const isAdmin = role === "2";

  return isAdmin ? <div>
-    <IsLoggedIn />
-    
    <PrettyTabbedView path="/cosmos-ui/constellation/:tab" tabs={[
        {
          title: 'VPN',
--- a/client/src/pages/constellation/vpn.jsx
+++ b/client/src/pages/constellation/vpn.jsx
@@ -5,7 +5,6 @@ import AddDeviceModal from "./addDevice";
 import PrettyTableView from "../../components/tableView/prettyTableView";
 import { DeleteButton } from "../../components/delete";
 import { CloudOutlined, CloudServerOutlined, CompassOutlined, DesktopOutlined, LaptopOutlined, MobileOutlined, TabletOutlined } from "@ant-design/icons";
-import IsLoggedIn from "../../isLoggedIn";
 import { Alert, Button, CircularProgress, Stack } from "@mui/material";
 import { CosmosCheckbox, CosmosFormDivider, CosmosInputText } from "../config/users/formShortcuts";
 import MainCard from "../../components/MainCard";
--- a/client/src/pages/dashboard/AlertPage.jsx
+++ b/client/src/pages/dashboard/AlertPage.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import IsLoggedIn from '../../isLoggedIn';
 import * as API from '../../api';
 import MainCard from '../../components/MainCard';
 import { Formik, Field, useFormik, FormikProvider } from 'formik';
@@ -400,8 +399,6 @@ const AlertPage = () => {
  }

  return <div style={{maxWidth: '1200px', margin: ''}}>
-    <IsLoggedIn />
-
    {openModal && <EditAlertModal open={openModal} onClose={() => setOpenModal(false)} onSave={saveAlert} />}

    <Stack direction="row" spacing={2} style={{marginBottom: '15px'}}>
--- a/client/src/pages/dashboard/components/mini-plot.jsx
+++ b/client/src/pages/dashboard/components/mini-plot.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo  } from 'react';
+import React, { useEffect, useState, useMemo, lazy  } from 'react';
 import { useInView } from 'react-intersection-observer';

 // material-ui
@@ -25,7 +25,7 @@ import MainCard from '../../../components/MainCard';
 import { useTheme } from '@mui/material/styles';

 // third-party
-import ReactApexChart from 'react-apexcharts';
+const ReactApexChart = lazy(() => import('react-apexcharts'));
 import { FormaterForMetric, formatDate, toUTC } from './utils';

 import * as API from '../../../api';
--- a/client/src/pages/dashboard/components/plot.jsx
+++ b/client/src/pages/dashboard/components/plot.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { lazy, useEffect, useState } from 'react';
 // material-ui
 import {
  Avatar,
@@ -23,7 +23,7 @@ import MainCard from '../../../components/MainCard';
 import { useTheme } from '@mui/material/styles';

 // third-party
-import ReactApexChart from 'react-apexcharts';
+const ReactApexChart = lazy(() => import('react-apexcharts'));
 import { FormaterForMetric, toUTC } from './utils';


--- a/client/src/pages/dashboard/components/table.jsx
+++ b/client/src/pages/dashboard/components/table.jsx
@@ -34,10 +34,8 @@ import MainCard from '../../../components/MainCard';
 import { useTheme } from '@mui/material/styles';

 // third-party
-import ReactApexChart from 'react-apexcharts';
 import { object } from 'prop-types';
 import { FormaterForMetric } from './utils';
-import { set } from 'lodash';
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import PlotComponent from './plot';

--- a/client/src/pages/dashboard/containerMetrics.jsx
+++ b/client/src/pages/dashboard/containerMetrics.jsx
@@ -10,8 +10,6 @@ import {
    CircularProgress
 } from '@mui/material';

-import IsLoggedIn from '../../isLoggedIn';
-
 import * as API from '../../api';
 import PlotComponent from './components/plot';
 import { formatDate } from './components/utils';
@@ -93,7 +91,6 @@ const ContainerMetrics = ({containerName}) => {

    return (
        <>
-        <IsLoggedIn />
        {!metrics && <Box style={{
          width: '100%',
          height: '100%',
--- a/client/src/pages/dashboard/index.jsx
+++ b/client/src/pages/dashboard/index.jsx
@@ -13,8 +13,6 @@ import {
    CircularProgress
 } from '@mui/material';

-import IsLoggedIn from '../../isLoggedIn';
-
 import * as API from '../../api';
 import { formatDate } from './components/utils';
 import ResourceDashboard from './resourceDashboard';
@@ -118,7 +116,6 @@ const DashboardDefault = () => {

    return (
        <>
-        <IsLoggedIn />
        {!metrics && <Box style={{
          width: '100%',
          height: '100%',
--- a/client/src/pages/dashboard/routeMonitoring.jsx
+++ b/client/src/pages/dashboard/routeMonitoring.jsx
@@ -21,8 +21,6 @@ import {
    CircularProgress
 } from '@mui/material';

-import IsLoggedIn from '../../isLoggedIn';
-
 import * as API from '../../api';
 import AnimateButton from '../../components/@extended/AnimateButton';
 import PlotComponent from './components/plot';
@@ -144,7 +142,6 @@ const RouteMetrics = ({routeName}) => {

    return (
        <>
-        <IsLoggedIn />
        {!metrics && <Box style={{
          width: '100%',
          height: '100%',
--- a/client/src/pages/home/index.jsx
+++ b/client/src/pages/home/index.jsx
@@ -1,7 +1,7 @@
 import { useParams } from "react-router";
 import Back from "../../components/back";
 import { Alert, Box, CircularProgress, Grid, Stack, Typography, useMediaQuery, useTheme } from "@mui/material";
-import { useEffect, useState } from "react";
+import { lazy, useEffect, useState } from "react";
 import * as API from "../../api";
 import wallpaper from '../../assets/images/wallpaper2.jpg';
 import wallpaperLight from '../../assets/images/wallpaper2_light.jpg';
@@ -9,9 +9,8 @@ import Grid2 from "@mui/material/Unstable_Grid2/Grid2";
 import { getFaviconURL } from "../../utils/routes";
 import { Link } from "react-router-dom";
 import { getFullOrigin } from "../../utils/routes";
-import IsLoggedIn from "../../isLoggedIn";
 import { ServAppIcon } from "../../utils/servapp-icon";
-import Chart from 'react-apexcharts';
+const ReactApexChart = lazy(() => import('react-apexcharts'));
 import { useClientInfos } from "../../utils/hooks";
 import { FormaterForMetric, formatDate } from "../dashboard/components/utils";
 import MiniPlotComponent from "../dashboard/components/mini-plot";
@@ -277,7 +276,6 @@ const HomePage = () => {
    }

    return <Stack spacing={2} style={{maxWidth: '1450px', margin:'auto'}}>
-        <IsLoggedIn />
        <HomeBackground status={coStatus} />
        <TransparentHeader />

@@ -399,7 +397,7 @@ const HomePage = () => {
                                <div>{coStatus.AVX ? "AVX Supported" : "No AVX Support"}</div>
                                </Stack>
                                <div style={{height: '97px'}}>
-                                    <Chart
+                                    <ReactApexChart
                                        options={optionsRadial}
                                        // series={[parseInt(
                                        //     coStatus.resources.ram / (coStatus.resources.ram + coStatus.resources.ramFree) * 100
@@ -422,7 +420,7 @@ const HomePage = () => {
                                    <div>used: <strong>{latestRAM}</strong></div>
                                </Stack>
                                <div style={{height: '97px'}}>
-                                    <Chart
+                                    <ReactApexChart
                                        options={optionsRadial}
                                        // series={[parseInt(
                                        //     coStatus.resources.ram / (coStatus.resources.ram + coStatus.resources.ramFree) * 100
--- a/client/src/pages/market/sources.jsx
+++ b/client/src/pages/market/sources.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import IsLoggedIn from '../../isLoggedIn';
 import * as API from '../../api';
 import MainCard from '../../components/MainCard';
 import { Formik, Field, useFormik, FormikProvider } from 'formik';
--- a/client/src/pages/newInstall/newInstall.jsx
+++ b/client/src/pages/newInstall/newInstall.jsx
@@ -18,7 +18,6 @@ import LogsInModal from '../../components/logsInModal';
 import { CosmosCheckbox, CosmosInputPassword, CosmosInputText, CosmosSelect } from '../config/users/formShortcuts';
 import AnimateButton from '../../components/@extended/AnimateButton';
 import { Box } from '@mui/system';
-import { pull } from 'lodash';
 import { isDomain, redirectTo, redirectToLocal } from '../../utils/indexs';
 import { DnsChallengeComp } from '../../utils/dns-challenge-comp';
 // ================================|| LOGIN ||================================ //
--- a/client/src/pages/openid/openid-edit.jsx
+++ b/client/src/pages/openid/openid-edit.jsx
@@ -8,7 +8,6 @@ import Paper from '@mui/material/Paper';
 import { styled } from '@mui/material/styles';

 import * as API from '../../api';
-import IsLoggedIn from '../../isLoggedIn';
 import RestartModal from '../config/users/restart';
 import RouteManagement from '../config/routes/routeman';
 import { ValidateRoute, getFaviconURL, sanitizeRoute } from '../../utils/routes';
--- a/client/src/pages/openid/openid-list.jsx
+++ b/client/src/pages/openid/openid-list.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import IsLoggedIn from '../../isLoggedIn';
 import * as API from '../../api';
 import MainCard from '../../components/MainCard';
 import { Formik, Field } from 'formik';
@@ -27,7 +26,6 @@ import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
 import AnimateButton from '../../components/@extended/AnimateButton';
 import RestartModal from '../config/users/restart';
 import RouteManagement from '../config/routes/routeman';
-import { map } from 'lodash';
 import { getFaviconURL, sanitizeRoute, ValidateRoute } from '../../utils/routes';
 import PrettyTableView from '../../components/tableView/prettyTableView';
 import HostChip from '../../components/hostChip';
@@ -129,7 +127,6 @@ const OpenIdList = () => {
  let clients = config && (config.OpenIDClients || []);

  return <div style={{}}>
-    <IsLoggedIn />
    <Stack direction="row" spacing={1} style={{ marginBottom: '20px' }}>
      <Button variant="contained" color="primary" startIcon={<SyncOutlined />} onClick={() => {
        refresh();
--- a/client/src/pages/servapps/containers/docker-compose.jsx
+++ b/client/src/pages/servapps/containers/docker-compose.jsx
@@ -20,7 +20,6 @@ import Chip from '@mui/material/Chip';
 import IconButton from '@mui/material/IconButton';
 import * as API from '../../../api';
 import MainCard from '../../../components/MainCard';
-import IsLoggedIn from '../../../isLoggedIn';
 import { useEffect, useState } from 'react';
 import ResponsiveButton from '../../../components/responseiveButton';
 import UploadButtons from '../../../components/fileUpload';
@@ -35,7 +34,6 @@ import cmp from 'semver-compare';
 import { HostnameChecker, getHostnameFromName } from '../../../utils/routes';
 import { CosmosContainerPicker } from '../../config/users/containerPicker';
 import { randomString } from '../../../utils/indexs';
-import { has, set } from 'lodash';

 function checkIsOnline() {
  API.isOnline().then((res) => {
--- a/client/src/pages/servapps/containers/index.jsx
+++ b/client/src/pages/servapps/containers/index.jsx
@@ -7,7 +7,6 @@ import { RouteMode, RouteSecurity } from '../../../components/routeComponents';
 import { getFaviconURL } from '../../../utils/routes';
 import * as API from '../../../api';
 import { CheckOutlined, ClockCircleOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, LockOutlined, UpOutlined } from "@ant-design/icons";
-import IsLoggedIn from '../../../isLoggedIn';
 import PrettyTabbedView from '../../../components/tabbedView/tabbedView';
 import Back from '../../../components/back';
 import { useParams } from 'react-router';
@@ -49,7 +48,6 @@ const ContainerIndex = () => {
        <Back />
        <div>{containerName}</div>
      </Stack>
-      <IsLoggedIn />

      <PrettyTabbedView 
      isLoading={!container || !config}
--- a/client/src/pages/servapps/containers/newService.jsx
+++ b/client/src/pages/servapps/containers/newService.jsx
@@ -7,7 +7,6 @@ import { RouteMode, RouteSecurity } from '../../../components/routeComponents';
 import { getFaviconURL } from '../../../utils/routes';
 import * as API from '../../../api';
 import { AppstoreOutlined, ArrowUpOutlined, BulbTwoTone, CheckOutlined, ClockCircleOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, LockOutlined, PlusCircleOutlined, SyncOutlined, UpOutlined } from "@ant-design/icons";
-import IsLoggedIn from '../../../isLoggedIn';
 import PrettyTabbedView from '../../../components/tabbedView/tabbedView';
 import Back from '../../../components/back';
 import { useParams } from 'react-router';
--- a/client/src/pages/servapps/containers/newServiceForm.jsx
+++ b/client/src/pages/servapps/containers/newServiceForm.jsx
@@ -7,7 +7,6 @@ import { RouteMode, RouteSecurity } from '../../../components/routeComponents';
 import { getFaviconURL, getHostnameFromName } from '../../../utils/routes';
 import * as API from '../../../api';
 import { ArrowLeftOutlined, ArrowRightOutlined, CheckOutlined, ClockCircleOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, LockOutlined, UpOutlined } from "@ant-design/icons";
-import IsLoggedIn from '../../../isLoggedIn';
 import PrettyTabbedView from '../../../components/tabbedView/tabbedView';
 import Back from '../../../components/back';
 import { useParams } from 'react-router';
@@ -125,7 +124,6 @@ const NewDockerServiceForm = () => {
        <Back />
        <div>Start New Servapp</div>
      </Stack>
-      <IsLoggedIn />

      {<PrettyTabbedView
      currentTab={currentTab}
--- a/client/src/pages/servapps/index.jsx
+++ b/client/src/pages/servapps/index.jsx
@@ -7,7 +7,6 @@ import { RouteMode, RouteSecurity } from '../../components/routeComponents';
 import { getFaviconURL } from '../../utils/routes';
 import * as API from '../../api';
 import { CheckOutlined, ClockCircleOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, LockOutlined, UpOutlined } from "@ant-design/icons";
-import IsLoggedIn from '../../isLoggedIn';
 import PrettyTabbedView from '../../components/tabbedView/tabbedView';
 import ServApps from './servapps';
 import VolumeManagementList from './volumes';
@@ -18,8 +17,6 @@ const ServappsIndex = () => {
  const { stack } = useParams();

  return <div>
-    <IsLoggedIn />
-    
    {!stack && <PrettyTabbedView path="/cosmos-ui/servapps/:tab" tabs={[
        {
          title: 'Containers',
--- a/client/src/pages/servapps/servapps.jsx
+++ b/client/src/pages/servapps/servapps.jsx
@@ -8,7 +8,6 @@ import Paper from '@mui/material/Paper';
 import { styled } from '@mui/material/styles';

 import * as API from '../../api';
-import IsLoggedIn from '../../isLoggedIn';
 import RestartModal from '../config/users/restart';
 import RouteManagement from '../config/routes/routeman';
 import { ValidateRoute, getFaviconURL, sanitizeRoute, getContainersRoutes } from '../../utils/routes';
--- a/client/src/pages/servapps/volumes.jsx
+++ b/client/src/pages/servapps/volumes.jsx
@@ -8,7 +8,6 @@ import Paper from '@mui/material/Paper';
 import { styled } from '@mui/material/styles';

 import * as API from '../../api';
-import IsLoggedIn from '../../isLoggedIn';
 import RestartModal from '../config/users/restart';
 import RouteManagement from '../config/routes/routeman';
 import { ValidateRoute, getFaviconURL, sanitizeRoute } from '../../utils/routes';
--- a/client/src/routes/LoginRoutes.jsx
+++ b/client/src/routes/LoginRoutes.jsx
@@ -1,15 +1,15 @@
-import path from 'path';
 import { lazy } from 'react';

 // project import
 import Loadable from '../components/Loadable';
-import MinimalLayout from '../layout/MinimalLayout';
-import Logout from '../pages/authentication/Logoff';
-import NewInstall from '../pages/newInstall/newInstall';
+import { NewMFA, MFALogin } from '../pages/authentication/newMFA';

-import {NewMFA, MFALogin} from '../pages/authentication/newMFA';
-import ForgotPassword from '../pages/authentication/forgotPassword';
-import OpenID from '../pages/authentication/openid';
+const MinimalLayout = Loadable(lazy(() => import('../layout/MinimalLayout')));
+const Logout = Loadable(lazy(() => import('../pages/authentication/Logoff')));
+const NewInstall = Loadable(lazy(() => import('../pages/newInstall/newInstall')))
+
+const ForgotPassword = Loadable(lazy(() => import('../pages/authentication/forgotPassword')));
+const OpenID = Loadable(lazy(() => import('../pages/authentication/openid')));

 // render - login
 const AuthLogin = Loadable(lazy(() => import('../pages/authentication/Login')));
--- a/client/src/routes/MainRoutes.jsx
+++ b/client/src/routes/MainRoutes.jsx
@@ -3,20 +3,21 @@ import { lazy } from 'react';
 // project import
 import Loadable from '../components/Loadable';
 import MainLayout from '../layout/MainLayout';
-import UserManagement from '../pages/config/users/usermanagement';
-import ConfigManagement from '../pages/config/users/configman';
-import ProxyManagement from '../pages/config/users/proxyman';
-import ServAppsIndex from '../pages/servapps/';
-import { Navigate } from 'react-router';
-import RouteConfigPage from '../pages/config/routeConfigPage';
 import logo from '../assets/images/icons/cosmos.png';
-import HomePage from '../pages/home';
-import ContainerIndex from '../pages/servapps/containers';
-import NewDockerServiceForm from '../pages/servapps/containers/newServiceForm';
-import OpenIdList from '../pages/openid/openid-list';
-import MarketPage from '../pages/market/listing';
-import ConstellationIndex  from '../pages/constellation';
+import PrivateRoute from '../PrivateRoute';
+import { Navigate } from 'react-router';

+const UserManagement = Loadable(lazy(() => import('../pages/config/users/usermanagement')));
+const ConfigManagement = Loadable(lazy(() => import('../pages/config/users/configman')));
+const ProxyManagement = Loadable(lazy(() => import('../pages/config/users/proxyman')));
+const ServAppsIndex = Loadable(lazy(() => import('../pages/servapps/')));
+const RouteConfigPage = Loadable(lazy(() => import('../pages/config/routeConfigPage')));
+const HomePage = Loadable(lazy(() => import('../pages/home')));
+const ContainerIndex = Loadable(lazy(() => import('../pages/servapps/containers')));
+const NewDockerServiceForm = Loadable(lazy(() => import('../pages/servapps/containers/newServiceForm')));
+const OpenIdList = Loadable(lazy(() => import('../pages/openid/openid-list')));
+const MarketPage = Loadable(lazy(() => import('../pages/market/listing')));
+const ConstellationIndex = Loadable(lazy(() => import('../pages/constellation')));

 // render - dashboard
 const DashboardDefault = Loadable(lazy(() => import('../pages/dashboard')));
@@ -93,7 +94,10 @@ const MainRoutes = {
            path: '/cosmos-ui/market-listing/:appStore/:appName',
            element: <MarketPage />
        }
-    ]
+    ].map(children => ({
+        ...children,
+        element: PrivateRoute({ children: children.element })
+    }))
 };

 export default MainRoutes;
--- a/client/src/themes/overrides/index.jsx
+++ b/client/src/themes/overrides/index.jsx
@@ -1,5 +1,5 @@
 // third-party
-import { merge } from 'lodash';
+import merge from 'lodash.merge';

 // project import
 import Badge from './Badge';
--- a/client/src/utils/SyntaxHighlight.jsx
+++ b/client/src/utils/SyntaxHighlight.jsx
@@ -1,14 +1,17 @@
 import PropTypes from 'prop-types';

 // third-party
-import SyntaxHighlighter from 'react-syntax-highlighter';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
+
+SyntaxHighlighter.registerLanguage('javascript', js);

 // ==============================|| CODE HIGHLIGHTER ||============================== //

 export default function SyntaxHighlight({ children, ...others }) {
    return (
-        <SyntaxHighlighter language="javacript" showLineNumbers style={a11yDark} {...others}>
+        <SyntaxHighlighter language="javascript" showLineNumbers style={a11yDark} {...others}>
            {children}
        </SyntaxHighlighter>
    );
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,7 +33,9 @@
        "framer-motion": "^7.3.6",
        "history": "^5.3.0",
        "js-yaml": "^4.1.0",
-        "lodash": "^4.17.21",
+        "lodash.map": "^4.6.0",
+        "lodash.merge": "^4.6.2",
+        "lodash.pull": "^4.1.0",
        "prismjs": "^1.29.0",
        "prop-types": "^15.8.1",
        "qrcode": "^1.5.3",
@@ -72,6 +74,9 @@
      "devDependencies": {
        "@babel/core": "^7.19.1",
        "@babel/eslint-parser": "^7.19.1",
+        "@types/lodash.map": "^4.6.13",
+        "@types/lodash.merge": "^4.6.9",
+        "@types/lodash.pull": "^4.1.9",
        "eslint": "^8.23.1",
        "eslint-config-airbnb-typescript": "^17.0.0",
        "eslint-config-prettier": "^8.5.0",
@@ -3958,6 +3963,33 @@
      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.195.tgz",
      "integrity": "sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg=="
    },
+    "node_modules/@types/lodash.map": {
+      "version": "4.6.13",
+      "resolved": "https://registry.npmjs.org/@types/lodash.map/-/lodash.map-4.6.13.tgz",
+      "integrity": "sha512-kppRBzlpuvQQsr7R2nv/DDDZds8fglRFNAK70WUOkOC18KOcuQ22oQF9Kgy5Z2v/eDNkBm0ltrT6FThSkuWwow==",
+      "dev": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/lodash.merge": {
+      "version": "4.6.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.merge/-/lodash.merge-4.6.9.tgz",
+      "integrity": "sha512-23sHDPmzd59kUgWyKGiOMO2Qb9YtqRO/x4IhkgNUiPQ1+5MUVqi6bCZeq9nBJ17msjIMbEIO5u+XW4Kz6aGUhQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/lodash.pull": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.pull/-/lodash.pull-4.1.9.tgz",
+      "integrity": "sha512-lzOIBQMI0U4L/ZIMdqGyPU/7f+jwC2zbBvAmvtqT9hclYWescnYJQdTsdaXiGLeQam0J0J54j07CYwnhD3g2AQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
    "node_modules/@types/node": {
      "version": "20.2.5",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.5.tgz",
@@ -8121,6 +8153,11 @@
      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
    },
+    "node_modules/lodash.map": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
+      "integrity": "sha512-worNHGKLDetmcEYDvh2stPCrrQRkP20E4l0iIS7F8EvzMqBBi7ltvFN5m1HvTf1P7Jk1txKhvFcmYsCr8O2F1Q=="
+    },
    "node_modules/lodash.memoize": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -8129,8 +8166,12 @@
    "node_modules/lodash.merge": {
      "version": "4.6.2",
      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
+    },
+    "node_modules/lodash.pull": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.pull/-/lodash.pull-4.1.0.tgz",
+      "integrity": "sha512-EM7CVTzXfkTyusQdN7mgGPh2ZfkKfQ5lA9U+X7NNDeEgKEaO65dB5Kh8+Ppap0X1wQOndPjKP/VVTis7hFvkzg=="
    },
    "node_modules/lodash.throttle": {
      "version": "4.1.1",
--- a/package.json
+++ b/package.json
@@ -33,7 +33,9 @@
    "framer-motion": "^7.3.6",
    "history": "^5.3.0",
    "js-yaml": "^4.1.0",
-    "lodash": "^4.17.21",
+    "lodash.map": "^4.6.0",
+    "lodash.merge": "^4.6.2",
+    "lodash.pull": "^4.1.0",
    "prismjs": "^1.29.0",
    "prop-types": "^15.8.1",
    "qrcode": "^1.5.3",
@@ -113,6 +115,9 @@
  "devDependencies": {
    "@babel/core": "^7.19.1",
    "@babel/eslint-parser": "^7.19.1",
+    "@types/lodash.map": "^4.6.13",
+    "@types/lodash.merge": "^4.6.9",
+    "@types/lodash.pull": "^4.1.9",
    "eslint": "^8.23.1",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.5.0",