changed docker notes

.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

docker-compose.yml

@@ -1,16 +1,19 @@
 services:
-  #  frontend:
-  #    container_name: ca-lose-frontend
-  #    build: ./frontend
-  #    ports:
-  #      - "8002:80"
-  #    restart: unless-stopped
+  frontend:
+    container_name: ca-lose-frontend
+    hostname: lose-verkaufen
+    build: ./frontend
+    depends_on:
+      - backend
+    networks:
+      ca-lose-internal:
+        ipv4_address: 172.25.0.2
+    restart: unless-stopped
 
   backend:
     container_name: ca-lose-backend
+    hostname: backend
     build: ./backend
-    ports:
-      - "8004:8004"
     environment:
       NODE_ENV: production
       DB_HOST: ca-lose-mysql
@@ -19,21 +22,78 @@ services:
       DB_NAME: ca_lose
     depends_on:
       - database
+    networks:
+      ca-lose-internal:
+        ipv4_address: 172.25.0.3
     restart: unless-stopped
 
   database:
     container_name: ca-lose-mysql
+    hostname: database
     image: mysql:8.0
     restart: unless-stopped
-    ports:
-      - "3311:3306"
     environment:
       MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
       MYSQL_DATABASE: ca_lose
       TZ: Europe/Berlin
     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
+    networks:
+      ca-lose-internal:
+        ipv4_address: 172.25.0.4
 
-volumes:
-  ca-lose_mysql:
+  # DNS Server for hostname resolution within the Docker network
+  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 server for secure remote access to the Docker network
+  wireguard:
+    build: ./wg-easy-ca-lose
+    container_name: ca-lose-wireguard
+    cap_add:
+      - NET_ADMIN
+      - SYS_MODULE
+    environment:
+      WG_HOST: dus3.the1s.de
+      INSECURE: "true"
+      HOST: "172.25.0.6"
+      PORT: "80"
+    volumes:
+      - ../docker/volumes/ca-lose-wireguard-v15:/etc/wireguard
+      - /lib/modules:/lib/modules:ro
+    ports:
+      - "51830:51830/udp"
+    #      - "51831:51821/tcp" Public Web-UI Port
+    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

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/pages/MainForm.tsx

@@ -13,11 +13,7 @@ import {
   Typography,
   FormControl,
   FormLabel,
-  Autocomplete,
   ButtonGroup,
-  Modal,
-  ModalDialog,
-  ModalClose,
   CircularProgress,
 } from "@mui/joy";
 import { submitFormData } from "../utils/api/form";
@@ -25,9 +21,10 @@ 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> = {
@@ -88,8 +85,7 @@ export const MainForm = () => {
 
   const [invoice, setInvoice] = useState(false);
   const [msg, setMsg] = useState<Message | null>(null);
-  const [nextID, setNextID] = useState<number | null>(null);
-  const [selectedUser, setSelectedUser] = useState("");
+  const [selectedUser, setSelectedUser] = useState<string | null>(null);
   const [formData, setFormData] = useState<FormData>(DEFAULT_FORM);
   const [showSelectUser, setShowSelectUser] = useState(false);
   const [QRmodal, setQRmodal] = useState(false);
@@ -102,6 +98,12 @@ export const MainForm = () => {
     const savedUser = Cookies.get("selectedUser");
     if (savedUser) {
       setSelectedUser(savedUser);
+    } else {
+      setMsg({
+        type: "warning",
+        headline: t("set-username-headline"),
+        text: t("set-username-text"),
+      });
     }
   }, []);
 
@@ -110,43 +112,30 @@ export const MainForm = () => {
     queryFn: fetchUsers,
   });
 
