Error: decodeToken is not defined in Header.jsx

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
       }
     }
   }, []);