From ed80aa38a8546d175f943143630781cd64ef3c6a Mon Sep 17 00:00:00 2001
From: ISA <ismail.ali@littwin-systemtechnik.de>
Date: Mon, 18 Nov 2024 20:43:43 +0100
Subject: [PATCH] fix: Echtzeit-Aktualisierung des Admin-Status implementiert
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Intervall-basierte Überprüfung von `localStorage` hinzugefügt, um Änderungen am Admin-Status (`isAdminLoggedIn`) sofort zu synchronisieren.
- Zustand `isAdminLoggedIn` wird nun direkt nach Login/Logout aktualisiert.
- Weiterleitung zu `/offline.html` nach Logout integriert.
- Problem behoben, dass "Admin-Modus aktiv" erst nach einem Neuladen angezeigt wurde.
---
 components/Header.jsx                         | 69 ++++++++++++-------
 .../modales/settingsModal/SettingsModal.jsx   |  4 +-
 2 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/components/Header.jsx b/components/Header.jsx
index 75a5f1c..61cc3d9 100644
--- a/components/Header.jsx
+++ b/components/Header.jsx
@@ -9,35 +9,43 @@ import { useSelector } from "react-redux";
 function Header() {
   const router = useRouter();
   const [showSettingsModal, setShowSettingsModal] = useState(false);
-  const [isAdminLoggedIn, setIsAdminLoggedIn] = useState(false); // Lokaler Zustand
+  const [isAdminLoggedIn, setIsAdminLoggedIn] = useState(false);
   const deviceName = useSelector((state) => state.variables.deviceName);
 
   const handleSettingsClick = () => setShowSettingsModal(true);
   const handleCloseSettingsModal = () => setShowSettingsModal(false);
+
   const handleLogout = () => {
-    sessionStorage.removeItem("token"); // Token entfernen beim Abmelden
-    setIsAdminLoggedIn(false); // Admin-Status zurücksetzen
-    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 = sessionStorage.getItem("token");
-    if (token) {
-      try {
-        const { exp } = JSON.parse(atob(token));
-        if (Date.now() < exp) {
-          setIsAdminLoggedIn(true); // Admin eingeloggt
-        } else {
-          sessionStorage.removeItem("token"); // Entferne abgelaufenen Token
-          setIsAdminLoggedIn(false);
-        }
-      } catch (error) {
-        console.error("Fehler beim Verarbeiten des Tokens:", error);
-        setIsAdminLoggedIn(false);
+    // 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">
@@ -70,12 +78,21 @@ function Header() {
           </button>
         </div>
         <div className="flex items-center justify-end w-full space-x-2">
-          <button
-            onClick={handleLogout}
-            className="bg-littwin-blue text-white px-4 py-2 rounded"
-          >
-            Abmelden
-          </button>
+          {!isAdminLoggedIn ? (
+            <button
+              onClick={handleLogin}
+              className="bg-littwin-blue text-white px-4 py-2 rounded"
+            >
+              Anmelden
+            </button>
+          ) : (
+            <button
+              onClick={handleLogout}
+              className="bg-littwin-blue text-white px-4 py-2 rounded"
+            >
+              Abmelden
+            </button>
+          )}
         </div>
       </div>
 
diff --git a/components/modales/settingsModal/SettingsModal.jsx b/components/modales/settingsModal/SettingsModal.jsx
index 89d91b6..ece7f37 100644
--- a/components/modales/settingsModal/SettingsModal.jsx
+++ b/components/modales/settingsModal/SettingsModal.jsx
@@ -48,6 +48,7 @@ function SettingModal({ showModal, onClose }) {
       if (isMatch) {
         const token = generateToken(user);
         sessionStorage.setItem("token", token); // Speichere Token in SessionStorage
+        localStorage.setItem("isAdminLoggedIn", "true");
 
         setShowLoginForm(false);
         onClose();
@@ -97,7 +98,8 @@ function SettingModal({ showModal, onClose }) {
     active,
   };
   const handleAdminLogout = () => {
-    localStorage.removeItem("token"); // Remove token on logout
+    sessionStorage.removeItem("token"); // Token aus sessionStorage entfernen
+    localStorage.setItem("isAdminLoggedIn", "false"); // Admin-Status im localStorage setzen
   };
 
   useEffect(() => {