@simple-auth-kit/cli 1.0.0

package/registry/admin-apps/nextjs/variants/base/src/app/(console)/users/[id]/edit/page.tsx

@@ -0,0 +1,411 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useAbility } from "@casl/react";
+import { useParams, useRouter } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { format } from "date-fns";
+import { AuthApiError, type RoleSummary, type UpdateUserInput, type UserSummary } from "@simple-auth-kit/auth-client";
+import { toast } from "sonner";
+import { Breadcrumb } from "@/components/breadcrumb";
+import { FormErrorAlert } from "@/components/form-error-alert";
+import { PermissionRequired } from "@/components/permission-required";
+import { PhotoUpload } from "@/components/photo-upload";
+import { RoleMultiSelect } from "@/components/role-multi-select";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Combobox } from "@/components/ui/combobox";
+import { DatePicker } from "@/components/ui/date-picker";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Heading } from "@/components/ui/heading";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { PERMISSIONS, hasPermission, type AppAbility } from "@/lib/ability";
+import { authClient } from "@/lib/auth-client";
+import { errorMessage, errorMessages } from "@/lib/error";
+import { GENDER_OPTIONS, editUserSchema, type EditUserFormValues } from "../../user-schema";
+
+function apiErrorMessage(err: unknown, fallback: string): string {
+  return err instanceof AuthApiError ? err.message : fallback;
+}
+
+function toForm(user: UserSummary): EditUserFormValues {
+  return {
+    firstName: user.firstName ?? "",
+    lastName: user.lastName ?? "",
+    displayName: user.displayName ?? "",
+    phone: user.phone ?? "",
+    username: user.username ?? "",
+    dob: user.dob ? new Date(user.dob) : undefined,
+    gender: user.gender ?? "",
+    joinedDate: user.joinedDate ? new Date(user.joinedDate) : undefined,
+    photo: user.photo,
+    roles: user.roles,
+  };
+}
+
+export default function EditUserPage() {
+  const { id } = useParams<{ id: string }>();
+  const router = useRouter();
+  const ability = useAbility<AppAbility>();
+  const canManage = hasPermission(ability, PERMISSIONS.usersManage);
+  const canReadRoles = hasPermission(ability, PERMISSIONS.rolesManage);
+  const canAssignRoles = hasPermission(ability, PERMISSIONS.rolesAssign);
+
+  const [user, setUser] = useState<UserSummary | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [roleCatalog, setRoleCatalog] = useState<RoleSummary[]>([]);
+  const [formError, setFormError] = useState<string[] | null>(null);
+
+  const form = useForm<EditUserFormValues>({
+    resolver: zodResolver(editUserSchema),
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      displayName: "",
+      phone: "",
+      username: "",
+      dob: undefined,
+      gender: "",
+      joinedDate: undefined,
+      photo: null,
+      roles: [],
+    },
+  });
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const result = await authClient.getUser(id);
+      setUser(result);
+      form.reset(toForm(result));
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "Couldn't load this user."));
+    } finally {
+      setLoading(false);
+    }
+    // `form` is stable across renders (react-hook-form memoizes it), so it's safe to omit here.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
+  useEffect(() => {
+    if (!canManage) return;
+    void load();
+  }, [canManage, load]);
+
+  useEffect(() => {
+    if (!canReadRoles) return;
+    authClient
+      .listRoles()
+      .then(setRoleCatalog)
+      .catch((err) => toast.error(apiErrorMessage(err, "Couldn't load the role catalog.")));
+  }, [canReadRoles]);
+
+  if (!canManage) return <PermissionRequired permission={PERMISSIONS.usersManage} what="Editing a user" />;
+
+  async function onSubmit(values: EditUserFormValues) {
+    if (!user) return;
+    setFormError(null);
+    // `joinedDate` is not nullable on update, so a cleared picker just leaves it unchanged.
+    const input: UpdateUserInput = {
+      firstName: values.firstName || null,
+      lastName: values.lastName || null,
+      displayName: values.displayName || null,
+      phone: values.phone || null,
+      username: values.username || null,
+      dob: values.dob ? format(values.dob, "yyyy-MM-dd") : null,
+      gender: values.gender || null,
+      joinedDate: values.joinedDate ? format(values.joinedDate, "yyyy-MM-dd") : undefined,
+      photo: values.photo || null,
+    };
+    // No bulk "set roles" endpoint — diffs against the roles loaded at mount and assigns/revokes only the delta.
+    const selectedRoles = values.roles ?? [];
+    const toAssign = selectedRoles.filter((slug) => !user.roles.includes(slug));
+    const toRevoke = user.roles.filter((slug) => !selectedRoles.includes(slug));
+    try {
+      await Promise.all([
+        authClient.updateUser(id, input),
+        ...toAssign.map((slug) => authClient.assignRole(id, slug)),
+        ...toRevoke.map((slug) => authClient.revokeRole(id, slug)),
+      ]);
+      toast.success("User updated.");
+      router.push(`/users/${id}`);
+    } catch (err) {
+      setFormError(errorMessages(err));
+      toast.error(errorMessage(err));
+    }
+  }
+
+  const saving = form.formState.isSubmitting;
+
+  return (
+    <div className="flex-1 space-y-4">
+      <Breadcrumb
+        items={[
+          { title: "Users", href: "/users" },
+          { title: user?.email ?? "Details", href: `/users/${id}` },
+          { title: "Edit", href: `/users/${id}/edit` },
+        ]}
+      />
+      <div className="flex items-start justify-between">
+        <Heading title="Edit User" description="Update user details" />
+      </div>
+      <Separator />
+
+      {loading && !user && <p className="text-sm text-muted-foreground">Loading…</p>}
+
+      {user && (
+        <Card>
+          <CardHeader />
+          <CardContent>
+            <FormErrorAlert messages={formError} />
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 w-full">
+                <Card className="w-full">
+                  <CardHeader className="border-b bg-muted/50">
+                    <CardTitle className="text-2xl">User Information</CardTitle>
+                    <CardDescription className="text-base">Update user&apos;s basic information</CardDescription>
+                  </CardHeader>
+                  <CardContent className="pt-6">
+                    <div className="space-y-6">
+                      <div className="space-y-4">
+                        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Personal Information</h3>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                          <FormField
+                            control={form.control}
+                            name="firstName"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>First Name</FormLabel>
+                                <FormControl>
+                                  <Input
+                                    disabled={saving}
+                                    placeholder="First Name"
+                                    {...field}
+                                    type="text"
+                                    className="bg-background border-2 focus:border-purple-500 transition-colors"
+                                  />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                          <FormField
+                            control={form.control}
+                            name="lastName"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>Last Name</FormLabel>
+                                <FormControl>
+                                  <Input
+                                    disabled={saving}
+                                    placeholder="Last Name"
+                                    {...field}
+                                    type="text"
+                                    className="bg-background border-2 focus:border-purple-500 transition-colors"
+                                  />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                          <FormField
+                            control={form.control}
+                            name="displayName"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>Display Name</FormLabel>
+                                <FormControl>
+                                  <Input
+                                    disabled={saving}
+                                    placeholder="Display Name"
+                                    {...field}
+                                    type="text"
+                                    className="bg-background border-2 focus:border-purple-500 transition-colors"
+                                  />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                          <FormField
+                            control={form.control}
+                            name="username"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>
+                                  Username &nbsp;
+                                  <span className="text-xs text-destructive dark:text-destructive-foreground">(Must be unique)</span>
+                                </FormLabel>
+                                <FormControl>
+                                  <Input
+                                    disabled={saving}
+                                    placeholder="Username"
+                                    {...field}
+                                    className="bg-background border-2 focus:border-purple-500 transition-colors"
+                                  />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                        </div>
+                      </div>
+
+                      <div className="space-y-4">
+                        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Contact Information</h3>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                          <FormField
+                            control={form.control}
+                            name="phone"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>
+                                  Phone &nbsp;
+                                  <span className="text-xs text-muted-foreground">(With country code)</span>
+                                </FormLabel>
+                                <FormControl>
+                                  <Input
+                                    type="text"
+                                    disabled={saving}
+                                    {...field}
+                                    placeholder="+1234567890"
+                                    className="bg-background border-2 focus:border-purple-500 transition-colors"
+                                  />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                        </div>
+                      </div>
+
+                      <div className="space-y-4">
+                        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Additional Details</h3>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                          <FormField
+                            control={form.control}
+                            name="joinedDate"
+                            render={({ field }) => (
+                              <FormItem className="flex flex-col p-2">
+                                <FormLabel>Joined Date</FormLabel>
+                                <DatePicker
+                                  placeholder="Joined Date"
+                                  onChange={field.onChange}
+                                  value={field.value}
+                                  displayFormat="dd-MM-yyyy"
+                                />
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                          <FormField
+                            control={form.control}
+                            name="dob"
+                            render={({ field }) => (
+                              <FormItem className="flex flex-col p-2">
+                                <FormLabel>Date of birth</FormLabel>
+                                <DatePicker
+                                  placeholder="Date of birth"
+                                  onChange={field.onChange}
+                                  value={field.value}
+                                  displayFormat="dd-MM-yyyy"
+                                />
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                          <FormField
+                            control={form.control}
+                            name="gender"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>Gender</FormLabel>
+                                <FormControl>
+                                  <div>
+                                    <Combobox
+                                      options={GENDER_OPTIONS}
+                                      selected={field.value ?? ""}
+                                      placeholder="Select Gender"
+                                      onChange={(option) => field.onChange(option.value)}
+                                      showCreate={false}
+                                      popoverClassName="min-w-[200px]"
+                                    />
+                                  </div>
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                        </div>
+                      </div>
+
+                      {canReadRoles && (
+                        <div className="space-y-4">
+                          <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Roles</h3>
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <FormField
+                              control={form.control}
+                              name="roles"
+                              render={({ field }) => (
+                                <FormItem>
+                                  <FormLabel>Roles</FormLabel>
+                                  <FormControl>
+                                    <div>
+                                      <RoleMultiSelect
+                                        roles={roleCatalog}
+                                        selected={field.value ?? []}
+                                        onChange={field.onChange}
+                                        disabled={!canAssignRoles}
+                                      />
+                                    </div>
+                                  </FormControl>
+                                  <FormMessage />
+                                </FormItem>
+                              )}
+                            />
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </CardContent>
+
+                  <CardHeader className="border-b bg-muted/50 mt-6">
+                    <CardTitle className="text-2xl">Profile Photo</CardTitle>
+                    <CardDescription className="text-base">Upload user&apos;s profile picture (Max size: 2MB, Formats: JPG, PNG)</CardDescription>
+                  </CardHeader>
+                  <CardContent className="pt-6">
+                    <FormField
+                      control={form.control}
+                      name="photo"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <div>
+                              <PhotoUpload photo={field.value} fallback="?" onChange={field.onChange} disabled={saving} />
+                            </div>
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </CardContent>
+
+                  <CardFooter className="flex justify-center gap-4 mt-8 pb-8">
+                    <Button type="button" variant="outline" onClick={() => router.push(`/users/${id}`)} disabled={saving}>
+                      Cancel
+                    </Button>
+                    <Button disabled={saving} className="bg-purple-600 hover:bg-purple-700 dark:bg-purple-600 dark:hover:bg-purple-700 min-w-32" type="submit">
+                      {saving ? "Updating..." : "Update User"}
+                    </Button>
+                  </CardFooter>
+                </Card>
+              </form>
+            </Form>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

package/registry/admin-apps/nextjs/variants/base/src/app/(console)/users/[id]/page.tsx

@@ -0,0 +1,253 @@
+"use client";
+
+import { useAbility } from "@casl/react";
+import { observer } from "mobx-react-lite";
+import Link from "next/link";
+import { useParams, useRouter } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
+import { AuthApiError, type UserSummary } from "@simple-auth-kit/auth-client";
+import { PencilIcon } from "lucide-react";
+import { toast } from "sonner";
+import { Breadcrumb } from "@/components/breadcrumb";
+import { PermissionRequired } from "@/components/permission-required";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { PERMISSIONS, hasPermission, missingPermissionHint, type AppAbility } from "@/lib/ability";
+import { authClient } from "@/lib/auth-client";
+import { useAuthStore } from "@/lib/stores/store-context";
+
+function apiErrorMessage(err: unknown, fallback: string): string {
+  return err instanceof AuthApiError ? err.message : fallback;
+}
+
+function initialsOf(user: UserSummary): string {
+  const from = user.displayName || user.email;
+  return (
+    from
+      .split(/[@.\s]+/)
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((part) => part[0]?.toUpperCase())
+      .join("") || "?"
+  );
+}
+
+function field(label: string, value: string | 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>
+  );
+}
+
+const UserDetailPage = observer(function UserDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const router = useRouter();
+  const ability = useAbility<AppAbility>();
+  const authStore = useAuthStore();
+  const canRead = hasPermission(ability, PERMISSIONS.usersRead);
+  const canManage = hasPermission(ability, PERMISSIONS.usersManage);
+  const canBlock = hasPermission(ability, PERMISSIONS.usersBlock);
+
+  const [user, setUser] = useState<UserSummary | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const result = await authClient.getUser(id);
+      setUser(result);
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "Couldn't load this user."));
+    } finally {
+      setLoading(false);
+    }
+  }, [id]);
+
+  useEffect(() => {
+    if (!canRead) return;
+    void load();
+  }, [canRead, load]);
+
+  if (!canRead) return <PermissionRequired permission={PERMISSIONS.usersRead} what="User details" />;
+
+  const isSelf = authStore.currentUser?.sub === id;
+
+  async function toggleBlock() {
+    if (!user) return;
+    try {
+      if (user.blocked) await authClient.unblockUser(id);
+      else await authClient.blockUser(id);
+      setUser((prev) => (prev ? { ...prev, blocked: !prev.blocked } : prev));
+      toast.success(user.blocked ? "User unblocked." : "User blocked.");
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "Couldn't change this user's status. Try again."));
+    }
+  }
+
+  async function toggleActive() {
+    if (!user) return;
+    try {
+      if (user.isActive) await authClient.deactivateUser(id);
+      else await authClient.activateUser(id);
+      setUser((prev) => (prev ? { ...prev, isActive: !prev.isActive } : prev));
+      toast.success(user.isActive ? "User deactivated." : "User activated.");
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "Couldn't change this user's status. Try again."));
+    }
+  }
+
+  async function handleDelete() {
+    setDeleting(true);
+    try {
+      await authClient.deleteUser(id);
+      toast.success("Account deleted.");
+      router.push("/users");
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "Couldn't delete this account. Try again."));
+      setDeleting(false);
+      setDeleteOpen(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Breadcrumb items={[{ title: "Users", href: "/users" }, { title: user?.email ?? "Details", href: `/users/${id}` }]} />
+
+      {loading && !user && <p className="text-sm text-muted-foreground">Loading…</p>}
+
+      {user && (
+        <>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between">
+              <div>
+                <CardTitle>{user.email}</CardTitle>
+                <CardDescription>
+                  Last login: {user.lastLogin ? new Date(user.lastLogin).toLocaleString() : "Never"} · Created:{" "}
+                  {new Date(user.createdAt).toLocaleDateString()} · Updated: {new Date(user.updatedAt).toLocaleDateString()}
+                </CardDescription>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <Badge variant={user.isActive ? "success" : "destructive"}>{user.isActive ? "Active" : "Inactive"}</Badge>
+                {user.blocked && <Badge variant="destructive">Blocked</Badge>}
+                <Link
+                  href={`/users/${id}/edit`}
+                  className={buttonVariants({ variant: "outline", size: "sm" })}
+                  title={canManage ? undefined : missingPermissionHint(PERMISSIONS.usersManage)}
+                  aria-disabled={!canManage}
+                  onClick={(e) => !canManage && e.preventDefault()}
+                >
+                  <PencilIcon />
+                  Edit
+                </Link>
+              </div>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-4">
+              <Avatar className="size-16">
+                {user.photo && <AvatarImage src={user.photo} alt="" className="object-cover" />}
+                <AvatarFallback className="text-base">{initialsOf(user)}</AvatarFallback>
+              </Avatar>
+
+              <div className="flex flex-col gap-1.5">
+                <span className="text-xs text-muted-foreground">Roles</span>
+                <div className="flex flex-wrap gap-1">
+                  {user.roles.length === 0 && <span className="text-sm text-muted-foreground">No roles</span>}
+                  {user.roles.map((role) => (
+                    <Badge key={role} variant="outline">
+                      {role}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                {field("First name", user.firstName)}
+                {field("Last name", user.lastName)}
+                {field("Display name", user.displayName)}
+                {field("Username", user.username)}
+                {field("Phone", user.phone)}
+                {field("Two-factor authentication", user.twoFactorEnabled ? "Enabled" : "Disabled")}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Danger zone</CardTitle>
+            </CardHeader>
+            <CardContent className="flex flex-wrap gap-2">
+              <Button
+                variant={user.blocked ? "outline" : "destructive"}
+                disabled={!canBlock}
+                title={canBlock ? undefined : missingPermissionHint(PERMISSIONS.usersBlock)}
+                onClick={() => void toggleBlock()}
+              >
+                {user.blocked ? "Unblock" : "Block"}
+              </Button>
+
+              <Button
+                variant={user.isActive ? "destructive" : "outline"}
+                disabled={!canBlock}
+                title={canBlock ? undefined : missingPermissionHint(PERMISSIONS.usersBlock)}
+                onClick={() => void toggleActive()}
+              >
+                {user.isActive ? "Deactivate" : "Activate"}
+              </Button>
+
+              <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+                <DialogTrigger asChild>
+                  <Button
+                    variant="destructive"
+                    disabled={!canManage || isSelf}
+                    title={
+                      isSelf
+                        ? "You cannot delete your own account."
+                        : canManage
+                          ? undefined
+                          : missingPermissionHint(PERMISSIONS.usersManage)
+                    }
+                  >
+                    Delete account
+                  </Button>
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>Delete {user.email}?</DialogTitle>
+                    <DialogDescription>
+                      This soft-deletes the account: it stops appearing in listings and can no longer sign in, but the row is kept for
+                      audit purposes.
+                    </DialogDescription>
+                  </DialogHeader>
+                  <DialogFooter>
+                    <Button variant="outline" onClick={() => setDeleteOpen(false)} disabled={deleting}>
+                      Cancel
+                    </Button>
+                    <Button variant="destructive" onClick={() => void handleDelete()} disabled={deleting}>
+                      {deleting ? "Deleting…" : "Delete account"}
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </CardContent>
+          </Card>
+        </>
+      )}
+    </div>
+  );
+});
+
+export default UserDetailPage;