@simple-auth-kit/cli 1.0.0

package/registry/admin-apps/react/variants/base/src/pages/LanguagesPage.tsx

@@ -0,0 +1,346 @@
+import { useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+import { type ColumnDef, type PaginationState, type SortingState, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { useDebounce } from "use-debounce";
+import { format } from "date-fns";
+import { ChevronDownIcon, EyeIcon, PencilIcon, PlusIcon, PowerIcon, Trash2Icon } from "lucide-react";
+import { AuthApiError, type LanguageSummary } from "@simple-auth-kit/auth-client";
+import { toast } from "sonner";
+import { PERMISSIONS, useAbility } from "@/lib/ability";
+import { authClient } from "@/lib/auth-client";
+import { cn } from "@/lib/cn";
+import { AlertModal } from "@/components/alert-modal";
+import { Breadcrumb } from "@/components/breadcrumb";
+import { TableSkeletonLoader } from "@/components/loader/table-skeleton-loader";
+import { Badge } from "@/components/ui/badge";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { DataTable } from "@/components/ui/data-table";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+function apiErrorMessage(err: unknown, fallback: string): string {
+  return err instanceof AuthApiError ? err.message : fallback;
+}
+
+export function LanguagesPage() {
+  const ability = useAbility();
+  const canManage = ability.can(PERMISSIONS.languagesManage, "permission");
+  const canStatus = ability.can(PERMISSIONS.languagesStatus, "permission");
+
+  const [search, setSearch] = useState("");
+  const [searchKey] = useDebounce(search, 500);
+  const [status, setStatus] = useState<"" | "active" | "inactive">("");
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [pagination, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: 20 });
+
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [pendingLanguage, setPendingLanguage] = useState<LanguageSummary | null>(null);
+  const [pendingAction, setPendingAction] = useState<"status" | "delete" | null>(null);
+  const [pendingBusy, setPendingBusy] = useState(false);
+
+  const { data, isLoading, isError, error, refetch } = useQuery({
+    queryKey: ["languages-list", pagination.pageIndex, pagination.pageSize, searchKey, status],
+    queryFn: () =>
+      authClient.listLanguages({
+        search: searchKey || undefined,
+        page: pagination.pageIndex + 1,
+        limit: pagination.pageSize,
+        // The backend filter is `activeOnly` — one-directional — so "Active" filters server-side
+        // (correct totals) while "Inactive" has to filter the fetched page below.
+        activeOnly: status === "active" ? true : undefined,
+      }),
+    placeholderData: keepPreviousData,
+  });
+
+  const total = data?.meta.total ?? 0;
+  const pageCount = data?.meta.pageCount ?? 0;
+
+  const languages = useMemo(() => {
+    let items = data?.items ?? [];
+    if (status === "inactive") items = items.filter((l) => !l.isActive);
+    return items;
+  }, [data, status]);
+
+  function clearFilters() {
+    setSearch("");
+    setStatus("");
+    setPagination((p) => ({ ...p, pageIndex: 0 }));
+  }
+
+  function openStatusConfirm(language: LanguageSummary) {
+    setPendingLanguage(language);
+    setPendingAction("status");
+    setConfirmOpen(true);
+  }
+
+  function openDeleteConfirm(language: LanguageSummary) {
+    setPendingLanguage(language);
+    setPendingAction("delete");
+    setConfirmOpen(true);
+  }
+
+  async function confirmPendingAction() {
+    if (!pendingLanguage || !pendingAction) return;
+    setPendingBusy(true);
+    try {
+      if (pendingAction === "status") {
+        if (pendingLanguage.isActive) await authClient.deactivateLanguage(pendingLanguage.id);
+        else await authClient.activateLanguage(pendingLanguage.id);
+        toast.success(pendingLanguage.isActive ? "Language deactivated." : "Language activated.");
+      } else {
+        await authClient.deleteLanguage(pendingLanguage.id);
+        toast.success("Language deleted.");
+      }
+      setConfirmOpen(false);
+      setPendingLanguage(null);
+      setPendingAction(null);
+      await refetch();
+    } catch (err) {
+      toast.error(apiErrorMessage(err, "That action failed. Try again."));
+    } finally {
+      setPendingBusy(false);
+    }
+  }
+
+  const columns = useMemo<ColumnDef<LanguageSummary>[]>(
+    () => [
+      {
+        id: "name",
+        header: "Name",
+        accessorFn: (language) => language.name,
+        cell: ({ row }) => (
+          <div className="flex items-center gap-2">
+            <Link to={`/languages/${row.original.id}`} className="font-medium hover:underline">
+              {row.original.name}
+            </Link>
+            {row.original.isDefault && <Badge variant="secondary">Default</Badge>}
+          </div>
+        ),
+      },
+      {
+        id: "nativeName",
+        header: "Native name",
+        accessorFn: (language) => language.nativeName,
+        cell: ({ row }) => <span className="text-sm">{row.original.nativeName}</span>,
+      },
+      {
+        id: "code",
+        header: "Code",
+        accessorFn: (language) => language.code,
+        cell: ({ row }) => <Badge variant="outline">{row.original.code}</Badge>,
+      },
+      {
+        id: "direction",
+        header: "Direction",
+        accessorFn: (language) => language.direction,
+        cell: ({ row }) => <Badge variant={row.original.direction === "rtl" ? "secondary" : "outline"}>{row.original.direction.toUpperCase()}</Badge>,
+      },
+      {
+        id: "status",
+        header: "Status",
+        accessorFn: (language) => (language.isActive ? "Active" : "Inactive"),
+        cell: ({ row }) => {
+          const language = row.original;
+          return (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button type="button" disabled={!canStatus} className="disabled:cursor-not-allowed disabled:opacity-60" onClick={() => openStatusConfirm(language)}>
+                  <Badge variant={language.isActive ? "success" : "destructive"}>{language.isActive ? "Active" : "Inactive"}</Badge>
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {canStatus
+                  ? language.isActive
+                    ? "Deactivate this language"
+                    : "Activate this language"
+                  : `You need the "${PERMISSIONS.languagesStatus}" permission to do this.`}
+              </TooltipContent>
+            </Tooltip>
+          );
+        },
+      },
+      {
+        id: "created",
+        header: "Created",
+        accessorFn: (language) => language.createdAt,
+        cell: ({ row }) => <span className="text-xs text-muted-foreground">{format(new Date(row.original.createdAt), "dd MMM yyyy")}</span>,
+      },
+      {
+        id: "actions",
+        header: "Actions",
+        enableSorting: false,
+        cell: ({ row }) => {
+          const language = row.original;
+          return (
+            <div className="flex justify-end items-center gap-1.5">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Link to={`/languages/${language.id}`} className={cn(buttonVariants({ variant: "outline", size: "icon" }))}>
+                    <EyeIcon />
+                  </Link>
+                </TooltipTrigger>
+                <TooltipContent>View details</TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Link
+                    to={`/languages/${language.id}/edit`}
+                    aria-disabled={!canManage}
+                    className={cn(buttonVariants({ variant: "outline", size: "icon" }), !canManage && "pointer-events-none opacity-50")}
+                  >
+                    <PencilIcon />
+                  </Link>
+                </TooltipTrigger>
+                <TooltipContent>{canManage ? "Edit language" : `You need the "${PERMISSIONS.languagesManage}" permission to do this.`}</TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button size="icon" variant="outline" disabled={!canStatus} onClick={() => openStatusConfirm(language)}>
+                    <PowerIcon />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {canStatus
+                    ? language.isActive
+                      ? "Deactivate this language"
+                      : "Activate this language"
+                    : `You need the "${PERMISSIONS.languagesStatus}" permission to do this.`}
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button size="icon" variant="outline" disabled={!canManage} onClick={() => openDeleteConfirm(language)}>
+                    <Trash2Icon />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>{canManage ? "Delete language" : `You need the "${PERMISSIONS.languagesManage}" permission to do this.`}</TooltipContent>
+              </Tooltip>
+            </div>
+          );
+        },
+      },
+    ],
+    [canManage, canStatus],
+  );
+
+  const table = useReactTable({
+    data: languages,
+    columns,
+    pageCount: pageCount || -1,
+    state: { sorting, pagination },
+    onSortingChange: setSorting,
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    manualPagination: true,
+    manualFiltering: true,
+  });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Breadcrumb items={[{ title: "Languages", href: "/languages" }]} />
+
+      <AlertModal
+        isOpen={confirmOpen}
+        onClose={() => setConfirmOpen(false)}
+        onConfirm={confirmPendingAction}
+        loading={pendingBusy}
+        description={
+          pendingAction === "status"
+            ? pendingLanguage?.isActive
+              ? "This deactivates the language — it stops appearing in active listings and pickers until reactivated."
+              : "This reactivates the language, immediately."
+            : "This soft-deletes the language: it stops appearing in listings, but the row is kept for audit purposes."
+        }
+      />
+
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between">
+          <CardTitle>Languages</CardTitle>
+          {canManage ? (
+            <Link to="/languages/new" className={cn(buttonVariants({ size: "sm" }))}>
+              <PlusIcon />
+              Add language
+            </Link>
+          ) : null}
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          {isError ? <p className="text-sm text-destructive">{apiErrorMessage(error, "Couldn't load languages. Try again.")}</p> : null}
+
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <Input
+              placeholder="Search languages…"
+              value={search}
+              onChange={(e) => {
+                setSearch(e.target.value);
+                setPagination((p) => ({ ...p, pageIndex: 0 }));
+              }}
+            />
+            <Select value={status || "all"} onValueChange={(value) => setStatus(value === "all" ? "" : (value as "active" | "inactive"))}>
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All statuses</SelectItem>
+                <SelectItem value="active">Active</SelectItem>
+                <SelectItem value="inactive">Inactive</SelectItem>
+              </SelectContent>
+            </Select>
+            <Button variant="outline" disabled={!search && !status} onClick={clearFilters}>
+              Clear
+            </Button>
+          </div>
+
+          <div className="flex flex-col items-start justify-between gap-2 sm:flex-row sm:items-center">
+            <p className="text-sm text-muted-foreground">
+              Showing {languages.length} of {total} results
+            </p>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm">
+                  Columns <ChevronDownIcon className="ml-1 size-3.5" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {table
+                  .getAllColumns()
+                  .filter((column) => column.getCanHide())
+                  .map((column) => (
+                    <DropdownMenuCheckboxItem key={column.id} className="capitalize" checked={column.getIsVisible()} onCheckedChange={(value) => column.toggleVisibility(!!value)}>
+                      {column.id}
+                    </DropdownMenuCheckboxItem>
+                  ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+
+          {isLoading ? (
+            <TableSkeletonLoader
+              columns={[
+                { header: "Name", skeletonType: "text", skeletonWidth: "w-32" },
+                { header: "Native name", skeletonType: "text", skeletonWidth: "w-32" },
+                { header: "Code", skeletonType: "badge", skeletonWidth: "w-16" },
+                { header: "Direction", skeletonType: "badge", skeletonWidth: "w-16" },
+                { header: "Status", width: "w-[100px]", skeletonType: "button" },
+                { header: "Created", skeletonType: "text", skeletonWidth: "w-24" },
+                { header: "Actions", width: "w-[160px]", skeletonType: "actions", skeletonCount: 3 },
+              ]}
+              rows={pagination.pageSize > 10 ? 10 : pagination.pageSize}
+            />
+          ) : languages.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+              <p className="text-lg text-muted-foreground">No data found</p>
+              <p className="mt-2 text-sm text-muted-foreground">Try adjusting your search or filters</p>
+            </div>
+          ) : (
+            <DataTable columns={columns} data={languages} total={total} table={table} onPaginationChange={setPagination} />
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/registry/admin-apps/react/variants/base/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 ?? "/dashboard";
+
+  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."}
+          </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/base/src/pages/PermissionDetailPage.tsx

@@ -0,0 +1,135 @@
+import { useCallback, useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import type { PermissionSummary } from "@simple-auth-kit/auth-client";
+import { AuthApiError } from "@simple-auth-kit/auth-client";
+import { PencilIcon } from "lucide-react";
+import { toast } from "sonner";
+import { PERMISSIONS, useAbility } from "@/lib/ability";
+import { authClient } from "@/lib/auth-client";
+import { DefinePermissionDialog } from "@/pages/PermissionsPage";
+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 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 function PermissionDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const ability = useAbility();
+  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 [editing, setEditing] = 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(err instanceof AuthApiError ? err.message : "Couldn't load this permission.");
+    } finally {
+      setLoading(false);
+    }
+  }, [id]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  async function toggleActive() {
+    if (!permission) return;
+    setStatusPending(true);
+    try {
+      await authClient.definePermission({ slug: permission.slug, isActive: !permission.isActive });
+      setPermission((prev) => (prev ? { ...prev, isActive: !prev.isActive } : prev));
+      toast.success(permission.isActive ? "Permission deactivated." : "Permission activated.");
+    } catch (err) {
+      toast.error(err instanceof AuthApiError ? err.message : "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>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={!canDefine}
+                  title={canDefine ? undefined : `You need the "${PERMISSIONS.permissionsDefine}" permission to do this.`}
+                  onClick={() => setEditing(true)}
+                >
+                  <PencilIcon />
+                  Edit
+                </Button>
+              </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>
+        </>
+      )}
+
+      <DefinePermissionDialog
+        state={editing && permission ? { mode: "edit", permission } : null}
+        onClose={() => setEditing(false)}
+        onSaved={(updated) => {
+          setPermission(updated);
+          setEditing(false);
+        }}
+      />
+    </div>
+  );
+}