Error: decodeToken is not defined in Header.jsx

.env.development

@@ -1 +1,3 @@
-NEXT_PUBLIC_NODE_ENV=development
+NEXT_PUBLIC_NODE_ENV=development
+NEXT_PUBLIC_ENCRYPTION_KEY=your-secure-encryption-key
+

.env.production

@@ -1 +1,2 @@
-NEXT_PUBLIC_NODE_ENV=production
+NEXT_PUBLIC_NODE_ENV=production
+NEXT_PUBLIC_ENCRYPTION_KEY=your-secure-encryption-key

components/Header.jsx

@@ -25,12 +25,11 @@ function Header() {
   useEffect(() => {
     const token = localStorage.getItem("token");
     if (token) {
-      const { exp } = JSON.parse(atob(token));
-      if (Date.now() < exp) {
-        //setIsAdminLoggedIn(true);
+      const { exp } = decodeToken(token);
+      if (exp && Date.now() < exp) {
+        // Token ist gültig
       } else {
         localStorage.removeItem("token"); // Entferne abgelaufenen Token
-        //setIsAdminLoggedIn(false);
       }
     }
   }, []);

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

package-lock.json

@@ -14,9 +14,11 @@
         "@iconify/react": "^5.0.2",
         "@reduxjs/toolkit": "^2.3.0",
         "autoprefixer": "^10.4.20",
+        "bcryptjs": "^2.4.3",
         "bootstrap-icons": "^1.11.3",
         "chart.js": "^4.4.5",
         "chartjs-plugin-zoom": "^2.0.1",
+        "crypto-js": "^4.2.0",
         "idb": "^8.0.0",
         "jsonwebtoken": "^9.0.2",
         "jwt-decode": "^4.0.0",
@@ -477,6 +479,11 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/bcryptjs": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
+      "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ=="
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -712,6 +719,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",

package.json

@@ -17,9 +17,11 @@
     "@iconify/react": "^5.0.2",
     "@reduxjs/toolkit": "^2.3.0",
     "autoprefixer": "^10.4.20",
+    "bcryptjs": "^2.4.3",
     "bootstrap-icons": "^1.11.3",
     "chart.js": "^4.4.5",
     "chartjs-plugin-zoom": "^2.0.1",
+    "crypto-js": "^4.2.0",
     "idb": "^8.0.0",
     "jsonwebtoken": "^9.0.2",
     "jwt-decode": "^4.0.0",

pages/generate-hash.js

@@ -0,0 +1,23 @@
+// pages/generate-hash.js
+import bcrypt from "bcryptjs";
+
+export default function GenerateHash() {
+  const password = "admin"; // Das Passwort, das du hashen möchtest
+  const saltRounds = 10; // Die Anzahl der Salt-Runden
+
+  // Hash generieren
+  const hash = bcrypt.hashSync(password, saltRounds);
+
+  return (
+    <div style={{ padding: "20px", fontFamily: "Arial" }}>
+      <h1>Hash-Generator</h1>
+      <p>
+        <strong>Passwort:</strong> {password}
+      </p>
+      <p>
+        <strong>Generierter Hash:</strong> {hash}
+      </p>
+      <p>Kopiere den Hash und speichere ihn in deinem Projekt.</p>
+    </div>
+  );
+}

store/authSlice.js

@@ -5,6 +5,17 @@ const authSlice = createSlice({
   name: "auth",
   initialState: {
     isAdminLoggedIn: false,
+    users: {
+      Admin: {
+        username: "admin",
+        password:
+          "$2a$10$xpq/.tcOJN/LXfzdCcCVrenlBh2nRlM1R1ISY7dd1q2qGWC9Fyd2G", // Gehashte Version von "admin"
+      },
+      Ismail: {
+        username: "ismail",
+        password: "$2b$10$<hier-hash-von-ismail>", // Gehashte Version von "ismail"
+      },
+    },
   },
   reducers: {
     setAdminLoggedIn: (state, action) => {