added wg-easy

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "wg-easy-ca-lose"]
+	path = wg-easy-ca-lose
+	url = https://git.the1s.de/theis.gaedigk/wg-easy-ca-lose.git

backend/routes/default/frontend.data.js

@@ -28,6 +28,9 @@ export const confirmUser = async (username) => {
   ]);
 
   if (rows.length > 0) {
+    const { first_name, last_name } = rows[0];
+    const fullname = first_name + " " + last_name;
+
     // creating userTicketTable
     const d = new Date();
 
@@ -37,8 +40,6 @@ export const confirmUser = async (username) => {
     const date = `${day}_${month}_${year}`;
     const tableName = `${username}_${date}`;
 
-    console.log(tableName);
-
     const [createTable] = await pool.query(
       `CREATE TABLE IF NOT EXISTS ?? (
         id INT AUTO_INCREMENT PRIMARY KEY,
@@ -70,9 +71,9 @@ export const confirmUser = async (username) => {
         nextID = rows.length > 0 ? rows[0].id + 1 : 1;
       };
       await getNextID();
-      return { success: true, nextID, tableName };
+      return { success: true, nextID, tableName, fullname };
     } else {
-      return { success: false, message: "Table creation failed" };
+      return { success: false, message: "Table creation failed", fullname };
     }
   } else {
     return null;

backend/routes/default/frontend.route.js

@@ -11,8 +11,6 @@ router.post("/new-entry", async (req, res) => {
   if (!result.success) {
     return res.status(500).json({ message: "Form Data Invalid" });
   }
-  console.log(req.body);
-  console.log(username);
   res.sendStatus(204);
 });
 

frontend/package-lock.json

@@ -16,8 +16,10 @@
         "@mui/joy": "^5.0.0-beta.52",
         "@mui/material": "^9.0.1",
         "@tailwindcss/vite": "^4.3.0",
+        "@tanstack/react-query": "^5.100.10",
         "i18next": "^26.0.10",
         "js-cookie": "^3.0.5",
+        "k6": "^0.0.0",
         "lucide-react": "^1.14.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -1766,6 +1768,32 @@
         "vite": "^5.2.0 || ^6 || ^7 || ^8"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.100.10",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.100.10.tgz",
+      "integrity": "sha512-8UR0yJR+GiQ40m3lPhUr0xbfAupe6GSQiksSBSa9SM2NjezFyxXCIA69/lz8cSoNKZLrw1/PktIyQBJcVeMi3w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.100.10",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.100.10.tgz",
+      "integrity": "sha512-FLaZf2RCrA/Zgp4aiu5tG3TyasTRO7aZ99skxQpr3Hg/zXOhu6yq5FZCYQ/tRaJtM9ylnoK8tFK7PolXQadv6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.100.10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.2",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
@@ -3042,6 +3070,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/k6": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/k6/-/k6-0.0.0.tgz",
+      "integrity": "sha512-GAQSWayS2+LjbH5bkRi+pMPYyP1JSp7o+4j58ANZ762N/RH/SdlAT3CHHztnn8s/xgg8kYNM24Gd2IPo9b5W+g==",
+      "license": "AGPL-3.0"
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -4178,23 +4212,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/yaml": {
-      "version": "2.8.4",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.4.tgz",
-      "integrity": "sha512-ml/JPOj9fOQK8RNnWojA67GbZ0ApXAUlN2UQclwv2eVgTgn7O9gg9o7paZWKMp4g0H3nTLtS9LVzhkpOFIKzog==",
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/eemeli"
-      }
-    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

frontend/package.json

@@ -18,8 +18,10 @@
     "@mui/joy": "^5.0.0-beta.52",
     "@mui/material": "^9.0.1",
     "@tailwindcss/vite": "^4.3.0",
+    "@tanstack/react-query": "^5.100.10",
     "i18next": "^26.0.10",
     "js-cookie": "^3.0.5",
+    "k6": "^0.0.0",
     "lucide-react": "^1.14.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",

frontend/src/components/modals/QR-CodeModal.tsx

@@ -0,0 +1,31 @@
+import { Modal, ModalDialog, Typography, ModalClose } from "@mui/joy";
+import { useTranslation } from "react-i18next";
+import qrCode from "../../assets/PayPal-QR-Code.png";
+
+interface QRcodeModalProps {
+  QRmodal: boolean;
+  setQRmodal: (value: boolean) => void;
+}
+
+export const QRcodeModal = (props: QRcodeModalProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Modal open={props.QRmodal}>
+      <ModalDialog color="primary" layout="center" size="lg">
+        <ModalClose onClick={() => props.setQRmodal(false)} />
+        <Typography>{t("qr-text")}</Typography>
+        <img
+          src={qrCode}
+          alt="PayPal QR Code"
+          style={{
+            width: "100%",
+            height: "auto",
+            maxHeight: "70vh",
+            objectFit: "contain",
+          }}
+        />
+      </ModalDialog>
+    </Modal>
+  );
+};

frontend/src/components/modals/SelectUserModal.tsx

@@ -0,0 +1,40 @@
+import {
+  Modal,
+  ModalDialog,
+  Typography,
+  ModalClose,
+  Autocomplete,
+} from "@mui/joy";
+import { useTranslation } from "react-i18next";
+
+interface SelectUserModalProps {
+  showSelectUser: boolean;
+  setShowSelectUser: (value: boolean) => void;
+  usernameData: { users: string[] };
+  usernameDataIsLoading: boolean;
+  selectedUser: string | null;
+  handleUserSelection: (value: string | null) => void;
+}
+
+export const SelectUserModal = (props: SelectUserModalProps) => {
+  const { t } = useTranslation();
+  return (
+    <Modal open={props.showSelectUser}>
+      <ModalDialog color="primary" layout="center" size="lg">
+        <ModalClose onClick={() => props.setShowSelectUser(false)} />
+        <Typography>{t("user")}</Typography>
+        {/* User selection */}
+        <Autocomplete
+          options={props.usernameData?.users ?? []}
+          loading={props.usernameDataIsLoading}
+          loadingText={t("loading")}
+          value={props.selectedUser}
+          onChange={(_, value) => props.handleUserSelection(value)}
+          placeholder={t("user")}
+          variant="soft"
+          sx={{ borderRadius: "10px" }}
+        />
+      </ModalDialog>
+    </Modal>
+  );
+};

frontend/src/main.tsx

@@ -3,9 +3,14 @@ import { createRoot } from "react-dom/client";
 import "./utils/i18n/index.ts";
 import "./index.css";
 import App from "./App.tsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
   </StrictMode>,
 );

frontend/src/pages/MainForm.tsx

@@ -13,19 +13,18 @@ import {
   Typography,
   FormControl,
   FormLabel,
-  Autocomplete,
   ButtonGroup,
-  Modal,
+  CircularProgress,
-  ModalDialog,
-  ModalClose,
 } from "@mui/joy";
-import { submitFormData } from "../utils/sender";
+import { submitFormData } from "../utils/api/form";
-import { API_BASE } from "../config/api.config";
 import type { FormData, Message } from "../config/interfaces.config";
 import PersonIcon from "@mui/icons-material/Person";
 import QrCodeIcon from "@mui/icons-material/QrCode";
 import TranslateIcon from "@mui/icons-material/Translate";
-import qrCode from "../assets/PayPal-QR-Code.png";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { confirmUser, fetchUsers } from "../utils/api/users";
+import { QRcodeModal } from "../components/modals/QR-CodeModal";
+import { SelectUserModal } from "../components/modals/SelectUserModal";
 
 const PAYMENT_METHODS = ["bar", "paypal", "andere"] as const;
 const PAYMENT_LABELS: Record<string, string> = {
@@ -82,12 +81,10 @@ const Field = ({
 
 export const MainForm = () => {
   const { t, i18n } = useTranslation();
+  const queryClient = useQueryClient();
 
   const [invoice, setInvoice] = useState(false);
   const [msg, setMsg] = useState<Message | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [nextID, setNextID] = useState<number | null>(null);
-  const [users, setUsers] = useState<string[]>([]);
   const [selectedUser, setSelectedUser] = useState<string | null>(null);
   const [formData, setFormData] = useState<FormData>(DEFAULT_FORM);
   const [showSelectUser, setShowSelectUser] = useState(false);
@@ -97,23 +94,55 @@ export const MainForm = () => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
 
-  const confirmUser = async (username: string) => {
+  useEffect(() => {
-    try {
+    const savedUser = Cookies.get("selectedUser");
-      const res = await fetch(
+    if (savedUser) {
-        `${API_BASE}/default/confirm-user?username=${username}`,
+      setSelectedUser(savedUser);
-      );
+    } else {
-      const data = await res.json();
+      setMsg({
-      setNextID(data.nextID);
+        type: "warning",
-    } catch (error) {
+        headline: t("set-username-headline"),
-      console.error("Error confirming user:", error);
+        text: t("set-username-text"),
+      });
     }
-  };
+  }, []);
+
+  const { data: usernameData, isLoading: usernameDataIsLoading } = useQuery({
+    queryKey: ["users"],
+    queryFn: fetchUsers,
+  });
+
+  const { data: userData } = useQuery({
+    queryKey: ["user", selectedUser],
+    enabled: !!selectedUser,
+    queryFn: () => confirmUser(selectedUser),
+  });
+
+  const { mutate: mutateForm, isPending: mutateFormIsPending } = useMutation({
+    mutationFn: () => submitFormData(formData, selectedUser),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["user", selectedUser] });
+      document.location.href = `/success?id=${nextID}&tickets=${formData.tickets}`;
+    },
+    onError: () => {
+      queryClient.invalidateQueries({ queryKey: ["user", selectedUser] });
+      setMsg({
+        type: "danger",
+        headline: t("error"),
+        text: t("form-submission-failed"),
+      });
+    },
+  });
+
+  // Setting the nextID after a user is selected
+  const nextID = userData?.nextID ?? "N/A";
 
   const handleUserSelection = (username: string | null) => {
-    if (!username) return;
+    if (username == null || username == "") {
+      return;
+    }
+
     setSelectedUser(username);
-    confirmUser(username);
-    Cookies.set("selectedUser", username);
   };
 
   const changeTranslation = () => {
@@ -134,91 +163,21 @@ export const MainForm = () => {
     }
   };
 
-  useEffect(() => {
-    if (formData.paymentMethod === "paypal") {
-      setQRmodal(true);
-    }
-  }, [formData.paymentMethod]);
-
-  useEffect(() => {
-    (async () => {
-      try {
-        const res = await fetch(`${API_BASE}/default/users`);
-        const data = await res.json();
-        setUsers(data.users);
-      } catch {
-        setMsg({
-          type: "danger",
-          headline: t("error"),
-          text: t("failed-to-load-users"),
-        });
-      }
-    })();
-
-    const cookieUser = Cookies.get("selectedUser");
-    if (cookieUser) {
-      setSelectedUser(cookieUser);
-      confirmUser(cookieUser);
-    }
-  }, []);
-
-  const handleSubmit = async () => {
-    setIsLoading(true);
-    try {
-      const result = await submitFormData(formData, selectedUser || "");
-      if (result.success) {
-        document.location.href = `/success?id=${nextID}&tickets=${formData.tickets}`;
-      } else {
-        setMsg({
-          type: "danger",
-          headline: t("error"),
-          text: result.error || t("form-submission-failed"),
-        });
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
   // Shorthand so we don't repeat formData + onChange on every Field usage
   const fieldProps = { formData, onChange: handleChange };
 
   return (
     <>
-      <Modal open={showSelectUser}>
+      <SelectUserModal
-        <ModalDialog color="primary" layout="center" size="lg">
+        showSelectUser={showSelectUser}
-          <ModalClose onClick={() => setShowSelectUser(false)} />
+        setShowSelectUser={setShowSelectUser}
-          <Typography>{t("user")}</Typography>
+        usernameData={usernameData}
-          {/* User selection */}
+        usernameDataIsLoading={usernameDataIsLoading}
-          <Autocomplete
+        selectedUser={selectedUser}
-            options={users}
+        handleUserSelection={handleUserSelection}
-            value={selectedUser}
+      />
-            onChange={(_, value) => handleUserSelection(value)}
+
-            placeholder={t("user")}
+      <QRcodeModal setQRmodal={setQRmodal} QRmodal={QRmodal} />
-            variant="soft"
-            sx={{ borderRadius: "10px" }}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") e.preventDefault();
-            }}
-          />
-        </ModalDialog>
-      </Modal>
-      <Modal open={QRmodal}>
-        <ModalDialog color="primary" layout="center" size="lg">
-          <ModalClose onClick={() => setQRmodal(false)} />
-          <Typography>{t("qr-text")}</Typography>
-          <img
-            src={qrCode}
-            alt="PayPal QR Code"
-            style={{
-              width: "100%",
-              height: "auto",
-              maxHeight: "70vh",
-              objectFit: "contain",
-            }}
-          />
-        </ModalDialog>
-      </Modal>
 
       <div className="min-h-screen w-full flex items-center justify-center from-slate-100 to-blue-50 p-4">
         <Sheet
@@ -250,12 +209,23 @@ export const MainForm = () => {
             <IconButton onClick={changeTranslation}>
               <TranslateIcon />
             </IconButton>
+            <Typography
+              level="title-sm"
+              textColor="var(--joy-palette-success-plainColor)"
+              sx={{
+                fontFamily: "monospace",
+                opacity: "100%",
+                alignSelf: "center",
+              }}
+            >
+              {`${t("greeting")} ${userData?.fullname ?? t("loading")}`}
+            </Typography>
           </ButtonGroup>
 
           <form
             onSubmit={(e) => {
               e.preventDefault();
-              handleSubmit();
+              mutateForm();
             }}
             className="flex flex-col gap-4"
           >
@@ -372,12 +342,15 @@ export const MainForm = () => {
                       formData.paymentMethod === method ? "solid" : "soft"
                     }
                     color="primary"
-                    onClick={() =>
+                    onClick={() => {
                       setFormData((prev) => ({
                         ...prev,
                         paymentMethod: method,
-                      }))
+                      }));
-                    }
+                      if (method === "paypal") {
+                        setQRmodal(true);
+                      }
+                    }}
                     sx={{
                       flex: 1,
                       minWidth: "90px",
@@ -408,30 +381,40 @@ export const MainForm = () => {
               )}
             </FormControl>
 
-            {/* Submit button */}
+            {mutateFormIsPending ? (
-            <Button
+              <div className="flex items-center justify-center">
-              type="submit"
+                <CircularProgress />
-              loading={isLoading}
+              </div>
-              disabled={!formData.paymentMethod}
+            ) : (
-              size="lg"
+              <Button
-              sx={{
+                type="submit"
-                mt: 2,
+                disabled={!formData.paymentMethod}
-                borderRadius: "14px",
+                size="lg"
-                fontWeight: 700,
+                sx={{
-                letterSpacing: "0.05em",
+                  mt: 2,
-                background: "linear-gradient(135deg, #2563eb, #1d4ed8)",
+                  borderRadius: "14px",
-                "&:hover": {
+                  fontWeight: 700,
-                  background: "linear-gradient(135deg, #1d4ed8, #1e40af)",
+                  letterSpacing: "0.05em",
-                },
+                  background: "linear-gradient(135deg, #2563eb, #1d4ed8)",
-              }}
+                  "&:hover": {
-            >
+                    background: "linear-gradient(135deg, #1d4ed8, #1e40af)",
-              {t("submit")}
+                  },
-            </Button>
+                }}
+              >
+                {t("submit")}
+              </Button>
+            )}
 
-            {/* Alert message */}
+            {/* Message */}
             {msg && (
-              <Alert color={msg.type} sx={{ borderRadius: "12px" }}>
+              <Alert
-                <strong>{msg.headline}:</strong> {msg.text}
+                color={msg.type}
+                sx={{ flexDirection: "column", alignItems: "flex-start" }}
+              >
+                <Typography level="title-lg" sx={{ mb: 0.5 }}>
+                  {msg.headline}
+                </Typography>
+                <Typography level="body-sm">{msg.text}</Typography>
               </Alert>
             )}
           </form>

frontend/src/utils/api/form.ts

@@ -0,0 +1,29 @@
+import { API_BASE } from "../../config/api.config";
+import type { FormData } from "../../config/interfaces.config";
+
+export const submitFormData = async (
+  data: FormData,
+  username: string | null,
+) => {
+  console.warn("submitFormData is fetching!");
+
+  // await new Promise((resolve) => setTimeout(resolve, 3000)); // Wait 3 seconds
+
+  const response = await fetch(
+    `${API_BASE}/default/new-entry?username=${username}`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    },
+  );
+
+  if (!response.ok) {
+    const error = await response.text();
+    throw new Error(error || "Form submission failed");
+  }
+
+  return;
+};

frontend/src/utils/api/users.ts

@@ -0,0 +1,25 @@
+import { API_BASE } from "../../config/api.config";
+import Cookies from "js-cookie";
+
+export const fetchUsers = async () => {
+  console.warn("fetchUsers is fetching!");
+
+  const response = await fetch(`${API_BASE}/default/users`);
+  const data = await response.json();
+
+  return data;
+};
+
+export const confirmUser = async (username: string | null) => {
+  if (!username) {
+    return;
+  }
+
+  console.warn("confirmUser is fetching!");
+  const response = await fetch(
+    `${API_BASE}/default/confirm-user?username=${username}`,
+  );
+  const data = await response.json();
+  Cookies.set("selectedUser", username);
+  return data;
+};

frontend/src/utils/i18n/locales/de/de.json

@@ -14,7 +14,7 @@
     "user": "Benutzer",
     "next-id": "Nächste Eintragsnummer: ",
     "form-submitted-successfully": "Formular erfolgreich übermittelt!",
-    "orm-submission-failed": "Formularübermittlung fehlgeschlagen.",
+    "form-submission-failed": "Formularübermittlung fehlgeschlagen.",
     "success": "Erfolg",
     "error": "Fehler",
     "cash": "Bar",
@@ -26,5 +26,9 @@
     "thank-you": "Vielen Dank für Ihre Unterstützung der Claudius Akademie! Wir wünschen Ihnen viel Glück mit dem Los.",
     "select-payment-method": "Zahlungsmethode auswählen",
     "return-to-homepage": "Zurück",
-    "qr-text": "PayPal QR-Code der Claudius Akademie"
+    "qr-text": "PayPal QR-Code der Claudius Akademie",
+    "loading": "Lädt...",
+    "greeting": "Hallo,",
+    "set-username-headline": "Keinen Benutzer ausgewählt",
+    "set-username-text": "Um mit dem Losverkauf zu beginnen, musst du einen Benutzer oben links auswählen."
 }

frontend/src/utils/i18n/locales/en/en.json

@@ -27,5 +27,9 @@
     "thank-you": "Thank you for supporting the Claudius Akademie! We wish you the best of luck with your ticket.",
     "select-payment-method": "Select Payment Method",
     "return-to-homepage": "Return",
-    "qr-text": "PayPal QR-Code from the Claudius Akademie"
+    "qr-text": "PayPal QR-Code from the Claudius Akademie",
+    "loading": "Loading...",
+    "greeting": "Hello,",
+    "set-username-headline": "No user selected",
+    "set-username-text": "To start the ticket sale, you must select a user first from the top left."
 }

frontend/src/utils/sender.ts

@@ -1,33 +0,0 @@
-import { API_BASE } from "../config/api.config";
-import type { FormData } from "../config/interfaces.config";
-
-export const submitFormData = async (
-  data: FormData,
-  username: string | null,
-) => {
-  if (username == null) {
-    return { success: false, errorCode: "x001" };
-  }
-
-  try {
-    const response = await fetch(
-      `${API_BASE}/default/new-entry?username=${username}`,
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(data),
-      },
-    );
-
-    if (!response.ok) {
-      const errorText = await response.text();
-      return { success: false, error: `Server error: ${errorText}` };
-    }
-
-    return { success: true };
-  } catch (error) {
-    return { success: false, error: (error as Error).message };
-  }
-};

frontend/tests/test.local.js

@@ -0,0 +1,13 @@
+import http from "k6/http";
+import { sleep } from "k6";
+
+export const options = {
+  vus: 100, // amount of users
+  duration: "60s", // duration of the test
+};
+
+export default function () {
+  http.get("http://localhost:8004/default/confirm-user?username=TheisGaedigk");
+  http.get("http://localhost:8004/default/users");
+  sleep(1);
+}

frontend/tests/test.server.js

@@ -0,0 +1,15 @@
+// Before running: Establish VPN connection first
+
+import http from "k6/http";
+import { sleep } from "k6";
+
+export const options = {
+  vus: 100, // amount of users
+  duration: "60s", // duration of the test
+};
+
+export default function () {
+  http.get("http://backend:8004/default/confirm-user?username=TheisGaedigk");
+  http.get("http://backend:8004/default/users");
+  sleep(0.5);
+}