@data-club/ai-hub 0.0.1

package/src/components/DataClubAIHubAdmin/UsersPage.tsx

@@ -0,0 +1,495 @@
+/**
+ * `<AdminUsersPage />` — the Users sub-page mounted inside
+ * `<DataClubAIHubAdmin />` ([05-admin-users.md]).
+ *
+ * Shows every user in the deployment in `users_table`, with per-row
+ * actions (`[role▼]`, `[reset pw]`, 🗑). Disabled-action conditions per
+ * [05-admin-users.md]:
+ *
+ * - **Admin shield** — an `admin` caller sees the role dropdown / reset /
+ *   delete disabled on every other admin's row and on every super_admin's
+ *   row.
+ * - **Super-admin min-count** — actions on the only super_admin are
+ *   disabled regardless of caller role.
+ * - **Self-protection** — delete is disabled on the caller's own row
+ *   (server enforces too).
+ *
+ * The role dropdown's options are filtered by caller role — `admin` cannot
+ * promote to `super_admin`, so that option is omitted (the option is
+ * client-side filtered to mirror what the server enforces; passing it
+ * anyway would 403).
+ *
+ * Two-phase Create User and Reset Password flows: the Phase-1 dialog
+ * triggers the server call, which on success swaps in
+ * `<PasswordRevealModal />` as Phase 2. The password is held in this
+ * component's state until the admin clicks Done — once dismissed it is
+ * unrecoverable.
+ *
+ * @see SPECIFICATIONS.md §6.3.4 / §8.1 / §8.5
+ * @see ui-sketches/05-admin-users.md
+ */
+import { useEffect, useState, type ReactNode } from "react";
+
+import type { AIHubAdminTexts } from "../../auth/texts.js";
+import type {
+  AdminUserView,
+  AIHubRequestError as AIHubRequestErrorType,
+} from "../../client/AIHubClient.js";
+import { useAIHub } from "../../context/useAIHub.js";
+import { useAIHubAuth } from "../../context/useAIHubAuth.js";
+import type { AIHubRole } from "../../types.js";
+
+import { CreateUserModal } from "./CreateUserModal.js";
+import { PasswordRevealModal } from "./PasswordRevealModal.js";
+import { ResetPasswordModal } from "./ResetPasswordModal.js";
+
+/**
+ * Per-target lifecycle state for the password-reveal Phase 2 modal. The
+ * password lives here (and ONLY here) until the admin dismisses the modal.
+ */
+interface RevealState {
+  variant: "create" | "reset";
+  username: string;
+  password: string;
+}
+
+/** A pending row-level toast / flash. */
+interface RowFlash {
+  userId: string;
+  text: string;
+  tone: "success" | "error";
+}
+
+/**
+ * Returns whether the role-mutation / reset / delete actions are disabled
+ * for `target` when the caller has `callerRole` and `callerId`, accounting
+ * for the §8.1 shield + min-count rules. The boolean drives the disabled
+ * state of the row's controls; the server enforces independently.
+ *
+ * @param callerRole - caller's role.
+ * @param callerId - caller's user id (for self-protection on delete).
+ * @param target - the row being inspected.
+ * @param superAdminCount - count of super_admins in the deployment.
+ * @returns a record of disabled flags + the reason hint to surface.
+ */
+function rowDisabledFlags(
+  callerRole: AIHubRole | null,
+  callerId: string | null,
+  target: AdminUserView,
+  superAdminCount: number,
+): { role: boolean; reset: boolean; delete: boolean; reason: "shield" | "minCount" | null } {
+  // The only-super_admin row: every destructive action is locked.
+  if (target.role === "super_admin" && superAdminCount <= 1) {
+    return { role: true, reset: true, delete: true, reason: "minCount" };
+  }
+  if (callerRole === "admin") {
+    if (target.role === "admin" || target.role === "super_admin") {
+      return { role: true, reset: true, delete: true, reason: "shield" };
+    }
+  }
+  // Self-delete is blocked outright (server enforces too).
+  const isSelf = callerId !== null && callerId === target.id;
+  return { role: false, reset: false, delete: isSelf, reason: null };
+}
+
+/**
+ * Returns the role options visible to the caller.
+ *
+ * - `admin` cannot grant `super_admin` (server enforces, see §6.3.4).
+ * - `super_admin` sees all four roles.
+ */
+function callerRoleOptions(role: AIHubRole | null): AIHubRole[] {
+  if (role === "super_admin") {
+    return ["user", "power_user", "admin", "super_admin"];
+  }
+  return ["user", "power_user", "admin"];
+}
+
+/**
+ * Props for `<AdminUsersPage />`.
+ */
+export interface AdminUsersPageProps {
+  /** Resolved admin texts. */
+  texts: AIHubAdminTexts;
+}
+
+/**
+ * Renders the Users sub-page.
+ *
+ * @param props - see `AdminUsersPageProps`.
+ * @returns the rendered page.
+ */
+export function AdminUsersPage(props: AdminUsersPageProps): ReactNode {
+  const { client } = useAIHub();
+  const auth = useAIHubAuth();
+  const callerRole = auth.role;
+  const callerId = auth.user?.id ?? null;
+
+  const [users, setUsers] = useState<AdminUserView[] | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  const [showCreate, setShowCreate] = useState(false);
+  const [resetTarget, setResetTarget] = useState<AdminUserView | null>(null);
+  const [reveal, setReveal] = useState<RevealState | null>(null);
+  const [flash, setFlash] = useState<RowFlash | null>(null);
+
+  // Tracks rows currently being mutated (role change in flight) so the
+  // dropdown can disable itself while we wait.
+  const [pendingRoleId, setPendingRoleId] = useState<string | null>(null);
+
+  // Initial load.
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const rows = await client.listAdminUsers();
+        if (!cancelled) {
+          setUsers(rows);
+          setLoadError(null);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setLoadError(
+            err instanceof Error && err.message
+              ? err.message
+              : props.texts.usersGenericError,
+          );
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, props.texts.usersGenericError]);
+
+  // Auto-clear the flash after a short window so it doesn't linger.
+  useEffect(() => {
+    if (flash === null) return;
+    const id = setTimeout(() => setFlash(null), 3000);
+    return () => clearTimeout(id);
+  }, [flash]);
+
+  const superAdminCount = (users ?? []).filter(
+    (u) => u.role === "super_admin",
+  ).length;
+  const roleOptions = callerRoleOptions(callerRole);
+
+  function roleLabel(role: AIHubRole): string {
+    if (role === "super_admin") return props.texts.roleOptionSuperAdmin;
+    if (role === "admin") return props.texts.roleOptionAdmin;
+    if (role === "power_user") return props.texts.roleOptionPowerUser;
+    return props.texts.roleOptionUser;
+  }
+
+  async function handleCreate(input: {
+    username: string;
+    displayName: string | null;
+    role: AIHubRole;
+  }): Promise<void> {
+    const result = await client.createAdminUser({
+      username: input.username,
+      displayName: input.displayName,
+      role: input.role,
+    });
+    setUsers((prev) =>
+      prev === null ? [result.user] : sortByUsername([...prev, result.user]),
+    );
+    setShowCreate(false);
+    setReveal({
+      variant: "create",
+      username: result.user.username,
+      password: result.generatedPassword,
+    });
+  }
+
+  async function handleRoleChange(
+    target: AdminUserView,
+    newRole: AIHubRole,
+  ): Promise<void> {
+    if (newRole === target.role) return;
+    setPendingRoleId(target.id);
+    setFlash(null);
+    try {
+      const updated = await client.patchAdminUserRole(target.id, newRole);
+      setUsers((prev) =>
+        prev === null
+          ? null
+          : prev.map((u) => (u.id === updated.id ? updated : u)),
+      );
+      setFlash({
+        userId: target.id,
+        text: props.texts.roleChangeSuccessToast.replace(
+          "{role}",
+          roleLabel(newRole),
+        ),
+        tone: "success",
+      });
+    } catch (err) {
+      const errAsAny = err as AIHubRequestErrorType | Error;
+      const message =
+        errAsAny instanceof Error && errAsAny.message
+          ? errAsAny.message
+          : props.texts.roleChangeForbiddenFallback;
+      setFlash({ userId: target.id, text: message, tone: "error" });
+    } finally {
+      setPendingRoleId(null);
+    }
+  }
+
+  async function handleResetConfirm(target: AdminUserView): Promise<void> {
+    const result = await client.resetAdminUserPassword(target.id);
+    setResetTarget(null);
+    // Re-fetch the row so the ⚠ marker (is_initial_password=true) refreshes.
+    setUsers((prev) =>
+      prev === null
+        ? null
+        : prev.map((u) =>
+            u.id === target.id ? { ...u, is_initial_password: true } : u,
+          ),
+    );
+    setReveal({
+      variant: "reset",
+      username: target.username,
+      password: result.generatedPassword,
+    });
+  }
+
+  async function handleDelete(target: AdminUserView): Promise<void> {
+    const prompt = props.texts.deleteUserConfirmPrompt.replace(
+      "{username}",
+      target.username,
+    );
+    // Native confirm is fine for v1 per [05-admin-users.md].
+    // eslint-disable-next-line no-alert
+    const ok =
+      typeof window !== "undefined" && typeof window.confirm === "function"
+        ? window.confirm(prompt)
+        : true;
+    if (!ok) return;
+    try {
+      await client.deleteAdminUser(target.id);
+      setUsers((prev) =>
+        prev === null ? null : prev.filter((u) => u.id !== target.id),
+      );
+    } catch (err) {
+      const message =
+        err instanceof Error && err.message
+          ? err.message
+          : props.texts.deleteUserGenericError;
+      setFlash({ userId: target.id, text: message, tone: "error" });
+    }
+  }
+
+  return (
+    <div
+      className="data-club-ai-hub-admin__users-page"
+      data-testid="admin-users-page"
+    >
+      <header className="data-club-ai-hub-admin__page-header">
+        <h1
+          className="data-club-ai-hub-admin__page-heading"
+          data-testid="admin-users-heading"
+        >
+          {props.texts.usersHeading}
+        </h1>
+        <button
+          type="button"
+          className="data-club-ai-hub-admin__button data-club-ai-hub-admin__button--primary"
+          data-testid="admin-users-create"
+          onClick={() => setShowCreate(true)}
+        >
+          {props.texts.createUserButton}
+        </button>
+      </header>
+      {loadError !== null ? (
+        <div
+          className="data-club-ai-hub-admin__error"
+          data-testid="admin-users-error"
+          role="alert"
+        >
+          {loadError}
+        </div>
+      ) : null}
+      {users === null && loadError === null ? (
+        <p
+          className="data-club-ai-hub-admin__loading"
+          data-testid="admin-users-loading"
+        >
+          {props.texts.usersLoading}
+        </p>
+      ) : null}
+      {users !== null && users.length === 0 ? (
+        <p
+          className="data-club-ai-hub-admin__empty"
+          data-testid="admin-users-empty"
+        >
+          {props.texts.usersEmpty}
+        </p>
+      ) : null}
+      {users !== null && users.length > 0 ? (
+        <table
+          className="data-club-ai-hub-admin__users-table"
+          data-testid="admin-users-table"
+        >
+          <thead>
+            <tr>
+              <th>{props.texts.userColumnUsername}</th>
+              <th>{props.texts.userColumnDisplay}</th>
+              <th>{props.texts.userColumnRole}</th>
+              <th>{props.texts.userColumnActions}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {users.map((u) => {
+              const flags = rowDisabledFlags(
+                callerRole,
+                callerId,
+                u,
+                superAdminCount,
+              );
+              const reasonText =
+                flags.reason === "shield"
+                  ? props.texts.roleSelectShieldDisabledHint
+                  : flags.reason === "minCount"
+                    ? props.texts.roleSelectMinCountDisabledHint
+                    : "";
+              const flashForRow =
+                flash !== null && flash.userId === u.id ? flash : null;
+              return (
+                <tr
+                  key={u.id}
+                  data-testid={`admin-user-row-${u.id}`}
+                  data-username={u.username}
+                  data-role={u.role}
+                  className={
+                    u.is_initial_password
+                      ? "data-club-ai-hub-admin__users-row data-club-ai-hub-admin__users-row--initial-password"
+                      : "data-club-ai-hub-admin__users-row"
+                  }
+                >
+                  <td>
+                    {u.is_initial_password ? (
+                      <span
+                        className="data-club-ai-hub-admin__initial-password-indicator"
+                        data-testid={`admin-user-row-${u.id}-initial-password`}
+                        title={props.texts.initialPasswordIndicator}
+                        aria-label={props.texts.initialPasswordIndicator}
+                      >
+                        ⚠
+                      </span>
+                    ) : null}{" "}
+                    {u.username}
+                  </td>
+                  <td>{u.display_name ?? "—"}</td>
+                  <td>
+                    {flags.role ? (
+                      <span
+                        className="data-club-ai-hub-admin__role-static"
+                        data-testid={`admin-user-row-${u.id}-role-static`}
+                        title={reasonText}
+                      >
+                        {roleLabel(u.role)}
+                      </span>
+                    ) : (
+                      <select
+                        value={u.role}
+                        onChange={(e) => {
+                          void handleRoleChange(
+                            u,
+                            e.target.value as AIHubRole,
+                          );
+                        }}
+                        disabled={pendingRoleId === u.id}
+                        className="data-club-ai-hub-admin__role-select"
+                        data-testid={`admin-user-row-${u.id}-role-select`}
+                        aria-label={`${props.texts.userColumnRole}: ${u.username}`}
+                      >
+                        {roleOptions.map((r) => (
+                          <option key={r} value={r}>
+                            {roleLabel(r)}
+                          </option>
+                        ))}
+                      </select>
+                    )}
+                  </td>
+                  <td>
+                    <button
+                      type="button"
+                      className="data-club-ai-hub-admin__row-action"
+                      data-testid={`admin-user-row-${u.id}-reset`}
+                      onClick={() => setResetTarget(u)}
+                      disabled={flags.reset}
+                      title={flags.reset ? reasonText : undefined}
+                      aria-label={`${props.texts.resetPasswordButtonLabel}: ${u.username}`}
+                    >
+                      🔑
+                    </button>
+                    <button
+                      type="button"
+                      className="data-club-ai-hub-admin__row-action data-club-ai-hub-admin__row-action--delete"
+                      data-testid={`admin-user-row-${u.id}-delete`}
+                      onClick={() => {
+                        void handleDelete(u);
+                      }}
+                      disabled={flags.delete}
+                      title={flags.delete ? reasonText : undefined}
+                      aria-label={`${props.texts.deleteUserButtonLabel}: ${u.username}`}
+                    >
+                      🗑
+                    </button>
+                    {flashForRow !== null ? (
+                      <span
+                        className={
+                          flashForRow.tone === "success"
+                            ? "data-club-ai-hub-admin__row-flash data-club-ai-hub-admin__row-flash--success"
+                            : "data-club-ai-hub-admin__row-flash data-club-ai-hub-admin__row-flash--error"
+                        }
+                        data-testid={`admin-user-row-${u.id}-flash`}
+                        role={flashForRow.tone === "error" ? "alert" : "status"}
+                        aria-live="polite"
+                      >
+                        {flashForRow.text}
+                      </span>
+                    ) : null}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      ) : null}
+
+      {showCreate ? (
+        <CreateUserModal
+          callerRole={callerRole}
+          texts={props.texts}
+          onSubmit={handleCreate}
+          onCancel={() => setShowCreate(false)}
+        />
+      ) : null}
+
+      {resetTarget !== null ? (
+        <ResetPasswordModal
+          username={resetTarget.username}
+          texts={props.texts}
+          onConfirm={() => handleResetConfirm(resetTarget)}
+          onCancel={() => setResetTarget(null)}
+        />
+      ) : null}
+
+      {reveal !== null ? (
+        <PasswordRevealModal
+          variant={reveal.variant}
+          username={reveal.username}
+          password={reveal.password}
+          texts={props.texts}
+          onClose={() => setReveal(null)}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function sortByUsername(rows: AdminUserView[]): AdminUserView[] {
+  return [...rows].sort((a, b) => a.username.localeCompare(b.username));
+}