@simple-auth-kit/cli 1.0.0

package/registry/admin-apps/react/variants/workspaces/src/pages/PermissionsPage.tsx

@@ -0,0 +1,317 @@
+import { type FormEvent, useCallback, useEffect, useMemo, useState } from "react";
+import type { PermissionSummary } from "@simple-auth-kit/auth-client";
+import { AuthApiError } from "@simple-auth-kit/auth-client";
+import { observer } from "mobx-react-lite";
+import { Link } from "react-router-dom";
+import { EyeIcon, PowerIcon } from "lucide-react";
+import { PERMISSIONS, useAbility } from "@/lib/ability";
+import { authClient } from "@/lib/auth-client";
+import { useWorkspaceStore } from "@/stores/store-context";
+import { AlertModal } from "@/components/alert-modal";
+import { cn } from "@/lib/cn";
+import { Badge } from "@/components/ui/badge";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+
+interface PermissionGroup {
+  group: string;
+  groupOrder: number;
+  items: PermissionSummary[];
+}
+
+export const PermissionsPage = observer(function PermissionsPage() {
+  const ability = useAbility();
+  const workspaceStore = useWorkspaceStore();
+  const activeWorkspaceId = workspaceStore.activeWorkspaceId;
+  const canDefine = ability.can(PERMISSIONS.permissionsDefine, "permission");
+
+  const [permissions, setPermissions] = useState<PermissionSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [editing, setEditing] = useState<PermissionSummary | null>(null);
+  const [creating, setCreating] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [pendingPermission, setPendingPermission] = useState<PermissionSummary | null>(null);
+  const [pendingBusy, setPendingBusy] = useState(false);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      setPermissions(await authClient.listPermissions());
+    } catch (err) {
+      setError(err instanceof AuthApiError ? err.message : "Couldn't load permissions. Check that the backend is running, then try again.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // The catalog itself is global, but on this backend variant every `/auth/admin/*` route — this
+  // one included — sits behind the workspace guard, so a switch has to re-send the header.
+  useEffect(() => {
+    void load();
+  }, [load, activeWorkspaceId]);
+
+  // Grouped by `group` and ordered by `groupOrder`/`order` client-side, the same layout a
+  // permission matrix uses server-side.
+  const groups = useMemo<PermissionGroup[]>(() => {
+    const byGroup = new Map<string, PermissionSummary[]>();
+    for (const permission of permissions) {
+      const list = byGroup.get(permission.group) ?? [];
+      list.push(permission);
+      byGroup.set(permission.group, list);
+    }
+    return Array.from(byGroup.entries())
+      .map(([group, items]) => ({
+        group,
+        groupOrder: items[0]?.groupOrder ?? 0,
+        items: [...items].sort((a, b) => a.order - b.order),
+      }))
+      .sort((a, b) => a.groupOrder - b.groupOrder);
+  }, [permissions]);
+
+  function handleUpserted(permission: PermissionSummary, message: string) {
+    setPermissions((prev) => {
+      const exists = prev.some((p) => p.id === permission.id);
+      return exists ? prev.map((p) => (p.id === permission.id ? permission : p)) : [...prev, permission];
+    });
+    setNotice(message);
+    setEditing(null);
+    setCreating(false);
+  }
+
+  function openStatusConfirm(permission: PermissionSummary) {
+    setPendingPermission(permission);
+    setConfirmOpen(true);
+  }
+
+  async function confirmPendingAction() {
+    if (!pendingPermission) return;
+    setPendingBusy(true);
+    try {
+      const updated = await authClient.definePermission({ slug: pendingPermission.slug, isActive: !pendingPermission.isActive });
+      setPermissions((prev) => prev.map((p) => (p.id === updated.id ? updated : p)));
+      setNotice(pendingPermission.isActive ? "Permission deactivated." : "Permission activated.");
+      setConfirmOpen(false);
+      setPendingPermission(null);
+    } catch (err) {
+      setError(err instanceof AuthApiError ? err.message : "Couldn't change this permission's status. Try again.");
+    } finally {
+      setPendingBusy(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-semibold">Permissions</h1>
+          <p className="text-sm text-muted-foreground">The catalog of capabilities roles and direct grants can carry.</p>
+        </div>
+        {canDefine ? <Button onClick={() => setCreating(true)}>New permission</Button> : null}
+      </div>
+
+      <AlertModal
+        isOpen={confirmOpen}
+        onClose={() => setConfirmOpen(false)}
+        onConfirm={confirmPendingAction}
+        loading={pendingBusy}
+        description={
+          pendingPermission?.isActive
+            ? "This deactivates the permission — every ability that carries it stops granting immediately."
+            : "This reactivates the permission, effective immediately."
+        }
+      />
+
+      <Card>
+        <CardContent className="pt-6">
+          {error ? <p className="mb-4 text-sm text-destructive">{error}</p> : null}
+          {notice ? <p className="mb-4 text-sm text-emerald-600">{notice}</p> : null}
+          {loading ? (
+            <p className="text-sm text-muted-foreground">Loading…</p>
+          ) : permissions.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No permissions defined yet.</p>
+          ) : (
+            <div className="flex flex-col gap-6">
+              {groups.map((group) => (
+                <div key={group.group}>
+                  <h2 className="mb-2 text-sm font-semibold text-muted-foreground">{group.group}</h2>
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Name</TableHead>
+                        <TableHead>Slug</TableHead>
+                        <TableHead>Status</TableHead>
+                        <TableHead className="text-right">Actions</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {group.items.map((permission) => (
+                        <TableRow key={permission.id}>
+                          <TableCell className="font-medium">
+                            {permission.displayName}
+                            {permission.description ? (
+                              <p className="text-xs font-normal text-muted-foreground">{permission.description}</p>
+                            ) : null}
+                          </TableCell>
+                          <TableCell className="text-muted-foreground">{permission.slug}</TableCell>
+                          <TableCell>
+                            <Badge variant={permission.isActive ? "success" : "secondary"}>{permission.isActive ? "Active" : "Inactive"}</Badge>
+                          </TableCell>
+                          <TableCell className="text-right">
+                            <div className="flex justify-end gap-2">
+                              <Link to={`/permissions/${permission.id}`} className={cn(buttonVariants({ size: "sm", variant: "outline" }))}>
+                                <EyeIcon />
+                                View
+                              </Link>
+                              {canDefine ? (
+                                <>
+                                  <Button size="sm" variant="outline" onClick={() => setEditing(permission)}>
+                                    Edit
+                                  </Button>
+                                  <Button size="icon" variant="outline" onClick={() => openStatusConfirm(permission)}>
+                                    <PowerIcon />
+                                  </Button>
+                                </>
+                              ) : null}
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <DefinePermissionDialog
+        open={creating || editing !== null}
+        permission={editing}
+        onClose={() => {
+          setCreating(false);
+          setEditing(null);
+        }}
+        onSaved={handleUpserted}
+      />
+    </div>
+  );
+});
+
+function DefinePermissionDialog({
+  open,
+  permission,
+  onClose,
+  onSaved,
+}: {
+  open: boolean;
+  permission: PermissionSummary | null;
+  onClose: () => void;
+  onSaved: (permission: PermissionSummary, message: string) => void;
+}) {
+  const [slug, setSlug] = useState("");
+  const [displayName, setDisplayName] = useState("");
+  const [description, setDescription] = useState("");
+  const [group, setGroup] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [loadedFor, setLoadedFor] = useState<string | null>(null);
+
+  // Seed once per open — the edit identity is the permission's id, and "create" (no permission)
+  // is its own identity so reopening for a new one doesn't carry over the last row's values.
+  // Mirrors the `loadedFor` guard `SetRolesDialog` uses in `MembersPage`.
+  const openKey = open ? (permission ? permission.id : "create") : null;
+  if (openKey !== null && loadedFor !== openKey) {
+    setLoadedFor(openKey);
+    setSlug(permission?.slug ?? "");
+    setDisplayName(permission?.displayName ?? "");
+    setDescription(permission?.description ?? "");
+    setGroup(permission?.group ?? "");
+    setError(null);
+  }
+
+  function handleClose() {
+    setLoadedFor(null);
+    onClose();
+  }
+
+  async function handleSubmit(event: FormEvent) {
+    event.preventDefault();
+    setSubmitting(true);
+    setError(null);
+    try {
+      const saved = await authClient.definePermission({
+        slug,
+        displayName: displayName.trim() === "" ? undefined : displayName,
+        description: description.trim() === "" ? null : description,
+        group: group.trim() === "" ? undefined : group,
+      });
+      onSaved(saved, `Permission "${saved.slug}" ${permission ? "updated" : "created"}.`);
+    } catch (err) {
+      setError(err instanceof AuthApiError ? err.message : "Couldn't save this permission. Try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => !next && handleClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{permission ? "Edit permission" : "New permission"}</DialogTitle>
+          <DialogDescription>
+            {permission
+              ? "Slug is the stable identifier grants and roles are keyed on — it can't change."
+              : "Upserted on slug: reusing an existing one edits it instead of creating a duplicate."}
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="permission-slug">Slug</Label>
+            <Input
+              id="permission-slug"
+              value={slug}
+              onChange={(e) => setSlug(e.target.value)}
+              placeholder="e.g. reports:export"
+              disabled={permission !== null}
+              required
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="permission-display-name">Display name</Label>
+            <Input
+              id="permission-display-name"
+              value={displayName}
+              onChange={(e) => setDisplayName(e.target.value)}
+              placeholder="Defaults to the slug"
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="permission-group">Group</Label>
+            <Input id="permission-group" value={group} onChange={(e) => setGroup(e.target.value)} placeholder='Defaults to "Custom"' />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="permission-description">Description</Label>
+            <Input id="permission-description" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Optional" />
+          </div>
+          {error ? <p className="text-sm text-destructive">{error}</p> : null}
+          <div className="flex gap-2">
+            <Button type="submit" disabled={submitting}>
+              {submitting ? "Saving…" : permission ? "Save changes" : "Create permission"}
+            </Button>
+            <Button type="button" variant="outline" onClick={handleClose}>
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/registry/admin-apps/react/variants/workspaces/src/pages/RoleDetailPage.tsx

@@ -0,0 +1,207 @@
+import { useCallback, useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { useNavigate, useParams } from "react-router-dom";
+import { AuthApiError, type PermissionSummary, type RoleSummary } from "@simple-auth-kit/auth-client";
+import { toast } from "sonner";
+import { PERMISSIONS, useAbility } from "@/lib/ability";
+import { authClient } from "@/lib/auth-client";
+import { useWorkspaceStore } from "@/stores/store-context";
+import { Breadcrumb } from "@/components/breadcrumb";
+import { PermissionGroupView } from "@/components/permission-group-view";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Modal } from "@/components/ui/modal";
+
+function apiErrorMessage(err: unknown, fallback: string): string {
+  return err instanceof AuthApiError ? err.message : fallback;
+}
+
+export const RoleDetailPage = observer(function RoleDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const ability = useAbility();
+  const workspaceStore = useWorkspaceStore();
+  const activeWorkspaceId = workspaceStore.activeWorkspaceId;
+  const canManage = ability.can(PERMISSIONS.rolesManage, "permission");
+  const canReadPermissions = ability.can(PERMISSIONS.permissionsRead, "permission");
+
+  const [role, setRole] = useState<RoleSummary | null>(null);
+  const [permissionCatalog, setPermissionCatalog] = useState<PermissionSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [statusPending, setStatusPending] = useState(false);
+  const [confirmingDelete, setConfirmingDelete] = useState(false);
+
+  const load = useCallback(async () => {
+    if (!id) return;
+    setLoading(true);
+    try {
+      const roles = await authClient.listRoles();
+      setRole(roles.find((r) => r.id === id) ?? null);
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "Couldn't load this role."));
+    } finally {
+      setLoading(false);
+    }
+  }, [id]);
+
+  // Keyed on the active workspace, same as `RolesPage`: the record below is whatever this
+  // workspace says about the role, so switching has to re-fetch rather than show stale data.
+  useEffect(() => {
+    void load();
+  }, [load, activeWorkspaceId]);
+
+  // The permission catalog backs the read-only checkbox grid below, same picker `RolesPage`
+  // uses for Create/Edit Role — kept per workspace, same as everything else here.
+  useEffect(() => {
+    setPermissionCatalog([]);
+    if (!canReadPermissions) return;
+    authClient
+      .listPermissions()
+      .then(setPermissionCatalog)
+      .catch((err) => toast.error(apiErrorMessage(err, "Couldn't load the permission catalog.")));
+  }, [canReadPermissions, activeWorkspaceId]);
+
+  async function toggleActive() {
+    if (!id || !role) return;
+    setStatusPending(true);
+    try {
+      const updated = await authClient.updateRole(id, { isActive: !role.isActive });
+      setRole({ ...updated, permissions: role.permissions });
+      toast.success(role.isActive ? "Role deactivated." : "Role activated.");
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "Couldn't change this role's status. Try again."));
+    } finally {
+      setStatusPending(false);
+    }
+  }
+
+  if (!id) return null;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Breadcrumb items={[{ title: "Roles", href: "/roles" }, { title: role?.displayName ?? role?.name ?? "Details", href: `/roles/${id}` }]} />
+
+      {loading && !role && <p className="text-sm text-muted-foreground">Loading…</p>}
+
+      {role && (
+        <>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between">
+              <div>
+                <CardTitle className="flex items-center gap-2">
+                  {role.displayName || role.name}
+                  {role.isDefault && <Badge variant="outline">Default</Badge>}
+                </CardTitle>
+                <CardDescription>
+                  <span className="font-mono text-xs">{role.slug}</span>
+                </CardDescription>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <Badge variant={role.isActive ? "success" : "destructive"}>{role.isActive ? "Active" : "Inactive"}</Badge>
+              </div>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-4">
+              <div className="flex flex-col gap-1.5">
+                <span className="text-xs text-muted-foreground">Permissions ({role.permissions.length} attached)</span>
+                {canReadPermissions ? (
+                  <PermissionGroupView permissions={permissionCatalog} selected={role.permissions} />
+                ) : (
+                  <div className="flex flex-wrap gap-1">
+                    {role.permissions.map((slug) => (
+                      <Badge key={slug} variant="outline">
+                        {slug}
+                      </Badge>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Danger zone</CardTitle>
+            </CardHeader>
+            <CardContent className="flex flex-wrap gap-2">
+              <Button
+                variant={role.isActive ? "destructive" : "outline"}
+                disabled={!canManage || statusPending}
+                title={canManage ? undefined : `You need the "${PERMISSIONS.rolesManage}" permission to do this.`}
+                onClick={() => void toggleActive()}
+              >
+                {role.isActive ? "Deactivate" : "Activate"}
+              </Button>
+
+              <Button
+                variant="destructive"
+                disabled={!canManage}
+                title={canManage ? undefined : `You need the "${PERMISSIONS.rolesManage}" permission to do this.`}
+                onClick={() => setConfirmingDelete(true)}
+              >
+                Delete role
+              </Button>
+            </CardContent>
+          </Card>
+        </>
+      )}
+
+      <DeleteRoleDialog
+        open={confirmingDelete}
+        name={role?.displayName ?? role?.name ?? ""}
+        roleId={id}
+        onClose={() => setConfirmingDelete(false)}
+        onDeleted={() => navigate("/roles")}
+      />
+    </div>
+  );
+});
+
+function DeleteRoleDialog({
+  open,
+  name,
+  roleId,
+  onClose,
+  onDeleted,
+}: {
+  open: boolean;
+  name: string;
+  roleId: string;
+  onClose: () => void;
+  onDeleted: () => void;
+}) {
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleDelete() {
+    setSubmitting(true);
+    try {
+      await authClient.deleteRole(roleId);
+      toast.success("Role deleted.");
+      onDeleted();
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "Couldn't delete this role. Try again."));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <Modal
+      isOpen={open}
+      onClose={onClose}
+      title={`Delete ${name || "this role"}?`}
+      description="Soft-delete: existing assignments are left in place rather than cascade-deleted, and the role simply stops being resolved."
+    >
+      <div className="flex flex-col gap-4">
+        <div className="flex gap-2">
+          <Button variant="destructive" disabled={submitting} onClick={() => void handleDelete()}>
+            {submitting ? "Deleting…" : "Delete role"}
+          </Button>
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}