feat: add authentication and admin features

- Added `jose` library for JWT token generation and verification.
- Implemented login functionality with token storage using cookies.
- Created `HeaderAdmin` component for admin panel with login/logout capabilities.
- Developed `LoginForm` component for user authentication.
- Added `Table` component to display data with caching from localStorage.
- Introduced `SubHeaderAdmin` for additional admin actions.
- Enhanced `database.js` with functions for admin login and fetching table data.
- Updated `server.js` to handle new routes for login and table data retrieval.
- Modified `package.json` and `package-lock.json` to include new dependencies.

backend/package-lock.json

@@ -13,6 +13,7 @@
         "dotenv": "^17.2.1",
         "ejs": "^3.1.10",
         "express": "^5.1.0",
+        "jose": "^6.0.12",
         "mysql2": "^3.14.3"
       }
     },
@@ -563,6 +564,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/jose": {
+      "version": "6.0.12",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.0.12.tgz",
+      "integrity": "sha512-T8xypXs8CpmiIi78k0E+Lk7T2zlK4zDyg+o1CZ4AkOHgDg98ogdP2BeZ61lTFKFyoEwJ9RgAgN+SdM3iPgNonQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/long": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",

backend/package.json

@@ -15,6 +15,7 @@
     "dotenv": "^17.2.1",
     "ejs": "^3.1.10",
     "express": "^5.1.0",
+    "jose": "^6.0.12",
     "mysql2": "^3.14.3"
   }
 }

backend/server.js

@@ -1,7 +1,8 @@
 import express from "express";
 import cors from "cors";
 import env from "dotenv";
-import { query } from "./services/database.js";
+import { query, loginAdmin, getTableData } from "./services/database.js";
+import { generateToken, authenticate } from "./services/tokenService.js";
 env.config();
 const app = express();
 const port = 8002;
@@ -24,6 +25,26 @@ app.post("/lose", async (req, res) => {
   }
 });
 
+app.get("/table-data", authenticate, async (req, res) => {
+  const result = await getTableData();
+  if (result.success) {
+    res.status(200).json(result.data);
+  } else {
+    res.status(500);
+  }
+});
+
+app.post("/login", async (req, res) => {
+  const { username, password } = req.body;
+  const result = await loginAdmin(username, password);
+  if (result.success) {
+    const token = await generateToken({ username });
+    res.status(200).json({ success: true, token });
+  } else {
+    res.status(401).json({ success: false });
+  }
+});
+
 app.listen(port, () => {
   console.log(`Server is running on port: ${port}`);
 });

backend/services/database.js

@@ -2,7 +2,7 @@ import mysql from "mysql2";
 import dotenv from "dotenv";
 dotenv.config();
 
