@allbluecn/admin-app 0.2.4 → 0.2.5

package/src/components/oauth-providers/provider-page.tsx

@@ -0,0 +1,324 @@
+// 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 { useEffect, 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 { Eye, EyeOff, KeyRound, PlugZap, Save, Trash2 } from 'lucide-react'
+import { PageHeader } from '@/components/common/page-header'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Card, CardContent } from '@/components/ui/card'
+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 {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import {
+  deleteOAuthProviderFn,
+  listOAuthProvidersFn,
+  saveOAuthProviderFn,
+  testOAuthProviderFn,
+} from '@/server/serverFns/oauth-providers'
+
+function GoogleIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
+      <path
+        fill="#EA4335"
+        d="M12 10.2v3.6h5.1c-.3 2-2 3.4-5.1 3.4-3.1 0-5.6-2.4-5.6-5.6s2.5-5.6 5.6-5.6c1.6 0 2.9.5 4 1.5l2.4-2.4C16.7 3.2 14.5 2.3 12 2.3 6.8 2.3 2.6 6.5 2.6 11.6S6.8 21 12 21c5.8 0 9.6-4 9.6-9.7 0-.6 0-1.1-.1-1.6H12z"
+      />
+    </svg>
+  )
+}
+
+export function OAuthProviderPage(): React.ReactElement {
+  const queryClient = useQueryClient()
+  const [clientId, setClientId] = useState('')
+  const [clientSecret, setClientSecret] = useState('')
+  const [enabled, setEnabled] = useState(false)
+  const [showSecret, setShowSecret] = useState(false)
+  const [pendingDelete, setPendingDelete] = useState(false)
+
+  const providersQuery = useQuery({
+    queryKey: ['oauth-providers', 'list'],
+    queryFn: () => listOAuthProvidersFn({ data: {} }),
+  })
+
+  const googleRow = providersQuery.data?.providers?.find((p) => p.provider === 'google')
+
+  useEffect(() => {
+    if (!googleRow) return
+    if (googleRow.fromDb) {
+      setClientId(googleRow.clientId)
+      setEnabled(googleRow.enabled)
+      setClientSecret('')
+    } else if (clientId === '') {
+      setEnabled(false)
+    }
+  }, [googleRow])
+
+  const invalidateList = () =>
+    queryClient.invalidateQueries({ queryKey: ['oauth-providers', 'list'] })
+
+  const saveMutation = useMutation({
+    mutationFn: () =>
+      saveOAuthProviderFn({
+        data: {
+          provider: 'google',
+          clientId: clientId.trim(),
+          clientSecret: clientSecret.trim() || undefined,
+          enabled,
+        },
+      }),
+    onSuccess: () => {
+      toast.success(m["admin-loginProviders_toast_saved"]())
+      setClientSecret('')
+      invalidateList()
+    },
+    onError: (err) =>
+      toast.error(
+        err instanceof Error ? err.message : m["admin-loginProviders_toast_saveFailed"](),
+      ),
+  })
+
+  const testMutation = useMutation({
+    mutationFn: () =>
+      testOAuthProviderFn({
+        data: {
+          provider: 'google',
+          clientId: clientId.trim(),
+        },
+      }),
+    onSuccess: (res) => {
+      if (res.ok) {
+        toast.success(res.detail || m["admin-loginProviders_toast_testOk"]())
+      } else {
+        toast.error(res.detail || m["admin-loginProviders_toast_testFailed"]())
+      }
+    },
+    onError: (err) =>
+      toast.error(
+        err instanceof Error ? err.message : m["admin-loginProviders_toast_testFailed"](),
+      ),
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: () => deleteOAuthProviderFn({ data: { provider: 'google' } }),
+    onSuccess: () => {
+      toast.success(m["admin-loginProviders_toast_deleted"]())
+      setClientId('')
+      setClientSecret('')
+      setEnabled(false)
+      setPendingDelete(false)
+      invalidateList()
+    },
+    onError: (err) => {
+      toast.error(
+        err instanceof Error ? err.message : m["admin-loginProviders_toast_deleteFailed"](),
+      )
+      setPendingDelete(false)
+    },
+  })
+
+  const loading = providersQuery.isLoading
+  const fromDb = googleRow?.fromDb ?? false
+  const hasEnvFallback = googleRow?.hasEnvFallback ?? false
+  const canTest = clientId.trim().length > 0
+  const canSave = clientId.trim().length > 0
+
+  return (
+    <div className="space-y-6 p-6">
+      <PageHeader
+        title={m["admin-loginProviders_page_title"]()}
+        description={m["admin-loginProviders_page_subtitle"]()}
+        icon={KeyRound}
+      />
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <Card>
+          <CardContent className="pt-6">
+            {loading ? (
+              <div className="space-y-3">
+                <Skeleton className="h-8 w-full" />
+                <Skeleton className="h-8 w-full" />
+                <Skeleton className="h-8 w-full" />
+              </div>
+            ) : (
+              <div className="space-y-5">
+                <div className="flex items-center gap-3">
+                  <div className="flex size-10 shrink-0 items-center justify-center rounded-lg border bg-background">
+                    <GoogleIcon className="size-5" />
+                  </div>
+                  <div className="flex-1">
+                    <div className="text-sm font-medium">Google</div>
+                    <div className="text-xs text-muted-foreground">
+                      {fromDb
+                        ? m["admin-loginProviders_source_db"]()
+                        : hasEnvFallback
+                          ? m["admin-loginProviders_source_env"]()
+                          : m["admin-loginProviders_source_none"]()}
+                    </div>
+                  </div>
+                  <Badge variant={fromDb ? 'default' : 'secondary'}>
+                    {fromDb
+                      ? m["admin-loginProviders_source_db"]()
+                      : hasEnvFallback
+                        ? m["admin-loginProviders_source_env"]()
+                        : m["admin-loginProviders_source_none"]()}
+                  </Badge>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="oauth-client-id">
+                    {m["admin-loginProviders_field_clientId"]()}
+                  </Label>
+                  <Input
+                    id="oauth-client-id"
+                    value={clientId}
+                    onChange={(e) => setClientId(e.target.value)}
+                    placeholder={m["admin-loginProviders_field_clientId_placeholder"]()}
+                    autoComplete="off"
+                    spellCheck={false}
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="oauth-client-secret">
+                    {m["admin-loginProviders_field_clientSecret"]()}
+                  </Label>
+                  <div className="relative">
+                    <Input
+                      id="oauth-client-secret"
+                      type={showSecret ? 'text' : 'password'}
+                      value={clientSecret}
+                      onChange={(e) => setClientSecret(e.target.value)}
+          placeholder={
+            googleRow?.hasSecret
+              ? m["admin-loginProviders_field_clientSecret_hint"]()
+              : m["admin-loginProviders_field_clientSecret_placeholder"]()
+          }
+                      autoComplete="new-password"
+                      spellCheck={false}
+                      className="pr-10"
+                    />
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      className="absolute right-0 top-0 h-full w-10 px-0"
+                      onClick={() => setShowSecret((v) => !v)}
+                      aria-label={
+                        showSecret
+                          ? m["admin-loginProviders_action_hideSecret"]()
+                          : m["admin-loginProviders_action_showSecret"]()
+                      }
+                    >
+                      {showSecret ? (
+                        <EyeOff className="size-4" />
+                      ) : (
+                        <Eye className="size-4" />
+                      )}
+                    </Button>
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    {m["admin-loginProviders_field_clientSecret_desc"]()}
+                  </p>
+                </div>
+
+                <div className="flex items-center justify-between rounded-md border px-3 py-2">
+                  <div className="text-sm font-medium">
+                    {m["admin-loginProviders_field_enabled"]()}
+                  </div>
+                  <Switch
+                    checked={enabled}
+                    onCheckedChange={setEnabled}
+                    aria-label={m["admin-loginProviders_field_enabled"]()}
+                  />
+                </div>
+
+                <div className="flex flex-wrap items-center gap-2">
+                  <Button
+                    onClick={() => saveMutation.mutate()}
+                    disabled={saveMutation.isPending || !canSave}
+                  >
+                    <Save className="size-4" />
+                    {m["admin-loginProviders_action_save"]()}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    onClick={() => testMutation.mutate()}
+                    disabled={testMutation.isPending || !canTest}
+                  >
+                    <PlugZap className="size-4" />
+                    {m["admin-loginProviders_action_test"]()}
+                  </Button>
+                  {fromDb && (
+                    <Button
+                      variant="outline"
+                      className="text-destructive hover:bg-destructive/10 hover:text-destructive"
+                      onClick={() => setPendingDelete(true)}
+                    >
+                      <Trash2 className="size-4" />
+                      {m["admin-loginProviders_action_delete"]()}
+                    </Button>
+                  )}
+                </div>
+
+                <p className="text-xs text-muted-foreground">
+                  {m["admin-loginProviders_cache_hint"]()}
+                </p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      <AlertDialog open={pendingDelete} onOpenChange={(o: boolean) => !o && setPendingDelete(false)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{m["admin-loginProviders_delete_confirm_title"]()}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {m["admin-loginProviders_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={() => deleteMutation.mutate()}
+            >
+              {m["admin-loginProviders_action_delete"]()}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}

package/src/routeTree.gen.ts

@@ -26,7 +26,9 @@ import { Route as NavDashboardRouteRouteImport } from './routes/_nav/dashboard/r
 import { Route as NavDependenciesRouteRouteImport } from './routes/_nav/dependencies/route'
 import { Route as NavDeveloperLogsRouteRouteImport } from './routes/_nav/developer-logs/route'
 import { Route as NavDocsRouteRouteImport } from './routes/_nav/docs/route'
+import { Route as NavInvitationsRouteRouteImport } from './routes/_nav/invitations/route'
 import { Route as NavLicensesRouteRouteImport } from './routes/_nav/licenses/route'
+import { Route as NavLoginProvidersRouteRouteImport } from './routes/_nav/login-providers/route'
 import { Route as NavMarketRouteRouteImport } from './routes/_nav/market/route'
 import { Route as NavMonitoringRouteRouteImport } from './routes/_nav/monitoring/route'
 import { Route as NavPermissionsRouteRouteImport } from './routes/_nav/permissions/route'
@@ -166,6 +168,13 @@ const NavDocsRouteRoute = NavDocsRouteRouteImport.update({
 } as any).lazy(() =>
   import('./routes/_nav/docs/route.lazy').then((d) => d.Route),
 )
+const NavInvitationsRouteRoute = NavInvitationsRouteRouteImport.update({
+  id: '/invitations',
+  path: '/invitations',
+  getParentRoute: () => NavRouteRoute,
+} as any).lazy(() =>
+  import('./routes/_nav/invitations/route.lazy').then((d) => d.Route),
+)
 const NavLicensesRouteRoute = NavLicensesRouteRouteImport.update({
   id: '/licenses',
   path: '/licenses',
@@ -173,6 +182,13 @@ const NavLicensesRouteRoute = NavLicensesRouteRouteImport.update({
 } as any).lazy(() =>
   import('./routes/_nav/licenses/route.lazy').then((d) => d.Route),
 )
+const NavLoginProvidersRouteRoute = NavLoginProvidersRouteRouteImport.update({
+  id: '/login-providers',
+  path: '/login-providers',
+  getParentRoute: () => NavRouteRoute,
+} as any).lazy(() =>
+  import('./routes/_nav/login-providers/route.lazy').then((d) => d.Route),
+)
 const NavMarketRouteRoute = NavMarketRouteRouteImport.update({
   id: '/market',
   path: '/market',
@@ -417,7 +433,9 @@ export interface FileRoutesByFullPath {
   '/dependencies': typeof NavDependenciesRouteRoute
   '/developer-logs': typeof NavDeveloperLogsRouteRoute
   '/docs': typeof NavDocsRouteRoute
+  '/invitations': typeof NavInvitationsRouteRoute
   '/licenses': typeof NavLicensesRouteRouteWithChildren
+  '/login-providers': typeof NavLoginProvidersRouteRoute
   '/market': typeof NavMarketRouteRoute
   '/monitoring': typeof NavMonitoringRouteRouteWithChildren
   '/permissions': typeof NavPermissionsRouteRoute
@@ -463,7 +481,9 @@ export interface FileRoutesByTo {
   '/dependencies': typeof NavDependenciesRouteRoute
   '/developer-logs': typeof NavDeveloperLogsRouteRoute
   '/docs': typeof NavDocsRouteRoute
+  '/invitations': typeof NavInvitationsRouteRoute
   '/licenses': typeof NavLicensesRouteRouteWithChildren
+  '/login-providers': typeof NavLoginProvidersRouteRoute
   '/market': typeof NavMarketRouteRoute
   '/monitoring': typeof NavMonitoringRouteRouteWithChildren
   '/permissions': typeof NavPermissionsRouteRoute
@@ -512,7 +532,9 @@ export interface FileRoutesById {
   '/_nav/dependencies': typeof NavDependenciesRouteRoute
   '/_nav/developer-logs': typeof NavDeveloperLogsRouteRoute
   '/_nav/docs': typeof NavDocsRouteRoute
+  '/_nav/invitations': typeof NavInvitationsRouteRoute
   '/_nav/licenses': typeof NavLicensesRouteRouteWithChildren
+  '/_nav/login-providers': typeof NavLoginProvidersRouteRoute
   '/_nav/market': typeof NavMarketRouteRoute
   '/_nav/monitoring': typeof NavMonitoringRouteRouteWithChildren
   '/_nav/permissions': typeof NavPermissionsRouteRoute
@@ -561,7 +583,9 @@ export interface FileRouteTypes {
     | '/dependencies'
     | '/developer-logs'
     | '/docs'
+    | '/invitations'
     | '/licenses'
+    | '/login-providers'
     | '/market'
     | '/monitoring'
     | '/permissions'
@@ -607,7 +631,9 @@ export interface FileRouteTypes {
     | '/dependencies'
     | '/developer-logs'
     | '/docs'
+    | '/invitations'
     | '/licenses'
+    | '/login-providers'
     | '/market'
     | '/monitoring'
     | '/permissions'
@@ -655,7 +681,9 @@ export interface FileRouteTypes {
     | '/_nav/dependencies'
     | '/_nav/developer-logs'
     | '/_nav/docs'
+    | '/_nav/invitations'
     | '/_nav/licenses'
+    | '/_nav/login-providers'
     | '/_nav/market'
     | '/_nav/monitoring'
     | '/_nav/permissions'
@@ -808,6 +836,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof NavDocsRouteRouteImport
       parentRoute: typeof NavRouteRoute
     }
+    '/_nav/invitations': {
+      id: '/_nav/invitations'
+      path: '/invitations'
+      fullPath: '/invitations'
+      preLoaderRoute: typeof NavInvitationsRouteRouteImport
+      parentRoute: typeof NavRouteRoute
+    }
     '/_nav/licenses': {
       id: '/_nav/licenses'
       path: '/licenses'
@@ -815,6 +850,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof NavLicensesRouteRouteImport
       parentRoute: typeof NavRouteRoute
     }
+    '/_nav/login-providers': {
+      id: '/_nav/login-providers'
+      path: '/login-providers'
+      fullPath: '/login-providers'
+      preLoaderRoute: typeof NavLoginProvidersRouteRouteImport
+      parentRoute: typeof NavRouteRoute
+    }
     '/_nav/market': {
       id: '/_nav/market'
       path: '/market'
@@ -1132,7 +1174,9 @@ interface NavRouteRouteChildren {
   NavDependenciesRouteRoute: typeof NavDependenciesRouteRoute
   NavDeveloperLogsRouteRoute: typeof NavDeveloperLogsRouteRoute
   NavDocsRouteRoute: typeof NavDocsRouteRoute
+  NavInvitationsRouteRoute: typeof NavInvitationsRouteRoute
   NavLicensesRouteRoute: typeof NavLicensesRouteRouteWithChildren
+  NavLoginProvidersRouteRoute: typeof NavLoginProvidersRouteRoute
   NavMarketRouteRoute: typeof NavMarketRouteRoute
   NavMonitoringRouteRoute: typeof NavMonitoringRouteRouteWithChildren
   NavPermissionsRouteRoute: typeof NavPermissionsRouteRoute
@@ -1155,7 +1199,9 @@ const NavRouteRouteChildren: NavRouteRouteChildren = {
   NavDependenciesRouteRoute: NavDependenciesRouteRoute,
   NavDeveloperLogsRouteRoute: NavDeveloperLogsRouteRoute,
   NavDocsRouteRoute: NavDocsRouteRoute,
+  NavInvitationsRouteRoute: NavInvitationsRouteRoute,
   NavLicensesRouteRoute: NavLicensesRouteRouteWithChildren,
+  NavLoginProvidersRouteRoute: NavLoginProvidersRouteRoute,
   NavMarketRouteRoute: NavMarketRouteRoute,
   NavMonitoringRouteRoute: NavMonitoringRouteRouteWithChildren,
   NavPermissionsRouteRoute: NavPermissionsRouteRoute,

package/src/routes/_nav/invitations/route.lazy.tsx

@@ -0,0 +1,28 @@
+// 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 { createLazyFileRoute } from "@tanstack/react-router"
+import { InvitationsPage } from "@/components/invitations/invitations-page"
+
+export const Route = createLazyFileRoute("/_nav/invitations")({
+  pendingComponent: () => (
+    <div className="flex h-64 items-center justify-center">
+      <div className="size-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+    </div>
+  ),
+  component: InvitationsPage,
+})

package/src/routes/_nav/invitations/route.tsx

@@ -0,0 +1,20 @@
+// 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 { createFileRoute } from "@tanstack/react-router"
+
+export const Route = createFileRoute("/_nav/invitations")({})

package/src/routes/_nav/login-providers/route.lazy.tsx

@@ -0,0 +1,28 @@
+// 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 { createLazyFileRoute } from '@tanstack/react-router'
+import { OAuthProviderPage } from '@/components/oauth-providers/provider-page'
+
+export const Route = createLazyFileRoute('/_nav/login-providers')({
+  pendingComponent: () => (
+    <div className="flex h-64 items-center justify-center">
+      <div className="size-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+    </div>
+  ),
+  component: OAuthProviderPage,
+})

package/src/routes/_nav/login-providers/route.tsx

@@ -0,0 +1,20 @@
+// 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 { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_nav/login-providers')({})