theis.gaedigk/mcs-lose
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance token handling in removeSelection and saveRow functions

Browse Source
This commit is contained in:
Theis Gaedigk
2025-08-14 16:14:18 +02:00
parent 40d5f35afb
commit f2433e2d84
8 changed files with 155 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
backend/server.js
View File

@@ -8,6 +8,8 @@ import {
createEntry,
removeEntries,
saveRow,
resetData,
getVitals,
} from "./services/database.js";
import { generateToken, authenticate } from "./services/tokenService.js";
env.config();
@@ -37,8 +39,10 @@ app.post("/lose", async (req, res) => {
app.get("/table-data", authenticate, async (req, res) => {
const result = await getTableData();
if (result.success) {
if (result.success && result.data) {
res.status(200).json(result.data);
} else if (result.success && !result.data) {
res.status(204).json({ success: true });
} else {
res.status(500).json({ success: false });
}
@@ -87,6 +91,15 @@ app.post("/login", async (req, res) => {
}
});
app.delete("/reset-data", authenticate, async (req, res) => {
const result = await resetData();
if (result.success) {
res.status(200).json({ success: true });
} else {
res.status(400).json({ success: false });
}
});
app.listen(port, () => {
console.log(`Server is running on port: ${port}`);
});

14
backend/services/database.js
View File

@@ -47,8 +47,11 @@ export async function getTableData() {
if (result.length > 0) {
return { success: true, data: result };
} else if (result.entries.length === 0) {
return { success: true };
} else {
return { success: false };
}
return { success: false };
}
export async function createEntry(data) {
@@ -114,3 +117,12 @@ export async function saveRow(payload) {
return { success: false };
}
}
export async function resetData() {
const [result] = await pool.query("DELETE FROM lose");
if (result.affectedRows > 0) {
return { success: true };
} else {
return { success: false };
}
}

72
frontend/src/components/DangerZone.tsx Normal file
View File

@@ -0,0 +1,72 @@
import React from "react";
import { CircleX } from "lucide-react";
import Cookies from "js-cookie";
import { resetData } from "../utils/tableActions";
type DangerZoneProps = {
onClose: () => void;
};
const DangerZone: React.FC<DangerZoneProps> = ({ onClose }) => {
return (
<>
<div className="fixed inset-0 z-50 flex items-start justify-center pt-24">
{/* Backdrop */}
<div className="absolute inset-0 bg-gradient-to-br from-black/60 via-black/40 to-rose-900/30 backdrop-blur-md" />
{/* Dialog Panel */}
<div className="relative z-10 w-11/12 max-w-lg rounded-3xl border border-rose-400/30 bg-white/95 p-8 shadow-2xl ring-2 ring-rose-400/20">
<div className="flex items-start justify-between gap-4 pb-4 border-b border-zinc-200">
<div>
<h2 className="text-2xl font-extrabold tracking-tight text-rose-700 mb-1">
Datenbank Einstellungen und Vitalwerte
</h2>
<p className="text-sm text-zinc-500 font-medium">
Doppelklick um Befehl auszuführen
</p>
</div>
<button
type="button"
onClick={onClose}
className="group rounded-full p-2 text-rose-500 transition hover:bg-rose-100 hover:text-rose-700 active:scale-95 border border-rose-200 shadow-sm"
aria-label="Schließen"
>
<CircleX className="h-7 w-7" strokeWidth={2.5} />
</button>
</div>
<div className="flex flex-col items-center gap-6 pt-8">
<button
type="button"
onDoubleClick={() => {
resetData(Cookies.get("token") || "");
onClose();
}}
className="inline-flex items-center gap-2 justify-center rounded-xl bg-rose-800 px-6 py-4 text-base font-bold text-white shadow-lg transition hover:bg-rose-700 active:bg-rose-900 border-2 border-rose-800 focus:outline-none focus:ring-2 focus:ring-rose-500"
>
<span className="animate-pulse">⚠️</span> Alle Einträge der
Tabelle löschen
</button>
<div className="w-full text-center">
<span className="text-xs text-zinc-400">
Diese Aktion kann nicht rückgängig gemacht werden.
</span>
</div>
</div>
{/* Actions */}
{/*
<div className="mt-8 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
<button
type="button"
className="inline-flex justify-center rounded-xl bg-zinc-300 px-5 py-3 text-sm font-bold text-zinc-800 shadow transition hover:bg-zinc-400 active:bg-zinc-500"
>
Einstellungen Speichern
</button>
</div>
*/}
</div>
</div>
</>
);
};
export default DangerZone;

1
frontend/src/components/ImportGUI.tsx
View File

@@ -78,6 +78,7 @@ const ImportGUI: React.FC<ImportGUIProps> = ({ onClose, setFiles, files }) => {
if (files && files.length) {
postCSV(files[0]);
}
onClose();
}}
>
Importieren

24
frontend/src/components/SubHeaderAdmin.tsx
View File

@@ -1,8 +1,10 @@
import React from "react";
import { Sheet, WholeWord, Search } from "lucide-react";
import { Sheet, WholeWord, Search, DatabaseZap } from "lucide-react";
import { useState } from "react";
import ImportGUI from "./ImportGUI";
import Cookies from "js-cookie";
import { removeSelection } from "../utils/tableActions";
import DangerZone from "./DangerZone";
type SubHeaderAdminProps = {
setFiles: (files: File[]) => void;
@@ -19,6 +21,7 @@ const SubHeaderAdmin: React.FC<SubHeaderAdminProps> = ({
setSearch,
}) => {
const [showImport, setShowImport] = useState(false);
const [showDanger, setShowDanger] = useState(false);
return (
<>
@@ -61,7 +64,7 @@ const SubHeaderAdmin: React.FC<SubHeaderAdminProps> = ({
</button>
<button
onClick={() => {
removeSelection();
removeSelection(Cookies.get("token") || "");
}}
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"
@@ -72,6 +75,19 @@ const SubHeaderAdmin: React.FC<SubHeaderAdminProps> = ({
/>
<span className="whitespace-nowrap">Auswahl löschen</span>
</button>
<button
onClick={() => {
setShowDanger(true);
}}
type="button"
className="group inline-flex items-center gap-2 rounded-md bg-rose-800 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"
>
<DatabaseZap
className="h-4 w-4 shrink-0 text-white/90 transition group-hover:text-white"
strokeWidth={1.75}
/>
<span className="whitespace-nowrap">Datenbank Einstellungen</span>
</button>
</div>
</div>
</header>
@@ -82,6 +98,10 @@ const SubHeaderAdmin: React.FC<SubHeaderAdminProps> = ({
files={files}
/>
)}
{showDanger && (
<DangerZone onClose={() => setShowDanger(false)} />
)}
</>
);
};

3
frontend/src/components/Table.tsx
View File

@@ -76,6 +76,7 @@ const Table: React.FC = () => {
enabled: !!token,
queryFn: async () => {
const data = await getTableData(token);
if (data === null) throw new Error("Fehler beim Laden der Daten.");
return data as unknown as DataPackage[] | DataPackage; // server may send single object
},
@@ -401,7 +402,7 @@ const Table: React.FC = () => {
/>
</td>
<td className="px-4 py-2 w-12 min-w-[3rem]">
<button onClick={() => saveRow(row)}>
<button onClick={() => saveRow(row, token)}>
<Save />
</button>
</td>

35
frontend/src/utils/tableActions.ts
View File

@@ -20,19 +20,19 @@ export const rmFromRemove = (losnummer: string) => {
rawCookies.set("removeArr", JSON.stringify(removeArr));
};
const token = Cookies.get("token");
function createHeaders(token: string) {
return {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
};
}
const headers = {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
};
export const removeSelection = () => {
export const removeSelection = (token: string) => {
const selection = Cookies.get("removeArr");
if (selection && selection !== "[]") {
fetch("http://localhost:8002/remove-entries", {
method: "DELETE",
headers: headers,
headers: createHeaders(token),
body: `{
"losnummern": ${selection}
}`,
@@ -49,10 +49,10 @@ export const removeSelection = () => {
}
};
export const saveRow = (data: any) => {
export const saveRow = (data: any, token: string) => {
fetch("http://localhost:8002/save-row", {
method: "PUT",
headers: headers,
headers: createHeaders(token),
body: JSON.stringify(data),
}).then((response) => {
if (response.ok) {
@@ -62,3 +62,18 @@ export const saveRow = (data: any) => {
}
});
};
export const resetData = (token: string) => {
fetch("http://localhost:8002/reset-data", {
method: "DELETE",
headers: createHeaders(token),
}).then((response) => {
if (response.ok) {
myToast("Daten erfolgreich zurückgesetzt.", "success");
localStorage.removeItem("tableData");
queryClient.invalidateQueries({ queryKey: ["table-data"] });
} else {
myToast("Fehler beim Zurücksetzen der Daten.", "error");
}
});
};

9
frontend/src/utils/userHandler.ts
View File

@@ -7,7 +7,6 @@ export const logoutAdmin = () => {
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 {
@@ -21,13 +20,17 @@ export const getTableData = async (token: string) => {
if (response.status === 401) {
myToast("Session expired. Please log in again.", "error");
logoutAdmin();
return null;
return [];
}
if (!response.ok) {
const text = await response.text().catch(() => "");
myToast(`Error fetching table data! ${text}`, "error");
return null;
return [];
}
if (response.status === 204) {
return [];
}
// Ensure we parse JSON