🛠 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 (
     <>