setup postgres backend

README

@@ -14,3 +14,17 @@
 10. sever side request forgery
 11. broken authentication and session management
 12. clickjacking
+
+## backend
+
+backend-for-frontend server
+
+!remember to set the environment variables
+!include this in the setup instructions
+!should we use a .env file and let the user set the variables?
+
+PGHOST=localhost
+PGPORT=5432
+PGDATABASE=asdfdb
+PGUSER=asdfuser
+PGPASSWORD=asdfpassword

client/package.json

@@ -18,8 +18,11 @@
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
     "@tauri-apps/api": "^2.1.0",
+    "@types/pg": "^8.11.10",
+    "dotenv": "^16.4.5",
     "jotai": "^2.10.1",
     "next": "^15.0.3",
+    "pg": "^8.13.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

client/src/components/Generic/Layout.tsx

@@ -3,7 +3,6 @@ import {
   Button,
   Container,
   Grid2,
-  Input,
   Switch,
   TextField,
   Typography,
@@ -12,7 +11,6 @@ import {
 
 import { HeaderBar } from "../HeaderBar/HeaderBar";
 import { AttackItem } from "../Home/AttackItem";
-import Link from "next/link";
 
 export const Layout = () => {
   // contexts
@@ -78,7 +76,11 @@ export const Layout = () => {
             debounce when typing
             update textfield color based on the response
             */}
-            <TextField fullWidth label="Paste your backend URL here" />
+            <TextField
+              fullWidth
+              label="Paste your backend URL here"
+              value={process.env.PGHOST}
+            />
           </Box>
           <Button href="https://github.com/cspj-nyp/cspj-application">
             Need help getting started?

client/src/components/HeaderBar/HeaderBar.tsx

@@ -2,6 +2,7 @@ import { Box, Stack } from "@mui/material";
 import { WindowButtons } from "./WindowButtons";
 import { NavigationButtons } from "./NavigationButtons";
 import { RouteDisplay } from "./RouteDisplay";
+import { Testing } from "../Testing/Testing";
 
 export const HeaderBar = () => {
   return (
@@ -70,6 +71,7 @@ export const HeaderBar = () => {
             flexDirection: "row",
           }}
         >
+          <Testing />
           <WindowButtons />
         </Stack>
       </Box>

client/src/components/Testing/Testing.tsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { FloatingDialog } from "../Generic/FloatingDialog";
+import { Button } from "@mui/material";
+
+export const Testing = () => {
+  // states
+  const [openState, setOpenState] = useState(false);
+  const [maximisedState, setMaximisedState] = useState(false);
+
+  // functions
+  const close = () => setOpenState(false);
+
+  return (
+    <FloatingDialog
+      body={<div>Test</div>}
+      close={close}
+      maximisedState={maximisedState}
+      openButton={<Button onClick={() => setOpenState(true)}>open</Button>}
+      openState={openState}
+      setMaximisedState={setMaximisedState}
+      title="Testing"
+    />
+  );
+};

client/src/lib/postgresql.ts

@@ -0,0 +1,17 @@
+import { Client } from "pg";
+import "dotenv/config";
+
+console.log("PGHOST:", process.env.PGHOST);
+
+export const pgClient = new Client({
+  host: "localhost",
+  port: 5432,
+  user: "asdfuser",
+  password: "asdfpassword",
+  database: "asdfdb",
+});
+
+pgClient
+  .connect()
+  .then(() => console.log("Connected to PostgreSQL"))
+  .catch((err) => console.error("Error connecting to PostgreSQL", err));

docker/docker-compose.yml

@@ -0,0 +1,14 @@
+services:
+  postgres:
+    image: postgres:latest
+    container_name: postgres_db
+    environment:
+      POSTGRES_USER: asdfuser
+      POSTGRES_PASSWORD: asdfpassword
+      POSTGRES_DB: asdfdb
+    ports:
+      - "5432:5432"
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+volumes:
+  postgres_data: