Merge staging into dev: resolved yarn.lock conflicts

Author: mildrette

craco.config.js

@@ -0,0 +1,42 @@
+module.exports = {
+  webpack: {
+    configure: (webpackConfig) => {
+      return webpackConfig;
+    },
+  },
+  devServer: (devServerConfig, { env, paths, proxy, allowedHost }) => {
+    // Create a new config object based on the old one
+    const newConfig = {
+      ...devServerConfig,
+    };
+
+    // Remove deprecated options that are not compatible with webpack-dev-server v5
+    delete newConfig.onBeforeSetupMiddleware;
+    delete newConfig.onAfterSetupMiddleware;
+    delete newConfig.https;
+
+    // Handle https option - it should be moved to server.type and server.options
+    if (devServerConfig.https) {
+      if (typeof devServerConfig.https === 'boolean' && devServerConfig.https) {
+        newConfig.server = 'https';
+      } else if (typeof devServerConfig.https === 'object') {
+        newConfig.server = {
+          type: 'https',
+          options: devServerConfig.https,
+        };
+      }
+    } else {
+      newConfig.server = 'http';
+    }
+
+    newConfig.setupMiddlewares = (middlewares, devServer) => {
+      if (!devServer) {
+        throw new Error('webpack-dev-server is not defined');
+      }
+
+      return middlewares;
+    };
+
+    return newConfig;
+  },
+};

package.json

@@ -43,9 +43,9 @@
 		"web-vitals": "^2.1.0"
 	},
 	"scripts": {
-		"start": "react-scripts start",
-		"build": "react-scripts build",
-		"test": "react-scripts test",
+		"start": "craco start",
+		"build": "craco build",
+		"test": "craco test",
 		"eject": "react-scripts eject",
 		"analyze": "source-map-explorer 'build/static/js/*.js'"
 	},
@@ -63,11 +63,22 @@
 	},
 	"devDependencies": {
 		"@babel/plugin-proposal-private-property-in-object": "^7.0.0",
+		"@craco/craco": "^7.1.0",
+		"baseline-browser-mapping": "^2.9.8",
 		"source-map-explorer": "^2.5.3",
 		"source-map-loader": "^5.0.0",
 		"webpack": "^5.94.0",
 		"webpack-cli": "^5.1.4",
 		"webpack-dev-server": "^5.2.3"
 	},
+	"resolutions": {
+		"nth-check": "^2.1.1",
+		"glob": "^11.0.0",
+		"webpack-dev-server": "^5.2.2",
+		"postcss": "^8.4.49",
+		"js-yaml": "^4.1.1",
+		"mdast-util-to-hast": "^13.2.1",
+		"node-forge": "^1.3.2"
+	},
 	"packageManager": "yarn@4.9.2+sha512.1fc009bc09d13cfd0e19efa44cbfc2b9cf6ca61482725eb35bbc5e257e093ebf4130db6dfe15d604ff4b79efd8e1e8e99b25fa7d0a6197c9f9826358d4d65c3c"
 }

src/Components/Navbar.js

@@ -63,12 +63,13 @@ const Navbar = () => {
 			subLinks: [
 				{
 					label: t("papers.whitepaper", "Whitepaper"),
-					href: "https://drive.google.com/drive/u/1/folders/1njL9EHV1-nh3oHW9a-2IMuNdSmUIMggC"
+					href: "https://drive.google.com/file/d/1MobJrt1HkyZa956sdN2a3ux3B1vzIQ3Z/view"
 				},
-				{
-					label: t("papers.threatModel", "Threat Model"),
-					href: "/files/threat-model.pdf"
-				}
+				   {
+        label: t("papers.threatModel", "Threat Model"),
+        href: "/threat-model",
+        comingSoon: true
+      }
 			]
 		}
 	];

src/Pages/ThreatModel.js

@@ -0,0 +1,74 @@
+import React from "react";
+import { Box, Typography, Paper } from "@mui/material";
+import ConstructionIcon from "@mui/icons-material/Construction";
+import Navbar from "../Components/Navbar";
+import { useTheme } from "../Context/ThemeContext";
+import { useTranslation } from "react-i18next";
+
+const ThreatModel = () => {
+  const { t, i18n } = useTranslation();
+  const isFarsi = i18n.language === "fa";
+  const { mode } = useTheme();
+
+  const backgroundColor = mode === "light" ? "#f0f7fa" : "#040424";
+  const paperBg = mode === "light" ? "#ffffff" : "#121246";
+  const textColor = mode === "light" ? "#000" : "#fff";
+  const secondaryTextColor = mode === "light" ? "#555" : "#ccc";
+
+  return (
+    <>
+      <Navbar />
+
+      <Box
+        sx={{
+          minHeight: "100vh",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: backgroundColor,
+          p: 2,
+          
+          direction: isFarsi ? "rtl" : "ltr",
+        }}
+      >
+        <Paper
+          elevation={8}
+          sx={{
+            p: 4,
+            borderRadius: 5,
+            textAlign: "center",
+            maxWidth: 800,
+            width: "100%",
+            bgcolor: paperBg,
+            color: textColor,
+          }}
+        >
+          <ConstructionIcon
+            sx={{
+              fontSize: 60,
+              color: "#ff6a14",
+              mb: 2,
+            }}
+          />
+          <Typography variant="h3" gutterBottom sx={{ fontWeight: 600 }}>
+            {t("ThreatModelHeader", "Threat Model")}
+          </Typography>
+          <Typography variant="h6" gutterBottom sx={{ color: secondaryTextColor }}>
+            {t(
+              "ThreatModelComingSoon",
+              "This page is coming soon! Stay tuned for updates."
+            )}
+          </Typography>
+          <Typography variant="body2" sx={{ color: secondaryTextColor }}>
+            {t(
+              "ThreatModelDescription",
+              "We are working hard to bring you the detailed threat model."
+            )}
+          </Typography>
+        </Paper>
+      </Box>
+    </>
+  );
+};
+
+export default ThreatModel;