feat: JWT-basierte Token-Generierung und -Validierung für rollenbasierte UI-Zugriffe hinzugefügt

- `generateToken`-Funktion implementiert, um Tokens mit Benutzerrollen zu erstellen
- `decodeToken` in `KueModal` hinzugefügt, um das Token zu dekodieren und den "Firmware Update"-Button für Admin-Rolle bedingt anzuzeigen
- Fehlerbehandlung für ungültige Tokens in localStorage verbessert
- Sicherstellung der Token-Dekodierung für Admin-Zugriffskontrolle in Entwicklungs- und Produktionsumgebung

pages/index.js

@@ -1,17 +1,58 @@
-import { useEffect } from "react";
+import { useState } from "react";
 import { useRouter } from "next/router";
 
+const USERS = {
+  Admin: { username: "Admin", password: "adminpasswort", role: "Admin" },
+  Techniker: {
+    username: "Techniker",
+    password: "technikerpasswort",
+    role: "Techniker",
+  },
+};
+
+function generateToken(user) {
+  const payload = {
+    username: user.username,
+    role: user.role,
+    exp: Date.now() + 5 * 60 * 1000, // Ablauf in 5 Minuten
+  };
+  return btoa(JSON.stringify(payload)); // Verwende btoa nur für das Payload
+}
+
 export default function Home() {
   const router = useRouter();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
 
-  useEffect(() => {
-    // Prüft die Umgebung und hängt .html in der Produktion an
-    const isProduction = process.env.NEXT_PUBLIC_NODE_ENV === "production";
-    const dashboardPath = `/dashboard${isProduction ? ".html" : ""}`;
+  const handleLogin = (e) => {
+    e.preventDefault();
+    const user = USERS[username];
+    if (user && user.password === password) {
+      const token = generateToken(user);
+      localStorage.setItem("token", token);
+      router.replace("/dashboard");
+    } else {
+      setError("Login fehlgeschlagen");
+    }
+  };
 
-    // Leitet den Benutzer sofort zur richtigen Dashboard-Seite weiter
-    router.replace(dashboardPath);
-  }, [router]);
-
-  return null; // Die Seite zeigt keinen Inhalt an und leitet sofort um
+  return (
+    <form onSubmit={handleLogin}>
+      <input
+        type="text"
+        placeholder="Benutzername"
+        value={username}
+        onChange={(e) => setUsername(e.target.value)}
+      />
+      <input
+        type="password"
+        placeholder="Passwort"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      <button type="submit">Login</button>
+      {error && <p>{error}</p>}
+    </form>
+  );
 }

pages/kabelueberwachung.js

@@ -53,7 +53,7 @@ function Kabelueberwachung() {
     kueOnlineStatus: kueOnline[index],
     alarmStatus: alarmStatus[index],
   }));
-  console.log("Alle Module:", allModules);
+  //console.log("Alle Module:", allModules);
 
   const racks = {
     rack1: allModules.slice(0, 8),
@@ -63,7 +63,7 @@ function Kabelueberwachung() {
   };
 
   // Konsolenausgaben für jede Rack-Aufteilung
-  console.log(
+  /*   console.log(
     "Rack 1 Module:",
     racks.rack1.map((slot) => slot.modulName)
   );
@@ -78,7 +78,7 @@ function Kabelueberwachung() {
   console.log(
     "Rack 4 Module:",
     racks.rack4.map((slot) => slot.modulName)
-  );
+  ); */
 
   // Funktion zum Wechseln des Racks
   const changeRack = (rack) => {
@@ -87,11 +87,11 @@ function Kabelueberwachung() {
   };
 
   useEffect(() => {
-    console.log(`Aktives Rack: ${activeRack}`);
+    /*     console.log(`Aktives Rack: ${activeRack}`);
     console.log(
       `Rack ${activeRack} Modulnamen:`,
       racks[`rack${activeRack}`].map((slot) => slot.modulName)
-    );
+    ); */
   }, [activeRack, racks]);
 
   return (