New UI for BeSLighthouse (#464)

* Adding landing page
Be-Secure · Nov 13, 2023 · 599a185 · 599a185
1 parent 9246150
commit 599a185
Show file tree

Hide file tree

Showing 218 changed files with 24,912 additions and 42,444 deletions.
diff --git a/.github/workflows/ci-workflow.yml b/.github/workflows/ci-workflow.yml
@@ -18,7 +18,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [macos-latest, windows-latest, ubuntu-latest]
+        os: [macos-latest, ubuntu-latest]
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -15,16 +15,22 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - name: Use Node 16.x
+      - name: Use Node 18.x
         uses: actions/setup-node@v1
         with:
-          node-version: 16.11.0
-
+          node-version: 18.18.2
+
+      - name: set env
+        run: |
+          export NODE_OPTIONS=--openssl-legacy-provider
+
       - name: install dependency
         run: npm install --force
 
       - name: Run Build
-        run: npm run build
+        run: |
+          export NODE_OPTIONS=--openssl-legacy-provider
+          npm run build
       
       - name: Deploy to GitHub Pages
         uses: JamesIves/[email protected]
@@ -40,7 +46,6 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
-
       - name: Create Release
         id: create_release
         uses: actions/create-release@v1

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,28 +4,32 @@
   "homepage": "https://be-secure.github.io/BeSLighthouse/",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
+    "@emotion/react": "11.10.6",
+    "@emotion/styled": "11.10.6",
     "@iconify/react": "^4.1.1",
-    "@mui/material": "^5.13.6",
-    "@mui/styles": "^5.13.2",
+    "@mui/icons-material": "5.11.16",
+    "@mui/material": "5.12.0",
+    "@mui/styled-engine": "5.12.0",
+    "@mui/styles": "^5.14.17",
     "apexcharts": "^3.37.0",
+    "chroma-js": "^2.4.2",
     "classnames": "^2.3.2",
     "gh-pages": "^5.0.0",
     "lodash": "^4.17.21",
-    "react": "^17.0.1",
+    "numeral": "^2.0.6",
+    "react": "18.2.0",
     "react-apexcharts": "^1.4.0",
-    "react-dom": "^17.0.1",
+    "react-countup": "^6.5.0",
+    "react-dom": "18.2.0",
     "react-popper": "^1.0.0-beta.6",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
+    "react-router-dom": "6.10.0",
+    "react-scripts": "^3.0.1",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4",
-    "numeral": "^2.0.6"
+    "web-vitals": "3.3.1"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build && cp build/index.html build/404.html",
+    "build": "CI=false && react-scripts build && cp build/index.html build/404.html",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build",
     "test": "react-scripts test",
@@ -51,12 +55,11 @@
   },
   "devDependencies": {
     "@testing-library/react": "^14.0.0",
+    "@types/chroma-js": "^2.4.3",
     "@types/jest": "^27.5.2",
     "@types/lodash": "^4.14.195",
     "@types/node": "^16.18.36",
     "@types/numeral": "^2.0.2",
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.1",
-    "@types/react-router-dom": "^5.2.0"
+    "@types/react-dom": "^18.2.15"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -1,22 +1,40 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="icon" href="%PUBLIC_URL%/favicon.png" type="image/x-icon">
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#1A73E8" />
+    <link
+      rel="apple-touch-icon"
+      sizes="76x76"
+      href="%PUBLIC_URL%/apple-icon.png"
+    />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>BeSLighthouse</title>
-  </head>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
+      rel="stylesheet"
+    />
+    <script
+      src="https://kit.fontawesome.com/42d5adcbca.js"
+      crossorigin="anonymous"
+    ></script>
 
+    <!-- Nepcha Analytics (nepcha.com) -->
+    <!-- Nepcha is a easy-to-use web analytics. No cookies and fully compliant with GDPR, CCPA and PECR. -->
+    <script
+      defer
+      data-site="YOUR_DOMAIN_HERE"
+      src="https://api.nepcha.com/js/nepcha-analytics.js"
+    ></script>
+  </head>
   <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-
-    <span id="root"></span>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
   </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,41 +1,59 @@
 import * as React from "react";
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
-import HomePage from "./HomePage";
+// react-router components
+import { Routes, Route, Navigate, useLocation } from "react-router-dom";
 
-import "./Tabler.css"
-import ProjectOfInterest from "./ProjectOfInterest";
-import BesAssessmentReport from "./BesAssessmentReport";
-import VulnerabilityOfInterest from "./VulnerabilityOfInterest";
-import ShowVulnerabilityDetails from "./report/vulnerability/ShowVulnerabilityDetails";
-import BeSVersionHistory from "./BesVersionHistory";
+// @mui material components
+import { ThemeProvider } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+
+import theme from "./assets/theme";
+import Presentation from "./layouts/pages/presentation";
+import routes from "./routes";
+import BesVersionHistory from "./layouts/pages/besVersionHistory";
+import BesAssessmentReport from "./layouts/pages/besAssessmentReport";
+import ShowVulnerabilityDetailsPage from "./layouts/pages/vulnerabilityDetails";
 
 function App() {
-  return (
-    <React.StrictMode>
-      <Router>
-        <Switch>
-          <Route exact path="/BeSLighthouse" component={HomePage} />
-          <Route exact path="/BeSLighthouse/POI" component={ProjectOfInterest} />
-          <Route exact path="/BeSLighthouse/VOI" component={VulnerabilityOfInterest} />
-          <Route
-            exact
-            path="/BeSLighthouse/bes_version_history/:besId/:besName"
-            component={BeSVersionHistory}
-          />
-          <Route
-            exact
-            path="/BeSLighthouse/vulnerability_report/:cveId"
-            component={ShowVulnerabilityDetails}
-          />
+  const { pathname } = useLocation();
+
+  // Setting page scroll to 0 when changing the route
+  React.useEffect(() => {
+    document.documentElement.scrollTop = 0;
+    // document.scrollingElement.scrollTop = 0;
+  }, [pathname]);
+
+  const getRoutes = (allRoutes: any) =>
+    allRoutes.map((route: any) => {
+      if (route.collapse) {
+        return getRoutes(route.collapse);
+      }
+
+      if (route.route) {
+        return (
           <Route
-            exact
-            path="/BeSLighthouse/bes_assessment_report/:besName/:besVersion/:besReport"
-            component={BesAssessmentReport}
+            path={route.route}
+            element={route.component}
+            key={route.key}
           />
-        </Switch>
-      </Router>
-    </React.StrictMode>
+        );
+      }
+
+      return null;
+    });
+
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Routes>
+        {getRoutes(routes)}
+        <Route path="*" element={<Navigate to="/BeSLighthouse" />} />
+        <Route path="/BeSLighthouse" element={<Presentation />} />
+        <Route path="/BeSLighthouse/Project-Of-Interest/bes_version_history/:besId/:besName" element={<BesVersionHistory />} />
+        <Route path="/BeSLighthouse/bes_assessment_report/:besName/:besVersion/:besReport" element={<BesAssessmentReport />} />
+        <Route path="/BeSLighthouse/vulnerability_report/:cveId" element={<ShowVulnerabilityDetailsPage />} />
+      </Routes>
+    </ThemeProvider>
   );
 }
 

diff --git a/src/BesAssessmentReport.tsx b/src/BesAssessmentReport.tsx