-// Create a MySQL connection pool using environment variables for configuration
+// Ein einzelner Pool reicht; der zweite Pool benutzte fälschlich DB_TABLE als Datenbank
 const pool = mysql
   .createPool({
     host: process.env.DB_HOST,
@@ -32,3 +32,21 @@ export async function query(params) {
     return { success: false };
   }
 }
+
+export async function loginAdmin(username, password) {
+  const [rows] = await pool.query(
+    "SELECT * FROM admin_user WHERE username = ? AND password = ?",
+    [username, password]
+  );
+  if (rows.length > 0) return { success: true };
+  return { success: false };
+}
+
+export async function getTableData() {
+  const [result] = await pool.query("SELECT * FROM lose");
+
+  if (result.length > 0) {
+    return { success: true, data: result };
+  }
+  return { success: false };
+}

backend/services/tokenService.js

@@ -0,0 +1,26 @@
+import { SignJWT, jwtVerify } from "jose";
+import env from "dotenv";
+env.config();
+const secret = new TextEncoder().encode(process.env.SECRET_KEY);
+
+export async function generateToken(payload) {
+  const newToken = await new SignJWT(payload)
+    .setProtectedHeader({ alg: "HS256" })
+    .setIssuedAt()
+    .setExpirationTime("2h") // Token valid for 2 hours
+    .sign(secret);
+  console.log("Generated token: ", newToken);
+  return newToken;
+}
+
+export async function authenticate(req, res, next) {
+  const authHeader = req.headers["authorization"];
+  const token = authHeader && authHeader.split(" ")[1]; // Bearer <token>
+
+  if (token == null) return res.sendStatus(401); // No token present
+
+  const { payload } = await jwtVerify(token, secret);
+  req.user = payload;
+
+  next();
+}

frontend/package-lock.json

@@ -9,7 +9,10 @@
       "version": "0.0.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.1.11",
+        "js-cookie": "^3.0.5",
         "lucide-react": "^0.539.0",
+        "primeicons": "^7.0.0",
+        "primereact": "^10.9.6",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
         "react-router-dom": "^7.8.0",
@@ -22,6 +25,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.32.0",
+        "@types/js-cookie": "^3.0.6",
         "@types/react": "^19.1.9",
         "@types/react-dom": "^19.1.7",
         "@vitejs/plugin-react": "^4.7.0",
@@ -268,6 +272,15 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.2.tgz",
+      "integrity": "sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.27.2",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
@@ -1861,6 +1874,13 @@
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "license": "MIT"
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1872,7 +1892,6 @@
       "version": "19.1.9",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.9.tgz",
       "integrity": "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -1888,6 +1907,15 @@
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.39.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.39.0.tgz",
@@ -2468,7 +2496,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/debug": {
@@ -2504,6 +2531,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dot-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
@@ -3089,6 +3126,15 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "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==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3439,6 +3485,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -3595,6 +3653,15 @@
       "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
       "license": "MIT"
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -3761,6 +3828,46 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/primeicons": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
+      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
+      "license": "MIT"
+    },
+    "node_modules/primereact": {
+      "version": "10.9.6",
+      "resolved": "https://registry.npmjs.org/primereact/-/primereact-10.9.6.tgz",
+      "integrity": "sha512-0Jjz/KzfUURSHaPTXJwjL2Dc7CDPnbO17MivyJz7T5smGAMLY5d+IqpQhV61R22G/rDmhMh3+32LCNva2M8fRw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react-transition-group": "^4.4.1",
+        "react-transition-group": "^4.4.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3813,6 +3920,12 @@
         "react": "^19.1.1"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -3874,6 +3987,22 @@
         "react-dom": "^18 || ^19"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",

frontend/package.json

@@ -11,7 +11,10 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.11",
+    "js-cookie": "^3.0.5",
     "lucide-react": "^0.539.0",
+    "primeicons": "^7.0.0",
+    "primereact": "^10.9.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-router-dom": "^7.8.0",
@@ -24,6 +27,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.32.0",
+    "@types/js-cookie": "^3.0.6",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "^4.7.0",

frontend/src/components/Admin.tsx

@@ -1,13 +1,27 @@
 import "../App.css";
-import Layout from "../layout/Layout";
+import React, { useState } from "react";
-import React from "react";
+import HeaderAdmin from "./HeaderAdmin";
+import Table from "./Table";
+import Cookies from "js-cookie";
 
 const Admin: React.FC = () => {
+  // Keep token in state so UI updates immediately after login without reload
+  const [token, setToken] = useState<string | null>(
+    () => Cookies.get("token") ?? null
+  );
+
   return (
     <>
-      <Layout  title="MCS Lose - Admin Panel">
+      <HeaderAdmin
-        <h1>Admin</h1>
+        token={token}
-      </Layout>
+        onLoginSuccess={(t) => setToken(t)}
+        onLogout={() => setToken(null)}
+      />
+      {token ? (
+        <Table />
+      ) : (
+        <div className="p-4">Please log in as an admin.</div>
+      )}
     </>
   );
 };

frontend/src/components/HeaderAdmin.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { Ticket, RectangleEllipsis } from "lucide-react";
+import { useState } from "react";
+import LoginForm from "./LoginForm";
+import { ToastContainer } from "react-toastify";
+import { logoutAdmin } from "../utils/userHandler";
+
+interface HeaderAdminProps {
+  token?: string | null;
+  onLoginSuccess?: (token: string) => void;
+  onLogout?: () => void;
+}
+
+const HeaderAdmin: React.FC<HeaderAdminProps> = ({
+  token,
+  onLoginSuccess,
+  onLogout,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <header className="w-full border-b border-black/10 bg-gray-100/95 shadow-sm">
+      <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 md:px-6">
+        <div className="flex items-center gap-3">
+          <Ticket className="h-8 w-8 text-black" strokeWidth={2.6} />
+          <h1 className="text-2xl font-black tracking-tight text-neutral-900 md:text-3xl">
+            Admin Panel
+          </h1>
+        </div>
+        {!token && (
+          <button
+            onClick={() => setIsOpen(true)}
+            type="button"
+            className="inline-flex items-center gap-2 rounded-xl border border-black/10 bg-gray-200/90 px-4 py-2 font-semibold text-neutral-900 shadow-inner transition hover:bg-gray-300/90"
+          >
+            <RectangleEllipsis className="h-5 w-5" />
+            Login
+          </button>
+        )}
+        {token && (
+          <button
+            onClick={() => {
+              logoutAdmin();
+              onLogout?.();
+            }}
+            type="button"
+            className="inline-flex items-center gap-2 rounded-xl border border-black/10 bg-gray-200/90 px-4 py-2 font-semibold text-neutral-900 shadow-inner transition hover:bg-gray-300/90"
+          >
+            <RectangleEllipsis className="h-5 w-5" />
+            Logout
+          </button>
+        )}
+      </div>
+      {isOpen && (
+        <LoginForm
+          onClose={() => setIsOpen(false)}
+          onLoginSuccess={(token) => {
+            onLoginSuccess?.(token);
+          }}
+        />
+      )}
+
+      <ToastContainer
+        position="top-right"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss={false}
+        draggable
+        pauseOnHover
+        theme="light"
+      />
+    </header>
+  );
+};
+
+export default HeaderAdmin;

frontend/src/components/Home.tsx

@@ -5,11 +5,9 @@ import React from "react";
 
 const Home: React.FC = () => {
   return (
-    <>
     <Layout title="MCS Lose - Registrieren">
       <MainForm />
     </Layout>
-    </>
   );
 };
 

frontend/src/components/LoginForm.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from "react";
+import { toast } from "react-toastify";
+import { handleSubmit } from "../utils/handleSubmit";
+
+type LoginFormProps = {
+  onClose: () => void;
+  onLoginSuccess?: (token: string) => void;
+};
+
+const LoginForm: React.FC<LoginFormProps> = ({ onClose, onLoginSuccess }) => {
+  const [loading, setLoading] = useState(false);
+
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    setLoading(true);
+    toast
+      .promise(handleSubmit(e), {
+        pending: "Logging in...",
+      })
+      .then((res) => {
+        if (res?.token) {
+          onLoginSuccess?.(res.token);
+        }
+        onClose();
+      })
+      .finally(() => setLoading(false));
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center pt-24">
+      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" />
+      <button onClick={onClose}>X</button>
+      <form
+        onSubmit={onSubmit}
+        className="relative z-10 w-11/12 max-w-sm rounded-2xl border border-black/10 bg-zinc-100 p-6 shadow-xl"
+      >
+        <h3 className="mb-4 text-xl font-extrabold text-zinc-900">Login</h3>
+
+        <div className="space-y-3">
+          <label
+            className="block text-sm font-medium text-zinc-800"
+            htmlFor="username"
+          >
+            Username
+          </label>
+          <input
+            id="username"
+            name="username"
+            type="text"
+            placeholder="yourname"
+            className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
+            required
+          />
+
+          <label
+            className="mt-3 block text-sm font-medium text-zinc-800"
+            htmlFor="password"
+          >
+            Password
+          </label>
+          <input
+            id="password"
+            name="password"
+            type="password"
+            placeholder="••••••••"
+            className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
+            required
+          />
+        </div>
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="mt-5 w-full rounded-xl bg-blue-600 px-4 py-3 text-sm font-bold text-white shadow transition hover:bg-blue-700 disabled:opacity-60 disabled:cursor-not-allowed active:bg-blue-800"
+        >
+          {loading ? "Logging in..." : "Login"}
+        </button>
+        <button
+          type="button"
+          onClick={onClose}
+          className="mt-3 w-full rounded-xl bg-zinc-300 px-4 py-3 text-sm font-bold text-zinc-800 shadow transition hover:bg-zinc-400 active:bg-zinc-500"
+        >
+          Cancel
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default LoginForm;

frontend/src/components/SubHeaderAdmin.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Sheet, WholeWord } from "lucide-react";
+
+// Sub navigation bar for admin views: provides import + clear selection actions
+const SubHeaderAdmin: React.FC = () => {
+  return (
+    <header className="sticky top-0 z-30 w-full border-b border-gray-200/70 bg-white/90 backdrop-blur supports-[backdrop-filter]:bg-white/60">
+      <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-2.5 md:px-6">
+        <div className="flex items-center gap-3">
+          <h2 className="text-base font-semibold tracking-tight text-gray-800 sm:text-lg">
+            Verwaltung
+          </h2>
+          <span
+            className="hidden h-5 w-px bg-gray-300 sm:inline-block"
+            aria-hidden="true"
+          />
+          <p className="hidden text-sm text-gray-500 md:block">
+            Aktionen für Daten in der Datenbank
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            className="group inline-flex items-center gap-2 rounded-md border border-gray-300 bg-white px-3.5 py-2 text-sm font-medium text-gray-700 shadow-sm transition hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <Sheet
+              className="h-4 w-4 shrink-0 text-gray-500 transition group-hover:text-gray-600"
+              strokeWidth={1.75}
+            />
+            <span className="whitespace-nowrap">Losnummern importieren</span>
+          </button>
+          <button
+            type="button"
+            className="group inline-flex items-center gap-2 rounded-md bg-rose-600 px-3.5 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-rose-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-500/60 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            <WholeWord
+              className="h-4 w-4 shrink-0 text-white/90 transition group-hover:text-white"
+              strokeWidth={1.75}
+            />
+            <span className="whitespace-nowrap">Auswahl löschen</span>
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default SubHeaderAdmin;

frontend/src/components/Table.tsx

@@ -0,0 +1,190 @@
+import React, { useEffect, useState } from "react";
+import Cookies from "js-cookie";
+import { getTableData, readCachedTableData } from "../utils/userHandler";
+import { EllipsisVertical } from "lucide-react";
+import SubHeaderAdmin from "./SubHeaderAdmin";
+
+interface DataPackage {
+  losnummer: string;
+  vorname: string | null;
+  nachname: string | null;
+  adresse: string | null;
+  plz: string | null;
+  email: string | null;
+  [key: string]: any;
+}
+
+const Table: React.FC = () => {
+  const [rows, setRows] = useState<DataPackage[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Hilfsfunktion zum Einlesen & Normalisieren der LocalStorage-Daten
+  const loadFromCache = () => {
+    const cached = readCachedTableData<any>();
+    if (!cached) {
+      setRows([]);
+      return;
+    }
+    // Server könnte entweder ein Objekt oder ein Array liefern
+    const normalized: DataPackage[] = Array.isArray(cached)
+      ? cached
+      : [cached];
+    setRows(normalized);
+  };
+
+  useEffect(() => {
+    // Initial lokale Daten laden (falls schon vorhanden)
+    loadFromCache();
+
+    // Frische Daten vom Backend holen
+    const token = Cookies.get("token") || "";
+    if (!token) return; // Kein Token => nur Cache anzeigen
+
+    setLoading(true);
+    getTableData(token)
+      .then((data) => {
+        if (data === null) {
+          setError("Fehler beim Laden der Daten.");
+        } else {
+          setError(null);
+        }
+        loadFromCache();
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  // Reagieren auf LocalStorage-Änderungen (z.B. in anderen Tabs)
+  useEffect(() => {
+    const handler = (e: StorageEvent) => {
+      if (e.key === "tableData") {
+        loadFromCache();
+      }
+    };
+    window.addEventListener("storage", handler);
+    return () => window.removeEventListener("storage", handler);
+  }, []);
+
+  const formatValue = (v: any) =>
+    v === null || v === undefined || v === "" ? "-" : String(v);
+
+  return (
+    <>
+      <SubHeaderAdmin />
+      <div className="w-full">
+        <div className="mb-4 flex items-center gap-3">
+          {loading && (
+            <span className="text-xs text-blue-600 animate-pulse">
+              Laden...
+            </span>
+          )}
+          {error && <span className="text-xs text-red-600">{error}</span>}
+        </div>
+        <div className="overflow-x-auto rounded-lg shadow ring-1 ring-black/5">
+          <table className="min-w-full divide-y divide-gray-200 text-sm">
+            <thead className="bg-gray-50">
+              <tr>
+                <th
+                  scope="col"
+                  className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600"
+                >
+                  <input type="checkbox" name="" id="" />
+                </th>
+                <th
+                  scope="col"
+                  className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600"
+                >
+                  Losnummer
+                </th>
+                <th
+                  scope="col"
+                  className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600"
+                >
+                  Vorname
+                </th>
+                <th
+                  scope="col"
+                  className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600"
+                >
+                  Nachname
+                </th>
+                <th
+                  scope="col"
+                  className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600"
+                >
+                  Adresse
+                </th>
+                <th
+                  scope="col"
+                  className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600"
+                >
+                  PLZ
+                </th>
+                <th
+                  scope="col"
+                  className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600"
+                >
+                  Email
+                </th>
+                <th
+                  scope="col"
+                  className="px-4 py-2 text-left font-medium uppercase tracking-wide text-gray-600"
+                ></th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100 bg-white">
+              {rows.length === 0 && !loading && (
+                <tr>
+                  <td
+                    colSpan={6}
+                    className="px-4 py-6 text-center text-gray-500"
+                  >
+                    Keine Daten vorhanden.
+                  </td>
+                </tr>
+              )}
+              {rows.map((row, idx) => (
+                <tr
+                  key={row.losnummer ?? idx}
+                  className="hover:bg-gray-50 transition-colors"
+                >
+                  <td className="px-4 py-2 font-mono text-xs text-gray-900">
+                    <input type="checkbox" name="" id={row.losnummer} />
+                  </td>
+                  <td className="px-4 py-2 font-mono text-xs text-gray-900">
+                    {formatValue(row.losnummer)}
+                  </td>
+                  <td className="px-4 py-2">
+                    <input type="text" value={formatValue(row.vorname)} />
+                  </td>
+                  <td className="px-4 py-2">
+                    <input type="text" value={formatValue(row.nachname)} />
+                  </td>
+                  <td
+                    className="px-4 py-2 max-w-[16rem] truncate"
+                    title={formatValue(row.adresse)}
+                  >
+                    <input type="text" value={formatValue(row.adresse)} />
+                  </td>
+                  <td className="px-4 py-2">
+                    <input type="text" value={formatValue(row.plz)} />
+                  </td>
+                  <td className="px-4 py-2">
+                    <input type="text" value={formatValue(row.email)} />
+                  </td>
+                  <td className="px-4 py-2">
+                    <button>
+                      <EllipsisVertical />
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Table;

frontend/src/utils/handleSubmit.ts

@@ -0,0 +1,49 @@
+import Cookies from "js-cookie";
+import type React from "react";
+import { myToast } from "./toastify";
+
+interface LoginResponse {
+  success: boolean;
+  token?: string;
+  message?: string;
+}
+
+// Performs login; resolves with data on success, throws Error on failure.
+export const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+  e.preventDefault();
+
+  const form = e.currentTarget;
+  const username = (form.elements.namedItem("username") as HTMLInputElement)
+    ?.value;
+  const password = (form.elements.namedItem("password") as HTMLInputElement)
+    ?.value;
+
+  let response: Response;
+  try {
+    response = await fetch("http://localhost:8002/login", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ username, password }),
+    });
+  } catch (networkErr) {
+    myToast("Network error. Please try again.", "error");
+    return;
+  }
+
+  let data: LoginResponse;
+  try {
+    data = await response.json();
+  } catch {
+    myToast("Invalid server response!", "error");
+    return;
+  }
+
+  if (!response.ok || !data.success || !data.token) {
+    myToast("Login failed!", "error");
+    return;
+  }
+
+  Cookies.set("token", data.token, { sameSite: "strict" });
+  myToast("Login successful", "success");
+  return data;
+};

frontend/src/utils/userHandler.ts

@@ -0,0 +1,54 @@
+import Cookies from "js-cookie";
+import { myToast } from "./toastify";
+
+export const logoutAdmin = () => {
+  Cookies.remove("token");
+  localStorage.removeItem("tableData");
+  myToast("Logged out successfully!", "success");
+};
+
+// Fetch table data and store it in localStorage. Returns the parsed data or null on failure.
+export const getTableData = async (token: string) => {
+  try {
+    const response = await fetch("http://localhost:8002/table-data", {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    if (response.status === 401) {
+      myToast("Session expired. Please log in again.", "error");
+      logoutAdmin();
+      return null;
+    }
+
+    if (!response.ok) {
+      const text = await response.text().catch(() => "");
+      myToast(`Error fetching table data! ${text}`, "error");
+      return null;
+    }
+
+    // Ensure we parse JSON
+    const data = await response.json();
+    localStorage.setItem("tableData", JSON.stringify(data));
+    myToast("Table data fetched successfully!", "success");
+    return data;
+  } catch (error: any) {
+    myToast(`Error fetching table data! ${error?.message || error}`, "error");
+    return null;
+  }
+};
+
+// Helper to read cached table data safely
+export const readCachedTableData = <T = unknown>(): T | null => {
+  const raw = localStorage.getItem("tableData");
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw) as T;
+  } catch {
+    // Corrupted cache -> clear it
+    localStorage.removeItem("tableData");
+    return null;
+  }
+};