feat: JWT-Authentifizierung in SettingModal implementiert und Modal-Stabilität verbessert

- JWT-Token-Erstellung und -Speicherung für sichere Admin-Authentifizierung in SettingModal hinzugefügt.
- Stabilitätsprobleme des Modals behoben.
- Funktionalität des Modals und des Tokens überprüft, um eine reibungslose Benutzererfahrung sicherzustellen.

components/Header.jsx

@@ -1,4 +1,5 @@
-"use client"; // components/Header.jsx
+// components/Header.jsx
+"use client";
 import React, { useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
@@ -15,13 +16,6 @@ function Header() {
   const handleCloseSettingsModal = () => setShowSettingsModal(false);
   const handleLogout = () => (window.location.href = "/offline.html");
 
-  // Funktion zur Weiterleitung zur Login-Seite abhängig von der Umgebung
-  const handleAdminLogin = () => {
-    const loginPath =
-      process.env.NODE_ENV === "production" ? "/login.html" : "/login";
-    router.push(loginPath);
-  };
-
   return (
     <header className="bg-gray-300 flex justify-between items-center w-full h-28 relative text-black">
       <div className="absolute left-32 top-32 transform -translate-y-1/2">
@@ -52,14 +46,6 @@ function Header() {
           </button>
         </div>
         <div className="flex items-center justify-end w-full space-x-2">
-          <button
-            onClick={handleAdminLogin}
-            title="Als Admin anmelden"
-            className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
-          >
-            <i className="bi bi-person-circle mr-2"></i>
-          </button>
-
           <button
             onClick={handleLogout}
             className="bg-littwin-blue text-white px-4 py-2 rounded"

components/modales/settingsModal/SettingsModal.jsx

@@ -1,23 +1,58 @@
-import React, { useState, useEffect } from "react"; // omponents/modales/settingsModal.jsx
+"use client";
+import React, { useState, useEffect } from "react";
 import ReactModal from "react-modal";
 import { ClipLoader } from "react-spinners";
-import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
+import "bootstrap-icons/font/bootstrap-icons.css";
 import { useSelector } from "react-redux";
-import { current } from "@reduxjs/toolkit";
-
 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";
 
-// Definiere das App-Element für ReactModal
 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
+  };
+  return btoa(JSON.stringify(payload));
+}
+
 function SettingModal({ showModal, onClose }) {
-  // Redux-Werte abrufen
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [showLoginForm, setShowLoginForm] = useState(false); // Zustand für Login-Formular
+  const router = useRouter();
+
+  const handleAdminLogin = (e) => {
+    e.preventDefault();
+    const user = Object.values(USERS).find(
+      (u) => u.username === username && u.password === password
+    );
+
+    if (user) {
+      const token = generateToken(user);
+      localStorage.setItem("token", token);
+      setIsLoggedIn(true);
+      setShowLoginForm(false);
+    } else {
+      setError(
+        "Login fehlgeschlagen. Bitte überprüfen Sie Benutzername und Passwort."
+      );
+    }
+  };
   const deviceName_Redux = useSelector((state) => state.variables.deviceName);
   const mac1_Redux = useSelector((state) => state.variables.mac1);
-
   const ip_Redux = useSelector((state) => state.variables.ip);
   const subnet_Redux = useSelector((state) => state.variables.subnet);
   const gateway_Redux = useSelector((state) => state.variables.gateway);
@@ -30,10 +65,8 @@ function SettingModal({ showModal, onClose }) {
   const ntpTimezone_Redux = useSelector((state) => state.variables.ntpTimezone);
   const active_Redux = useSelector((state) => state.variables.ntpActive);
 
-  // Lokale State-Variablen zum Bearbeiten
   const [name, setName] = useState(deviceName_Redux || "");
   const [mac1, setMac1] = useState(mac1_Redux || "");
-
   const [ip, setIp] = useState(ip_Redux || "");
   const [subnet, setSubnet] = useState(subnet_Redux || "");
   const [gateway, setGateway] = useState(gateway_Redux || "");
@@ -44,10 +77,7 @@ function SettingModal({ showModal, onClose }) {
   const [ntpTimezone, setNtpTimezone] = useState(ntpTimezone_Redux || "");
   const [active, setActive] = useState(active_Redux || "");
 
-  const [showRebootModal, setShowRebootModal] = useState(false);
-  // Originalwerte speichern
   const [originalValues, setOriginalValues] = useState({});
-  // Erzeuge das currentValues-Objekt aus den aktuellen State-Werten
   const currentValues = {
     name,
     ip,
@@ -59,20 +89,11 @@ function SettingModal({ showModal, onClose }) {
     ntpTimezone,
     active,
   };
-  // Effekt, um Redux-Werte beim Anzeigen des Modals in lokale State-Variablen zu setzen
-  // Initialisiere currentPath für die gesamte Datei
-  let currentPath = window.location.pathname;
-  if (!currentPath.endsWith(".html")) {
-    currentPath += ".html";
-  }
 
-  //---------------------------------------------------
-  // Setze initiale Werte nur beim Öffnen des Modals
   useEffect(() => {
     if (showModal) {
       setName(deviceName_Redux || "");
       setMac1(mac1_Redux || "");
-
       setIp(ip_Redux || "");
       setSubnet(subnet_Redux || "");
       setGateway(gateway_Redux || "");
@@ -83,7 +104,7 @@ function SettingModal({ showModal, onClose }) {
       setNtpTimezone(ntpTimezone_Redux || "");
       setActive(active_Redux || "");
     }
-  }, [showModal]); // Nur beim Öffnen des Modals erneut setzen
+  }, [showModal]);
 
   useEffect(() => {
     setOriginalValues({
@@ -108,23 +129,27 @@ function SettingModal({ showModal, onClose }) {
     ntpTimezone_Redux,
     active_Redux,
   ]);
-  //---------------------------------------------------
-  // Aktualisiere `systemUhr`, wenn sich `datetime_Redux` ändert
   useEffect(() => {
-    setSystemUhr(datetime_Redux || "");
-  }, [datetime_Redux]);
-  //---------------------------------------------------
+    // 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
+      }
+    }
+  }, []);
 
   return (
     <>
       <ReactModal
         isOpen={showModal}
         onRequestClose={onClose}
+        shouldCloseOnOverlayClick={false}
         style={{
-          overlay: {
-            backgroundColor: "rgba(0, 0, 0, 0.5)",
-            zIndex: 100,
-          },
+          overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)", zIndex: 100 },
           content: {
             top: "50%",
             left: "50%",
@@ -141,7 +166,6 @@ function SettingModal({ showModal, onClose }) {
           },
         }}
       >
-        {/* Modal-Inhalt */}
         <button
           onClick={onClose}
           style={{
@@ -157,201 +181,219 @@ function SettingModal({ showModal, onClose }) {
           <i className="bi bi-x-circle-fill"></i>
         </button>
 
-        {/* Weitere Inhalte wie Formular */}
-        <div className="text-black">
-          <h2 className="text-lg font-bold mb-4">System:</h2>
-          <form>
-            <div className="mb-4">
-              <label className="block text-sm font-medium">Name:</label>
-              <input
-                type="text"
-                className="border border-gray-300 rounded p-2 w-full"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-              />
-            </div>
-
-            <div className="mb-4 grid grid-cols-2 gap-4">
-              <div>
+        {/* Hauptinhalt oder Login-Formular */}
+        {showLoginForm ? (
+          <div className="text-black">
+            <h2 className="text-lg font-bold mb-4">Admin Login</h2>
+            <form onSubmit={(e) => e.preventDefault()}>
+              <div className="mb-4">
                 <label className="block text-sm font-medium">
-                  MAC Adresse 1:
+                  Benutzername:
                 </label>
                 <input
                   type="text"
                   className="border border-gray-300 rounded p-2 w-full"
-                  value={mac1}
-                  onChange={(e) => setMac1(e.target.value)}
-                  disabled
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                />
+              </div>
+              <div className="mb-4">
+                <label className="block text-sm font-medium">Passwort:</label>
+                <input
+                  type="password"
+                  className="border border-gray-300 rounded p-2 w-full"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+              </div>
+              {error && <p className="text-red-500">{error}</p>}
+              <button
+                onClick={handleAdminLogin}
+                className="bg-littwin-blue text-white px-4 py-2 rounded w-full"
+              >
+                Anmelden
+              </button>
+            </form>
+          </div>
+        ) : (
+          <div className="text-black">
+            <h2 className="text-lg font-bold mb-4">System:</h2>
+            <form>
+              <div className="mb-4">
+                <label className="block text-sm font-medium">Name:</label>
+                <input
+                  type="text"
+                  className="border border-gray-300 rounded p-2 w-full"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
                 />
               </div>
-            </div>
 
-            <div className="mb-4 grid grid-cols-2 gap-4">
-              <div>
-                <label className="block text-sm font-medium">IP:</label>
-                <input
-                  type="text"
-                  className="border border-gray-300 rounded p-2 w-full"
-                  value={ip}
-                  onChange={(e) => setIp(e.target.value)}
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium">Subnet:</label>
-                <input
-                  type="text"
-                  className="border border-gray-300 rounded p-2 w-full"
-                  value={subnet}
-                  onChange={(e) => setSubnet(e.target.value)}
-                />
-              </div>
-            </div>
-
-            <div className="mb-4 grid grid-cols-2 gap-4">
-              <div>
-                <label className="block text-sm font-medium">Gateway:</label>
-                <input
-                  type="text"
-                  className="border border-gray-300 rounded p-2 w-full"
-                  value={gateway}
-                  onChange={(e) => setGateway(e.target.value)}
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium">Systemuhr:</label>
-                <input
-                  type="text"
-                  className="border border-gray-300 rounded p-2 w-full"
-                  value={systemUhr}
-                  disabled
-                />
-                {/* Button für Systemzeit übernehmen */}
-
-                <div className="flex w-full mt-1 justify-end">
-                  <button
-                    className="bg-littwin-blue text-white px-4 py-2 rounded"
-                    onClick={() => {
-                      if (
-                        window.confirm(
-                          "Möchten Sie wirklich die Systemzeit übernehmen?"
-                        )
-                      ) {
-                        handleSetDateTime();
-                      }
-                    }}
-                  >
-                    Systemzeit übernehmen
-                  </button>
+              <div className="mb-4 grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium">
+                    MAC Adresse 1:
+                  </label>
+                  <input
+                    type="text"
+                    className="border border-gray-300 rounded p-2 w-full"
+                    value={mac1}
+                    onChange={(e) => setMac1(e.target.value)}
+                    disabled
+                  />
                 </div>
               </div>
-            </div>
 
-            {/* SNTP Client */}
-            <h3 className="text-sm font-bold mb-2">SNTP Client:</h3>
-            <div className="mb-4 grid grid-cols-2 gap-4">
-              <div>
-                <label className="block text-sm font-medium">
-                  IP NTP Server 1:
-                </label>
-                <input
-                  type="text"
-                  className="border border-gray-300 rounded p-2 w-full"
-                  value={ntp1}
-                  onChange={(e) => setNtp1(e.target.value)}
-                />
+              <div className="mb-4 grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium">IP:</label>
+                  <input
+                    type="text"
+                    className="border border-gray-300 rounded p-2 w-full"
+                    value={ip}
+                    onChange={(e) => setIp(e.target.value)}
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium">Subnet:</label>
+                  <input
+                    type="text"
+                    className="border border-gray-300 rounded p-2 w-full"
+                    value={subnet}
+                    onChange={(e) => setSubnet(e.target.value)}
+                  />
+                </div>
               </div>
-              <div>
-                <label className="block text-sm font-medium">
-                  IP NTP Server 2:
-                </label>
-                <input
-                  type="text"
-                  className="border border-gray-300 rounded p-2 w-full"
-                  value={ntp2}
-                  onChange={(e) => setNtp2(e.target.value)}
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium">
-                  IP NTP Server 3:
-                </label>
-                <input
-                  type="text"
-                  className="border border-gray-300 rounded p-2 w-full"
-                  value={ntp3}
-                  onChange={(e) => setNtp3(e.target.value)}
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium">Zeitzone:</label>
-                <input
-                  type="text"
-                  className="border border-gray-300 rounded p-2 w-full"
-                  value={ntpTimezone}
-                  onChange={(e) => setNtpTimezone(e.target.value)}
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium">NTP Active:</label>
-                <input
-                  type="text"
-                  className="border border-gray-300 rounded p-2 w-full"
-                  value={active}
-                  onChange={(e) => setActive(e.target.value)}
-                />
-              </div>
-            </div>
 
-            {/* Modal Footer */}
-            <div className="flex justify-between mt-4">
-              <button
-                className="bg-littwin-blue text-white px-4 py-2 rounded"
-                onClick={() => handleReboot()}
-              >
-                Neustart CPL
-              </button>
-              <button
-                className="bg-littwin-blue text-white px-4 py-2 rounded"
-                onClick={() => handleClearDatabase()}
-              >
-                Datenbank leeren
-              </button>
-              <button
-                onClick={() => handleSubmit(originalValues, currentValues)}
-                className="bg-littwin-blue text-white px-4 py-2 rounded"
-              >
-                Übernehmen
-              </button>
-            </div>
-          </form>
-        </div>
-      </ReactModal>
+              <div className="mb-4 grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium">Gateway:</label>
+                  <input
+                    type="text"
+                    className="border border-gray-300 rounded p-2 w-full"
+                    value={gateway}
+                    onChange={(e) => setGateway(e.target.value)}
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium">
+                    Systemuhr:
+                  </label>
+                  <input
+                    type="text"
+                    className="border border-gray-300 rounded p-2 w-full"
+                    value={systemUhr}
+                    disabled
+                  />
+                  {/* Button für Systemzeit übernehmen */}
 
-      {/* Reboot Modal */}
-      <ReactModal
-        isOpen={showRebootModal}
-        ariaHideApp={false}
-        style={{
-          overlay: {
-            backgroundColor: "rgba(0, 0, 0, 0.75)",
-            zIndex: 200,
-          },
-          content: {
-            top: "50%",
-            left: "50%",
-            right: "auto",
-            bottom: "auto",
-            marginRight: "-50%",
-            transform: "translate(-50%, -50%)",
-            width: "400px",
-            textAlign: "center",
-            padding: "20px",
-          },
-        }}
-      >
-        <h3>CPL wird neu gestartet...</h3>
-        <ClipLoader color={"#76c7c0"} size={50} /> {/* Spinner */}
-        <p>Bitte warten Sie 5 Sekunden...</p>
+                  <div className="flex w-full mt-1 justify-end">
+                    <button
+                      className="bg-littwin-blue text-white px-4 py-2 rounded"
+                      onClick={() => {
+                        if (
+                          window.confirm(
+                            "Möchten Sie wirklich die Systemzeit übernehmen?"
+                          )
+                        ) {
+                          handleSetDateTime();
+                        }
+                      }}
+                    >
+                      Systemzeit übernehmen
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              {/* SNTP Client */}
+              <h3 className="text-sm font-bold mb-2">SNTP Client:</h3>
+              <div className="mb-4 grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium">
+                    IP NTP Server 1:
+                  </label>
+                  <input
+                    type="text"
+                    className="border border-gray-300 rounded p-2 w-full"
+                    value={ntp1}
+                    onChange={(e) => setNtp1(e.target.value)}
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium">
+                    IP NTP Server 2:
+                  </label>
+                  <input
+                    type="text"
+                    className="border border-gray-300 rounded p-2 w-full"
+                    value={ntp2}
+                    onChange={(e) => setNtp2(e.target.value)}
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium">
+                    IP NTP Server 3:
+                  </label>
+                  <input
+                    type="text"
+                    className="border border-gray-300 rounded p-2 w-full"
+                    value={ntp3}
+                    onChange={(e) => setNtp3(e.target.value)}
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium">Zeitzone:</label>
+                  <input
+                    type="text"
+                    className="border border-gray-300 rounded p-2 w-full"
+                    value={ntpTimezone}
+                    onChange={(e) => setNtpTimezone(e.target.value)}
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium">
+                    NTP Active:
+                  </label>
+                  <input
+                    type="text"
+                    className="border border-gray-300 rounded p-2 w-full"
+                    value={active}
+                    onChange={(e) => setActive(e.target.value)}
+                  />
+                </div>
+              </div>
+
+              {/* Modal Footer */}
+              <div className="flex justify-between mt-4">
+                <button
+                  className="bg-littwin-blue text-white px-4 py-2 rounded"
+                  onClick={() => handleReboot()}
+                >
+                  Neustart CPL
+                </button>
+                <button
+                  onClick={() => setShowLoginForm(true)}
+                  className="bg-littwin-blue text-white px-4 py-2 rounded"
+                >
+                  Admin anmelden
+                </button>
+                <button
+                  className="bg-littwin-blue text-white px-4 py-2 rounded"
+                  onClick={() => handleClearDatabase()}
+                >
+                  Datenbank leeren
+                </button>
+                <button
+                  onClick={() => handleSubmit(originalValues, currentValues)}
+                  className="bg-littwin-blue text-white px-4 py-2 rounded"
+                >
+                  Übernehmen
+                </button>
+              </div>
+            </form>
+          </div>
+        )}
       </ReactModal>
     </>
   );