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.
This commit is contained in:
10
backend/package-lock.json
generated
10
backend/package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
"dotenv": "^17.2.1",
|
||||
"ejs": "^3.1.10",
|
||||
"express": "^5.1.0",
|
||||
"jose": "^6.0.12",
|
||||
"mysql2": "^3.14.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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}`);
|
||||
});
|
||||
|
||||
@@ -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 };
|
||||
}
|
||||
|
||||
26
backend/services/tokenService.js
Normal file
26
backend/services/tokenService.js
Normal file
@@ -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();
|
||||
}
|
||||
133
frontend/package-lock.json
generated
133
frontend/package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -1,13 +1,27 @@
|
||||
import "../App.css";
|
||||
import Layout from "../layout/Layout";
|
||||
import React from "react";
|
||||
import React, { useState } 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">
|
||||
<h1>Admin</h1>
|
||||
</Layout>
|
||||
<HeaderAdmin
|
||||
token={token}
|
||||
onLoginSuccess={(t) => setToken(t)}
|
||||
onLogout={() => setToken(null)}
|
||||
/>
|
||||
{token ? (
|
||||
<Table />
|
||||
) : (
|
||||
<div className="p-4">Please log in as an admin.</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
79
frontend/src/components/HeaderAdmin.tsx
Normal file
79
frontend/src/components/HeaderAdmin.tsx
Normal file
@@ -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;
|
||||
@@ -5,11 +5,9 @@ import React from "react";
|
||||
|
||||
const Home: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<Layout title="MCS Lose - Registrieren">
|
||||
<MainForm />
|
||||
</Layout>
|
||||
</>
|
||||
<Layout title="MCS Lose - Registrieren">
|
||||
<MainForm />
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
89
frontend/src/components/LoginForm.tsx
Normal file
89
frontend/src/components/LoginForm.tsx
Normal file
@@ -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;
|
||||
48
frontend/src/components/SubHeaderAdmin.tsx
Normal file
48
frontend/src/components/SubHeaderAdmin.tsx
Normal file
@@ -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;
|
||||
190
frontend/src/components/Table.tsx
Normal file
190
frontend/src/components/Table.tsx
Normal file
@@ -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;
|
||||
49
frontend/src/utils/handleSubmit.ts
Normal file
49
frontend/src/utils/handleSubmit.ts
Normal file
@@ -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;
|
||||
};
|
||||
54
frontend/src/utils/userHandler.ts
Normal file
54
frontend/src/utils/userHandler.ts
Normal file
@@ -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;
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user