From 885cb19e9c51306e40e139e3b015b8784c696636 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Thu, 14 Nov 2024 14:29:47 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Redux=20zur=20Verwaltung=20des=20Admin-?=
 =?UTF-8?q?Status=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Neuen Redux-Slice 'authSlice' erstellt, um den Admin-Login-Status zu verwalten.
- Token-Verwaltung im SettingsModal angepasst, um Redux-Status zu aktualisieren.
- Admin-Warnhinweis im Header zeigt jetzt den Redux-Status an und aktualisiert sich automatisch.
- Abmeldefunktion verbessert, um Token aus dem Redux-Store zu entfernen und Seite zu aktualisieren.
---
 components/Header.jsx                         | 36 ++++++++++++++++---
 .../modales/settingsModal/SettingsModal.jsx   |  5 +++
 store/authSlice.js                            | 17 +++++++++
 store/store.js                                |  2 ++
 4 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 store/authSlice.js

diff --git a/components/Header.jsx b/components/Header.jsx
index d122eef..46f5b16 100644
--- a/components/Header.jsx
+++ b/components/Header.jsx
@@ -1,6 +1,5 @@
-// components/Header.jsx
-"use client";
-import React, { useState } from "react";
+"use client"; // components/Header.jsx
+import React, { useState, useEffect } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import "bootstrap-icons/font/bootstrap-icons.css";
@@ -8,13 +7,33 @@ import SettingsModal from "./modales/settingsModal/SettingsModal";
 import { useSelector } from "react-redux";
 
 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 handleSettingsClick = () => setShowSettingsModal(true);
   const handleCloseSettingsModal = () => setShowSettingsModal(false);
-  const handleLogout = () => (window.location.href = "/offline.html");
+  const handleLogout = () => {
+    localStorage.removeItem("token"); // Token entfernen beim Abmelden
+    //setIsAdminLoggedIn(false);
+    window.location.href = "/offline.html";
+  };
+
+  // Funktion, um den Token-Status zu prüfen
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    if (token) {
+      const { exp } = JSON.parse(atob(token));
+      if (Date.now() < exp) {
+        //setIsAdminLoggedIn(true);
+      } else {
+        localStorage.removeItem("token"); // Entferne abgelaufenen Token
+        //setIsAdminLoggedIn(false);
+      }
+    }
+  }, []);
 
   return (
     <header className="bg-gray-300 flex justify-between items-center w-full h-28 relative text-black">
@@ -36,6 +55,7 @@ function Header() {
           <p className="text-base text-gray-600">{deviceName}</p>
         </div>
       </div>
+
       <div className="p-4 w-full lg:w-full flex flex-row gap-4 justify-between">
         <div className="flex items-center justify-end w-full">
           <button
@@ -54,6 +74,14 @@ function Header() {
           </button>
         </div>
       </div>
+
+      {/* Warnhinweis, wenn der Admin angemeldet ist */}
+      {isAdminLoggedIn && (
+        <div className="absolute top-0 left-0 w-full h-8 bg-yellow-400 text-center py-2 text-black font-bold">
+          Admin-Modus aktiv
+        </div>
+      )}
+
       {showSettingsModal && (
         <SettingsModal
           showModal={showSettingsModal}
diff --git a/components/modales/settingsModal/SettingsModal.jsx b/components/modales/settingsModal/SettingsModal.jsx
index 833a42c..a8a3953 100644
--- a/components/modales/settingsModal/SettingsModal.jsx
+++ b/components/modales/settingsModal/SettingsModal.jsx
@@ -9,6 +9,8 @@ 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 { useDispatch } from "react-redux";
 
 ReactModal.setAppElement("#__next");
 
@@ -27,6 +29,7 @@ function generateToken(user) {
 }
 
 function SettingModal({ showModal, onClose }) {
+  const dispatch = useDispatch();
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
@@ -43,8 +46,10 @@ function SettingModal({ showModal, onClose }) {
     if (user) {
       const token = generateToken(user);
       localStorage.setItem("token", token);
+      dispatch(setAdminLoggedIn(true));
       setIsLoggedIn(true);
       setShowLoginForm(false);
+      onClose();
     } else {
       setError(
         "Login fehlgeschlagen. Bitte überprüfen Sie Benutzername und Passwort."
diff --git a/store/authSlice.js b/store/authSlice.js
new file mode 100644
index 0000000..fc9b21f
--- /dev/null
+++ b/store/authSlice.js
@@ -0,0 +1,17 @@
+// redux/authSlice.js
+import { createSlice } from "@reduxjs/toolkit";
+
+const authSlice = createSlice({
+  name: "auth",
+  initialState: {
+    isAdminLoggedIn: false,
+  },
+  reducers: {
+    setAdminLoggedIn: (state, action) => {
+      state.isAdminLoggedIn = action.payload;
+    },
+  },
+});
+
+export const { setAdminLoggedIn } = authSlice.actions;
+export default authSlice.reducer;
diff --git a/store/store.js b/store/store.js
index 8157175..1868adb 100644
--- a/store/store.js
+++ b/store/store.js
@@ -1,10 +1,12 @@
 // store/store.js
 import { configureStore } from "@reduxjs/toolkit";
 import variablesReducer from "./variablesSlice";
+import authReducer from "./authSlice";
 
 const store = configureStore({
   reducer: {
     variables: variablesReducer,
+    auth: authReducer,
   },
   //devTools: process.env.NODE_ENV !== "production", // Aktiviert DevTools nur in der Entwicklung
 });