Init first files

2026-02-12 09:09:13 +01:00
parent 6535699b0e
commit d1d8ae43a4
61 changed files with 2424 additions and 0 deletions
--- a/frontend/src/pages/AdminUsersPage.jsx
+++ b/frontend/src/pages/AdminUsersPage.jsx
@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from "react";
+import { apiFetch } from "../api";
+import { useAuth } from "../state";
+
+export function AdminUsersPage() {
+  const { tokens, refresh, me } = useAuth();
+  const [users, setUsers] = useState([]);
+  const [form, setForm] = useState({ email: "", password: "", role: "viewer" });
+  const [error, setError] = useState("");
+
+  const load = async () => {
+    setUsers(await apiFetch("/admin/users", {}, tokens, refresh));
+  };
+
+  useEffect(() => {
+    if (me?.role === "admin") load().catch((e) => setError(String(e.message || e)));
+  }, [me]);
+
+  if (me?.role !== "admin") return <div className="card">Nur fuer Admin.</div>;
+
+  const create = async (e) => {
+    e.preventDefault();
+    try {
+      await apiFetch("/admin/users", { method: "POST", body: JSON.stringify(form) }, tokens, refresh);
+      setForm({ email: "", password: "", role: "viewer" });
+      await load();
+    } catch (e) {
+      setError(String(e.message || e));
+    }
+  };
+
+  const remove = async (id) => {
+    try {
+      await apiFetch(`/admin/users/${id}`, { method: "DELETE" }, tokens, refresh);
+      await load();
+    } catch (e) {
+      setError(String(e.message || e));
+    }
+  };
+
+  return (
+    <div>
+      <h2>Admin Users</h2>
+      {error && <div className="card error">{error}</div>}
+      <form className="card grid three" onSubmit={create}>
+        <input value={form.email} placeholder="email" onChange={(e) => setForm({ ...form, email: e.target.value })} />
+        <input
+          type="password"
+          value={form.password}
+          placeholder="passwort"
+          onChange={(e) => setForm({ ...form, password: e.target.value })}
+        />
+        <select value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })}>
+          <option value="viewer">viewer</option>
+          <option value="operator">operator</option>
+          <option value="admin">admin</option>
+        </select>
+        <button>User anlegen</button>
+      </form>
+      <div className="card">
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Email</th>
+              <th>Role</th>
+              <th>Action</th>
+            </tr>
+          </thead>
+          <tbody>
+            {users.map((u) => (
+              <tr key={u.id}>
+                <td>{u.id}</td>
+                <td>{u.email}</td>
+                <td>{u.role}</td>
+                <td>{u.id !== me.id && <button onClick={() => remove(u.id)}>Delete</button>}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}