Error: decodeToken is not defined in Header.jsx

components/modales/kueModal/KueModal.jsx

@@ -11,7 +11,8 @@ import firmwareUpdate from "./handlers/firmwareUpdate";
 
 function decodeToken(token) {
   try {
-    const payload = JSON.parse(atob(token)); // Direkt das Token decodieren
+    const base64Payload = token.split(".")[1];
+    const payload = JSON.parse(atob(base64Payload));
     return payload;
   } catch (error) {
     console.error("Fehler beim Dekodieren des Tokens:", error);
@@ -20,6 +21,7 @@ function decodeToken(token) {
 }
 
 function KueModal({ showModal, onClose, slot, onModulNameChange }) {
+  const isAdminLoggedIn = useSelector((state) => state.auth.isAdminLoggedIn);
   const [isAdmin, setIsAdmin] = useState(false);
   const dispatch = useDispatch();
   const [ids, setIds] = useState(Array(32).fill(""));
@@ -100,11 +102,14 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
     const token = localStorage.getItem("token");
     if (token) {
       const decoded = decodeToken(token);
-      if (decoded && decoded.role === "Admin") {
+      if (decoded && decoded.role.toLowerCase() === "admin") {
         setIsAdmin(true);
+      } else {
+        setIsAdmin(false);
       }
     }
   }, [showModal]);
+
   //------------------------------------------------------------------------------------------------------------
   return (
     <ReactModal
@@ -242,7 +247,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
 
       <div className="flex justify-end bg-gray-100 p-4 rounded-b-lg">
         {/* Bedingte Anzeige der Firmware-Update-Schaltfläche */}
-        {isAdmin && (
+        {isAdminLoggedIn && (
           <button
             onClick={() => firmwareUpdate(slot)}
             className="bg-littwin-blue text-white p-2 rounded flex items-center mr-2"

components/modales/settingsModal/SettingsModal.jsx

@@ -1,35 +1,46 @@
-"use client";
+"use client"; //components/modales/settingsModal/SettingsModal.jsx
 import React, { useState, useEffect } from "react";
 import ReactModal from "react-modal";
 import { ClipLoader } from "react-spinners";
 import "bootstrap-icons/font/bootstrap-icons.css";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import handleClearDatabase from "./handlers/handleClearDatabase";
 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";
+import CryptoJS from "crypto-js";
+import bcrypt from "bcryptjs";
 
 ReactModal.setAppElement("#__next");
 
-const USERS = {
-  Admin: { username: "admin", password: "admin", role: "Admin" },
-  Ismail: { username: "ismail", password: "ismail", role: "Admin" },
-};
 // Function to generate JWT token
 function generateToken(user) {
   const payload = {
     username: user.username,
     role: user.role,
-    exp: Date.now() + 5 * 60 * 1000, // Expire in 5 minutes
+    exp: Date.now() + 5 * 60 * 1000, // Ablaufzeit: 5 Minuten
   };
-  return btoa(JSON.stringify(payload));
+  const token = JSON.stringify(payload);
+  const encryptedToken = CryptoJS.AES.encrypt(
+    token,
+    process.env.NEXT_PUBLIC_ENCRYPTION_KEY
+  ).toString();
+  return encryptedToken;
+}
+function decryptToken(encryptedToken) {
+  const bytes = CryptoJS.AES.decrypt(
+    encryptedToken,
+    process.env.NEXT_PUBLIC_ENCRYPTION_KEY
+  );
+  const decryptedToken = bytes.toString(CryptoJS.enc.Utf8);
+  return JSON.parse(decryptedToken);
 }
 
 function SettingModal({ showModal, onClose }) {
   const isAdminLoggedIn = useSelector((state) => state.auth.isAdminLoggedIn);
+  const USERS = useSelector((state) => state.auth.users);
   const dispatch = useDispatch();
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
@@ -38,17 +49,22 @@ function SettingModal({ showModal, onClose }) {
   const [showLoginForm, setShowLoginForm] = useState(false); // Zustand für Login-Formular
   const router = useRouter();
 
-  const handleAdminLogin = (e) => {
+  const handleAdminLogin = async (e) => {
     e.preventDefault();
+    const userInput = username.toLowerCase(); // Benutzername in Kleinbuchstaben
     const user = Object.values(USERS).find(
-      (u) => u.username === username && u.password === password
+      (u) => u.username.toLowerCase() === userInput
     );
 
-    if (user) {
-      const token = generateToken(user);
+    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));
-      setShowLoginForm(false);
+      setError("");
       onClose();
     } else {
       setError(
@@ -56,6 +72,7 @@ function SettingModal({ showModal, onClose }) {
       );
     }
   };
+
   const deviceName_Redux = useSelector((state) => state.variables.deviceName);
   const mac1_Redux = useSelector((state) => state.variables.mac1);
   const ip_Redux = useSelector((state) => state.variables.ip);
@@ -139,14 +156,18 @@ function SettingModal({ showModal, onClose }) {
     active_Redux,
   ]);
   useEffect(() => {
-    // Check if a valid token exists in localStorage
     const token = localStorage.getItem("token");
     if (token) {
-      const { exp } = JSON.parse(atob(token));
-      if (Date.now() < exp) {
-        setIsLoggedIn(true);
-      } else {
-        localStorage.removeItem("token"); // Remove expired 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
       }
     }
   }, []);