diff --git a/client/src/components/HeaderBar/HeaderBar.tsx b/client/src/components/HeaderBar/HeaderBar.tsx index f779ce6..8613960 100644 --- a/client/src/components/HeaderBar/HeaderBar.tsx +++ b/client/src/components/HeaderBar/HeaderBar.tsx @@ -2,7 +2,6 @@ import { Box, Stack } from "@mui/material"; import { WindowButtons } from "./WindowButtons"; import { NavigationButtons } from "./NavigationButtons"; import { RouteDisplay } from "./RouteDisplay"; -import { Testing } from "../Testing/Testing"; import { ServerStatus } from "./ServerStatus"; export const HeaderBar = () => { @@ -73,7 +72,6 @@ export const HeaderBar = () => { }} > - diff --git a/client/src/components/HeaderBar/ServerStatus.tsx b/client/src/components/HeaderBar/ServerStatus.tsx index c0f003a..21f2400 100644 --- a/client/src/components/HeaderBar/ServerStatus.tsx +++ b/client/src/components/HeaderBar/ServerStatus.tsx @@ -1,7 +1,7 @@ import { Box, Button, Chip, CircularProgress, Popover, Stack } from "@mui/material"; import { fetch } from "@tauri-apps/plugin-http"; import { useAtom } from "jotai"; -import { MouseEvent, useEffect, useState } from "react"; +import { MouseEvent, useCallback, useEffect, useState } from "react"; import { serverConnectionAtom, serverUrlAtom } from "../../lib/jotai"; import { defaultSettings } from "../../lib/settings"; import { ServerUrlInput } from "./ServerUrlInput"; @@ -24,7 +24,7 @@ export const ServerStatus = () => { }; // function to check server health - const checkServerConnection = async () => { + const checkServerConnection = useCallback(async () => { setServerConnection("connecting"); // remove trailing slash @@ -42,7 +42,7 @@ export const ServerStatus = () => { await sleep(500); setServerConnection("disconnected"); } - }; + }, [serverUrl, setServerConnection, setServerUrl]); const chipProps = { color: serverConnection === "connected" ? "success" : serverConnection === "disconnected" ? "error" : "warning", @@ -64,7 +64,7 @@ export const ServerStatus = () => { clearInterval(intervalId); }; } - }, [serverConnection, serverUrl]); + }, [checkServerConnection, serverConnection, serverUrl]); return ( = ({ children }) => { + return ( + + > + + {children} + + + ); +}; diff --git a/client/src/components/Pages/SqlInjection/SqlInjection.tsx b/client/src/components/Pages/SqlInjection/SqlInjection.tsx index ba37cc3..a179ca0 100644 --- a/client/src/components/Pages/SqlInjection/SqlInjection.tsx +++ b/client/src/components/Pages/SqlInjection/SqlInjection.tsx @@ -3,13 +3,14 @@ import { Box, Divider, Tab, useTheme } from "@mui/material"; import { useState } from "react"; import { SqlInjectionLogin } from "./SqlInjectionLogin"; import { SqlInjectionRegister } from "./SqlInjectionRegister"; +import { SqlInjectionSetup } from "./SqlInjectionSetup"; export const SqlInjection = () => { // contexts const theme = useTheme(); // states - const [subTabValue, setSubTabValue] = useState("register"); + const [subTabValue, setSubTabValue] = useState("setup"); // logic for switching tabs const subTabChangeEvent = (newTabValue: string) => { @@ -37,7 +38,7 @@ export const SqlInjection = () => { > { + onChange={(_, value) => { subTabChangeEvent(value); }} scrollButtons={true} @@ -46,6 +47,10 @@ export const SqlInjection = () => { }} variant="standard" > + { width: "100%", }} > + + + { + // contexts + const { openNotification } = useNotification(); + + // atoms + const [serverUrl, setServerUrl] = useAtom(serverUrlAtom); + + // states + const [logs, setLogs] = useState([]); + const [loading, setLoading] = useState(false); + + const setupClickEvent = async () => { + setLoading(true); + + try { + const response = await fetch(serverUrl + "/nuke-db", { + method: "POST", + }); + const responseText = await response.text(); + if (!response.ok) { + openNotification("Nuke failed: " + responseText); + } else { + openNotification("Nuke successful"); + } + + setLogs((prevLogs) => [...prevLogs.slice(-5), responseText]); + + const response2 = await fetch(serverUrl + "/setup-demo-db", { + method: "POST", + }); + const responseText2 = await response2.text(); + if (!response.ok) { + openNotification("Setup demo DB failed: " + responseText2); + } else { + openNotification("Demo database setup successful"); + } + + setLogs((prevLogs) => [...prevLogs.slice(-5), responseText2]); + } catch (e) { + // log the error and handle failure + console.log("Request failed", e); + } finally { + // stop loading indicator regardless of success/failure + setLoading(false); + } + }; + + return ( + <> + + + +  Setup + + + + + Click on the 'Setup/reset DB' button below to initialize or reset your database. + + + If you get an error, make sure you have set the correct server URL (check the chip at the top right). + + + Demo email:{" "} + + asdf@gmail.com + + + + Demo password:{" "} + + asdf + + + + Setup/reset DB + + {logs.map((log, index) => ( + {log} + ))} + + + ); +}; diff --git a/client/src/components/Pages/Xss/Xss.tsx b/client/src/components/Pages/Xss/Xss.tsx deleted file mode 100644 index 7025b48..0000000 --- a/client/src/components/Pages/Xss/Xss.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Box } from "@mui/material"; - -export const Xss = () => { - return ( - -

XSS

-

Cross-site scripting (XSS) is a type of security vulnerability

- - ); -}; diff --git a/client/src/components/Testing/Testing.tsx b/client/src/components/Testing/Testing.tsx deleted file mode 100644 index 8b57a86..0000000 --- a/client/src/components/Testing/Testing.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { BugReportOutlined } from "@mui/icons-material"; -import { Box, Button, IconButton, useTheme } from "@mui/material"; -import { fetch } from "@tauri-apps/plugin-http"; -import { useAtom } from "jotai"; -import { useState } from "react"; -import { serverUrlAtom } from "../../lib/jotai"; -import { defaultSettings } from "../../lib/settings"; -import { FloatingDialog } from "../Generic/FloatingDialog"; - -export const Testing = () => { - // contexts - const theme = useTheme(); - - // atoms - const [serverUrl, setServerUrl] = useAtom(serverUrlAtom); - - // states - const [openState, setOpenState] = useState(false); - const [maximisedState, setMaximisedState] = useState(false); - - // functions - const close = () => setOpenState(false); - - const testing = () => { - fetch(serverUrl + "/nuke-db").then((response) => { - console.log(response); - }); - fetch(serverUrl + "/setup-demo-db").then((response) => { - console.log(response); - }); - }; - - return ( - - - - - - } - close={close} - maximisedState={maximisedState} - openButton={ - setOpenState(true)} - size="small" - > - - - } - openState={openState} - setMaximisedState={setMaximisedState} - title="Testing" - /> - ); -};