Merge branch 'dev' into prod

This commit is contained in:
2026-05-18 20:37:04 +02:00
14 changed files with 250 additions and 152 deletions
+5 -4
View File
@@ -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;
-2
View File
@@ -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);
});
+34 -17
View File
@@ -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",
+2
View File
@@ -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",
+5
View File
@@ -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>
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
</StrictMode>,
);
+79 -65
View File
@@ -18,14 +18,16 @@ import {
Modal,
ModalDialog,
ModalClose,
CircularProgress,
} from "@mui/joy";
import { submitFormData } from "../utils/sender";
import { API_BASE } from "../config/api.config";
import { submitFormData } from "../utils/api/form";
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";
const PAYMENT_METHODS = ["bar", "paypal", "andere"] as const;
const PAYMENT_LABELS: Record<string, string> = {
@@ -82,13 +84,12 @@ 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 [selectedUser, setSelectedUser] = useState("");
const [formData, setFormData] = useState<FormData>(DEFAULT_FORM);
const [showSelectUser, setShowSelectUser] = useState(false);
const [QRmodal, setQRmodal] = useState(false);
@@ -97,23 +98,62 @@ export const MainForm = () => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const confirmUser = async (username: string) => {
try {
const res = await fetch(
`${API_BASE}/default/confirm-user?username=${username}`,
);
const data = await res.json();
setNextID(data.nextID);
} catch (error) {
console.error("Error confirming user:", error);
useEffect(() => {
const savedUser = Cookies.get("selectedUser");
if (savedUser) {
setSelectedUser(savedUser);
}
};
}, []);
const { data: usernameData, isLoading: usernameDataIsLoading } = useQuery({
queryKey: ["users"],
queryFn: fetchUsers,
});
const { data: userData, isSuccess: userDataIsSuccess } = useQuery({
queryKey: ["user", selectedUser],
enabled: !!selectedUser,
queryFn: () => confirmUser(selectedUser),
});
const {
mutate: mutateForm,
isSuccess: mutateFormIsSuccess,
isPending: mutateFormIsPending,
isError: mutateFormIsError,
} = useMutation({
mutationFn: () => submitFormData(formData, selectedUser),
});
// Redirecting to success page if mutation was successful
useEffect(() => {
if (mutateFormIsSuccess) {
queryClient.invalidateQueries({ queryKey: ["user", selectedUser] });
document.location.href = `/success?id=${nextID}&tickets=${formData.tickets}`;
}
if (mutateFormIsError) {
queryClient.invalidateQueries({ queryKey: ["user", selectedUser] });
setMsg({
type: "danger",
headline: t("error"),
text: t("form-submission-failed"),
});
}
}, [mutateFormIsSuccess, mutateFormIsError]);
// Setting the nextID after a user is selected
useEffect(() => {
if (!userData) return;
setNextID(userData.nextID);
}, [userDataIsSuccess]);
const handleUserSelection = (username: string | null) => {
if (!username) return;
if (username == null || username == "") {
return;
}
setSelectedUser(username);
confirmUser(username);
Cookies.set("selectedUser", username);
};
const changeTranslation = () => {
@@ -140,46 +180,6 @@ export const MainForm = () => {
}
}, [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 };
@@ -191,15 +191,14 @@ export const MainForm = () => {
<Typography>{t("user")}</Typography>
{/* User selection */}
<Autocomplete
options={users}
options={usernameData?.users ?? []}
loading={usernameDataIsLoading}
loadingText={t("loading")}
value={selectedUser}
onChange={(_, value) => handleUserSelection(value)}
placeholder={t("user")}
variant="soft"
sx={{ borderRadius: "10px" }}
onKeyDown={(e) => {
if (e.key === "Enter") e.preventDefault();
}}
/>
</ModalDialog>
</Modal>
@@ -250,12 +249,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"
>
@@ -408,10 +418,13 @@ export const MainForm = () => {
)}
</FormControl>
{/* Submit button */}
{mutateFormIsPending ? (
<div className="flex items-center justify-center">
<CircularProgress />
</div>
) : (
<Button
type="submit"
loading={isLoading}
disabled={!formData.paymentMethod}
size="lg"
sx={{
@@ -427,6 +440,7 @@ export const MainForm = () => {
>
{t("submit")}
</Button>
)}
{/* Alert message */}
{msg && (
+24 -9
View File
@@ -36,7 +36,7 @@ export const SuccessPage = () => {
});
return (
<div className="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-slate-800 to-slate-900 p-4">
<div className="min-h-screen w-full flex items-center justify-center bg-linear-to-br from-slate-800 to-slate-900 p-4">
<Sheet
variant="plain"
sx={{
@@ -82,7 +82,10 @@ export const SuccessPage = () => {
{/* Headline */}
<div style={fadeUp("0.2s")}>
<Typography level="h3" sx={{ fontWeight: 700, color: "#15803d", mb: 1 }}>
<Typography
level="h3"
sx={{ fontWeight: 700, color: "#15803d", mb: 1 }}
>
{t("form-submitted-successfully")}
</Typography>
</div>
@@ -110,8 +113,18 @@ export const SuccessPage = () => {
{/* Order ID chip */}
{orderId && (
<div style={fadeUp("0.4s")} className="flex flex-col items-center gap-1 mb-4">
<Typography level="body-xs" sx={{ color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.08em" }}>
<div
style={fadeUp("0.4s")}
className="flex flex-col items-center gap-1 mb-4"
>
<Typography
level="body-xs"
sx={{
color: "#9ca3af",
textTransform: "uppercase",
letterSpacing: "0.08em",
}}
>
{t("entry-id")}
</Typography>
<Chip
@@ -138,7 +151,9 @@ export const SuccessPage = () => {
borderRadius: "12px",
fontWeight: 700,
background: "linear-gradient(135deg, #2563eb, #1d4ed8)",
"&:hover": { background: "linear-gradient(135deg, #1d4ed8, #1e40af)" },
"&:hover": {
background: "linear-gradient(135deg, #1d4ed8, #1e40af)",
},
}}
>
{seconds}s &mdash; {t("return-to-homepage")}
@@ -146,11 +161,11 @@ export const SuccessPage = () => {
</div>
{/* Thank-you note */}
<div
style={fadeUp("0.5s")}
className="pt-4 border-t border-slate-100"
<div style={fadeUp("0.5s")} className="pt-4 border-t border-slate-100">
<Typography
level="body-sm"
sx={{ color: "#9ca3af", lineHeight: 1.6 }}
>
<Typography level="body-sm" sx={{ color: "#9ca3af", lineHeight: 1.6 }}>
{t("thank-you")}
</Typography>
</div>
+26
View File
@@ -0,0 +1,26 @@
import { API_BASE } from "../../config/api.config";
import type { FormData } from "../../config/interfaces.config";
export const submitFormData = async (data: FormData, username: string) => {
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;
};
+21
View File
@@ -0,0 +1,21 @@
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) => {
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;
};
+4 -2
View File
@@ -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,7 @@
"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,"
}
+3 -1
View File
@@ -27,5 +27,7 @@
"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,"
}
-33
View File
@@ -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 };
}
};
+13
View File
@@ -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);
}
+15
View File
@@ -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);
}