-  const { data: userData, isSuccess: userDataIsSuccess } = useQuery({
+  const { data: userData } = useQuery({
     queryKey: ["user", selectedUser],
     enabled: !!selectedUser,
     queryFn: () => confirmUser(selectedUser),
   });
 
-  const {
-    mutate: mutateForm,
-    isSuccess: mutateFormIsSuccess,
-    isPending: mutateFormIsPending,
-    isError: mutateFormIsError,
-  } = useMutation({
+  const { mutate: mutateForm, isPending: mutateFormIsPending } = useMutation({
     mutationFn: () => submitFormData(formData, selectedUser),
-  });
-
-  // Redirecting to success page if mutation was successful
-  useEffect(() => {
-    if (mutateFormIsSuccess) {
+    onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["user", selectedUser] });
       document.location.href = `/success?id=${nextID}&tickets=${formData.tickets}`;
-    }
-
-    if (mutateFormIsError) {
+    },
+    onError: () => {
       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 nextID = userData?.nextID ?? "N/A";
 
   const handleUserSelection = (username: string | null) => {
     if (username == null || username == "") {
@@ -174,50 +163,21 @@ export const MainForm = () => {
     }
   };
 
-  useEffect(() => {
-    if (formData.paymentMethod === "paypal") {
-      setQRmodal(true);
-    }
-  }, [formData.paymentMethod]);
-
   // Shorthand so we don't repeat formData + onChange on every Field usage
   const fieldProps = { formData, onChange: handleChange };
 
   return (
     <>
-      <Modal open={showSelectUser}>
-        <ModalDialog color="primary" layout="center" size="lg">
-          <ModalClose onClick={() => setShowSelectUser(false)} />
-          <Typography>{t("user")}</Typography>
-          {/* User selection */}
-          <Autocomplete
-            options={usernameData?.users ?? []}
-            loading={usernameDataIsLoading}
-            loadingText={t("loading")}
-            value={selectedUser}
-            onChange={(_, value) => handleUserSelection(value)}
-            placeholder={t("user")}
-            variant="soft"
-            sx={{ borderRadius: "10px" }}
-          />
-        </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>
+      <SelectUserModal
+        showSelectUser={showSelectUser}
+        setShowSelectUser={setShowSelectUser}
+        usernameData={usernameData}
+        usernameDataIsLoading={usernameDataIsLoading}
+        selectedUser={selectedUser}
+        handleUserSelection={handleUserSelection}
+      />
+
+      <QRcodeModal setQRmodal={setQRmodal} QRmodal={QRmodal} />
 
       <div className="min-h-screen w-full flex items-center justify-center from-slate-100 to-blue-50 p-4">
         <Sheet
@@ -382,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",
@@ -442,10 +405,16 @@ export const MainForm = () => {
               </Button>
             )}
 
-            {/* Alert message */}
+            {/* Message */}
             {msg && (
-              <Alert color={msg.type} sx={{ borderRadius: "12px" }}>
-                <strong>{msg.headline}:</strong> {msg.text}
+              <Alert
+                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

@@ -1,10 +1,13 @@
 import { API_BASE } from "../../config/api.config";
 import type { FormData } from "../../config/interfaces.config";
 
-export const submitFormData = async (data: FormData, username: string) => {
+export const submitFormData = async (
+  data: FormData,
+  username: string | null,
+) => {
   console.warn("submitFormData is fetching!");
 
-  await new Promise((resolve) => setTimeout(resolve, 3000)); // Wait 3 seconds
+  // await new Promise((resolve) => setTimeout(resolve, 3000)); // Wait 3 seconds
 
   const response = await fetch(
     `${API_BASE}/default/new-entry?username=${username}`,

frontend/src/utils/api/users.ts

@@ -10,7 +10,11 @@ export const fetchUsers = async () => {
   return data;
 };
 
-export const confirmUser = async (username: string) => {
+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}`,

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

@@ -28,5 +28,7 @@
     "return-to-homepage": "Zurück",
     "qr-text": "PayPal QR-Code der Claudius Akademie",
     "loading": "Lädt...",
-    "greeting": "Hallo,"
+    "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

@@ -29,5 +29,7 @@
     "return-to-homepage": "Return",
     "qr-text": "PayPal QR-Code from the Claudius Akademie",
     "loading": "Loading...",
-    "greeting": "Hello,"
+    "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."
 }