codecraft/web/src/components/settings/Users.tsx

import { useState } from "react";
import { del, patch, post } from "../../api";
import { useFetch } from "../../hooks";
import { fmtDate, useT } from "../../i18n";
import { useStore } from "../../store";
import type { User } from "../../types";
import { confirmDialog, promptDialog, toast } from "../../dialogs";

export function Users() {
  const t = useT();
  const me = useStore((s) => s.me);
  const { data: users, reload } = useFetch<User[]>("/users");
  const [form, setForm] = useState({ username: "", display_name: "", password: "", role: "user" });
  const [notice, setNotice] = useState<{ ok: boolean; text: string }>();

  const run = async (fn: () => Promise<unknown>, ok = t("settings.saved")) => {
    try {
      await fn();
      setNotice({ ok: true, text: ok });
      reload();
    } catch (e: any) {
      setNotice({ ok: false, text: e.message });
    }
  };

  const resetPassword = async (u: User) => {
    const pw = await promptDialog({ message: t("users.newPasswordFor", { name: u.username }), password: true });
    if (pw) void run(() => patch(`/users/${u.id}`, { password: pw }));
  };

  return (
    <>
      <div className="notice">{t("users.intro")}</div>
      {notice && <div className={`notice ${notice.ok ? "ok" : "err"}`}>{notice.text}</div>}
      <div className="panel" style={{ overflowX: "auto" }}>
        <table className="grid">
          <thead>
            <tr>
              <th>{t("users.username")}</th>
              <th>{t("users.displayName")}</th>
              <th>{t("users.role")}</th>
              <th>{t("users.login")}</th>
              <th>{t("users.quota")}</th>
              <th>{t("users.created")}</th>
              <th />
            </tr>
          </thead>
          <tbody>
            {users?.map((u) => (
              <tr key={u.id} style={{ opacity: u.disabled ? 0.5 : 1 }}>
                <td>
                  <code>{u.username}</code>
                  {u.id === me?.id && <span className="chip" style={{ marginLeft: 6 }}>{t("users.you")}</span>}
                </td>
                <td>{u.display_name}</td>
                <td>
                  <select value={u.role} onChange={(e) => run(() => patch(`/users/${u.id}`, { role: e.target.value }))}>
                    <option value="user">{t("users.roleUser")}</option>
                    <option value="admin">{t("users.roleAdmin")}</option>
                  </select>
                </td>
                <td>
                  {u.has_password && <span className="chip">{t("users.password")}</span>} {u.oidc && <span className="chip">SSO</span>}
                </td>
                <td>
                  <button
                    className="small ghost"
                    title={t("users.quotaHint")}
                    onClick={async () => {
                      const v = await promptDialog({ message: t("users.quotaPrompt", { name: u.username }), defaultValue: u.monthly_quota != null ? String(u.monthly_quota) : "" });
                      if (v === null) return;
                      void run(() => patch(`/users/${u.id}`, { monthly_quota: v.trim() === "" ? -1 : Number(v.replace(",", ".")) }));
                    }}
                  >
                    {u.monthly_quota != null ? u.monthly_quota : "∞"}
                  </button>
                </td>
                <td>{fmtDate(u.created_at, false)}</td>
                <td>
                  <div className="row" style={{ flexWrap: "nowrap" }}>
                    <button className="small" onClick={() => resetPassword(u)}>
                      {t("users.setPassword")}
                    </button>
                    <button className="small" onClick={() => run(() => patch(`/users/${u.id}`, { disabled: !u.disabled }))}>
                      {u.disabled ? t("users.enable") : t("users.disable")}
                    </button>
                    {u.id !== me?.id && (
                      <button className="small danger" onClick={() => void confirmDialog({ message: t("users.deleteConfirm", { name: u.username }), danger: true, confirmLabel: t("common.delete") }).then((ok): unknown => ok && run(() => del(`/users/${u.id}`)))}>
                        {t("common.delete")}
                      </button>
                    )}
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="panel">
        <h3>{t("users.add")}</h3>
        <div className="form">
          <label>{t("users.username")}</label>
          <input value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} autoCapitalize="none" />
          <div className="hint">{t("users.usernameHint")}</div>
          <label>{t("users.displayName")}</label>
          <input value={form.display_name} onChange={(e) => setForm({ ...form, display_name: e.target.value })} />
          <label>{t("users.password")}</label>
          <input type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} autoComplete="new-password" />
          <div className="hint">{t("users.passwordHint")}</div>
          <label>{t("users.role")}</label>
          <select value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })}>
            <option value="user">{t("users.roleUser")}</option>
            <option value="admin">{t("users.roleAdmin")}</option>
          </select>
        </div>
        <button
          className="primary"
          style={{ marginTop: 12 }}
          disabled={!form.username.trim()}
          onClick={() =>
            run(async () => {
              await post("/users", { ...form, password: form.password || undefined });
              setForm({ username: "", display_name: "", password: "", role: "user" });
            })
          }
        >
          + {t("common.add")}
        </button>
      </div>
    </>
  );
}