Compare commits
36 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 0953847f24 | |||
| 9e7fc530b5 | |||
| 18777e5f7c | |||
| b55129dfff | |||
| 26856ee1df | |||
| dd1d8d8d6b | |||
| cf2df0aaac | |||
| 1199d6468f | |||
| 7cd958c31e | |||
| f89cf84a38 | |||
| e3fc1d8659 | |||
| 060f8d01c6 | |||
| 667609d70c | |||
| b05f19acd9 | |||
| 2aa9a968f5 | |||
| e42a2f510a | |||
| d2b22fc71f | |||
| 471c0c7a49 | |||
| 75ff65e76b | |||
| 7cf1245ef6 | |||
| 2adbfa75a5 | |||
| 216a1cb1d4 | |||
| 7fc98d6c9f | |||
| e346cf9445 | |||
| c030b6dbe6 | |||
| 6f26b9bbc3 | |||
| a34a70572f | |||
| 4b3c8a2424 | |||
| 568b3bf495 | |||
| 5653d32857 | |||
| 7cf5b8df48 | |||
| 65c5fc0f8f | |||
| b626a67907 | |||
| 6643a176a6 | |||
| 89803754a7 | |||
| 5052b3e83a |
@@ -28,9 +28,6 @@ export const confirmUser = async (username) => {
|
|||||||
]);
|
]);
|
||||||
|
|
||||||
if (rows.length > 0) {
|
if (rows.length > 0) {
|
||||||
const { first_name, last_name } = rows[0];
|
|
||||||
const fullname = first_name + " " + last_name;
|
|
||||||
|
|
||||||
// creating userTicketTable
|
// creating userTicketTable
|
||||||
const d = new Date();
|
const d = new Date();
|
||||||
|
|
||||||
@@ -40,6 +37,8 @@ export const confirmUser = async (username) => {
|
|||||||
const date = `${day}_${month}_${year}`;
|
const date = `${day}_${month}_${year}`;
|
||||||
const tableName = `${username}_${date}`;
|
const tableName = `${username}_${date}`;
|
||||||
|
|
||||||
|
console.log(tableName);
|
||||||
|
|
||||||
const [createTable] = await pool.query(
|
const [createTable] = await pool.query(
|
||||||
`CREATE TABLE IF NOT EXISTS ?? (
|
`CREATE TABLE IF NOT EXISTS ?? (
|
||||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||||
@@ -71,9 +70,9 @@ export const confirmUser = async (username) => {
|
|||||||
nextID = rows.length > 0 ? rows[0].id + 1 : 1;
|
nextID = rows.length > 0 ? rows[0].id + 1 : 1;
|
||||||
};
|
};
|
||||||
await getNextID();
|
await getNextID();
|
||||||
return { success: true, nextID, tableName, fullname };
|
return { success: true, nextID, tableName };
|
||||||
} else {
|
} else {
|
||||||
return { success: false, message: "Table creation failed", fullname };
|
return { success: false, message: "Table creation failed" };
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
return null;
|
return null;
|
||||||
|
|||||||
@@ -11,6 +11,8 @@ router.post("/new-entry", async (req, res) => {
|
|||||||
if (!result.success) {
|
if (!result.success) {
|
||||||
return res.status(500).json({ message: "Form Data Invalid" });
|
return res.status(500).json({ message: "Form Data Invalid" });
|
||||||
}
|
}
|
||||||
|
console.log(req.body);
|
||||||
|
console.log(username);
|
||||||
res.sendStatus(204);
|
res.sendStatus(204);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
+76
-13
@@ -1,16 +1,19 @@
|
|||||||
services:
|
services:
|
||||||
# frontend:
|
frontend:
|
||||||
# container_name: ca-lose-frontend
|
container_name: ca-lose-frontend
|
||||||
# build: ./frontend
|
hostname: lose-verkaufen
|
||||||
# ports:
|
build: ./frontend
|
||||||
# - "8002:80"
|
depends_on:
|
||||||
# restart: unless-stopped
|
- backend
|
||||||
|
networks:
|
||||||
|
ca-lose-internal:
|
||||||
|
ipv4_address: 172.25.0.2
|
||||||
|
restart: unless-stopped
|
||||||
|
|
||||||
backend:
|
backend:
|
||||||
container_name: ca-lose-backend
|
container_name: ca-lose-backend
|
||||||
|
hostname: backend
|
||||||
build: ./backend
|
build: ./backend
|
||||||
ports:
|
|
||||||
- "8004:8004"
|
|
||||||
environment:
|
environment:
|
||||||
NODE_ENV: production
|
NODE_ENV: production
|
||||||
DB_HOST: ca-lose-mysql
|
DB_HOST: ca-lose-mysql
|
||||||
@@ -19,21 +22,81 @@ services:
|
|||||||
DB_NAME: ca_lose
|
DB_NAME: ca_lose
|
||||||
depends_on:
|
depends_on:
|
||||||
- database
|
- database
|
||||||
|
networks:
|
||||||
|
ca-lose-internal:
|
||||||
|
ipv4_address: 172.25.0.3
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
|
|
||||||
database:
|
database:
|
||||||
container_name: ca-lose-mysql
|
container_name: ca-lose-mysql
|
||||||
|
hostname: database
|
||||||
image: mysql:8.0
|
image: mysql:8.0
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
ports:
|
|
||||||
- "3311:3306"
|
|
||||||
environment:
|
environment:
|
||||||
MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
|
MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
|
||||||
MYSQL_DATABASE: ca_lose
|
MYSQL_DATABASE: ca_lose
|
||||||
TZ: Europe/Berlin
|
TZ: Europe/Berlin
|
||||||
volumes:
|
volumes:
|
||||||
- ca-lose_mysql:/var/lib/mysql
|
- ../docker/volumes/ca-lose_mysql:/var/lib/mysql
|
||||||
- ./mysql-timezone.cnf:/etc/mysql/conf.d/timezone.cnf:ro
|
- ./mysql-timezone.cnf:/etc/mysql/conf.d/timezone.cnf:ro
|
||||||
|
networks:
|
||||||
|
ca-lose-internal:
|
||||||
|
ipv4_address: 172.25.0.4
|
||||||
|
|
||||||
volumes:
|
# DNS Server für Hostname-Auflösung innerhalb des VPN
|
||||||
ca-lose_mysql:
|
dnsmasq:
|
||||||
|
container_name: ca-lose-dns
|
||||||
|
image: andyshinn/dnsmasq:latest
|
||||||
|
restart: unless-stopped
|
||||||
|
cap_add:
|
||||||
|
- NET_ADMIN
|
||||||
|
command: >
|
||||||
|
--no-daemon
|
||||||
|
--log-queries
|
||||||
|
--address=/lose-verkaufen/172.25.0.2
|
||||||
|
--address=/frontend/172.25.0.2
|
||||||
|
--address=/backend/172.25.0.3
|
||||||
|
--address=/database/172.25.0.4
|
||||||
|
--address=/wireguard/172.25.0.6
|
||||||
|
networks:
|
||||||
|
ca-lose-internal:
|
||||||
|
ipv4_address: 172.25.0.5
|
||||||
|
|
||||||
|
# WireGuard VPN mit Web-UI (wg-easy)
|
||||||
|
wireguard:
|
||||||
|
image: ghcr.io/wg-easy/wg-easy:latest
|
||||||
|
container_name: ca-lose-wireguard
|
||||||
|
cap_add:
|
||||||
|
- NET_ADMIN
|
||||||
|
- SYS_MODULE
|
||||||
|
environment:
|
||||||
|
LANG: de
|
||||||
|
WG_HOST: dus3.the1s.de
|
||||||
|
WG_PORT: "51830"
|
||||||
|
WG_DEFAULT_DNS: "172.25.0.5"
|
||||||
|
WG_ALLOWED_IPS: 172.25.0.0/24
|
||||||
|
PORT: "80" # Web-UI Port
|
||||||
|
PASSWORD_HASH: ${WIREGUARD_PASSWORD_HASH}
|
||||||
|
volumes:
|
||||||
|
- ../docker/volumes/ca-lose-wireguard:/etc/wireguard
|
||||||
|
- /lib/modules:/lib/modules:ro
|
||||||
|
ports:
|
||||||
|
- "51830:51830/udp"
|
||||||
|
# - "51831:80/tcp" # only for short configuration access - remove in production - external: 51831 internal: 80
|
||||||
|
sysctls:
|
||||||
|
- net.ipv4.ip_forward=1
|
||||||
|
- net.ipv4.conf.all.src_valid_mark=1
|
||||||
|
restart: unless-stopped
|
||||||
|
depends_on:
|
||||||
|
- dnsmasq
|
||||||
|
networks:
|
||||||
|
ca-lose-internal:
|
||||||
|
ipv4_address: 172.25.0.6
|
||||||
|
|
||||||
|
networks:
|
||||||
|
ca-lose-internal:
|
||||||
|
driver: bridge
|
||||||
|
ipam:
|
||||||
|
config:
|
||||||
|
- subnet: 172.25.0.0/24
|
||||||
|
gateway: 172.25.0.1
|
||||||
|
|||||||
Generated
+17
-34
@@ -16,10 +16,8 @@
|
|||||||
"@mui/joy": "^5.0.0-beta.52",
|
"@mui/joy": "^5.0.0-beta.52",
|
||||||
"@mui/material": "^9.0.1",
|
"@mui/material": "^9.0.1",
|
||||||
"@tailwindcss/vite": "^4.3.0",
|
"@tailwindcss/vite": "^4.3.0",
|
||||||
"@tanstack/react-query": "^5.100.10",
|
|
||||||
"i18next": "^26.0.10",
|
"i18next": "^26.0.10",
|
||||||
"js-cookie": "^3.0.5",
|
"js-cookie": "^3.0.5",
|
||||||
"k6": "^0.0.0",
|
|
||||||
"lucide-react": "^1.14.0",
|
"lucide-react": "^1.14.0",
|
||||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
@@ -1768,32 +1766,6 @@
|
|||||||
"vite": "^5.2.0 || ^6 || ^7 || ^8"
|
"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": {
|
"node_modules/@tybys/wasm-util": {
|
||||||
"version": "0.10.2",
|
"version": "0.10.2",
|
||||||
"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
|
"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
|
||||||
@@ -3070,12 +3042,6 @@
|
|||||||
"node": ">=6"
|
"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": {
|
"node_modules/keyv": {
|
||||||
"version": "4.5.4",
|
"version": "4.5.4",
|
||||||
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
|
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
|
||||||
@@ -4212,6 +4178,23 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "ISC"
|
"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": {
|
"node_modules/yocto-queue": {
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
|
||||||
|
|||||||
@@ -18,10 +18,8 @@
|
|||||||
"@mui/joy": "^5.0.0-beta.52",
|
"@mui/joy": "^5.0.0-beta.52",
|
||||||
"@mui/material": "^9.0.1",
|
"@mui/material": "^9.0.1",
|
||||||
"@tailwindcss/vite": "^4.3.0",
|
"@tailwindcss/vite": "^4.3.0",
|
||||||
"@tanstack/react-query": "^5.100.10",
|
|
||||||
"i18next": "^26.0.10",
|
"i18next": "^26.0.10",
|
||||||
"js-cookie": "^3.0.5",
|
"js-cookie": "^3.0.5",
|
||||||
"k6": "^0.0.0",
|
|
||||||
"lucide-react": "^1.14.0",
|
"lucide-react": "^1.14.0",
|
||||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
|
|||||||
@@ -3,14 +3,9 @@ import { createRoot } from "react-dom/client";
|
|||||||
import "./utils/i18n/index.ts";
|
import "./utils/i18n/index.ts";
|
||||||
import "./index.css";
|
import "./index.css";
|
||||||
import App from "./App.tsx";
|
import App from "./App.tsx";
|
||||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
||||||
|
|
||||||
const queryClient = new QueryClient();
|
|
||||||
|
|
||||||
createRoot(document.getElementById("root")!).render(
|
createRoot(document.getElementById("root")!).render(
|
||||||
<StrictMode>
|
<StrictMode>
|
||||||
<QueryClientProvider client={queryClient}>
|
<App />
|
||||||
<App />
|
|
||||||
</QueryClientProvider>
|
|
||||||
</StrictMode>,
|
</StrictMode>,
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -18,16 +18,14 @@ import {
|
|||||||
Modal,
|
Modal,
|
||||||
ModalDialog,
|
ModalDialog,
|
||||||
ModalClose,
|
ModalClose,
|
||||||
CircularProgress,
|
|
||||||
} from "@mui/joy";
|
} from "@mui/joy";
|
||||||
import { submitFormData } from "../utils/api/form";
|
import { submitFormData } from "../utils/sender";
|
||||||
|
import { API_BASE } from "../config/api.config";
|
||||||
import type { FormData, Message } from "../config/interfaces.config";
|
import type { FormData, Message } from "../config/interfaces.config";
|
||||||
import PersonIcon from "@mui/icons-material/Person";
|
import PersonIcon from "@mui/icons-material/Person";
|
||||||
import QrCodeIcon from "@mui/icons-material/QrCode";
|
import QrCodeIcon from "@mui/icons-material/QrCode";
|
||||||
import TranslateIcon from "@mui/icons-material/Translate";
|
import TranslateIcon from "@mui/icons-material/Translate";
|
||||||
import qrCode from "../assets/PayPal-QR-Code.png";
|
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_METHODS = ["bar", "paypal", "andere"] as const;
|
||||||
const PAYMENT_LABELS: Record<string, string> = {
|
const PAYMENT_LABELS: Record<string, string> = {
|
||||||
@@ -84,12 +82,13 @@ const Field = ({
|
|||||||
|
|
||||||
export const MainForm = () => {
|
export const MainForm = () => {
|
||||||
const { t, i18n } = useTranslation();
|
const { t, i18n } = useTranslation();
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
const [invoice, setInvoice] = useState(false);
|
const [invoice, setInvoice] = useState(false);
|
||||||
const [msg, setMsg] = useState<Message | null>(null);
|
const [msg, setMsg] = useState<Message | null>(null);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [nextID, setNextID] = useState<number | null>(null);
|
const [nextID, setNextID] = useState<number | null>(null);
|
||||||
const [selectedUser, setSelectedUser] = useState("");
|
const [users, setUsers] = useState<string[]>([]);
|
||||||
|
const [selectedUser, setSelectedUser] = useState<string | null>(null);
|
||||||
const [formData, setFormData] = useState<FormData>(DEFAULT_FORM);
|
const [formData, setFormData] = useState<FormData>(DEFAULT_FORM);
|
||||||
const [showSelectUser, setShowSelectUser] = useState(false);
|
const [showSelectUser, setShowSelectUser] = useState(false);
|
||||||
const [QRmodal, setQRmodal] = useState(false);
|
const [QRmodal, setQRmodal] = useState(false);
|
||||||
@@ -98,62 +97,23 @@ export const MainForm = () => {
|
|||||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
const confirmUser = async (username: string) => {
|
||||||
const savedUser = Cookies.get("selectedUser");
|
try {
|
||||||
if (savedUser) {
|
const res = await fetch(
|
||||||
setSelectedUser(savedUser);
|
`${API_BASE}/default/confirm-user?username=${username}`,
|
||||||
|
);
|
||||||
|
const data = await res.json();
|
||||||
|
setNextID(data.nextID);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error confirming user:", error);
|
||||||
}
|
}
|
||||||
}, []);
|
};
|
||||||
|
|
||||||
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) => {
|
const handleUserSelection = (username: string | null) => {
|
||||||
if (username == null || username == "") {
|
if (!username) return;
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setSelectedUser(username);
|
setSelectedUser(username);
|
||||||
|
confirmUser(username);
|
||||||
|
Cookies.set("selectedUser", username);
|
||||||
};
|
};
|
||||||
|
|
||||||
const changeTranslation = () => {
|
const changeTranslation = () => {
|
||||||
@@ -180,6 +140,46 @@ export const MainForm = () => {
|
|||||||
}
|
}
|
||||||
}, [formData.paymentMethod]);
|
}, [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
|
// Shorthand so we don't repeat formData + onChange on every Field usage
|
||||||
const fieldProps = { formData, onChange: handleChange };
|
const fieldProps = { formData, onChange: handleChange };
|
||||||
|
|
||||||
@@ -191,14 +191,15 @@ export const MainForm = () => {
|
|||||||
<Typography>{t("user")}</Typography>
|
<Typography>{t("user")}</Typography>
|
||||||
{/* User selection */}
|
{/* User selection */}
|
||||||
<Autocomplete
|
<Autocomplete
|
||||||
options={usernameData?.users ?? []}
|
options={users}
|
||||||
loading={usernameDataIsLoading}
|
|
||||||
loadingText={t("loading")}
|
|
||||||
value={selectedUser}
|
value={selectedUser}
|
||||||
onChange={(_, value) => handleUserSelection(value)}
|
onChange={(_, value) => handleUserSelection(value)}
|
||||||
placeholder={t("user")}
|
placeholder={t("user")}
|
||||||
variant="soft"
|
variant="soft"
|
||||||
sx={{ borderRadius: "10px" }}
|
sx={{ borderRadius: "10px" }}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter") e.preventDefault();
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</ModalDialog>
|
</ModalDialog>
|
||||||
</Modal>
|
</Modal>
|
||||||
@@ -249,23 +250,12 @@ export const MainForm = () => {
|
|||||||
<IconButton onClick={changeTranslation}>
|
<IconButton onClick={changeTranslation}>
|
||||||
<TranslateIcon />
|
<TranslateIcon />
|
||||||
</IconButton>
|
</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>
|
</ButtonGroup>
|
||||||
|
|
||||||
<form
|
<form
|
||||||
onSubmit={(e) => {
|
onSubmit={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
mutateForm();
|
handleSubmit();
|
||||||
}}
|
}}
|
||||||
className="flex flex-col gap-4"
|
className="flex flex-col gap-4"
|
||||||
>
|
>
|
||||||
@@ -418,29 +408,25 @@ export const MainForm = () => {
|
|||||||
)}
|
)}
|
||||||
</FormControl>
|
</FormControl>
|
||||||
|
|
||||||
{mutateFormIsPending ? (
|
{/* Submit button */}
|
||||||
<div className="flex items-center justify-center">
|
<Button
|
||||||
<CircularProgress />
|
type="submit"
|
||||||
</div>
|
loading={isLoading}
|
||||||
) : (
|
disabled={!formData.paymentMethod}
|
||||||
<Button
|
size="lg"
|
||||||
type="submit"
|
sx={{
|
||||||
disabled={!formData.paymentMethod}
|
mt: 2,
|
||||||
size="lg"
|
borderRadius: "14px",
|
||||||
sx={{
|
fontWeight: 700,
|
||||||
mt: 2,
|
letterSpacing: "0.05em",
|
||||||
borderRadius: "14px",
|
background: "linear-gradient(135deg, #2563eb, #1d4ed8)",
|
||||||
fontWeight: 700,
|
"&:hover": {
|
||||||
letterSpacing: "0.05em",
|
background: "linear-gradient(135deg, #1d4ed8, #1e40af)",
|
||||||
background: "linear-gradient(135deg, #2563eb, #1d4ed8)",
|
},
|
||||||
"&:hover": {
|
}}
|
||||||
background: "linear-gradient(135deg, #1d4ed8, #1e40af)",
|
>
|
||||||
},
|
{t("submit")}
|
||||||
}}
|
</Button>
|
||||||
>
|
|
||||||
{t("submit")}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Alert message */}
|
{/* Alert message */}
|
||||||
{msg && (
|
{msg && (
|
||||||
|
|||||||
@@ -36,7 +36,7 @@ export const SuccessPage = () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen w-full flex items-center justify-center bg-linear-to-br from-slate-800 to-slate-900 p-4">
|
<div className="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-slate-800 to-slate-900 p-4">
|
||||||
<Sheet
|
<Sheet
|
||||||
variant="plain"
|
variant="plain"
|
||||||
sx={{
|
sx={{
|
||||||
@@ -82,10 +82,7 @@ export const SuccessPage = () => {
|
|||||||
|
|
||||||
{/* Headline */}
|
{/* Headline */}
|
||||||
<div style={fadeUp("0.2s")}>
|
<div style={fadeUp("0.2s")}>
|
||||||
<Typography
|
<Typography level="h3" sx={{ fontWeight: 700, color: "#15803d", mb: 1 }}>
|
||||||
level="h3"
|
|
||||||
sx={{ fontWeight: 700, color: "#15803d", mb: 1 }}
|
|
||||||
>
|
|
||||||
{t("form-submitted-successfully")}
|
{t("form-submitted-successfully")}
|
||||||
</Typography>
|
</Typography>
|
||||||
</div>
|
</div>
|
||||||
@@ -113,18 +110,8 @@ export const SuccessPage = () => {
|
|||||||
|
|
||||||
{/* Order ID chip */}
|
{/* Order ID chip */}
|
||||||
{orderId && (
|
{orderId && (
|
||||||
<div
|
<div style={fadeUp("0.4s")} className="flex flex-col items-center gap-1 mb-4">
|
||||||
style={fadeUp("0.4s")}
|
<Typography level="body-xs" sx={{ color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.08em" }}>
|
||||||
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")}
|
{t("entry-id")}
|
||||||
</Typography>
|
</Typography>
|
||||||
<Chip
|
<Chip
|
||||||
@@ -151,9 +138,7 @@ export const SuccessPage = () => {
|
|||||||
borderRadius: "12px",
|
borderRadius: "12px",
|
||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
background: "linear-gradient(135deg, #2563eb, #1d4ed8)",
|
background: "linear-gradient(135deg, #2563eb, #1d4ed8)",
|
||||||
"&:hover": {
|
"&:hover": { background: "linear-gradient(135deg, #1d4ed8, #1e40af)" },
|
||||||
background: "linear-gradient(135deg, #1d4ed8, #1e40af)",
|
|
||||||
},
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{seconds}s — {t("return-to-homepage")}
|
{seconds}s — {t("return-to-homepage")}
|
||||||
@@ -161,11 +146,11 @@ export const SuccessPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Thank-you note */}
|
{/* Thank-you note */}
|
||||||
<div style={fadeUp("0.5s")} className="pt-4 border-t border-slate-100">
|
<div
|
||||||
<Typography
|
style={fadeUp("0.5s")}
|
||||||
level="body-sm"
|
className="pt-4 border-t border-slate-100"
|
||||||
sx={{ color: "#9ca3af", lineHeight: 1.6 }}
|
>
|
||||||
>
|
<Typography level="body-sm" sx={{ color: "#9ca3af", lineHeight: 1.6 }}>
|
||||||
{t("thank-you")}
|
{t("thank-you")}
|
||||||
</Typography>
|
</Typography>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,26 +0,0 @@
|
|||||||
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;
|
|
||||||
};
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
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;
|
|
||||||
};
|
|
||||||
@@ -14,7 +14,7 @@
|
|||||||
"user": "Benutzer",
|
"user": "Benutzer",
|
||||||
"next-id": "Nächste Eintragsnummer: ",
|
"next-id": "Nächste Eintragsnummer: ",
|
||||||
"form-submitted-successfully": "Formular erfolgreich übermittelt!",
|
"form-submitted-successfully": "Formular erfolgreich übermittelt!",
|
||||||
"form-submission-failed": "Formularübermittlung fehlgeschlagen.",
|
"orm-submission-failed": "Formularübermittlung fehlgeschlagen.",
|
||||||
"success": "Erfolg",
|
"success": "Erfolg",
|
||||||
"error": "Fehler",
|
"error": "Fehler",
|
||||||
"cash": "Bar",
|
"cash": "Bar",
|
||||||
@@ -26,7 +26,5 @@
|
|||||||
"thank-you": "Vielen Dank für Ihre Unterstützung der Claudius Akademie! Wir wünschen Ihnen viel Glück mit dem Los.",
|
"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",
|
"select-payment-method": "Zahlungsmethode auswählen",
|
||||||
"return-to-homepage": "Zurück",
|
"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,"
|
|
||||||
}
|
}
|
||||||
@@ -27,7 +27,5 @@
|
|||||||
"thank-you": "Thank you for supporting the Claudius Akademie! We wish you the best of luck with your ticket.",
|
"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",
|
"select-payment-method": "Select Payment Method",
|
||||||
"return-to-homepage": "Return",
|
"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,"
|
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
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 };
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
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);
|
|
||||||
}
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
// 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);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user