@simple-auth-kit/cli 1.0.0

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

@@ -0,0 +1,149 @@
+import { type FormEvent, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { type Location, useLocation, useNavigate } from "react-router-dom";
+import { AuthApiError } from "@simple-auth-kit/auth-client";
+import { useAuthStore } from "@/stores/store-context";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+type Mode = "login" | "signup";
+type Step = "credentials" | "two-factor";
+
+export const LoginPage = observer(function LoginPage() {
+  const store = useAuthStore();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const redirectTo = (location.state as { from?: Location } | null)?.from?.pathname ?? "/account";
+
+  const [mode, setMode] = useState<Mode>("login");
+  const [step, setStep] = useState<Step>("credentials");
+  const [identifier, setIdentifier] = useState("");
+  const [password, setPassword] = useState("");
+  const [code, setCode] = useState("");
+  const [challengeToken, setChallengeToken] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleCredentialsSubmit(event: FormEvent) {
+    event.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      if (mode === "signup") {
+        await store.signup({ email: identifier, password });
+        navigate(redirectTo, { replace: true });
+        return;
+      }
+
+      const challenge = await store.login({ identifier, password });
+      if (challenge) {
+        setChallengeToken(challenge.challengeToken);
+        setStep("two-factor");
+      } else {
+        navigate(redirectTo, { replace: true });
+      }
+    } catch (err) {
+      setError(err instanceof AuthApiError ? err.message : "Something went wrong. Please try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  async function handleTwoFactorSubmit(event: FormEvent) {
+    event.preventDefault();
+    if (!challengeToken) return;
+    setError(null);
+    setSubmitting(true);
+    try {
+      await store.loginTwoFactor({ challengeToken, code });
+      navigate(redirectTo, { replace: true });
+    } catch (err) {
+      setError(err instanceof AuthApiError ? err.message : "Invalid code. Please try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-muted/30 px-4">
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <CardTitle>{step === "two-factor" ? "Two-factor verification" : mode === "login" ? "Sign in" : "Create an account"}</CardTitle>
+          <CardDescription>
+            {step === "two-factor"
+              ? "Enter the 6-digit code from your authenticator app, or a backup code."
+              : mode === "login"
+                ? "Use the email, username, or phone number and password for your account on this deployment."
+                : "Pick an email and a password of at least 8 characters. You'll create or join a workspace next."}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {step === "credentials" ? (
+            <form onSubmit={handleCredentialsSubmit} className="flex flex-col gap-4">
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor="identifier">{mode === "login" ? "Email, username, or phone" : "Email"}</Label>
+                <Input
+                  id="identifier"
+                  type={mode === "login" ? "text" : "email"}
+                  value={identifier}
+                  onChange={(e) => setIdentifier(e.target.value)}
+                  required
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor="password">Password</Label>
+                <Input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required minLength={8} />
+              </div>
+              {error ? <p className="text-sm text-destructive">{error}</p> : null}
+              <Button type="submit" disabled={submitting}>
+                {submitting ? "Please wait…" : mode === "login" ? "Sign in" : "Sign up"}
+              </Button>
+              <Button
+                type="button"
+                variant="link"
+                className="self-center"
+                onClick={() => {
+                  setMode(mode === "login" ? "signup" : "login");
+                  setError(null);
+                }}
+              >
+                {mode === "login" ? "Need an account? Sign up" : "Already have an account? Sign in"}
+              </Button>
+            </form>
+          ) : (
+            <form onSubmit={handleTwoFactorSubmit} className="flex flex-col gap-4">
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor="code">Authentication code</Label>
+                <Input
+                  id="code"
+                  value={code}
+                  onChange={(e) => setCode(e.target.value)}
+                  placeholder="123456"
+                  autoFocus
+                  required
+                />
+              </div>
+              {error ? <p className="text-sm text-destructive">{error}</p> : null}
+              <Button type="submit" disabled={submitting}>
+                {submitting ? "Verifying…" : "Verify"}
+              </Button>
+              <Button
+                type="button"
+                variant="link"
+                className="self-center"
+                onClick={() => {
+                  setStep("credentials");
+                  setError(null);
+                }}
+              >
+                Back
+              </Button>
+            </form>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+});

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

@@ -0,0 +1,349 @@
+import { type FormEvent, useCallback, useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import type { WorkspaceMember } from "@simple-auth-kit/auth-client";
+import { AuthApiError } from "@simple-auth-kit/auth-client";
+import { PERMISSIONS, useAbility } from "@/lib/ability";
+import { authClient } from "@/lib/auth-client";
+import { useAuthStore, useWorkspaceStore } from "@/stores/store-context";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } 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";
+
+/** Roles are a list on the wire and a comma-separated string in the form; one pair of helpers, used by both forms. */
+function parseRoles(value: string): string[] {
+  return value
+    .split(",")
+    .map((role) => role.trim())
+    .filter((role) => role.length > 0);
+}
+
+export const MembersPage = observer(function MembersPage() {
+  const ability = useAbility();
+  const workspaceStore = useWorkspaceStore();
+  const authStore = useAuthStore();
+  const canManageMembers = ability.can(PERMISSIONS.membersManage, "permission");
+  const canAssignRoles = ability.can(PERMISSIONS.rolesAssign, "permission");
+
+  const workspaceName = workspaceStore.activeWorkspace?.name ?? "this workspace";
+  const activeWorkspaceId = workspaceStore.activeWorkspaceId;
+  const currentUserId = authStore.currentUser?.sub ?? null;
+
+  const [members, setMembers] = useState<WorkspaceMember[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [editing, setEditing] = useState<WorkspaceMember | null>(null);
+  const [removing, setRemoving] = useState<WorkspaceMember | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      setMembers(await authClient.listWorkspaceMembers());
+    } catch (err) {
+      setError(err instanceof AuthApiError ? err.message : "Couldn't load members. Check that the backend is running, then try again.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Keyed on the active workspace: switching re-runs it, so the table can never show one
+  // workspace's members under another's name.
+  useEffect(() => {
+    void load();
+  }, [load, activeWorkspaceId]);
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div>
+        <h1 className="text-2xl font-semibold">Members</h1>
+        <p className="text-sm text-muted-foreground">Who belongs to {workspaceName}, and what each of them may do here.</p>
+      </div>
+
+      {canManageMembers ? (
+        <AddMemberCard
+          onAdded={(member, message) => {
+            setMembers((prev) => [...prev, member]);
+            setNotice(message);
+          }}
+        />
+      ) : null}
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Members of {workspaceName}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {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>
+          ) : members.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No members yet. Add someone by the email they signed up with.</p>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Email</TableHead>
+                  <TableHead>Roles</TableHead>
+                  <TableHead>Joined</TableHead>
+                  {canManageMembers || canAssignRoles ? <TableHead className="text-right">Actions</TableHead> : null}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {members.map((member) => {
+                  const isYou = member.userId === currentUserId;
+                  return (
+                    <TableRow key={member.memberId}>
+                      <TableCell className="font-medium">
+                        {member.email}
+                        {isYou ? <span className="ml-2 text-xs font-normal text-muted-foreground">you</span> : null}
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex flex-wrap gap-1">
+                          {member.roles.length === 0 ? (
+                            <span className="text-muted-foreground">—</span>
+                          ) : (
+                            member.roles.map((role) => (
+                              <Badge key={role} variant="secondary">
+                                {role}
+                              </Badge>
+                            ))
+                          )}
+                        </div>
+                      </TableCell>
+                      <TableCell className="text-muted-foreground">{new Date(member.createdAt).toLocaleDateString()}</TableCell>
+                      {canManageMembers || canAssignRoles ? (
+                        <TableCell className="text-right">
+                          <div className="flex justify-end gap-2">
+                            {/* The backend refuses both actions against your own membership — an
+                                administrator who demoted or removed themselves would leave the
+                                workspace with no way back in — so they aren't offered. */}
+                            {canAssignRoles && !isYou ? (
+                              <Button size="sm" variant="outline" onClick={() => setEditing(member)}>
+                                Set roles
+                              </Button>
+                            ) : null}
+                            {canManageMembers && !isYou ? (
+                              <Button size="sm" variant="destructive" onClick={() => setRemoving(member)}>
+                                Remove member
+                              </Button>
+                            ) : null}
+                          </div>
+                        </TableCell>
+                      ) : null}
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      <SetRolesDialog
+        member={editing}
+        onClose={() => setEditing(null)}
+        onSaved={(memberId, roles, message) => {
+          setMembers((prev) => prev.map((m) => (m.memberId === memberId ? { ...m, roles } : m)));
+          setNotice(message);
+          setEditing(null);
+          // Your own roles in this workspace can change as a side effect of nothing here, but the
+          // workspace list carries them, so keep it honest.
+          void workspaceStore.reload();
+        }}
+      />
+
+      <RemoveMemberDialog
+        member={removing}
+        onClose={() => setRemoving(null)}
+        onRemoved={(memberId, message) => {
+          setMembers((prev) => prev.filter((m) => m.memberId !== memberId));
+          setNotice(message);
+          setRemoving(null);
+        }}
+      />
+    </div>
+  );
+});
+
+function AddMemberCard({ onAdded }: { onAdded: (member: WorkspaceMember, message: string) => void }) {
+  const [email, setEmail] = useState("");
+  const [roles, setRoles] = useState("member");
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleSubmit(event: FormEvent) {
+    event.preventDefault();
+    setSubmitting(true);
+    setError(null);
+    try {
+      const member = await authClient.addWorkspaceMember({ email, roles: parseRoles(roles) });
+      onAdded(member, `${member.email} added to the workspace.`);
+      setEmail("");
+      setRoles("member");
+    } catch (err) {
+      setError(
+        err instanceof AuthApiError
+          ? err.status === 404
+            ? "No account uses that email. They need to sign up first — this adds an existing account, it doesn't send an invitation."
+            : err.message
+          : "Couldn't add the member. Try again.",
+      );
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base">Add member</CardTitle>
+        <CardDescription>Adds an account that already exists on this deployment. There's no email invitation.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="flex flex-wrap items-end gap-3">
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="member-email">Email</Label>
+            <Input id="member-email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} className="w-64" required />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="member-roles">Roles</Label>
+            <Input id="member-roles" value={roles} onChange={(e) => setRoles(e.target.value)} placeholder="member" className="w-64" />
+          </div>
+          <Button type="submit" disabled={submitting}>
+            {submitting ? "Adding…" : "Add member"}
+          </Button>
+          {error ? <p className="w-full text-sm text-destructive">{error}</p> : null}
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
+
+function SetRolesDialog({
+  member,
+  onClose,
+  onSaved,
+}: {
+  member: WorkspaceMember | null;
+  onClose: () => void;
+  onSaved: (memberId: string, roles: string[], message: string) => void;
+}) {
+  const [value, setValue] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [loadedFor, setLoadedFor] = useState<string | null>(null);
+
+  // Seed the field from the member the dialog was opened for, once per open.
+  if (member && loadedFor !== member.memberId) {
+    setLoadedFor(member.memberId);
+    setValue(member.roles.join(", "));
+    setError(null);
+  }
+
+  async function handleSubmit(event: FormEvent) {
+    event.preventDefault();
+    if (!member) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      const roles = parseRoles(value);
+      const result = await authClient.setWorkspaceMemberRoles(member.memberId, roles);
+      onSaved(member.memberId, result.roles, `Roles for ${member.email} set to ${result.roles.join(", ") || "none"}.`);
+    } catch (err) {
+      setError(err instanceof AuthApiError ? err.message : "Couldn't set roles. Try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  function handleClose() {
+    setLoadedFor(null);
+    onClose();
+  }
+
+  return (
+    <Dialog open={member !== null} onOpenChange={(next) => !next && handleClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Set roles</DialogTitle>
+          <DialogDescription>{member ? `Replaces every role ${member.email} holds in this workspace.` : ""}</DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="set-roles">Roles</Label>
+            <Input id="set-roles" value={value} onChange={(e) => setValue(e.target.value)} placeholder="admin, member" />
+            <p className="text-xs text-muted-foreground">Comma-separated. Leave empty to remove every role — they stay a member with no permissions.</p>
+          </div>
+          {error ? <p className="text-sm text-destructive">{error}</p> : null}
+          <div className="flex gap-2">
+            <Button type="submit" disabled={submitting}>
+              {submitting ? "Saving…" : "Set roles"}
+            </Button>
+            <Button type="button" variant="outline" onClick={handleClose}>
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function RemoveMemberDialog({
+  member,
+  onClose,
+  onRemoved,
+}: {
+  member: WorkspaceMember | null;
+  onClose: () => void;
+  onRemoved: (memberId: string, message: string) => void;
+}) {
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleRemove() {
+    if (!member) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      await authClient.removeWorkspaceMember(member.memberId);
+      onRemoved(member.memberId, `${member.email} removed from the workspace.`);
+    } catch (err) {
+      setError(err instanceof AuthApiError ? err.message : "Couldn't remove the member. Try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <Dialog open={member !== null} onOpenChange={(next) => !next && onClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Remove member</DialogTitle>
+          <DialogDescription>
+            {member
+              ? `${member.email} loses access to this workspace, along with any permission granted to them directly here. Their account and their other workspaces are untouched.`
+              : ""}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-4">
+          {error ? <p className="text-sm text-destructive">{error}</p> : null}
+          <div className="flex gap-2">
+            <Button variant="destructive" disabled={submitting} onClick={handleRemove}>
+              {submitting ? "Removing…" : "Remove member"}
+            </Button>
+            <Button variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,123 @@
+import { useCallback, useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { useParams } from "react-router-dom";
+import { AuthApiError, type PermissionSummary } 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 { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+function apiErrorMessage(err: unknown, fallback: string): string {
+  return err instanceof AuthApiError ? err.message : fallback;
+}
+
+function field(label: string, value: string | number | null) {
+  return (
+    <div className="flex flex-col gap-1">
+      <span className="text-xs text-muted-foreground">{label}</span>
+      <span className="text-sm">{value ?? "—"}</span>
+    </div>
+  );
+}
+
+export const PermissionDetailPage = observer(function PermissionDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const ability = useAbility();
+  const workspaceStore = useWorkspaceStore();
+  const activeWorkspaceId = workspaceStore.activeWorkspaceId;
+  const canDefine = ability.can(PERMISSIONS.permissionsDefine, "permission");
+
+  const [permission, setPermission] = useState<PermissionSummary | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [statusPending, setStatusPending] = useState(false);
+
+  const load = useCallback(async () => {
+    if (!id) return;
+    setLoading(true);
+    try {
+      const permissions = await authClient.listPermissions();
+      setPermission(permissions.find((p) => p.id === id) ?? null);
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "Couldn't load this permission."));
+    } finally {
+      setLoading(false);
+    }
+  }, [id]);
+
+  // Keyed on the active workspace, same as `PermissionsPage`: the catalog itself is global, but
+  // every `/auth/admin/*` route on this variant sits behind the workspace guard, so a switch has
+  // to re-send the header.
+  useEffect(() => {
+    void load();
+  }, [load, activeWorkspaceId]);
+
+  async function toggleActive() {
+    if (!permission) return;
+    setStatusPending(true);
+    try {
+      const updated = await authClient.definePermission({ slug: permission.slug, isActive: !permission.isActive });
+      setPermission(updated);
+      toast.success(permission.isActive ? "Permission deactivated." : "Permission activated.");
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "Couldn't change this permission's status. Try again."));
+    } finally {
+      setStatusPending(false);
+    }
+  }
+
+  if (!id) return null;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Breadcrumb items={[{ title: "Permissions", href: "/permissions" }, { title: permission?.displayName ?? "Details", href: `/permissions/${id}` }]} />
+
+      {loading && !permission && <p className="text-sm text-muted-foreground">Loading…</p>}
+
+      {permission && (
+        <>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between">
+              <div>
+                <CardTitle>{permission.displayName}</CardTitle>
+                <CardDescription>
+                  <span className="font-mono text-xs">{permission.slug}</span>
+                </CardDescription>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <Badge variant={permission.isActive ? "success" : "destructive"}>{permission.isActive ? "Active" : "Inactive"}</Badge>
+              </div>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-4">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                {field("Group", permission.group)}
+                {field("Order", permission.order)}
+                {field("Group order", permission.groupOrder)}
+              </div>
+              {field("Description", permission.description)}
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Danger zone</CardTitle>
+            </CardHeader>
+            <CardContent className="flex flex-wrap gap-2">
+              <Button
+                variant={permission.isActive ? "destructive" : "outline"}
+                disabled={!canDefine || statusPending}
+                title={canDefine ? undefined : `You need the "${PERMISSIONS.permissionsDefine}" permission to do this.`}
+                onClick={() => void toggleActive()}
+              >
+                {permission.isActive ? "Deactivate" : "Activate"}
+              </Button>
+            </CardContent>
+          </Card>
+        </>
+      )}
+    </div>
+  );
+});