@allbluecn/admin-app 0.2.4 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allbluecn/admin-app",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "private": false,
   "license": "AGPL-3.0-or-later",
   "type": "module",
@@ -42,9 +42,9 @@
     "start-authjs": "^1.0.2",
     "tailwind-merge": "^3.5.0",
     "zod": "^4.4.3",
-    "@allbluecn/database": "0.6.0",
-    "@allbluecn/kernel": "0.6.1",
-    "@allbluecn/web-app": "0.11.0"
+    "@allbluecn/database": "0.8.0",
+    "@allbluecn/web-app": "0.11.1",
+    "@allbluecn/kernel": "0.8.0"
   },
   "devDependencies": {
     "@cloudflare/vite-plugin": "^1.40.1",

package/src/components/invitations/invitations-page.tsx

@@ -0,0 +1,527 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useState } from "react"
+import type React from "react"
+import { m } from "@/paraglide/messages.js"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { toast } from "sonner"
+import { Ticket, Plus, Copy, Ban, CheckCircle2, Trash2, Users } from "lucide-react"
+import { PageHeader } from "@/components/common/page-header"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Card, CardContent } from "@/components/ui/card"
+import {
+  listInvitationCodesFn,
+  createInvitationCodeFn,
+  toggleInvitationCodeFn,
+  deleteInvitationCodeFn,
+  getRegistrationModeFn,
+  setRegistrationModeFn,
+} from "@/server/serverFns/invitations"
+import { formatTimestamp } from "@allbluecn/web-app/lib/datetime"
+
+type RegistrationMode = "invite" | "open"
+
+type InvitationUseRow = {
+  userId: string
+  usedAt: Date | string
+  user: { username: string }
+}
+
+type InvitationCodeRow = {
+  id: string
+  code: string
+  maxUses: number
+  usedCount: number
+  expiresAt: Date | string
+  disabledAt: Date | string | null
+  createdAt: Date | string
+  creator: string | null
+  uses: InvitationUseRow[]
+}
+
+type CodeStatus = "disabled" | "expired" | "exhausted" | "active"
+
+function statusOf(row: InvitationCodeRow): CodeStatus {
+  if (row.disabledAt != null) return "disabled"
+  if (new Date(row.expiresAt).getTime() < Date.now()) return "expired"
+  if (row.usedCount >= row.maxUses) return "exhausted"
+  return "active"
+}
+
+function StatusBadge({ status }: { status: CodeStatus }) {
+  const config: Record<CodeStatus, { variant: React.ComponentProps<typeof Badge>["variant"]; label: string; className?: string }> = {
+    active: { variant: "default", label: m["admin-invitations_status_active"]() },
+    exhausted: { variant: "secondary", label: m["admin-invitations_status_exhausted"]() },
+    expired: { variant: "outline", label: m["admin-invitations_status_expired"]() },
+    disabled: { variant: "secondary", label: m["admin-invitations_status_disabled"](), className: "text-muted-foreground" },
+  }
+  const c = config[status]
+  return <Badge variant={c.variant} className={c.className}>{c.label}</Badge>
+}
+
+export function InvitationsPage(): React.ReactElement {
+  const queryClient = useQueryClient()
+  const [pendingDelete, setPendingDelete] = useState<InvitationCodeRow | null>(null)
+  const [usesViewer, setUsesViewer] = useState<InvitationCodeRow | null>(null)
+  const [createOpen, setCreateOpen] = useState(false)
+  const [createForm, setCreateForm] = useState({ code: "", maxUses: 1, validDays: 30 })
+
+  const codesQuery = useQuery({
+    queryKey: ["invitations", "codes"],
+    queryFn: () => listInvitationCodesFn({ data: { page: 1, pageSize: 100 } }),
+  })
+  const modeQuery = useQuery({
+    queryKey: ["invitations", "mode"],
+    queryFn: () => getRegistrationModeFn({ data: {} }),
+  })
+
+  const invalidateCodes = () =>
+    queryClient.invalidateQueries({ queryKey: ["invitations", "codes"] })
+
+  const modeMutation = useMutation({
+    mutationFn: (mode: RegistrationMode) => setRegistrationModeFn({ data: { mode } }),
+    onSuccess: () => {
+      toast.success(m["admin-invitations_toast_modeUpdated"]())
+      queryClient.invalidateQueries({ queryKey: ["invitations", "mode"] })
+    },
+    onError: (err) =>
+      toast.error(err instanceof Error ? err.message : m["admin-invitations_toast_modeFailed"]()),
+  })
+
+  const createMutation = useMutation({
+    mutationFn: (vars: { code?: string; maxUses: number; validDays: number }) =>
+      createInvitationCodeFn({ data: vars }),
+    onSuccess: () => {
+      toast.success(m["admin-invitations_toast_created"]())
+      setCreateOpen(false)
+      setCreateForm({ code: "", maxUses: 1, validDays: 30 })
+      invalidateCodes()
+    },
+    onError: (err) =>
+      toast.error(err instanceof Error ? err.message : m["admin-invitations_toast_createFailed"]()),
+  })
+
+  const toggleMutation = useMutation({
+    mutationFn: (id: string) => toggleInvitationCodeFn({ data: { id } }),
+    onSuccess: () => {
+      toast.success(m["admin-invitations_toast_toggled"]())
+      invalidateCodes()
+    },
+    onError: (err) =>
+      toast.error(err instanceof Error ? err.message : m["admin-invitations_toast_toggleFailed"]()),
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => deleteInvitationCodeFn({ data: { id } }),
+    onSuccess: () => {
+      toast.success(m["admin-invitations_toast_deleted"]())
+      setPendingDelete(null)
+      invalidateCodes()
+    },
+    onError: (err) => {
+      toast.error(err instanceof Error ? err.message : m["admin-invitations_toast_deleteFailed"]())
+      setPendingDelete(null)
+    },
+  })
+
+  const codes = codesQuery.data?.codes ?? []
+  const loading = codesQuery.isLoading
+  const mode = modeQuery.data?.mode ?? "invite"
+
+  const handleCopy = async (code: string) => {
+    try {
+      await navigator.clipboard.writeText(code)
+      toast.success(m["admin-invitations_toast_copied"]())
+    } catch {
+      toast.error(m["admin-invitations_toast_copyFailed"]())
+    }
+  }
+
+  return (
+    <div className="space-y-6 p-6">
+      <PageHeader
+        title={m["admin-invitations_page_title"]()}
+        description={m["admin-invitations_page_subtitle"]()}
+        icon={Ticket}
+      />
+
+      <Card>
+        <CardContent className="pt-6">
+          <div className="flex items-center justify-between gap-6">
+            <div>
+              <div className="text-sm font-medium">{m["admin-invitations_mode_title"]()}</div>
+              <div className="text-xs text-muted-foreground mt-0.5">
+                {mode === "open"
+                  ? m["admin-invitations_mode_open_desc"]()
+                  : m["admin-invitations_mode_invite_desc"]()}
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <Switch
+                checked={mode === "open"}
+                onCheckedChange={(checked) =>
+                  modeMutation.mutate(checked ? "open" : "invite")
+                }
+                disabled={modeMutation.isPending}
+                aria-label={m["admin-invitations_mode_title"]()}
+              />
+              <span className="text-sm font-medium">
+                {mode === "open"
+                  ? m["admin-invitations_mode_open"]()
+                  : m["admin-invitations_mode_invite"]()}
+              </span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-semibold">{m["admin-invitations_page_title"]()}</h2>
+          <Button onClick={() => setCreateOpen(true)}>
+            <Plus className="size-4" />
+            {m["admin-invitations_create_title"]()}
+          </Button>
+        </div>
+
+        {loading ? (
+          <div className="space-y-2">
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+          </div>
+        ) : codes.length === 0 ? (
+          <div className="rounded-lg border border-dashed py-12 text-center text-muted-foreground">
+            {m["admin-invitations_empty"]()}
+          </div>
+        ) : (
+          <div className="rounded-lg border border-border overflow-hidden">
+            <Table>
+              <TableHeader>
+                <TableRow className="bg-muted/50">
+                  <TableHead>{m["admin-invitations_table_columns_code"]()}</TableHead>
+                  <TableHead>{m["admin-invitations_table_columns_status"]()}</TableHead>
+                  <TableHead>{m["admin-invitations_table_columns_uses"]()}</TableHead>
+                  <TableHead>{m["admin-invitations_table_columns_expires"]()}</TableHead>
+                  <TableHead>{m["admin-invitations_table_columns_creator"]()}</TableHead>
+                  <TableHead className="text-right">
+                    {m["admin-invitations_table_columns_actions"]()}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {codes.map((row) => {
+                  const status = statusOf(row)
+                  const canDelete = row.usedCount === 0
+                  return (
+                    <TableRow key={row.id}>
+                      <TableCell>
+                        <button
+                          type="button"
+                          className="inline-flex items-center gap-1.5 font-mono text-sm hover:text-primary"
+                          onClick={() => handleCopy(row.code)}
+                          title={m["admin-invitations_toast_copied"]()}
+                        >
+                          {row.code}
+                          <Copy className="size-3.5 text-muted-foreground" />
+                        </button>
+                      </TableCell>
+                      <TableCell>
+                        <StatusBadge status={status} />
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-1.5">
+                          <span className="text-sm">
+                            {row.usedCount}/{row.maxUses}
+                          </span>
+                          {row.uses.length > 0 && (
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-7 px-2"
+                              onClick={() => setUsesViewer(row)}
+                            >
+                              <Users className="size-3.5" />
+                            </Button>
+                          )}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm">
+                          {formatTimestamp(row.expiresAt)}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        {row.creator ? (
+                          <span className="text-sm">{row.creator}</span>
+                        ) : (
+                          <span className="text-sm text-muted-foreground">—</span>
+                        )}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <div className="inline-flex items-center gap-1">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className={row.disabledAt != null ? "h-8" : "h-8"}
+                            disabled={toggleMutation.isPending}
+                            onClick={() => toggleMutation.mutate(row.id)}
+                          >
+                            {row.disabledAt != null ? (
+                              <>
+                                <CheckCircle2 className="size-4" />
+                                {m["admin-invitations_action_toggle_enable"]()}
+                              </>
+                            ) : (
+                              <>
+                                <Ban className="size-4" />
+                                {m["admin-invitations_action_toggle_disable"]()}
+                              </>
+                            )}
+                          </Button>
+                          {canDelete ? (
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-8 text-destructive hover:bg-destructive/10 hover:text-destructive"
+                              onClick={() => setPendingDelete(row)}
+                            >
+                              <Trash2 className="size-4" />
+                              {m["admin-invitations_action_delete"]()}
+                            </Button>
+                          ) : (
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  className="h-8 text-destructive"
+                                  disabled
+                                >
+                                  <Trash2 className="size-4" />
+                                </Button>
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                {m["admin-invitations_delete_disabled_hint"]()}
+                              </TooltipContent>
+                            </Tooltip>
+                          )}
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  )
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </div>
+
+      <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{m["admin-invitations_create_title"]()}</DialogTitle>
+            <DialogDescription>
+              {m["admin-invitations_create_desc"]()}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="invite-code">{m["admin-invitations_create_code_label"]()}</Label>
+              <Input
+                id="invite-code"
+                value={createForm.code}
+                onChange={(e) =>
+                  setCreateForm((f) => ({ ...f, code: e.target.value }))
+                }
+                placeholder={m["admin-invitations_create_code_placeholder"]()}
+                maxLength={32}
+                pattern="[A-Za-z0-9_-]*"
+              />
+              <p className="text-xs text-muted-foreground">
+                {m["admin-invitations_create_code_help"]()}
+              </p>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="invite-maxuses">
+                  {m["admin-invitations_create_maxuses_label"]()}
+                </Label>
+                <Input
+                  id="invite-maxuses"
+                  type="number"
+                  min={1}
+                  max={9999}
+                  value={createForm.maxUses}
+                  onChange={(e) =>
+                    setCreateForm((f) => ({
+                      ...f,
+                      maxUses: Math.max(1, Math.min(9999, Number(e.target.value) || 1)),
+                    }))
+                  }
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="invite-validdays">
+                  {m["admin-invitations_create_validdays_label"]()}
+                </Label>
+                <Input
+                  id="invite-validdays"
+                  type="number"
+                  min={1}
+                  max={365}
+                  value={createForm.validDays}
+                  onChange={(e) =>
+                    setCreateForm((f) => ({
+                      ...f,
+                      validDays: Math.max(1, Math.min(365, Number(e.target.value) || 1)),
+                    }))
+                  }
+                />
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCreateOpen(false)}>
+              {m.common_common_cancel()}
+            </Button>
+            <Button
+              onClick={() =>
+                createMutation.mutate({
+                  code: createForm.code.trim() || undefined,
+                  maxUses: createForm.maxUses,
+                  validDays: createForm.validDays,
+                })
+              }
+              disabled={createMutation.isPending}
+            >
+              {m["admin-invitations_create_submit"]()}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog
+        open={!!pendingDelete}
+        onOpenChange={(open: boolean) => !open && setPendingDelete(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {m["admin-invitations_delete_confirm_title"]({
+                code: pendingDelete?.code ?? "",
+              })}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {m["admin-invitations_delete_confirm_desc"]()}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{m.common_common_cancel()}</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              disabled={deleteMutation.isPending}
+              onClick={() =>
+                pendingDelete && deleteMutation.mutate(pendingDelete.id)
+              }
+            >
+              {m["admin-invitations_action_delete"]()}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <Dialog
+        open={!!usesViewer}
+        onOpenChange={(open: boolean) => !open && setUsesViewer(null)}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {m["admin-invitations_uses_title"]({
+                code: usesViewer?.code ?? "",
+              })}
+            </DialogTitle>
+          </DialogHeader>
+          {usesViewer && usesViewer.uses.length === 0 ? (
+            <div className="py-6 text-center text-sm text-muted-foreground">
+              {m["admin-invitations_uses_empty"]()}
+            </div>
+          ) : usesViewer ? (
+            <Table>
+              <TableHeader>
+                <TableRow className="bg-muted/50">
+                  <TableHead>{m["admin-invitations_uses_column_username"]()}</TableHead>
+                  <TableHead>{m["admin-invitations_uses_column_usedat"]()}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {usesViewer.uses.map((u) => (
+                  <TableRow key={u.userId}>
+                    <TableCell>
+                      <span className="text-sm">{u.user.username}</span>
+                    </TableCell>
+                    <TableCell>
+                      <span className="text-sm">{formatTimestamp(u.usedAt)}</span>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          ) : null}
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

package/src/components/layout/sidebar-02/app-sidebar.tsx

@@ -45,6 +45,8 @@ import {
   CreditCard,
   Shield,
   ScrollText,
+  Ticket,
+  KeyRound,
 } from "lucide-react";
 import { Logo } from "@/components/layout/sidebar-02/logo";
 import type { Route } from "./nav-main";
@@ -56,6 +58,8 @@ function buildDashboardRoutes(): Route[] {
   return [
     { id: "home", title: m.common_nav_dashboard(), icon: <Home className="size-4" />, link: "/dashboard" },
     { id: "users", title: m.common_nav_users(), icon: <Users className="size-4" />, link: "/users" },
+    { id: "invitations", title: m["admin-invitations_page_title"](), icon: <Ticket className="size-4" />, link: "/invitations" },
+    { id: "login-providers", title: m["admin-loginProviders_page_title"](), icon: <KeyRound className="size-4" />, link: "/login-providers" },
     { id: "docs", title: m.common_nav_docs(), icon: <FileText className="size-4" />, link: "/docs" },
     { id: "apps", title: m.common_nav_apps(), icon: <Package2 className="size-4" />, link: "/apps" },
     {