Einstellungen von Header nach Einstellungsseite ausgelagert

components/main/settingsPageComponents/GeneralSettings.tsx

@@ -1,18 +1,28 @@
-"use client";
+"use client"; // /components/main/settingsPageComponents/GeneralSettings.tsx
 import React, { useState } from "react";
 import { RootState } from "../../../redux/store";
 import { useSelector } from "react-redux";
-import handleClearDatabase from "../../header/settingsModal/handlers/handleClearDatabase";
-import handleReboot from "../../header/settingsModal/handlers/handleReboot";
-import handleSetDateTime from "../../header/settingsModal/handlers/handleSetDateTime";
-import handleSubmit from "../../header/settingsModal/handlers/handleSubmit";
+import handleClearDatabase from "./handlers/handleClearDatabase";
+import handleReboot from "./handlers/handleReboot";
+import handleSetDateTime from "./handlers/handleSetDateTime";
+import handleSubmit from "./handlers/handleSubmit";
+import { useAdminAuth } from "./hooks/useAdminAuth";
+import handleAdminLogin from "./handlers/handleAdminLogin";
 
 const GeneralSettings = () => {
   const systemSettings = useSelector(
     (state: RootState) => state.systemSettings
   );
 
+  const { isAdminLoggedIn, logoutAdmin } = useAdminAuth(true);
+  const [loginSuccess, setLoginSuccess] = useState(false);
+
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+
   const [name, setName] = useState(systemSettings.deviceName || "");
+  const [mac1] = useState(systemSettings.mac1 || "");
   const [ip, setIp] = useState(systemSettings.ip || "");
   const [subnet, setSubnet] = useState(systemSettings.subnet || "");
   const [gateway, setGateway] = useState(systemSettings.gateway || "");
@@ -26,145 +36,167 @@ const GeneralSettings = () => {
     systemSettings.ntpTimezone || ""
   );
   const [active, setActive] = useState(systemSettings.ntpActive || false);
-
+  const handleLogin = async () => {
+    handleAdminLogin(
+      username,
+      password,
+      () => {
+        setLoginSuccess(true);
+        setError("");
+      },
+      (errorMsg) => {
+        setLoginSuccess(false);
+        setError(errorMsg);
+      }
+    );
+  };
   return (
-    <div className="p-2 bg-gray-100">
-      <h2 className="text-md font-bold mb-2">General Settings</h2>
-      <form className="grid grid-cols-2 gap-2">
+    <div className="p-2 md:p-3 bg-gray-100 max-w-2xl mx-auto">
+      <h2 className="text-sm md:text-md font-bold mb-2">
+        Allgemeine Einstellungen
+      </h2>
+      <form className="grid grid-cols-1 md:grid-cols-2 gap-2">
         {/* ✅ Geräte-Name */}
         <div className="col-span-2">
-          <label className="block text-xs font-medium">Name:</label>
+          <label className="block text-xs md:text-sm font-medium">Name:</label>
           <input
             type="text"
-            className="border border-gray-300 rounded p-1 w-full text-sm"
+            className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
             value={name}
             onChange={(e) => setName(e.target.value)}
           />
         </div>
 
-        {/* ✅ Netzwerk-Einstellungen */}
+        {/* ✅ MAC Adresse (nur Anzeige) */}
         <div>
-          <label className="block text-xs font-medium">IP:</label>
+          <label className="block text-xs md:text-sm font-medium">
+            MAC Adresse 1:
+          </label>
           <input
             type="text"
-            className="border border-gray-300 rounded p-1 w-full text-sm"
-            value={ip}
-            onChange={(e) => setIp(e.target.value)}
-          />
-        </div>
-        <div>
-          <label className="block text-xs font-medium">Subnet:</label>
-          <input
-            type="text"
-            className="border border-gray-300 rounded p-1 w-full text-sm"
-            value={subnet}
-            onChange={(e) => setSubnet(e.target.value)}
-          />
-        </div>
-        <div>
-          <label className="block text-xs font-medium">Gateway:</label>
-          <input
-            type="text"
-            className="border border-gray-300 rounded p-1 w-full text-sm"
-            value={gateway}
-            onChange={(e) => setGateway(e.target.value)}
+            className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
+            value={mac1}
+            disabled
           />
         </div>
 
-        {/* ✅ System-Zeit */}
-        <div className="col-span-2 flex items-center gap-2">
+        {/* ✅ Systemzeit & Setzen */}
+        <div className="flex flex-col md:flex-row md:items-center gap-1 col-span-2">
           <div className="flex-1">
-            <label className="block text-xs font-medium">Systemzeit:</label>
+            <label className="block text-xs md:text-sm font-medium">
+              Systemzeit:
+            </label>
             <input
               type="text"
-              className="border border-gray-300 rounded p-1 w-full text-sm"
+              className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
               value={systemUhr}
               disabled
             />
           </div>
           <button
             type="button"
-            className="bg-littwin-blue text-white px-3 py-1 rounded text-xs"
+            className="bg-littwin-blue text-white px-2 py-1 rounded w-full md:w-auto text-xs"
             onClick={() => handleSetDateTime()}
           >
-            Setzen
+            Systemzeit übernehmen
           </button>
         </div>
 
-        {/* ✅ NTP-Server */}
+        {/* ✅ Netzwerk-Einstellungen */}
         <div>
-          <label className="block text-xs font-medium">NTP Server 1:</label>
+          <label className="block text-xs md:text-sm font-medium">IP:</label>
           <input
             type="text"
-            className="border border-gray-300 rounded p-1 w-full text-sm"
-            value={ntp1}
-            onChange={(e) => setNtp1(e.target.value)}
+            className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
+            value={ip}
+            onChange={(e) => setIp(e.target.value)}
           />
         </div>
         <div>
-          <label className="block text-xs font-medium">NTP Server 2:</label>
-          <input
-            type="text"
-            className="border border-gray-300 rounded p-1 w-full text-sm"
-            value={ntp2}
-            onChange={(e) => setNtp2(e.target.value)}
-          />
-        </div>
-        <div>
-          <label className="block text-xs font-medium">NTP Server 3:</label>
-          <input
-            type="text"
-            className="border border-gray-300 rounded p-1 w-full text-sm"
-            value={ntp3}
-            onChange={(e) => setNtp3(e.target.value)}
-          />
-        </div>
-        <div>
-          <label className="block text-xs font-medium">Zeitzone:</label>
-          <input
-            type="text"
-            className="border border-gray-300 rounded p-1 w-full text-sm"
-            value={ntpTimezone}
-            onChange={(e) => setNtpTimezone(e.target.value)}
-          />
-        </div>
-        <div className="col-span-2 flex items-center gap-2">
-          <input
-            id="ntpActive"
-            type="checkbox"
-            className="peer hidden"
-            checked={active}
-            onChange={(e) => setActive(e.target.checked)}
-          />
-          <label
-            htmlFor="ntpActive"
-            className="w-5 h-5 border-2 border-gray-300 rounded cursor-pointer flex items-center justify-center 
-              peer-checked:bg-littwin-blue peer-checked:border-littwin-blue peer-checked:text-white"
-          >
-            ✓
+          <label className="block text-xs md:text-sm font-medium">
+            Subnet:
           </label>
-          <span className="text-xs font-medium">NTP Aktiv</span>
+          <input
+            type="text"
+            className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
+            value={subnet}
+            onChange={(e) => setSubnet(e.target.value)}
+          />
         </div>
+        <div>
+          <label className="block text-xs md:text-sm font-medium">
+            Gateway:
+          </label>
+          <input
+            type="text"
+            className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
+            value={gateway}
+            onChange={(e) => setGateway(e.target.value)}
+          />
+        </div>
+
+        {/* ✅ Admin-Login/Logout */}
+        <div className="col-span-2 flex flex-col gap-1">
+          {isAdminLoggedIn ? (
+            <button
+              type="button"
+              className="bg-red-500 text-white px-2 py-1 rounded text-xs"
+              onClick={logoutAdmin}
+            >
+              Admin abmelden
+            </button>
+          ) : (
+            <>
+              <input
+                type="text"
+                placeholder="Benutzername"
+                className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+              />
+              <input
+                type="password"
+                placeholder="Passwort"
+                className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+              <button
+                type="button"
+                className="bg-littwin-blue text-white px-2 py-1 rounded text-xs"
+                onClick={handleLogin}
+              >
+                Admin anmelden
+              </button>
+            </>
+          )}
+        </div>
+
+        {/* ✅ Feedback für den Benutzer */}
+        {loginSuccess && (
+          <p className="text-green-600 text-xs">Login erfolgreich!</p>
+        )}
+        {error && <p className="text-red-500 text-xs">{error}</p>}
 
         {/* ✅ Buttons */}
-        <div className="col-span-2 flex justify-between mt-2">
+        <div className="col-span-2 flex flex-wrap md:justify-between gap-1 mt-2">
           <button
             type="button"
-            className="bg-littwin-blue text-white px-3 py-1 rounded text-xs"
+            className="bg-littwin-blue text-white px-2 py-1 rounded text-xs w-full md:w-auto"
             onClick={() => handleReboot()}
           >
-            Neustart
+            Neustart CPL
           </button>
           <button
             type="button"
-            className="bg-littwin-blue text-white px-3 py-1 rounded text-xs"
+            className="bg-littwin-blue text-white px-2 py-1 rounded text-xs w-full md:w-auto"
             onClick={() => handleClearDatabase()}
           >
             Datenbank leeren
           </button>
           <button
             type="button"
-            className="bg-littwin-blue text-white px-3 py-1 rounded text-xs"
+            className="bg-littwin-blue text-white px-2 py-1 rounded text-xs w-full md:w-auto"
             onClick={() =>
               handleSubmit(
                 {