🛠 1️⃣ Was wurde erfolgreich ausgelagert?

✔ cryptoUtils.ts → Enthält generateKeyAndIV und generateToken​cryptoUtils
✔ useAdminAuth.ts → Enthält decryptToken, useEffect für Login-Status und logoutAdmin​useAdminAuth
✔ useSystemSettings.ts → Verwaltet Redux-Daten und setzt formValues​useSystemSettings
✔ handleAdminLogin.ts → Enthält handleAdminLogin, um die Login-Logik auszulagern​handleAdminLogin
✔ handleClearDatabase.ts → Handhabt das Löschen der Datenbank​handleClearDatabase
✔ handleReboot.ts → Handhabt den Reboot des CPL​handleReboot
✔ handleSetDateTime.ts → Setzt Datum und Uhrzeit für das System​handleSetDateTime
✔ handleSubmit.ts → Verarbeitet Änderungen und sendet sie an den Server​handleSubmit
✔ users.ts → Enthält die USERS-Konfiguration für den Admin​users

🚀 Das bedeutet:

SettingsModal.tsx ist jetzt nur noch für die UI zuständig.
Alle Geschäftslogik (State, API-Aufrufe, Funktionen) wurde sauber in separate Dateien ausgelagert.
Der Code ist jetzt wartungsfreundlicher und wiederverwendbarer.

components/header/settingsModal/SettingsModal.tsx

@@ -13,20 +13,14 @@ import CryptoJS from "crypto-js";
 import { useAdminAuth } from "./hooks/useAdminAuth";
 import { useSystemSettings } from "./hooks/useSystemSettings";
 import { generateKeyAndIV, generateToken } from "./utils/cryptoUtils";
+import USERS from "./config/users";
+import handleAdminLogin from "./handlers/handleAdminLogin";
 
 ReactModal.setAppElement("#__next");
 
-const USERS = {
-  Admin: {
-    username: "admin",
-    // Gehashte Version von "admin" mit bcrypt
-    password: "$2a$10$xpq/.tcOJN/LXfzdCcCVrenlBh2nRlM1R1ISY7dd1q2qGWC9Fyd2G",
-    role: "Admin",
-  },
-};
-
 function SettingModal({ showModal, onClose }) {
-  const { isAdminLoggedIn, setAdminLoggedIn } = useAdminAuth(showModal);
+  const { isAdminLoggedIn, logoutAdmin } = useAdminAuth(showModal);
+
   const { formValues, setFormValues } = useSystemSettings(showModal);
 
   const [username, setUsername] = useState("");
@@ -34,24 +28,6 @@ function SettingModal({ showModal, onClose }) {
   const [error, setError] = useState("");
   const [showLoginForm, setShowLoginForm] = useState(false);
 
-  function handleAdminLogin(e) {
-    e.preventDefault();
-    const user = USERS.Admin;
-    bcrypt.compare(password, user.password, (err, isMatch) => {
-      if (isMatch) {
-        const token = generateToken(user);
-        sessionStorage.setItem("token", token);
-        localStorage.setItem("isAdminLoggedIn", "true");
-        setShowLoginForm(false);
-        onClose();
-      } else {
-        setError(
-          "Login fehlgeschlagen. Bitte überprüfen Sie Benutzername und Passwort."
-        );
-      }
-    });
-  }
-
   const deviceName_Redux = useSelector(
     (state: RootState) => state.systemSettings.deviceName
   );
@@ -108,10 +84,6 @@ function SettingModal({ showModal, onClose }) {
     ntpTimezone,
     active,
   };
-  const handleAdminLogout = () => {
-    sessionStorage.removeItem("token"); // Token aus sessionStorage entfernen
-    localStorage.setItem("isAdminLoggedIn", "false"); // Admin-Status im localStorage setzen
-  };
 
   return (
     <>

components/header/settingsModal/config/users.ts

@@ -0,0 +1,10 @@
+// components/header/settingsModal/config/users.ts
+const USERS = {
+  Admin: {
+    username: "admin",
+    password: "$2a$10$xpq/.tcOJN/LXfzdCcCVrenlBh2nRlM1R1ISY7dd1q2qGWC9Fyd2G", // Gehashte Version von "admin"
+    role: "Admin",
+  },
+};
+
+export default USERS;

components/header/settingsModal/handlers/handleAdminLogin.ts

@@ -0,0 +1,27 @@
+// components/header/settingsModal/handlers/handleAdminLogin.ts
+import bcrypt from "bcryptjs";
+import { generateToken } from "../utils/cryptoUtils";
+import USERS from "../config/users";
+
+const handleAdminLogin = (
+  username: string,
+  password: string,
+  onSuccess: () => void,
+  onError: (errorMsg: string) => void
+) => {
+  const user = USERS.Admin;
+  bcrypt.compare(password, user.password, (err, isMatch) => {
+    if (isMatch) {
+      const token = generateToken(user);
+      sessionStorage.setItem("token", token);
+      localStorage.setItem("isAdminLoggedIn", "true");
+      onSuccess();
+    } else {
+      onError(
+        "Login fehlgeschlagen. Bitte überprüfen Sie Benutzername und Passwort."
+      );
+    }
+  });
+};
+
+export default handleAdminLogin;

components/header/settingsModal/hooks/useAdminAuth.ts

@@ -20,6 +20,12 @@ function decryptToken(encryptedToken: string) {
 export function useAdminAuth(showModal: boolean) {
   const [isAdminLoggedIn, setAdminLoggedIn] = useState(false);
 
+  function logoutAdmin() {
+    sessionStorage.removeItem("token");
+    localStorage.setItem("isAdminLoggedIn", "false");
+    setAdminLoggedIn(false);
+  }
+
   useEffect(() => {
     if (showModal) {
       const token = sessionStorage.getItem("token");
@@ -29,16 +35,15 @@ export function useAdminAuth(showModal: boolean) {
           if (Date.now() < exp) {
             setAdminLoggedIn(true);
           } else {
-            sessionStorage.removeItem("token");
-            setAdminLoggedIn(false);
+            logoutAdmin();
           }
         } catch (error) {
           console.error("Token-Entschlüsselung fehlgeschlagen:", error);
-          setAdminLoggedIn(false);
+          logoutAdmin();
         }
       }
     }
   }, [showModal]);
 
-  return { isAdminLoggedIn, setAdminLoggedIn };
+  return { isAdminLoggedIn, logoutAdmin };
 }