Merge branch 'feature/session-storage' into develop

components/Header.jsx

@@ -8,32 +8,45 @@ import { useSelector } from "react-redux";
 import decodeToken from "../utils/decodeToken";
 
 function Header() {
-  const isAdminLoggedIn = useSelector((state) => state.auth.isAdminLoggedIn);
   const router = useRouter();
-  const deviceName = useSelector((state) => state.variables.deviceName);
   const [showSettingsModal, setShowSettingsModal] = useState(false);
-  //const [isAdminLoggedIn, setIsAdminLoggedIn] = useState(false);
+  const [isAdminLoggedIn, setIsAdminLoggedIn] = useState(false);
+  const deviceName = useSelector((state) => state.variables.deviceName);
 
   const handleSettingsClick = () => setShowSettingsModal(true);
   const handleCloseSettingsModal = () => setShowSettingsModal(false);
+
   const handleLogout = () => {
-    localStorage.removeItem("token"); // Token entfernen beim Abmelden
-    //setIsAdminLoggedIn(false);
-    window.location.href = "/offline.html";
+    sessionStorage.removeItem("token"); // Token entfernen
+    localStorage.setItem("isAdminLoggedIn", "false"); // Admin-Status entfernen
+    setIsAdminLoggedIn(false); // Zustand sofort aktualisieren
+    router.push("/offline.html"); // Weiterleitung
+  };
+
+  const handleLogin = () => {
+    const token = JSON.stringify({ exp: Date.now() + 5 * 60 * 1000 }); // Beispiel-Token mit 5 Minuten Ablaufzeit
+    sessionStorage.setItem("token", token); // Token speichern
+    localStorage.setItem("isAdminLoggedIn", "true"); // Admin-Status setzen
+    setIsAdminLoggedIn(true); // Zustand sofort aktualisieren
   };
 
-  // Funktion, um den Token-Status zu prüfen
   useEffect(() => {
-    const token = localStorage.getItem("token");
-    if (token) {
-      const { exp } = decodeToken(token);
-      if (exp && Date.now() < exp) {
-        // Token ist gültig
-      } else {
-        localStorage.removeItem("token"); // Entferne abgelaufenen Token
+    // Initialer Check beim Laden der Komponente
+    const isAdmin = localStorage.getItem("isAdminLoggedIn") === "true";
+    setIsAdminLoggedIn(isAdmin);
+
+    // Beobachten von Änderungen in localStorage
+    const interval = setInterval(() => {
+      const updatedIsAdmin = localStorage.getItem("isAdminLoggedIn") === "true";
+      if (updatedIsAdmin !== isAdminLoggedIn) {
+        setIsAdminLoggedIn(updatedIsAdmin);
       }
-    }
-  }, []);
+    }, 500); // Überprüfung alle 500ms
+
+    return () => {
+      clearInterval(interval); // Intervall stoppen, wenn die Komponente entladen wird
+    };
+  }, [isAdminLoggedIn]);
 
   return (
     <header className="bg-gray-300 flex justify-between items-center w-full h-28 relative text-black">

components/modales/kueModal/KueModal.jsx

@@ -89,7 +89,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
   }, [showModal]); // nur von showModal abhängig ansonsten wird alle 10 Sekunden die Werte zurückgesetzt in Modal
   //------------------------------------------------------------------------------------------------------------
   useEffect(() => {
-    const token = localStorage.getItem("token");
+    const token = sessionStorage.getItem("token");
     if (token) {
       const decoded = decodeToken(token);
       if (decoded && decoded.role.toLowerCase() === "admin") {

components/modales/settingsModal/SettingsModal.jsx

@@ -9,12 +9,18 @@ import handleReboot from "./handlers/handleReboot";
 import handleSetDateTime from "./handlers/handleSetDateTime";
 import handleSubmit from "./handlers/handleSubmit";
 import { useRouter } from "next/router";
-import { setAdminLoggedIn } from "../../../store/authSlice";
-import CryptoJS from "crypto-js";
+
 import bcrypt from "bcryptjs";
 
 ReactModal.setAppElement("#__next");
-
+const USERS = {
+  Admin: {
+    username: "admin",
+    // Gehashte Version von "admin" mit bcrypt
+    password: "$2a$10$xpq/.tcOJN/LXfzdCcCVrenlBh2nRlM1R1ISY7dd1q2qGWC9Fyd2G",
+    role: "Admin",
+  },
+};
 // Function to generate JWT token
 function generateToken(user) {
   const payload = {
@@ -39,40 +45,33 @@ function decryptToken(encryptedToken) {
 }
 
 function SettingModal({ showModal, onClose }) {
-  const isAdminLoggedIn = useSelector((state) => state.auth.isAdminLoggedIn);
-  const USERS = useSelector((state) => state.auth.users);
-  const dispatch = useDispatch();
+  const [isAdminLoggedIn, setAdminLoggedIn] = useState(false);
+  //const isAdminLoggedIn = sessionStorage.getItem("token");
+
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [showLoginForm, setShowLoginForm] = useState(false); // Zustand für Login-Formular
   const router = useRouter();
 
-  const handleAdminLogin = async (e) => {
+  function handleAdminLogin(e) {
     e.preventDefault();
-    const userInput = username.toLowerCase(); // Benutzername in Kleinbuchstaben
-    const user = Object.values(USERS).find(
-      (u) => u.username.toLowerCase() === userInput
-    );
-
-    if (user && (await bcrypt.compare(password, user.password))) {
-      // Token generieren
-      const token = generateToken({ username: user.username, role: "Admin" });
-
-      // Token in localStorage speichern
-      localStorage.setItem("token", token);
-
-      dispatch(setAdminLoggedIn(true));
-      setError("");
-      onClose();
-    } else {
-      setError(
-        "Login fehlgeschlagen. Bitte überprüfen Sie Benutzername und Passwort."
-      );
-    }
-  };
+    const user = USERS.Admin; // Finde den Admin-Benutzer
+    bcrypt.compare(password, user.password, (err, isMatch) => {
+      if (isMatch) {
+        const token = generateToken(user);
+        sessionStorage.setItem("token", token); // Speichere Token in SessionStorage
+        localStorage.setItem("isAdminLoggedIn", "true");
 
+        setShowLoginForm(false);
+        onClose();
+      } else {
+        setError(
+          "Login fehlgeschlagen. Bitte überprüfen Sie Benutzername und Passwort."
+        );
+      }
+    });
+  }
   const deviceName_Redux = useSelector((state) => state.variables.deviceName);
   const mac1_Redux = useSelector((state) => state.variables.mac1);
   const ip_Redux = useSelector((state) => state.variables.ip);
@@ -112,8 +111,8 @@ function SettingModal({ showModal, onClose }) {
     active,
   };
   const handleAdminLogout = () => {
-    localStorage.removeItem("token"); // Remove token on logout
-    dispatch(setAdminLoggedIn(false)); // Update Redux state
+    sessionStorage.removeItem("token"); // Token aus sessionStorage entfernen
+    localStorage.setItem("isAdminLoggedIn", "false"); // Admin-Status im localStorage setzen
   };
 
   useEffect(() => {
@@ -156,18 +155,15 @@ function SettingModal({ showModal, onClose }) {
     active_Redux,
   ]);
   useEffect(() => {
-    const token = localStorage.getItem("token");
+    // Check if a valid token exists in localStorage
+    const token = sessionStorage.getItem("token");
     if (token) {
-      try {
-        const decrypted = decryptToken(token);
-        if (Date.now() < decrypted.exp) {
-          setIsLoggedIn(true);
-        } else {
-          localStorage.removeItem("token"); // Entfernen, wenn abgelaufen
-        }
-      } catch (error) {
-        console.error("Fehler beim Token-Entschlüsseln:", error);
-        localStorage.removeItem("token"); // Entfernen bei Fehler
+      setAdminLoggedIn(true);
+      const { exp } = JSON.parse(atob(token));
+      if (Date.now() < exp) {
+        setAdminLoggedIn(true);
+      } else {
+        // localStorage.removeItem("token"); // Remove expired token
       }
     }
   }, []);

components/modules/Kue705FO.jsx

@@ -126,7 +126,8 @@ function Kue705FO({
       return;
     }
 
-    let slotFormat = slot < 10 ? `0${slot}` : `${slot}`;
+    // Entfernt führende Nullen, falls vorhanden
+    let slotFormat = slot < 10 ? `${parseInt(slot, 10)}` : `${slot}`;
 
     setLoading(true);
     alert(`TDR wird für Slot ${slot + 1} gestartet...`);

pages/dashboard.js

@@ -177,7 +177,7 @@ function Dashboard() {
             <div className="flex flex-row p-2 space-x-2">
               <Icon icon="mdi:web" className="text-xl text-blue-400" />
               <p className="text-sm text-gray-600">
-                <span className="font-bold"> </span>Webserverversion: 1.0.5
+                <span className="font-bold"> </span>Webserverversion: 1.0.5.0
               </p>
             </div>
           </div>