certain/web/src/pages/Users.jsx

import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { api, ApiError } from "../api";
import { useAuth } from "../auth";
import { useConfirm } from "../confirm";
import { useToast } from "../toast";
import Icon from "../components/Icon";
import DataTable from "../components/DataTable";
import PasswordRules from "../components/PasswordRules";
import { DEFAULT_POLICY, meetsPolicy, randomPassword } from "../passwordPolicy";

export default function Users() {
  const { t } = useTranslation();
  const { user: self } = useAuth();
  const confirm = useConfirm();
  const toast = useToast();

  const [users, setUsers] = useState([]);
  const [policy, setPolicy] = useState(DEFAULT_POLICY);
  const [form, setForm] = useState({ username: "", display_name: "", password: "", role: "user" });
  const [fehler, setFehler] = useState(null);
  const [busy, setBusy] = useState(false);

  async function laden() {
    try {
      setUsers(await api.listUsers());
    } catch (err) {
      setFehler(err.message);
    }
  }

  useEffect(() => {
    laden();
    // Die Richtlinie bestimmt, was das erzeugte Temporär-Passwort erfüllen muss.
    api.getPolicy().then(setPolicy).catch(() => {});
  }, []);

  async function anlegen(e) {
    e.preventDefault();
    setFehler(null);
    setBusy(true);
    try {
      await api.createUser({
        username: form.username.trim(),
        display_name: form.display_name.trim() || null,
        password: form.password,
        role: form.role,
      });
      toast(t("users.created"));
      setForm({ username: "", display_name: "", password: "", role: "user" });
      laden();
    } catch (err) {
      setFehler(err instanceof ApiError ? err.message : String(err));
    } finally {
      setBusy(false);
    }
  }

  async function passwortZuruecksetzen(u) {
    const neu = await confirm({
      title: t("users.resetPassword"),
      message: u.username,
      prompt: true,
      defaultValue: randomPassword(policy),
      confirmLabel: t("common.save"),
    });
    if (!neu) return;
    try {
      await api.updateUser(u.id, { password: neu });
      toast(t("settings.saved"));
      laden();
    } catch (err) {
      toast(err.message, "error");
    }
  }

  async function zweiFaktorZuruecksetzen(u) {
    const ok = await confirm({
      title: t("users.resetTwoFactor"),
      message: t("users.resetTwoFactorConfirm", { name: u.username }),
      confirmLabel: t("users.resetTwoFactor"),
      danger: true,
    });
    if (!ok) return;
    try {
      await api.resetUserTwoFactor(u.id);
      toast(t("users.twoFactorReset"));
      laden();
    } catch (err) {
      toast(err.message, "error");
    }
  }

  async function aktivUmschalten(u) {
    try {
      await api.updateUser(u.id, { is_active: !u.is_active });
      laden();
    } catch (err) {
      toast(err.message, "error");
    }
  }

  async function loeschen(u) {
    if (!(await confirm({ title: t("common.delete"), message: t("users.deleteConfirm"), danger: true, confirmLabel: t("common.delete") }))) {
      return;
    }
    try {
      await api.deleteUser(u.id);
      laden();
    } catch (err) {
      toast(err.message, "error");
    }
  }

  const userColumns = useMemo(() => [
    {
      key: "name", header: t("users.username"), grow: true, min: 180,
      filterText: (u) => u.display_name || u.username,
      render: (u) => (
        <span className="ellipsis" style={{ display: "block" }}>
          <strong>{u.display_name || u.username}</strong>
          {u.display_name && <span className="muted small"> · {u.username}</span>}
          {u.id === self?.id && <span className="muted small"> {t("users.you")}</span>}
        </span>
      ),
    },
    {
      key: "role", header: t("users.role"), width: 120,
      filterText: (u) => (u.role === "admin" ? t("common.admin") : t("common.user")),
      render: (u) => <span className="badge">{u.role === "admin" ? t("common.admin") : t("common.user")}</span>,
    },
    {
      key: "status", header: t("users.status"), width: 120,
      filterText: (u) => (u.is_active ? t("users.active") : t("users.inactive")),
      render: (u) => (
        <span className={`badge ${u.is_active ? "ok" : ""}`}>
          {u.is_active ? t("users.active") : t("users.inactive")}
        </span>
      ),
    },
    {
      key: "twofactor", header: t("users.twoFactor"), width: 110,
      filterText: (u) => (u.totp_enabled ? t("twofactor.on") : t("twofactor.off")),
      render: (u) => (
        <span className={`badge ${u.totp_enabled ? "ok" : ""}`}>
          {u.totp_enabled ? t("twofactor.on") : t("twofactor.off")}
        </span>
      ),
    },
    {
      key: "actions", header: t("common.actions"), width: 168, fixed: true,
      render: (u) => (
        <div className="nowrap" style={{ textAlign: "right" }}>
          <button className="btn sm ghost" title={t("users.resetPassword")} onClick={() => passwortZuruecksetzen(u)}>
            <Icon name="key" size={15} />
          </button>
          {u.totp_enabled && (
            <button className="btn sm ghost" title={t("users.resetTwoFactor")} onClick={() => zweiFaktorZuruecksetzen(u)}>
              <Icon name="shield" size={15} />
            </button>
          )}
          {u.id !== self?.id && (
            <>
              <button className="btn sm ghost" title={u.is_active ? t("users.inactive") : t("users.active")} onClick={() => aktivUmschalten(u)}>
                <Icon name={u.is_active ? "eye-off" : "eye"} size={15} />
              </button>
              <button className="btn sm danger" title={t("common.delete")} onClick={() => loeschen(u)}>
                <Icon name="trash" size={15} />
              </button>
            </>
          )}
        </div>
      ),
    },
    // policy muss mit hinein: das erzeugte Vorschlagspasswort richtet sich danach.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  ], [t, self, policy]);

  return (
    <div>
      <h1>{t("users.title")}</h1>

      {fehler && (
        <div className="alert error">
          <Icon name="alert" size={16} />
          <span>{fehler}</span>
        </div>
      )}

      <div className="card" style={{ marginBottom: "var(--sp-4)" }}>
        <h2>{t("users.new")}</h2>
        <form onSubmit={anlegen}>
          <div className="row">
            <label className="grow">
              <span>{t("users.username")}</span>
              <input value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} required />
            </label>
            <label className="grow">
              <span>{t("users.displayName")}</span>
              <input value={form.display_name} onChange={(e) => setForm({ ...form, display_name: e.target.value })} />
            </label>
          </div>
          <div className="row">
            <label className="grow">
              <span>{t("users.password")}</span>
              <div className="input-with-button">
                <input value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} required />
                <button type="button" className="btn sm" title={t("users.generatePassword")}
                        onClick={() => setForm({ ...form, password: randomPassword(policy) })}>
                  <Icon name="refresh-ccw" size={15} />
                </button>
              </div>
              <PasswordRules policy={policy} value={form.password} />
            </label>
            <label style={{ minWidth: 160 }}>
              <span>{t("users.role")}</span>
              <select value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })}>
                <option value="user">{t("common.user")}</option>
                <option value="admin">{t("common.admin")}</option>
              </select>
            </label>
          </div>
          <p className="muted small">{t("users.passwordHint")}</p>
          <button className="btn primary" type="submit"
                  disabled={busy || !meetsPolicy(policy, form.password, t)}>
            {busy ? t("common.loading") : t("common.create")}
          </button>
        </form>
      </div>

      <div className="card">
        <DataTable
          id="users"
          rows={users}
          getRowKey={(u) => u.id}
          empty={t("users.title")}
          columns={userColumns}
        />
      </div>
    </div>
  );
}