Merge branch 'dev' into prod

fixed number input
2026-06-10 13:45:53 +02:00 · 2026-06-10 13:45:13 +02:00 · 2026-06-09 17:44:36 +02:00 · 2026-06-09 17:43:56 +02:00 · 2026-06-03 16:33:26 +02:00 · 2026-06-03 16:32:19 +02:00
41 changed files with 1299 additions and 558 deletions
@@ -158,6 +158,7 @@ keys/
 # Own files
 ToDo.txt
 PayPal-QR-Code.png
+.docker/volumes

 # only in development branch
 next-env.d.ts
@@ -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
@@ -1,164 +1,98 @@
-# CA-Lose
+# LuckySign

-CA-Lose is a small full-stack app for collecting ticket-sale/order form entries.
+Ticket intake and validation app with a React frontend and an Express + MySQL backend.

-## Tech stack
+## Tech Stack

-![React](https://img.shields.io/badge/React-20232A?logo=react&logoColor=61DAFB)
-![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=fff)
-![Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=fff)
-![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-06B6D4?logo=tailwindcss&logoColor=fff)
-![MUI](https://img.shields.io/badge/MUI-007FFF?logo=mui&logoColor=fff)
-![i18next](https://img.shields.io/badge/i18next-26A69A?logo=i18next&logoColor=fff)
+![React](https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=000&style=flat)
+![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=fff&style=flat)
+![Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=fff&style=flat)
+![Tailwind%20CSS](https://img.shields.io/badge/Tailwind%20CSS-38B2AC?logo=tailwindcss&logoColor=fff&style=flat)
+![MUI](https://img.shields.io/badge/MUI-007FFF?logo=mui&logoColor=fff&style=flat)
+![TanStack%20Query](https://img.shields.io/badge/TanStack%20Query-FF4154?logo=reactquery&logoColor=fff&style=flat)
+![React%20Router](https://img.shields.io/badge/React%20Router-CA4245?logo=reactrouter&logoColor=fff&style=flat)
+[![TanStack%20Form](https://img.shields.io/badge/TanStack%20Form-EC5990?logo=reacthookform&logoColor=fff)](#)
+![Node.js](https://img.shields.io/badge/Node.js-339933?logo=nodedotjs&logoColor=fff&style=flat)
+![Express](https://img.shields.io/badge/Express-000000?logo=express&logoColor=fff&style=flat)
+![MySQL](https://img.shields.io/badge/MySQL-4479A1?logo=mysql&logoColor=fff&style=flat)
+![Docker](https://img.shields.io/badge/Docker-2496ED?logo=docker&logoColor=fff&style=flat)
+![Nginx](https://img.shields.io/badge/Nginx-009639?logo=nginx&logoColor=fff&style=flat)

-![Node.js](https://img.shields.io/badge/Node.js-339933?logo=node.js&logoColor=fff)
-![Express](https://img.shields.io/badge/Express-000000?logo=express&logoColor=fff)
-![MySQL](https://img.shields.io/badge/MySQL-4479A1?logo=mysql&logoColor=fff)
+### Production Tech Stack

-![Docker](https://img.shields.io/badge/Docker-2496ED?logo=docker&logoColor=fff)
-![Nginx](https://img.shields.io/badge/Nginx-009639?logo=nginx&logoColor=fff)
+> **Note** For production, check the [prod branch](https://git.the1s.de/theis.gaedigk/ca-lose/src/branch/prod/) which contains an VPN git submodule of wg-easy to run the app securely on a private network. It also contains a dnsmasq container to resolve the backend service name from the frontend container. The main branch is meant for local development and testing, so it doesn't include those components to keep things simple.

-## Architecture
+![dnsmasq](https://img.shields.io/badge/dnsmasq-314B5F?logo=isc&logoColor=fff&style=flat)
+![WireGuard](https://img.shields.io/badge/WireGuard-88171A?logo=wireguard&logoColor=fff&style=flat)

- **Frontend**: React + TypeScript + Vite (UI uses MUI + Tailwind, i18n via i18next)
- **Backend**: Node.js + Express (also renders a minimal EJS page at `/`)
- **Database**: MySQL 8
+## Project Structure

-In production, the frontend is served by **Nginx** and proxies `/backend/*` to the backend container.
+- Frontend (Vite + React + Tailwind + MUI): [frontend](frontend)
+- Backend (Express): [backend](backend)
+- Database schema: [backend/scheme.sql](backend/scheme.sql)
+- Docker compose stack: [docker-compose.yml](docker-compose.yml)

-## Repos & folders
+## Quick Start (Docker)

-```
-backend/   # Express API + EJS views
-frontend/  # React app (Vite) + Nginx container
-docker-compose.yml
-docker-compose.prod.yml
-```
-
-## API overview
-
-The backend router is mounted at `/default`:
-
- `GET /default/users` → returns `{ users: string[] }`
- `GET /default/confirm-user?username=<name>` → validates user and returns metadata (e.g. next id)
- `POST /default/new-entry?username=<name>` → stores a new entry in MySQL
-
-## Configuration
-
-### Backend environment variables
-
-The backend reads configuration from environment variables (and can also load a `backend/.env` file via `dotenv`).
-
- `PORT` (e.g. `8004`)
- `DB_HOST` (e.g. `ca-lose-mysql` when using Docker Compose)
- `DB_USER` (e.g. `root`)
- `DB_PASSWORD`
- `DB_NAME` (e.g. `ca_lose`)
-
-### Docker Compose environment
-
-Both compose files expect `DB_PASSWORD` to be present in your shell environment or a root `.env` file.
-
-Create a root `.env` (not committed) like:
-
-```env
-DB_PASSWORD=change-me
-```
-
-## Local development
-
-### Option A: Docker Compose (backend + database)
-
-This is the quickest way to get the API + MySQL running.
+1. Set the database password env var used by Docker Compose:

 ```bash
-docker compose up --build
+DB_PASSWORD=your_password
 ```

-What you get:
-
- Backend: http://localhost:8004
- MySQL: localhost:3311 (container port 3306)
-
-Note: In `docker-compose.yml` the `frontend` service is currently commented out.
-
-### Option B: Run frontend locally (Vite) + run backend & DB
-
-1. Start DB + backend (Docker):
+2. Start MySQL and the backend:

 ```bash
-docker compose up --build database backend
-```
-
-2. Start frontend (local Node):
-
-```bash
-cd frontend
-npm ci
-npm run dev
-```
-
-Open the Vite dev server URL (usually http://localhost:5173).
-
-Important:
-
- During local development (Vite), the frontend currently calls the backend via a hard-coded URL (`http://localhost:8004`).
- When the frontend is served by the Nginx container, requests are expected to go through the Nginx proxy at `/backend/*` (see `frontend/nginx.conf`). In that setup the frontend should use `/backend/default/...` instead of `http://localhost:8004/...`.
-
-## Database setup
-
-The schema file is in `backend/scheme.sql`.
-
- The `users` table is required for the user dropdown.
- The backend creates an entry table dynamically per user and date when calling `GET /default/confirm-user`.
-
-Example (inside MySQL):
-
-```sql
-INSERT INTO users (username, first_name, last_name)
-VALUES ('demo', 'Demo', 'User');
-```
-
-## Production / Deployment
-
-The production compose file builds and runs:
-
- `frontend` (Nginx)
- `backend` (Express)
- `database` (MySQL)
- optional infrastructure: `dnsmasq` and `wireguard` (wg-easy)
-
-Start it:
-
-```bash
-docker compose -f docker-compose.prod.yml up -d --build
+docker compose up -d
 ```

 Notes:

- `docker-compose.prod.yml` uses an **external** network called `proxynet`. Create it if it does not exist:
+- The frontend service is commented out in [docker-compose.yml](docker-compose.yml). If you want the frontend container, uncomment that block and rebuild.
+- The frontend container uses Nginx and proxies /backend to the backend service (see [frontend/nginx.conf](frontend/nginx.conf)).
+- In order to use the database properly, run the scheme and create some users in the users table.

-  ```bash
-  docker network create proxynet
-  ```
+## Local Development

- The production file assigns static IPs; adjust the subnets/IPs if they conflict with your environment.
+### Backend

-## Lint / build
+1. Create a .env file in the backend folder with:

-Frontend:
+```env
+PORT=8004
+DB_HOST=127.0.0.1
+DB_USER=root
+DB_PASSWORD=your_password
+DB_NAME=ca_lose
+```
+
+2. Install deps and run:
+
+```bash
+cd backend
+npm install
+node server.js
+```
+
+Backend listens on http://localhost:8004 and exposes routes under /default.
+
+### Frontend

 ```bash
 cd frontend
-npm run lint
-npm run build
+npm install
+npm run dev
 ```

-## Troubleshooting
+Vite runs the app on the default dev port and talks to the backend using the API helpers in [frontend/src/utils/api](frontend/src/utils/api).

- **Backend does not start / ESM imports**: The backend code uses ESM `import` syntax. Node must treat the backend as an ESM project (commonly by adding `"type": "module"` to `backend/package.json`). Without that, the backend will fail to start (including in Docker).
- **MySQL timezone mount**: The compose files mount `./mysql-timezone.cnf` to `/etc/mysql/conf.d/timezone.cnf`. Ensure `mysql-timezone.cnf` is a file (not a directory) with valid MySQL config, or remove/adjust the mount.
+## API Endpoints

-## License
+- GET /default/users
+- GET /default/confirm-user?username={name}
+- POST /default/new-entry?username={name}

-Licensed under the Apache License 2.0. See [LICENSE](LICENSE).
+## Database Notes
+
+- The base users table is defined in [backend/scheme.sql](backend/scheme.sql).
+- Per-user ticket tables are created on demand by the backend (see [backend/routes/default/frontend.data.js](backend/routes/default/frontend.data.js)).
@@ -11,14 +11,16 @@ const pool = mysql
  })
  .promise();

-export const getUser = async () => {
-  const [rows] = await pool.query("SELECT username FROM users");
+export const getInfo = async () => {
+  const [rows] = await pool.query("SELECT username FROM users;");
+  const [rows2] = await pool.query("SELECT name FROM prize_draws;");

-  if (rows.length > 0) {
+  if (rows.length > 0 && rows2.length > 0) {
    const users = rows.map((r) => r.username);
-    return { users };
+    const prize_draws = rows2.map((n) => n.name);
+    return { users, prize_draws };
  } else {
-    return { users: [], message: "No data found" };
+    return { message: "No data found" };
  }
 };

@@ -28,6 +30,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,16 +42,16 @@ 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,
+        Verlosung VARCHAR(100) NOT NULL,
        Vorname VARCHAR(100) NOT NULL,
        Nachname Varchar(100) NOT NULL,
        EMail Varchar(100) NOT NULL,
        Telefonnummer Varchar(100) NOT NULL,
        Lose INT NOT NULL,
+        Schokolade BOOLEAN NOT NULL,
        Firmenname Varchar(100),
        Vorname_Geschaeftlich Varchar(100),
        Nachname_Geschaeftlich Varchar(100),
@@ -70,16 +75,16 @@ 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;
  }
 };

-export const newEntry = async (formData, username) => {
+export const newEntry = async (formData, username, prizeDraw) => {
  const confirmation = await confirmUser(username);

  if (!confirmation || !confirmation.success) {
@@ -89,14 +94,16 @@ export const newEntry = async (formData, username) => {
  const tableName = confirmation.tableName;

  const [result] = await pool.query(
-    `INSERT INTO ?? (Vorname, Nachname, EMail, Telefonnummer, Lose, Firmenname, Vorname_Geschaeftlich, Nachname_Geschaeftlich, EMail_Geschaeftlich, Telefonnummer_Geschaeftlich, Strasse_Hausnr, Plz_Ort, Zahlungsmethode) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+    `INSERT INTO ?? (Verlosung, Vorname, Nachname, EMail, Telefonnummer, Lose, Schokolade, Firmenname, Vorname_Geschaeftlich, Nachname_Geschaeftlich, EMail_Geschaeftlich, Telefonnummer_Geschaeftlich, Strasse_Hausnr, Plz_Ort, Zahlungsmethode) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
    [
      tableName,
+      prizeDraw,
      formData.firstName,
      formData.lastName,
      formData.email,
      formData.phoneNumber,
      formData.tickets,
+      formData.chocolates,
      formData.companyName,
      formData.cmpFirstName,
      formData.cpmLastName,
@@ -3,26 +3,33 @@ import dotenv from "dotenv";
 const router = express.Router();
 dotenv.config();

-import { getUser, newEntry, confirmUser } from "./frontend.data.js";
+import { getInfo, newEntry, confirmUser } from "./frontend.data.js";

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

-router.get("/users", async (req, res) => {
-  const users = await getUser();
-  res.json(users);
+router.get("/info", async (req, res) => {
+  const info = await getInfo();
+
+  if (!info) {
+    return res.status(500).json({ message: "Server error" });
+  }
+
+  res.json(info);
 });

 router.get("/confirm-user", async (req, res) => {
  const username = req.query.username;
+
  if (!username) {
    return res.status(400).json({ message: "Username is required" });
  }
@@ -1,3 +1,5 @@
+USE ca_lose;
+
 CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(100) NOT NULL UNIQUE,
@@ -6,9 +8,16 @@ CREATE TABLE users (
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
 );

+CREATE TABLE prize_draws (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    name VARCHAR(100) NOT NULL UNIQUE,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
 /* This scheme does not have to be implemented manually. It always will be generated by the backend */
 CREATE TABLE xx_DD_MM_YYYY (
    id INT AUTO_INCREMENT PRIMARY KEY,
+    Verlosung VARCHAR(100) NOT NULL,
    Vorname VARCHAR(100) NOT NULL,
    Nachname Varchar(100) NOT NULL,
    EMail Varchar(100) NOT NULL,
@@ -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
@@ -0,0 +1,19 @@
+FROM node:22-alpine AS builder
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN npm ci
+
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine AS runner
+
+WORKDIR /usr/share/nginx/html
+COPY --from=builder /app/dist .
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
@@ -2,7 +2,18 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link
+      rel="icon"
+      type="image/png"
+      href="/favicon-light.png"
+      media="(prefers-color-scheme: light)"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      href="/favicon-dark.png"
+      media="(prefers-color-scheme: dark)"
+    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lose Verkaufen</title>
  </head>
@@ -0,0 +1,26 @@
+server {
+  listen 80;
+  server_name _;
+
+  root /usr/share/nginx/html;
+  index index.html;
+
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+
+  location = /backend {
+    return 301 /backend/;
+  }
+
+  location /backend/ {
+    proxy_pass http://ca-lose-backend:8004/;
+  }
+
+  location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
+    expires 1y;
+    access_log off;
+    add_header Cache-Control "public, immutable";
+    try_files $uri =404;
+  }
+}
@@ -16,14 +16,19 @@
        "@mui/joy": "^5.0.0-beta.52",
        "@mui/material": "^9.0.1",
        "@tailwindcss/vite": "^4.3.0",
+        "@tanstack/react-form": "^1.32.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",
        "react-i18next": "^17.0.7",
        "react-router-dom": "^7.15.0",
-        "tailwindcss": "^4.3.0"
+        "tailwindcss": "^4.3.0",
+        "validator": "^13.15.35",
+        "zod": "^4.4.3"
      },
      "devDependencies": {
        "@eslint/js": "^10.0.1",
@@ -31,6 +36,7 @@
        "@types/node": "^24.12.2",
        "@types/react": "^19.2.14",
        "@types/react-dom": "^19.2.3",
+        "@types/validator": "^13.15.10",
        "@vitejs/plugin-react": "^6.0.1",
        "eslint": "^10.2.1",
        "eslint-plugin-react-hooks": "^7.1.1",
@@ -1766,6 +1772,126 @@
        "vite": "^5.2.0 || ^6 || ^7 || ^8"
      }
    },
+    "node_modules/@tanstack/devtools-event-client": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/devtools-event-client/-/devtools-event-client-0.4.3.tgz",
+      "integrity": "sha512-OZI6QyULw0FI0wjgmeYzCIfbgPsOEzwJtCpa69XrfLMtNXLGnz3d/dIabk7frg0TmHo+Ah49w5I4KC7Tufwsvw==",
+      "license": "MIT",
+      "bin": {
+        "intent": "bin/intent.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/form-core": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/form-core/-/form-core-1.32.0.tgz",
+      "integrity": "sha512-Tn5VRDSjyqjmaet2tJMuEWDRFyrCaon03vxXPlSSaiSs6C/N7lCIwGCXJbZXEUq1kTj8jYN9qyXHbsz4LQHcow==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/devtools-event-client": "^0.4.1",
+        "@tanstack/pacer-lite": "^0.1.1",
+        "@tanstack/store": "^0.9.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/pacer-lite": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/pacer-lite/-/pacer-lite-0.1.1.tgz",
+      "integrity": "sha512-y/xtNPNt/YeyoVxE/JCx+T7yjEzpezmbb+toK8DDD1P4m7Kzs5YR956+7OKexG3f8aXgC3rLZl7b1V+yNUSy5w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "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-form": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-form/-/react-form-1.32.0.tgz",
+      "integrity": "sha512-6WP5SQTA6/H9crCpvpq3ZppYWqtrdE5NjOy6ebABi6uAQPqhfTzrdjS9t40mCZCFtGI5585OhJV6zBP/KN2zcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/form-core": "1.32.0",
+        "@tanstack/react-store": "^0.9.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@tanstack/react-start": {
+          "optional": true
+        }
+      }
+    },
+    "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/@tanstack/react-store": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-store/-/react-store-0.9.3.tgz",
+      "integrity": "sha512-y2iHd/N9OkoQbFJLUX1T9vbc2O9tjH0pQRgTcx1/Nz4IlwLvkgpuglXUx+mXt0g5ZDFrEeDnONPqkbfxXJKwRg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/store": "0.9.3",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/store": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/store/-/store-0.9.3.tgz",
+      "integrity": "sha512-8reSzl/qGWGGVKhBoxXPMWzATSbZLZFWhwBAFO9NAyp0TxzfBP0mIrGb8CP8KrQTmvzXlR/vFPPUrHTLBGyFyw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
    "node_modules/@tybys/wasm-util": {
      "version": "0.10.2",
      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
@@ -1854,6 +1980,13 @@
        "@types/react": "*"
      }
    },
+    "node_modules/@types/validator": {
+      "version": "13.15.10",
+      "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.15.10.tgz",
+      "integrity": "sha512-T8L6i7wCuyoK8A/ZeLYt1+q0ty3Zb9+qbSSvrIVitzT3YjZqkTZ40IbRsPanlB4h1QB3JVL1SYCdR6ngtFYcuA==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@typescript-eslint/eslint-plugin": {
      "version": "8.59.2",
      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.59.2.tgz",
@@ -2976,12 +3109,12 @@
      }
    },
    "node_modules/js-cookie": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
-      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.7.tgz",
+      "integrity": "sha512-z/wZZgDrkNV1eA0ULjM/F9/50Ya8fbzgKneSpoPsXSGd0KnpdtHfOZWK+GcwLk+EZbS4F9RBhU+K2RgzuDaItw==",
      "license": "MIT",
      "engines": {
-        "node": ">=14"
+        "node": ">=20"
      }
    },
    "node_modules/js-tokens": {
@@ -3042,6 +3175,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",
@@ -4059,6 +4198,15 @@
        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
      }
    },
+    "node_modules/validator": {
+      "version": "13.15.35",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.15.35.tgz",
+      "integrity": "sha512-TQ5pAGhd5whStmqWvYF4OjQROlmv9SMFVt37qoCBdqRffuuklWYQlCNnEs2ZaIBD1kZRNnikiZOS1eqgkar0iw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
    "node_modules/vite": {
      "version": "8.0.11",
      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.11.tgz",
@@ -4178,23 +4326,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",
@@ -4212,7 +4343,6 @@
      "version": "4.4.3",
      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
      "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
-      "dev": true,
      "license": "MIT",
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
@@ -18,14 +18,19 @@
    "@mui/joy": "^5.0.0-beta.52",
    "@mui/material": "^9.0.1",
    "@tailwindcss/vite": "^4.3.0",
+    "@tanstack/react-form": "^1.32.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",
    "react-i18next": "^17.0.7",
    "react-router-dom": "^7.15.0",
-    "tailwindcss": "^4.3.0"
+    "tailwindcss": "^4.3.0",
+    "validator": "^13.15.35",
+    "zod": "^4.4.3"
  },
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -37,6 +42,7 @@
    "@types/node": "^24.12.2",
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
+    "@types/validator": "^13.15.10",
    "@vitejs/plugin-react": "^6.0.1",
    "eslint": "^10.2.1",
    "eslint-plugin-react-hooks": "^7.1.1",
@@ -0,0 +1,48 @@
+{
+  "fill" : {
+    "automatic-gradient" : "extended-srgb:0.00000,0.53333,1.00000,1.00000"
+  },
+  "groups" : [
+    {
+      "layers" : [
+        {
+          "blend-mode" : "normal",
+          "fill-specializations" : [
+            {
+              "value" : "automatic"
+            },
+            {
+              "appearance" : "dark",
+              "value" : {
+                "solid" : "extended-srgb:0.00000,0.53333,1.00000,1.00000"
+              }
+            }
+          ],
+          "image-name" : "Unbenannt.png",
+          "name" : "Unbenannt",
+          "position" : {
+            "scale" : 0.9,
+            "translation-in-points" : [
+              0,
+              0
+            ]
+          }
+        }
+      ],
+      "shadow" : {
+        "kind" : "neutral",
+        "opacity" : 0.5
+      },
+      "translucency" : {
+        "enabled" : true,
+        "value" : 0.5
+      }
+    }
+  ],
+  "supported-platforms" : {
+    "circles" : [
+      "watchOS"
+    ],
+    "squares" : "shared"
+  }
+}
@@ -1,24 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg">
-  <symbol id="bluesky-icon" viewBox="0 0 16 17">
-    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
-    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
-  </symbol>
-  <symbol id="discord-icon" viewBox="0 0 20 19">
-    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
-  </symbol>
-  <symbol id="documentation-icon" viewBox="0 0 21 20">
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
-  </symbol>
-  <symbol id="github-icon" viewBox="0 0 19 19">
-    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
-  </symbol>
-  <symbol id="social-icon" viewBox="0 0 20 20">
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
-  </symbol>
-  <symbol id="x-icon" viewBox="0 0 19 19">
-    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
-  </symbol>
-</svg>
@@ -6,3 +6,7 @@ body,
  height: 100%;
  margin: 0;
 }
+
+body.success-bg {
+  background: linear-gradient(135deg, #0f172a, #111827);
+}
@@ -2,15 +2,21 @@ import "./App.css";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { MainForm } from "./pages/MainForm";
 import { SuccessPage } from "./pages/SuccessPage";
+import { PageFooter } from "./components/PageFooter";

 function App() {
  return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<MainForm />} />
-        <Route path="/success" element={<SuccessPage />} />
-      </Routes>
-    </BrowserRouter>
+    <div className="min-h-screen flex flex-col">
+      <BrowserRouter>
+        <main className="flex-1 flex">
+          <Routes>
+            <Route path="/" element={<MainForm />} />
+            <Route path="/success" element={<SuccessPage />} />
+          </Routes>
+        </main>
+      </BrowserRouter>
+      <PageFooter />
+    </div>
  );
 }

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
@@ -0,0 +1,42 @@
+import { Link, Sheet, Typography } from "@mui/joy";
+import { useTranslation } from "react-i18next";
+import qrCode from "../assets/Portfolio-QR-Code.png";
+
+export const PageFooter = () => {
+  const { t } = useTranslation();
+
+  return (
+    <footer className="w-full mt-auto px-3 pb-3">
+      <Sheet
+        variant="soft"
+        className="mx-auto w-full max-w-3xl rounded-2xl border border-slate-200/70 bg-white/80 backdrop-blur"
+      >
+        <div className="flex flex-col gap-2 p-2.5 sm:p-3">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <Typography
+              level="title-sm"
+              className="text-slate-800 tracking-wide sm:pr-4"
+            >
+              {t("footer-headline")}
+              <Link
+                href="https://portfolio-theis.de/"
+                target="_blank"
+                rel="noreferrer"
+                className="ml-2 inline-flex items-center text-slate-700 underline decoration-slate-300 underline-offset-4 hover:text-slate-900"
+              >
+                portfolio-theis.de
+              </Link>
+            </Typography>
+            <div className="flex items-center justify-center sm:justify-end sm:flex-none">
+              <img
+                src={qrCode}
+                alt="https://portfolio-theis.de/"
+                className="h-20 w-20 shrink-0 rounded-md border border-slate-200 object-contain"
+              />
+            </div>
+          </div>
+        </div>
+      </Sheet>
+    </footer>
+  );
+};
@@ -0,0 +1,31 @@
+import type { TextFieldProps } from "../config/interfaces.config";
+import { FormControl, FormLabel, Input } from "@mui/joy";
+
+export const TextField = ({
+  label,
+  type = "text",
+  required,
+  errors,
+  value,
+  onBlur,
+  onChange,
+  slotProps,
+  afterInput,
+}: TextFieldProps) => (
+  <FormControl required={required}>
+    <FormLabel>{label}</FormLabel>
+    <Input
+      value={value ?? ""}
+      onBlur={onBlur}
+      onChange={(e) => onChange(e.target.value)}
+      type={type}
+      variant="soft"
+      sx={{ borderRadius: "10px" }}
+      slotProps={slotProps}
+    />
+    {afterInput}
+    {errors[0] ? (
+      <span className="text-red-500 text-sm">{errors[0]}</span>
+    ) : null}
+  </FormControl>
+);
@@ -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>
+  );
+};
@@ -0,0 +1,53 @@
+import {
+  Modal,
+  ModalDialog,
+  Typography,
+  ModalClose,
+  Autocomplete,
+} from "@mui/joy";
+import { useTranslation } from "react-i18next";
+
+interface SelectUserModalProps {
+  showSelectUser: boolean;
+  setShowSelectUser: (value: boolean) => void;
+  info: { users: string[]; prize_draws: string[] };
+  infoIsLoading: boolean;
+  selectedUser: string | null;
+  selectedDraw: string | null;
+  handleUserSelection: (value: string | null) => void;
+  handleDrawSelection: (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.info?.users ?? []}
+          loading={props.infoIsLoading}
+          loadingText={t("loading")}
+          value={props.selectedUser}
+          onChange={(_, value) => props.handleUserSelection(value)}
+          placeholder={t("user")}
+          variant="soft"
+          sx={{ borderRadius: "10px" }}
+        />
+        {/* Prize selection */}
+        <Autocomplete
+          options={props.info?.prize_draws ?? []}
+          loading={props.infoIsLoading}
+          loadingText={t("loading")}
+          value={props.selectedDraw}
+          onChange={(_, value) => props.handleDrawSelection(value)}
+          placeholder={t("prize_draws")}
+          variant="soft"
+          sx={{ borderRadius: "10px" }}
+        />
+      </ModalDialog>
+    </Modal>
+  );
+};
@@ -1,3 +1,7 @@
+import z from "zod";
+import validator from "validator";
+import type { ReactNode } from "react";
+
 export interface FormData {
  firstName: string;
  lastName: string;
@@ -19,3 +23,48 @@ export interface Message {
  headline: string;
  text: string;
 }
+
+export type TextFieldProps = {
+  label: string;
+  type?: "text" | "email" | "tel" | "number";
+  required?: boolean;
+  errors: string[];
+  onBlur: () => void;
+  onChange: (value: string) => void;
+  value: string | number | null | undefined;
+  slotProps?: { input?: Record<string, unknown> };
+  afterInput?: ReactNode;
+};
+
+export const createFormSchema = (
+  t: (key: string) => string,
+  invoice: boolean,
+) =>
+  z.object({
+    firstName: z.string().min(1, t("name-error")),
+    lastName: z.string().min(1, t("name-error")),
+    email: z.email(t("email-error")),
+    phoneNumber: z.string(t("phone-error")).refine(validator.isMobilePhone),
+    tickets: z.number(t("ticket-error")).min(1),
+    chocolates: z.boolean(t("chocolates-error")),
+    companyName: invoice
+      ? z.string().min(1, t("name-error"))
+      : z.string().optional(),
+    cmpFirstName: invoice
+      ? z.string().min(1, t("name-error"))
+      : z.string().optional(),
+    cpmLastName: invoice
+      ? z.string().min(1, t("name-error"))
+      : z.string().optional(),
+    cpmEmail: invoice ? z.email(t("email-error")) : z.string().optional(),
+    cpmPhoneNumber: invoice
+      ? z.string(t("phone-error")).refine(validator.isMobilePhone)
+      : z.string().optional(),
+    street: invoice
+      ? z.string().min(1, t("name-error"))
+      : z.string().optional(),
+    postalCode: invoice
+      ? z.string().min(1, t("name-error"))
+      : z.string().optional(),
+    paymentMethod: z.string().min(1, t("name-error")),
+  });
@@ -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>,
 );
@@ -1,6 +1,5 @@
 import { useTranslation } from "react-i18next";
 import { useState, useEffect } from "react";
-import * as React from "react";
 import Cookies from "js-cookie";
 import {
  Sheet,
@@ -13,214 +12,183 @@ import {
  Typography,
  FormControl,
  FormLabel,
-  Autocomplete,
  ButtonGroup,
-  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";
-
-const PAYMENT_METHODS = ["bar", "paypal", "andere"] as const;
-const PAYMENT_LABELS: Record<string, string> = {
-  bar: "Cash",
-  paypal: "PayPal",
-  andere: "Transfer",
-};
-
-const DEFAULT_FORM: FormData = {
-  firstName: "",
-  lastName: "",
-  email: "",
-  phoneNumber: "",
-  tickets: 1,
-  companyName: "",
-  cmpFirstName: "",
-  cpmLastName: "",
-  cpmEmail: "",
-  cpmPhoneNumber: "",
-  street: "",
-  postalCode: "",
-  paymentMethod: "",
-};
-
-// ─── Field component lives OUTSIDE MainForm so React doesn't treat it as a
-// new component type on every render, which would cause inputs to lose focus.
-const Field = ({
-  label,
-  name,
-  type = "text",
-  required = true,
-  formData,
-  onChange,
-}: {
-  label: string;
-  name: keyof FormData;
-  type?: string;
-  required?: boolean;
-  formData: FormData;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}) => (
-  <FormControl required={required}>
-    <FormLabel>{label}</FormLabel>
-    <Input
-      name={name}
-      type={type}
-      value={formData[name] as string}
-      onChange={onChange}
-      variant="soft"
-      sx={{ borderRadius: "10px" }}
-    />
-  </FormControl>
-);
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { confirmUser, fetchInfo } from "../utils/api/users";
+import { QRcodeModal } from "../components/modals/QR-CodeModal";
+import { SelectUserModal } from "../components/modals/SelectUserModal";
+import { useForm } from "@tanstack/react-form";
+import { changeTranslation } from "../utils/uxFncs";
+import { createFormSchema } from "../config/interfaces.config";
+import { validateFieldWithZod } from "../utils/uxFncs";
+import { TextField } from "../components/TextField";
+import { PAYMENT_METHODS, PAYMENT_LABELS } from "../utils/uxFncs";

 export const MainForm = () => {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();

+  // States
  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 [selectedDraw, setSelectedDraw] = useState<string | null>(null);
  const [showSelectUser, setShowSelectUser] = useState(false);
  const [QRmodal, setQRmodal] = useState(false);

-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setFormData({ ...formData, [e.target.name]: e.target.value });
+  const formSchema = createFormSchema(t, invoice);
+
+  // Validates the fields and makes sure that the form is maching the zod schema
+  const makeFieldValidator = (fieldName: string) => ({
+    onSubmit: ({
+      fieldApi,
+    }: {
+      fieldApi: { form: { state: { values: Record<string, unknown> } } };
+    }) => {
+      const allValues = fieldApi.form.state.values;
+      return validateFieldWithZod(formSchema, fieldName, allValues);
+    },
+    onBlur: ({
+      fieldApi,
+    }: {
+      fieldApi: { form: { state: { values: Record<string, unknown> } } };
+    }) => {
+      const allValues = fieldApi.form.state.values;
+      return validateFieldWithZod(formSchema, fieldName, allValues);
+    },
+  });
+
+  // Creates a form with tanstack form
+  const { Field, Subscribe, handleSubmit, setFieldValue } = useForm({
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      email: "",
+      phoneNumber: "",
+      tickets: 0,
+      chocolates: false,
+      companyName: "",
+      cmpFirstName: "",
+      cpmLastName: "",
+      cpmEmail: "",
+      cpmPhoneNumber: "",
+      street: "",
+      postalCode: "",
+      paymentMethod: "",
+    },
+    onSubmit: async ({ value }) => {
+      const result = formSchema.safeParse(value);
+      if (!result.success) return;
+      mutateForm(value as FormData);
+    },
+  });
+
+  // This function returns the errors for one field
+  const getErrors = (field: {
+    state: { meta: { errorMap: Record<string, unknown> } };
+  }) => {
+    const normalizeErrors = (value: unknown) => {
+      if (Array.isArray(value)) return value as string[];
+      if (typeof value === "string" && value.length > 0) return [value];
+      return [] as string[];
+    };
+
+    const blurErrors = normalizeErrors(field.state.meta.errorMap["onBlur"]);
+    const submitErrors = normalizeErrors(field.state.meta.errorMap["onSubmit"]);
+    return [...blurErrors, ...submitErrors].filter(Boolean);
  };

-  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 that only executes on mount and is checking if there is a user selcted in the cookies
+  useEffect(() => {
+    const savedUser = Cookies.get("selectedUser");
+    const savedDraw = Cookies.get("selectedDraw");
+    if (savedDraw) {
+      setSelectedDraw(savedDraw);
    }
-  };

-  const handleUserSelection = (username: string | null) => {
-    if (!username) return;
-    setSelectedUser(username);
-    confirmUser(username);
-    Cookies.set("selectedUser", username);
-  };
-
-  const changeTranslation = () => {
-    const clientLng = i18n.language;
-
-    if (clientLng === "en") {
-      i18n.changeLanguage("de");
-      Cookies.set("language", "de");
-    } else if (clientLng === "de") {
-      i18n.changeLanguage("en");
-      Cookies.set("language", "en");
+    if (savedUser) {
+      setSelectedUser(savedUser);
    } else {
      setMsg({
-        type: "danger",
-        headline: "Error",
-        text: "Cannot change langugage.",
+        type: "warning",
+        headline: t("set-username-headline"),
+        text: t("set-username-text"),
      });
    }
-  };
-
-  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);
+  // Fetch users tanstack query
+  const { data: info, isLoading: infoIsLoading } = useQuery({
+    queryKey: ["info"],
+    queryFn: fetchInfo,
+  });
+
+  // Query for validating selcted user
+  const { data: userData } = useQuery({
+    queryKey: ["user", selectedUser],
+    enabled: !!selectedUser,
+    queryFn: () => confirmUser(selectedUser),
+  });
+
+  // Tanstack query (mutate) for sending the form
+  const { mutate: mutateForm, isPending: mutateFormIsPending } = useMutation({
+    mutationFn: (values: FormData) => submitFormData(values, selectedUser),
+    onSuccess: (_, values) => {
+      queryClient.invalidateQueries({ queryKey: ["user", selectedUser] });
+      document.location.href = `/success?id=${nextID}&tickets=${values.tickets}`;
+    },
+    onError: () => {
+      queryClient.invalidateQueries({ queryKey: ["user", selectedUser] });
+      setMsg({
+        type: "danger",
+        headline: t("error"),
+        text: t("form-submission-failed"),
+      });
+    },
+  });
+
+  const nextID = userData?.nextID ?? "N/A";
+
+  // function for selecting user
+  const handleUserSelection = (username: string | null) => {
+    if (username == null || username == "") {
+      return;
    }
+    setSelectedUser(username);
  };

-  // Shorthand so we don't repeat formData + onChange on every Field usage
-  const fieldProps = { formData, onChange: handleChange };
+  // function for selecting draw
+  const handleDrawSelection = (draw: string | null) => {
+    if (draw == null || draw == "") {
+      return;
+    }
+    setSelectedDraw(draw);
+    Cookies.set("selectedDraw", draw);
+  };

  return (
    <>
-      <Modal open={showSelectUser}>
-        <ModalDialog color="primary" layout="center" size="lg">
-          <ModalClose onClick={() => setShowSelectUser(false)} />
-          <Typography>{t("user")}</Typography>
-          {/* User selection */}
-          <Autocomplete
-            options={users}
-            value={selectedUser}
-            onChange={(_, value) => handleUserSelection(value)}
-            placeholder={t("user")}
-            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>
+      <SelectUserModal
+        showSelectUser={showSelectUser}
+        setShowSelectUser={setShowSelectUser}
+        info={info}
+        infoIsLoading={infoIsLoading}
+        selectedUser={selectedUser}
+        selectedDraw={selectedDraw}
+        handleUserSelection={handleUserSelection}
+        handleDrawSelection={handleDrawSelection}
+      />

-      <div className="min-h-screen w-full flex items-center justify-center from-slate-100 to-blue-50 p-4">
+      <QRcodeModal setQRmodal={setQRmodal} QRmodal={QRmodal} />
+
+      <div className="flex-1 w-full flex items-center justify-center from-slate-100 to-blue-50 p-4">
        <Sheet
          variant="plain"
          className="w-full"
@@ -246,10 +214,20 @@ export const MainForm = () => {
            <IconButton onClick={() => setQRmodal(true)}>
              <QrCodeIcon />
            </IconButton>
-            {/* Language toggle */}
            <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
@@ -259,7 +237,6 @@ export const MainForm = () => {
            }}
            className="flex flex-col gap-4"
          >
-            {/* Next ID badge */}
            <Chip
              size="lg"
              variant="solid"
@@ -276,44 +253,134 @@ export const MainForm = () => {

            {/* Name row */}
            <div className="grid grid-cols-2 gap-3">
-              <Field label={t("first-name")} name="firstName" {...fieldProps} />
-              <Field label={t("last-name")} name="lastName" {...fieldProps} />
+              <Field
+                name="firstName"
+                validators={makeFieldValidator("firstName")}
+              >
+                {(field) => (
+                  <TextField
+                    label={t("first-name")}
+                    required
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={field.handleChange}
+                    errors={getErrors(field)}
+                  />
+                )}
+              </Field>
+
+              <Field
+                name="lastName"
+                validators={makeFieldValidator("lastName")}
+              >
+                {(field) => (
+                  <TextField
+                    label={t("last-name")}
+                    required
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={field.handleChange}
+                    errors={getErrors(field)}
+                  />
+                )}
+              </Field>
            </div>

-            <Field
-              label={t("email")}
-              name="email"
-              type="email"
-              {...fieldProps}
-            />
-            <Field
-              label={t("phone-number")}
-              name="phoneNumber"
-              type="tel"
-              {...fieldProps}
-            />
+            <Field name="email" validators={makeFieldValidator("email")}>
+              {(field) => (
+                <TextField
+                  label={t("email")}
+                  type="email"
+                  required
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={field.handleChange}
+                  errors={getErrors(field)}
+                />
+              )}
+            </Field>

-            {/* Tickets + Invoice toggle */}
+            <Field
+              name="phoneNumber"
+              validators={makeFieldValidator("phoneNumber")}
+            >
+              {(field) => (
+                <TextField
+                  label={t("phone-number")}
+                  type="tel"
+                  required
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={field.handleChange}
+                  errors={getErrors(field)}
+                />
+              )}
+            </Field>
+
+            {/* Tickets + Invoice + Chocolate toggle */}
            <div className="grid grid-cols-2 gap-3 items-end">
              <FormControl required>
                <FormLabel>{t("tickets")}</FormLabel>
-                <Input
+                <Field
                  name="tickets"
-                  type="number"
-                  value={formData.tickets}
-                  onChange={handleChange}
-                  slotProps={{ input: { min: 1 } }}
-                  variant="soft"
-                  sx={{ borderRadius: "10px" }}
-                />
+                  validators={makeFieldValidator("tickets")}
+                >
+                  {(field) => {
+                    const errors = getErrors(field);
+                    return (
+                      <>
+                        <Input
+                          type="number"
+                          value={
+                            field.state.value === 0 ? "" : field.state.value
+                          }
+                          onBlur={field.handleBlur}
+                          onChange={(e) => {
+                            const val = e.target.value;
+                            field.handleChange(val === "" ? 0 : Number(val));
+                          }}
+                          variant="soft"
+                          sx={{ borderRadius: "10px" }}
+                        />
+                        {errors.length > 0 && (
+                          <span className="text-red-500 text-sm">
+                            {errors[0]}
+                          </span>
+                        )}
+                      </>
+                    );
+                  }}
+                </Field>
              </FormControl>
-              <div className="flex items-center pb-2">
+              <div className="flex flex-col gap-2 pb-2">
                <Checkbox
                  checked={invoice}
-                  onChange={(e) => setInvoice(e.target.checked)}
+                  onChange={(e) => {
+                    const checked = e.target.checked;
+                    setInvoice(checked);
+                    if (!checked) {
+                      setFieldValue("companyName", "");
+                      setFieldValue("cmpFirstName", "");
+                      setFieldValue("cpmLastName", "");
+                      setFieldValue("cpmEmail", "");
+                      setFieldValue("cpmPhoneNumber", "");
+                      setFieldValue("street", "");
+                      setFieldValue("postalCode", "");
+                    }
+                  }}
                  label={t("invoice")}
                  variant="outlined"
                />
+                <Field name="chocolates">
+                  {(field) => (
+                    <Checkbox
+                      checked={!!field.state.value}
+                      onChange={(e) => field.handleChange(e.target.checked)}
+                      label={t("chocolates")}
+                      variant="outlined"
+                    />
+                  )}
+                </Field>
              </div>
            </div>

@@ -323,115 +390,193 @@ export const MainForm = () => {
                <Typography level="title-sm" color="primary">
                  {t("invoice-details")}
                </Typography>
+
                <Field
-                  label={t("company-name")}
                  name="companyName"
-                  {...fieldProps}
-                />
+                  validators={makeFieldValidator("companyName")}
+                >
+                  {(field) => (
+                    <TextField
+                      label={t("company-name")}
+                      required
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={field.handleChange}
+                      errors={getErrors(field)}
+                    />
+                  )}
+                </Field>
+
                <div className="grid grid-cols-2 gap-3">
                  <Field
-                    label={t("first-name")}
                    name="cmpFirstName"
-                    {...fieldProps}
-                  />
+                    validators={makeFieldValidator("cmpFirstName")}
+                  >
+                    {(field) => (
+                      <TextField
+                        label={t("first-name")}
+                        required
+                        value={field.state.value}
+                        onBlur={field.handleBlur}
+                        onChange={field.handleChange}
+                        errors={getErrors(field)}
+                      />
+                    )}
+                  </Field>
+
                  <Field
-                    label={t("last-name")}
                    name="cpmLastName"
-                    {...fieldProps}
-                  />
+                    validators={makeFieldValidator("cpmLastName")}
+                  >
+                    {(field) => (
+                      <TextField
+                        label={t("last-name")}
+                        required
+                        value={field.state.value}
+                        onBlur={field.handleBlur}
+                        onChange={field.handleChange}
+                        errors={getErrors(field)}
+                      />
+                    )}
+                  </Field>
                </div>
-                <Field label={t("street")} name="street" {...fieldProps} />
+
+                <Field name="street" validators={makeFieldValidator("street")}>
+                  {(field) => (
+                    <TextField
+                      label={t("street")}
+                      required
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={field.handleChange}
+                      errors={getErrors(field)}
+                    />
+                  )}
+                </Field>
+
                <Field
-                  label={t("postal-code")}
                  name="postalCode"
-                  {...fieldProps}
-                />
+                  validators={makeFieldValidator("postalCode")}
+                >
+                  {(field) => (
+                    <TextField
+                      label={t("postal-code")}
+                      required
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={field.handleChange}
+                      errors={getErrors(field)}
+                    />
+                  )}
+                </Field>
+
                <Field
-                  label={t("phone-number")}
                  name="cpmPhoneNumber"
-                  type="tel"
-                  {...fieldProps}
-                />
+                  validators={makeFieldValidator("cpmPhoneNumber")}
+                >
+                  {(field) => (
+                    <TextField
+                      label={t("phone-number")}
+                      type="tel"
+                      required
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={field.handleChange}
+                      errors={getErrors(field)}
+                    />
+                  )}
+                </Field>
+
                <Field
-                  label={t("email")}
                  name="cpmEmail"
-                  type="email"
-                  {...fieldProps}
-                />
+                  validators={makeFieldValidator("cpmEmail")}
+                >
+                  {(field) => (
+                    <TextField
+                      label={t("email")}
+                      type="email"
+                      required
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={field.handleChange}
+                      errors={getErrors(field)}
+                    />
+                  )}
+                </Field>
              </div>
            )}

            {/* Payment method selection */}
            <FormControl required>
              <FormLabel>{t("select-payment-method")}</FormLabel>
-              <div className="flex gap-2 flex-wrap mt-1">
-                {PAYMENT_METHODS.map((method) => (
-                  <Button
-                    key={method}
-                    variant={
-                      formData.paymentMethod === method ? "solid" : "soft"
-                    }
-                    color="primary"
-                    onClick={() =>
-                      setFormData((prev) => ({
-                        ...prev,
-                        paymentMethod: method,
-                      }))
-                    }
-                    sx={{
-                      flex: 1,
-                      minWidth: "90px",
-                      borderRadius: "12px",
-                      py: 1.5,
-                      textTransform: "none",
-                      fontWeight: formData.paymentMethod === method ? 700 : 400,
-                    }}
-                  >
-                    {PAYMENT_LABELS[method]}
-                  </Button>
-                ))}
-              </div>
-              {/* Hidden required input to enforce payment selection on submit */}
-              {!formData.paymentMethod && (
-                <input
-                  tabIndex={-1}
-                  required
-                  value=""
-                  onChange={() => {}}
-                  style={{
-                    opacity: 0,
-                    width: 0,
-                    height: 0,
-                    position: "absolute",
-                  }}
-                />
-              )}
+              <Subscribe selector={(state) => state.values.paymentMethod}>
+                {(paymentMethod) => (
+                  <div className="flex gap-2 flex-wrap mt-1">
+                    {PAYMENT_METHODS.map((method) => (
+                      <Button
+                        key={method}
+                        variant={paymentMethod === method ? "solid" : "soft"}
+                        color="primary"
+                        onClick={() => {
+                          setFieldValue("paymentMethod", method);
+                          if (method === "paypal") {
+                            setQRmodal(true);
+                          }
+                        }}
+                        sx={{
+                          flex: 1,
+                          minWidth: "90px",
+                          borderRadius: "12px",
+                          py: 1.5,
+                          textTransform: "none",
+                          fontWeight: paymentMethod === method ? 700 : 400,
+                        }}
+                      >
+                        {PAYMENT_LABELS[method]}
+                      </Button>
+                    ))}
+                  </div>
+                )}
+              </Subscribe>
            </FormControl>

-            {/* Submit button */}
-            <Button
-              type="submit"
-              loading={isLoading}
-              disabled={!formData.paymentMethod}
-              size="lg"
-              sx={{
-                mt: 2,
-                borderRadius: "14px",
-                fontWeight: 700,
-                letterSpacing: "0.05em",
-                background: "linear-gradient(135deg, #2563eb, #1d4ed8)",
-                "&:hover": {
-                  background: "linear-gradient(135deg, #1d4ed8, #1e40af)",
-                },
-              }}
-            >
-              {t("submit")}
-            </Button>
+            {mutateFormIsPending ? (
+              <div className="flex items-center justify-center">
+                <CircularProgress />
+              </div>
+            ) : (
+              <Subscribe selector={(state) => state.values.paymentMethod}>
+                {(paymentMethod) => (
+                  <Button
+                    type="submit"
+                    disabled={!paymentMethod}
+                    size="lg"
+                    sx={{
+                      mt: 2,
+                      borderRadius: "14px",
+                      fontWeight: 700,
+                      letterSpacing: "0.05em",
+                      background: "linear-gradient(135deg, #2563eb, #1d4ed8)",
+                      "&:hover": {
+                        background: "linear-gradient(135deg, #1d4ed8, #1e40af)",
+                      },
+                    }}
+                  >
+                    {t("submit")}
+                  </Button>
+                )}
+              </Subscribe>
+            )}

-            {/* Alert 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>
@@ -16,6 +16,11 @@ export const SuccessPage = () => {
    setTickets(parseInt(params.get("tickets") ?? "0", 10));
    // Small delay so the CSS transition actually plays
    setTimeout(() => setAnimate(true), 100);
+
+    document.body.classList.add("success-bg");
+    return () => {
+      document.body.classList.remove("success-bg");
+    };
  }, []);

  useEffect(() => {
@@ -36,7 +41,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="flex-1 w-full flex items-center justify-center p-4">
      <Sheet
        variant="plain"
        sx={{
@@ -82,7 +87,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 +118,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 +156,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 +166,11 @@ export const SuccessPage = () => {
        </div>

        {/* Thank-you note */}
-        <div
-          style={fadeUp("0.5s")}
-          className="pt-4 border-t border-slate-100"
-        >
-          <Typography level="body-sm" sx={{ color: "#9ca3af", lineHeight: 1.6 }}>
+        <div style={fadeUp("0.5s")} className="pt-4 border-t border-slate-100">
+          <Typography
+            level="body-sm"
+            sx={{ color: "#9ca3af", lineHeight: 1.6 }}
+          >
            {t("thank-you")}
          </Typography>
        </div>
@@ -0,0 +1,36 @@
+import { API_BASE } from "../../config/api.config";
+import type { FormData } from "../../config/interfaces.config";
+import Cookies from "js-cookie";
+
+export const submitFormData = async (
+  data: FormData,
+  username: string | null,
+) => {
+  console.warn("submitFormData is fetching!");
+
+  const draw = Cookies.get("selectedDraw");
+
+  if (!draw) {
+    throw new Error("You need to set an prize draw!");
+  }
+
+  // await new Promise((resolve) => setTimeout(resolve, 3000)); // Wait 3 seconds
+
+  const response = await fetch(
+    `${API_BASE}/default/new-entry?username=${username}&draw=${draw}`,
+    {
+      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;
+};
@@ -0,0 +1,25 @@
+import { API_BASE } from "../../config/api.config";
+import Cookies from "js-cookie";
+
+export const fetchInfo = async () => {
+  console.warn("fetchInfo is fetching!");
+
+  const response = await fetch(`${API_BASE}/default/info`);
+  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;
+};
@@ -14,11 +14,12 @@
    "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. Haben Sie eine Verlosung ausgewählt?",
    "success": "Erfolg",
    "error": "Fehler",
    "cash": "Bar",
    "paypal": "PayPal",
+    "prize_draws": "Verlosungen",
    "transfer": "Andere (notieren)",
    "ticket-payment_one": "Sie haben erfolgreich {{count}} Los gekauft.",
    "ticket-payment_other": "Sie haben erfolgreich {{count}} Lose gekauft.",
@@ -26,5 +27,15 @@
    "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.",
+    "name-error": "Sie müssen einen Namen eingeben!",
+    "email-error": "Sie müssen eine gültige E-Mail Adresse eingeben!",
+    "phone-error": "Sie müssen eine gültige Telefonnummer eingeben!",
+    "footer-headline": "Dieses System wurde vollständig konzipiert und entwickelt von Theis Gaedigk. - Portfolio: ",
+    "chocolates": "Schokoladen",
+    "chocolates-error": "Dieses Feld kann nur wahr oder falsch sein."
 }
@@ -13,7 +13,8 @@
    "user": "User",
    "next-id": "Next Entry Number: ",
    "form-submitted-successfully": "Form submitted successfully!",
-    "orm-submission-failed": "Form submission failed.",
+    "form-submission-failed": "Form submission failed. Have you set an prize draw?",
+    "prize_draws": "Prize draws",
    "success": "Success",
    "error": "Error",
    "cash": "Cash",
@@ -27,5 +28,15 @@
    "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.",
+    "name-error": "You have to enter a name!",
+    "email-error": "You have to enter a valid E-Mail adress!",
+    "phone-error": "You have to enter a vaild phone number!",
+    "footer-headline": "This system was fully designed and developed by Theis Gaedigk. - Portfolio: ",
+    "chocolates": "Chocolates",
+    "chocolates-error": "This field can only be true or false."
 }
@@ -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 };
-  }
-};
@@ -0,0 +1,42 @@
+import i18n from "./i18n";
+import Cookies from "js-cookie";
+import { ZodObject } from "zod";
+import type { ZodRawShape } from "zod";
+
+export const changeTranslation = () => {
+  const clientLng = i18n.language;
+
+  if (clientLng === "en") {
+    i18n.changeLanguage("de");
+    Cookies.set("language", "de");
+  } else if (clientLng === "de") {
+    i18n.changeLanguage("en");
+    Cookies.set("language", "en");
+  } else {
+    alert("Cannot change language.");
+  }
+};
+
+/**
+ * Validates a single field against the full Zod schema.
+ * Returns the first error message for that field, or undefined if valid.
+ */
+export function validateFieldWithZod(
+  schema: ZodObject<ZodRawShape>,
+  fieldName: string,
+  allValues: Record<string, unknown>,
+): string | undefined {
+  const result = schema.safeParse(allValues);
+  if (result.success) return undefined;
+  const issue = result.error.issues.find(
+    (i) => i.path.length === 1 && i.path[0] === fieldName,
+  );
+  return issue?.message;
+}
+
+export const PAYMENT_METHODS = ["bar", "paypal", "andere"] as const;
+export const PAYMENT_LABELS: Record<string, string> = {
+  bar: "Cash",
+  paypal: "PayPal",
+  andere: "Transfer",
+};
@@ -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);
+}
@@ -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);
+}
Author	SHA1	Message	Date
theis.gaedigk	a46cb3b9e7	Merge branch 'dev' into prod	2026-06-10 13:45:53 +02:00
theis.gaedigk	d8e8062990	fixed number input	2026-06-10 13:45:13 +02:00
theis.gaedigk	528ed8ac40	Merge branch 'dev' into prod	2026-06-09 17:44:36 +02:00
theis.gaedigk	470fe75d86	added chocolates box	2026-06-09 17:43:56 +02:00
theis.gaedigk	cfd3a77472	Merge branch 'dev' into prod	2026-06-03 16:33:26 +02:00
theis.gaedigk	d49e62a280	updated wg easy module	2026-06-03 16:32:19 +02:00
theis.gaedigk	a66b150d97	added prize draw name to tables	2026-06-03 16:29:45 +02:00
theis.gaedigk	f7a0a3753c	refactored code	2026-05-25 11:32:45 +02:00
theis.gaedigk	d308f80341	Merge branch 'dev' into prod	2026-05-24 14:19:31 +02:00
theis.gaedigk	636730d4b2	changed branch link	2026-05-24 14:19:09 +02:00
theis.gaedigk	968e1e7727	foxed readme issue	2026-05-24 14:18:33 +02:00
theis.gaedigk	c79f81ec7d	fixed readme issue	2026-05-24 14:18:19 +02:00
theis.gaedigk	9af4ddaf18	Merge branch 'dev' into prod	2026-05-24 14:16:49 +02:00
theis.gaedigk	6d31433321	updated readme	2026-05-24 14:16:28 +02:00
theis.gaedigk	542d832eab	improved design	2026-05-24 13:55:12 +02:00
theis.gaedigk	1f11a4ecab	added page footer	2026-05-24 13:50:41 +02:00
theis.gaedigk	ccb09caa4f	refactored code	2026-05-24 13:26:52 +02:00
theis.gaedigk	1cd0379654	redesgigned page	2026-05-24 13:12:09 +02:00
theis.gaedigk	39b15aec65	refactored code	2026-05-24 13:08:13 +02:00
theis.gaedigk	6915e60cec	implemented tanstack form	2026-05-24 13:07:06 +02:00
theis.gaedigk	9dead72e1e	updated wg-easy	2026-05-22 23:32:42 +02:00
theis.gaedigk	cca303c1f6	edited readme	2026-05-20 13:52:08 +02:00
theis.gaedigk	9dd9ccebdd	changed docker notes	2026-05-20 13:15:33 +02:00
theis.gaedigk	92605d85c2	Merge branch 'dev' into prod	2026-05-20 13:14:47 +02:00
theis.gaedigk	101bd5c060	edited wg-easy	2026-05-20 13:14:28 +02:00
theis.gaedigk	59a1ae51fa	deleted unused compose	2026-05-20 13:10:11 +02:00
theis.gaedigk	80a3d4d464	changed ports again	2026-05-20 13:08:05 +02:00
theis.gaedigk	9efb93c37c	changed docker config	2026-05-20 13:05:03 +02:00
theis.gaedigk	cf638dc42d	changed ports again	2026-05-20 12:51:13 +02:00
theis.gaedigk	65092b57d9	changed ports	2026-05-20 12:50:22 +02:00
theis.gaedigk	7045317fc6	reformatted compose	2026-05-20 12:46:50 +02:00
theis.gaedigk	0f75f55ac4	edited wg service	2026-05-20 12:45:59 +02:00
theis.gaedigk	2d2dc52012	changed docker compose	2026-05-20 12:39:08 +02:00
theis.gaedigk	566437bd71	changed port config	2026-05-20 10:49:03 +02:00
theis.gaedigk	266ee1af80	changed docker-compose	2026-05-20 10:41:11 +02:00
theis.gaedigk	43f8e00968	Merge branch 'dev' into prod	2026-05-20 10:39:43 +02:00
theis.gaedigk	f32931ded3	added wg-easy	2026-05-20 10:38:25 +02:00
theis.gaedigk	4ce1817bd0	added wg-easy	2026-05-20 10:37:31 +02:00
theis.gaedigk	11c2372cae	outsourced modals	2026-05-19 21:54:02 +02:00
theis.gaedigk	d5b6c9665c	added new warning	2026-05-18 23:23:43 +02:00
theis.gaedigk	ce2d0bb329	noted out 3sec pause	2026-05-18 20:41:35 +02:00
theis.gaedigk	5c43b817a7	Merge branch 'dev' into prod	2026-05-18 20:37:04 +02:00
theis.gaedigk	c25ab48880	fully implemented tanstack query	2026-05-18 19:14:48 +02:00
theis.gaedigk	8932f5d004	changed code formatting	2026-05-18 18:11:46 +02:00
theis.gaedigk	3832aca12c	implemented tanstack query	2026-05-18 18:05:05 +02:00
theis.gaedigk	a88c141f28	fixed code	2026-05-11 22:41:18 +02:00
theis.gaedigk	0953847f24	Merge branch 'dev' into prod	2026-05-10 21:08:23 +02:00
theis.gaedigk	843a5d07d9	added webserver config and dockerfile	2026-05-10 21:08:17 +02:00
theis.gaedigk	9e7fc530b5	Merge branch 'dev' into prod	2026-05-10 21:05:13 +02:00
theis.gaedigk	4008b3de94	changed website icon	2026-05-10 21:03:55 +02:00
theis.gaedigk	18777e5f7c	added allowed ips	2026-05-09 23:10:47 +02:00
theis.gaedigk	b55129dfff	closed ports	2026-05-09 23:06:17 +02:00
theis.gaedigk	26856ee1df	edited	2026-05-09 23:03:56 +02:00
theis.gaedigk	dd1d8d8d6b	edited network config	2026-05-09 21:52:39 +02:00
theis.gaedigk	cf2df0aaac	edited code design	2026-05-09 21:46:01 +02:00
theis.gaedigk	1199d6468f	noted out public web-ui port	2026-05-09 21:45:19 +02:00
theis.gaedigk	7cd958c31e	edited ip adresses	2026-05-09 21:43:12 +02:00
theis.gaedigk	f89cf84a38	edited docker config	2026-05-09 21:38:56 +02:00
theis.gaedigk	e3fc1d8659	edited again	2026-05-09 21:30:59 +02:00
theis.gaedigk	060f8d01c6	edited again	2026-05-09 21:27:47 +02:00
theis.gaedigk	667609d70c	fixed docker config	2026-05-09 21:24:42 +02:00
theis.gaedigk	b05f19acd9	edited docker compose	2026-05-09 21:22:28 +02:00
theis.gaedigk	2aa9a968f5	Merge branch 'dev' into prod	2026-05-04 22:40:33 +02:00
theis.gaedigk	e42a2f510a	edited docker compose	2026-05-04 22:05:18 +02:00
theis.gaedigk	d2b22fc71f	Merge branch 'dev' into prod	2026-05-04 22:04:26 +02:00
theis.gaedigk	471c0c7a49	Merge branch 'dev' into prod	2026-01-21 16:33:03 +01:00
theis.gaedigk	75ff65e76b	Merge branch 'dev' into prod	2026-01-21 16:28:23 +01:00
theis.gaedigk	7cf1245ef6	Merge branch 'dev' into prod	2026-01-21 14:27:37 +01:00
theis.gaedigk	2adbfa75a5	Merge branch 'dev' into prod	2026-01-21 14:07:26 +01:00
theis.gaedigk	216a1cb1d4	Merge branch 'dev' into prod	2026-01-20 20:43:59 +01:00
theis.gaedigk	7fc98d6c9f	Merge branch 'dev' into prod	2026-01-20 20:34:52 +01:00
theis.gaedigk	e346cf9445	e	2026-01-20 20:33:41 +01:00
theis.gaedigk	c030b6dbe6	Merge branch 'dev' into prod	2026-01-20 20:33:31 +01:00
theis.gaedigk	6f26b9bbc3	e	2026-01-20 20:22:59 +01:00
theis.gaedigk	a34a70572f	edited	2026-01-20 20:19:12 +01:00
theis.gaedigk	4b3c8a2424	edited compose file	2026-01-20 20:17:53 +01:00
theis.gaedigk	568b3bf495	edited	2026-01-20 20:08:14 +01:00
theis.gaedigk	5653d32857	fix: update WireGuard PASSWORD_HASH to a static value	2026-01-20 20:06:44 +01:00
theis.gaedigk	7cf5b8df48	Merge branch 'dev' into prod	2026-01-20 20:03:51 +01:00
theis.gaedigk	65c5fc0f8f	Merge branch 'dev' into prod	2026-01-20 19:59:27 +01:00
theis.gaedigk	b626a67907	Merge branch 'dev' into prod	2026-01-20 19:46:56 +01:00
theis.gaedigk	6643a176a6	Merge branch 'dev' into prod	2026-01-20 19:43:53 +01:00
theis.gaedigk	89803754a7	Merge branch 'dev' into prod	2026-01-20 19:38:27 +01:00
theis.gaedigk	5052b3e83a	changed fetch urls	2026-01-20 19:23:53 +01:00
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>