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:
@@ -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;
|
||||
Reference in New Issue
Block a user