From c0ffbbcf381c9d191c5e87c6f697445a9d5d9ef7 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Thu, 14 Nov 2024 13:48:04 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20JWT-Authentifizierung=20in=20SettingMod?=
 =?UTF-8?q?al=20implementiert=20und=20Modal-Stabilit=C3=A4t=20verbessert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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                         |  18 +-
 .../modales/settingsModal/SettingsModal.jsx   | 468 ++++++++++--------
 package-lock.json                             |  21 +
 package.json                                  |   1 +
 pages/login.js                                | 126 -----
 5 files changed, 279 insertions(+), 355 deletions(-)
 delete mode 100644 pages/login.js

diff --git a/components/Header.jsx b/components/Header.jsx
index f2f8f4c..d122eef 100644
--- a/components/Header.jsx
+++ b/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"
diff --git a/components/modales/settingsModal/SettingsModal.jsx b/components/modales/settingsModal/SettingsModal.jsx
index 6420ddb..833a42c 100644
--- a/components/modales/settingsModal/SettingsModal.jsx
+++ b/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>
     </>
   );
diff --git a/package-lock.json b/package-lock.json
index c5bcbfb..29a4c7c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "react-modal": "^3.16.1",
         "react-redux": "^9.1.2",
         "react-spinners": "^0.14.1",
+        "react-toastify": "^10.0.6",
         "redux": "^5.0.1",
         "redux-persist": "^6.0.0"
       },
@@ -662,6 +663,14 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1688,6 +1697,18 @@
         "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "10.0.6",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.6.tgz",
+      "integrity": "sha512-yYjp+omCDf9lhZcrZHKbSq7YMuK0zcYkDFTzfRFgTXkTFHZ1ToxwAonzA4JI5CxA91JpjFLmwEsZEgfYfOqI1A==",
+      "dependencies": {
+        "clsx": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index e746bbf..bbcb33a 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "react-modal": "^3.16.1",
     "react-redux": "^9.1.2",
     "react-spinners": "^0.14.1",
+    "react-toastify": "^10.0.6",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0"
   },
diff --git a/pages/login.js b/pages/login.js
deleted file mode 100644
index 27ec2ac..0000000
--- a/pages/login.js
+++ /dev/null
@@ -1,126 +0,0 @@
-// pages/index.js
-
-import Image from "next/image";
-import { useState } from "react";
-import { useRouter } from "next/router";
-
-const USERS = {
-  Admin: { username: "admin", password: "admin", role: "Admin" },
-  Ismail: { username: "ismail", password: "ismail", role: "Admin" },
-};
-
-function generateToken(user) {
-  const payload = {
-    username: user.username,
-    role: user.role,
-    exp: Date.now() + 5 * 60 * 1000, // Ablauf in 5 Minuten
-  };
-  return btoa(JSON.stringify(payload)); // Verwende btoa für das Payload
-}
-
-export default function Home() {
-  const router = useRouter();
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState("");
-
-  const handleLogin = (e) => {
-    e.preventDefault();
-    const user = Object.values(USERS).find(
-      (u) => u.username.toLowerCase() === username.toLowerCase()
-    );
-
-    if (user && user.password === password) {
-      const token = generateToken(user);
-      localStorage.setItem("token", token);
-
-      // Überprüfen, ob es sich um die Produktionsumgebung handelt
-      const targetPath =
-        process.env.NODE_ENV === "production"
-          ? "/kabelueberwachung.html"
-          : "/kabelueberwachung";
-      router.replace(targetPath);
-    } else {
-      setError("Login fehlgeschlagen");
-    }
-  };
-
-  return (
-    <div className="relative flex items-center justify-center h-5/6 overflow-hidden bg-gray-900">
-      {/* Hintergrundbild */}
-      <div
-        className="absolute inset-0 bg-cover bg-center opacity-80"
-        style={{
-          backgroundImage: "url('/loginPageImg/background.png')",
-          height: "75vh", // Setzt die Höhe auf 75% des Viewports
-        }}
-      ></div>
-
-      {/* Overlay */}
-      <div className="absolute inset-0 bg-gradient-to-r from-gray-900 via-transparent to-gray-900 opacity-90"></div>
-
-      <div className="relative z-10 flex flex-col items-center p-3 bg-white bg-opacity-80 rounded-lg shadow-lg md:w-1/5 lg:w-1/6 max-h-[90vh]">
-        {/* Logo */}
-        <div className="mb-2">
-          <Image
-            src="/loginPageImg/logo.png"
-            alt="Littwin Logo"
-            width={60}
-            height={60}
-          />
-        </div>
-
-        {/* Titel */}
-        <h2 className="text-xl font-semibold text-gray-800 mb-3">Willkommen</h2>
-
-        {/* Formular */}
-        <form className="w-full" onSubmit={handleLogin}>
-          {/* Benutzername */}
-          <div className="mb-3">
-            <label
-              className="block text-gray-600 text-xs mb-1"
-              htmlFor="username"
-            >
-              Benutzername
-            </label>
-            <input
-              type="text"
-              id="username"
-              placeholder="Benutzername"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent"
-            />
-          </div>
-
-          {/* Passwort */}
-          <div className="mb-3">
-            <label
-              className="block text-gray-600 text-xs mb-1"
-              htmlFor="password"
-            >
-              Passwort
-            </label>
-            <input
-              type="password"
-              id="password"
-              placeholder="Passwort"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent"
-            />
-          </div>
-
-          {/* Login Button */}
-          <button
-            type="submit"
-            className="w-full bg-blue-600 text-white py-1 text-sm rounded-md hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-500"
-          >
-            Einloggen
-          </button>
-        </form>
-        {error && <p className="text-red-500 mt-2 text-sm">{error}</p>}
-      </div>
-    </div>
-  );
-}