diff --git a/public/api.js b/public/api.js new file mode 100644 index 0000000..a50fd6a --- /dev/null +++ b/public/api.js @@ -0,0 +1,20 @@ +export async function authFetch(url, options = {}) { + const token = localStorage.getItem("token"); // hol den JWT aus localStorage + + // füge Headers zusammen: Content‑Type + Bearer Token + const headers = { + "Content-Type": "application/json", + ...options.headers, // vorhandene Header nicht überschreiben + ...(token ? { + "Authorization": `Bearer ${token}` // 🔑 wichtiger Header + } : {}) + }; + + // führe den fetch aus mit dem zusammengebauten Header + const response = await fetch(url, { + ...options, + headers + }); + + return response; // response weitergeben +} \ No newline at end of file diff --git a/public/dashboard.html b/public/dashboard.html index 364158b..50e2070 100644 --- a/public/dashboard.html +++ b/public/dashboard.html @@ -2,29 +2,23 @@ - Dashboard + Dashboard - Schic App -

Dashboard

-

Login erfolgreich 🎉

- +

Willkommen …

+ + + +

Todos

+ + +

- - + + \ No newline at end of file diff --git a/public/dashboard.js b/public/dashboard.js new file mode 100644 index 0000000..375da63 --- /dev/null +++ b/public/dashboard.js @@ -0,0 +1,58 @@ +// dashboard.js +import { authFetch } from "api.js"; + +// Element‑Referenzen +const welcomeMessage = document.getElementById("welcomeMessage"); +const todosList = document.getElementById("todosList"); +const errorMessage = document.getElementById("errorMessage"); +const logoutBtn = document.getElementById("logoutBtn"); + +// Prüfe ob ein JWT vorhanden ist +const token = localStorage.getItem("token"); +if (!token) { + // Kein Token → zurück zur Login‑Seite + window.location.href = "login.html"; +} + +// Logout – Token löschen + weiterleiten +logoutBtn.addEventListener("click", () => { + localStorage.removeItem("token"); + window.location.href = "login.html"; +}); + +// Lade Todos vom Backend +async function loadTodos() { + try { + const res = await authFetch("/todos"); // fetchWrapper sendet den JWT Automatisch + if (!res.ok) { + errorMessage.textContent = "Fehler beim Abrufen der Todos!"; + if (res.status === 401) { + window.location.href = "login.html"; // bei ungültigem Token zum Login + } + return; + } + + const todos = await res.json(); + + // Zeige Todos in der Liste an + todosList.innerHTML = ""; + if (Array.isArray(todos) && todos.length > 0) { + todos.forEach(todo => { + const li = document.createElement("li"); + li.textContent = todo.task; + todosList.appendChild(li); + }); + } else { + todosList.innerHTML = "
  • Keine Todos gefunden.
  • "; + } + } catch (err) { + console.error("Fetch Error:", err); + errorMessage.textContent = "Serverfehler beim Laden!"; + } +} + +// Willkommenstext setzen +welcomeMessage.textContent = "Willkommen zum Dashboard!"; + +// Rufe die Todos ab +loadTodos(); \ No newline at end of file