From 87c1636ff7e98e83c36cd27be5a2d56fb5d65bd6 Mon Sep 17 00:00:00 2001 From: Kawanaao <149584315+Kawanaao@users.noreply.github.com> Date: Sun, 4 Feb 2024 14:37:58 +0200 Subject: [PATCH] [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> --- .clabot | 2 +- client/index.html | 1 + client/src/PrivateRoute.jsx | 18 +++++++ client/src/api/authentication.jsx | 4 +- .../components/third-party/Highlighter.jsx | 4 +- client/src/isLoggedIn.jsx | 36 +++++++------- client/src/pages/authentication/openid.jsx | 2 - client/src/pages/config/routeConfigPage.jsx | 2 - client/src/pages/config/routes/newRoute.jsx | 1 - .../src/pages/config/routes/routeoverview.jsx | 1 - client/src/pages/config/users/configman.jsx | 3 -- client/src/pages/config/users/proxyman.jsx | 3 -- client/src/pages/config/users/restart.jsx | 1 - .../src/pages/config/users/usermanagement.jsx | 2 - client/src/pages/constellation/dns.jsx | 1 - client/src/pages/constellation/index.jsx | 3 -- client/src/pages/constellation/vpn.jsx | 1 - client/src/pages/dashboard/AlertPage.jsx | 3 -- .../pages/dashboard/components/mini-plot.jsx | 4 +- .../src/pages/dashboard/components/plot.jsx | 4 +- .../src/pages/dashboard/components/table.jsx | 2 - .../src/pages/dashboard/containerMetrics.jsx | 3 -- client/src/pages/dashboard/index.jsx | 3 -- .../src/pages/dashboard/routeMonitoring.jsx | 3 -- client/src/pages/home/index.jsx | 10 ++-- client/src/pages/market/sources.jsx | 1 - client/src/pages/newInstall/newInstall.jsx | 1 - client/src/pages/openid/openid-edit.jsx | 1 - client/src/pages/openid/openid-list.jsx | 3 -- .../servapps/containers/docker-compose.jsx | 2 - .../src/pages/servapps/containers/index.jsx | 2 - .../pages/servapps/containers/newService.jsx | 1 - .../servapps/containers/newServiceForm.jsx | 2 - client/src/pages/servapps/index.jsx | 3 -- client/src/pages/servapps/servapps.jsx | 1 - client/src/pages/servapps/volumes.jsx | 1 - client/src/routes/LoginRoutes.jsx | 14 +++--- client/src/routes/MainRoutes.jsx | 30 +++++++----- client/src/themes/overrides/index.jsx | 2 +- client/src/utils/SyntaxHighlight.jsx | 7 ++- package-lock.json | 47 +++++++++++++++++-- package.json | 7 ++- 42 files changed, 130 insertions(+), 112 deletions(-) create mode 100644 client/src/PrivateRoute.jsx diff --git a/.clabot b/.clabot index 67ec21f..dac8271 100644 --- 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." } diff --git a/client/index.html b/client/index.html index 354bddf..8726b1e 100644 --- a/client/index.html +++ b/client/index.html @@ -1,6 +1,7 @@ + Cosmos diff --git a/client/src/PrivateRoute.jsx b/client/src/PrivateRoute.jsx new file mode 100644 index 0000000..b087d11 --- /dev/null +++ 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 + + {authStatus => { + switch (authStatus) { + case "OK": return children + default: return + } + }} + + +} + +export default PrivateRoute diff --git a/client/src/api/authentication.jsx b/client/src/api/authentication.jsx index 36a1494..07bfb1d 100644 --- 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' diff --git a/client/src/components/third-party/Highlighter.jsx b/client/src/components/third-party/Highlighter.jsx index 410eddc..3d9679a 100644 --- 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'; diff --git a/client/src/isLoggedIn.jsx b/client/src/isLoggedIn.jsx index 29744c7..fb9f3d3 100644 --- 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; \ No newline at end of file +export default isLoggedIn; diff --git a/client/src/pages/authentication/openid.jsx b/client/src/pages/authentication/openid.jsx index 1756d34..898b4f1 100644 --- 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 ( - diff --git a/client/src/pages/config/routeConfigPage.jsx b/client/src/pages/config/routeConfigPage.jsx index 8eb21cb..0118cca 100644 --- 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
-

diff --git a/client/src/pages/config/routes/newRoute.jsx b/client/src/pages/config/routes/newRoute.jsx index 9fda288..8e62b3a 100644 --- 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'; diff --git a/client/src/pages/config/routes/routeoverview.jsx b/client/src/pages/config/routes/routeoverview.jsx index 4d04d90..f8fc312 100644 --- 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'; diff --git a/client/src/pages/config/users/configman.jsx b/client/src/pages/config/users/configman.jsx index a5b9372..9392901 100644 --- 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
- -