feat: Benutzerverwaltung als neuen Reiter in Einstellungen-Seite integriert

2025-04-28 15:47:28 +02:00
parent 0efaedb059
commit 79a535feae
4 changed files with 184 additions and 1 deletions
--- a/components/main/settingsPageComponents/UserManagementSettings.tsx
+++ b/components/main/settingsPageComponents/UserManagementSettings.tsx
@@ -0,0 +1,92 @@
+"use client";
+// /components/main/settingsPageComponents/UserManagementSettings.tsx
+import React, { useState } from "react";
+import { useDispatch } from "react-redux";
+import { AppDispatch } from "../../../redux/store";
+import { useAdminAuth } from "./hooks/useAdminAuth";
+import handleAdminLogin from "./handlers/handleAdminLogin";
+
+const UserManagementSettings: React.FC = () => {
+  const dispatch = useDispatch<AppDispatch>();
+  const { isAdminLoggedIn, logoutAdmin } = useAdminAuth(true);
+
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [loginSuccess, setLoginSuccess] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleLogin = async () => {
+    handleAdminLogin(
+      username,
+      password,
+      () => {
+        setLoginSuccess(true);
+        setError("");
+      },
+      (errorMsg) => {
+        setLoginSuccess(false);
+        setError(errorMsg);
+      },
+      dispatch
+    );
+  };
+
+  return (
+    <div className="p-6 md:p-3 bg-gray-100 max-w-5xl mr-auto">
+      <h2 className="text-sm md:text-md font-bold mb-4">
+        Benutzerverwaltung (nur Login)
+      </h2>
+
+      {/* Admin Login/Logout */}
+      <div className="flex flex-col gap-1">
+        {isAdminLoggedIn ? (
+          <button
+            type="button"
+            className="bg-littwin-blue text-white px-4 py-2 h-8 text-xs rounded whitespace-nowrap"
+            onClick={logoutAdmin}
+          >
+            Admin abmelden
+          </button>
+        ) : (
+          <>
+            <div className="flex flex-row gap-3">
+              <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-4 py-2 h-8 text-xs rounded whitespace-nowrap"
+                onClick={handleLogin}
+              >
+                Admin anmelden
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+
+      {loginSuccess && (
+        <p className="text-green-600 text-xs mt-2">Login erfolgreich!</p>
+      )}
+      {error && <p className="text-red-500 text-xs mt-2">{error}</p>}
+
+      {/* 
+        // Benutzerverwaltungstabelle (kommt später)
+        <table>...</table>
+      */}
+    </div>
+  );
+};
+
+export default UserManagementSettings;