Merge branch 'feature/password-hash' into develop

components/Header.jsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/router";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import SettingsModal from "./modales/settingsModal/SettingsModal";
 import { useSelector } from "react-redux";
+import decodeToken from "../utils/decodeToken";
 
 function Header() {
   const isAdminLoggedIn = useSelector((state) => state.auth.isAdminLoggedIn);
@@ -25,12 +26,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

@@ -8,18 +8,10 @@ import handleSave from "./handlers/handleSave";
 import handleDisplayEinschalten from "./handlers/handleDisplayEinschalten";
 import handleChange from "./handlers/handleChange";
 import firmwareUpdate from "./handlers/firmwareUpdate";
-
-function decodeToken(token) {
-  try {
-    const payload = JSON.parse(atob(token)); // Direkt das Token decodieren
-    return payload;
-  } catch (error) {
-    console.error("Fehler beim Dekodieren des Tokens:", error);
-    return null;
-  }
-}
+import decodeToken from "../../../utils/decodeToken";
 
 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 +92,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 +237,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,34 +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("");
@@ -37,18 +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));
-      setIsLoggedIn(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);
@@ -94,6 +111,10 @@ function SettingModal({ showModal, onClose }) {
     ntpTimezone,
     active,
   };
+  const handleAdminLogout = () => {
+    localStorage.removeItem("token"); // Remove token on logout
+    dispatch(setAdminLoggedIn(false)); // Update Redux state
+  };
 
   useEffect(() => {
     if (showModal) {
@@ -135,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
       }
     }
   }, []);
@@ -378,10 +403,14 @@ function SettingModal({ showModal, onClose }) {
                   Neustart CPL
                 </button>
                 <button
-                  onClick={() => setShowLoginForm(true)}
+                  onClick={() => {
+                    isAdminLoggedIn
+                      ? handleAdminLogout()
+                      : setShowLoginForm(true);
+                  }}
                   className="bg-littwin-blue text-white px-4 py-2 rounded"
                 >
-                  Admin anmelden
+                  {isAdminLoggedIn ? "Admin abmelden" : "Admin anmelden"}
                 </button>
                 <button
                   className="bg-littwin-blue text-white px-4 py-2 rounded"