@allbluecn/admin-app 0.2.4 → 0.2.6

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/paraglide/.gitignore

@@ -0,0 +1,3 @@
+# ignore everything because the directory is auto-generated by inlang paraglide-js
+# for more info visit https://paraglidejs.com
+*

package/src/paraglide/.prettierignore

@@ -0,0 +1,3 @@
+# ignore everything because the directory is auto-generated by inlang paraglide-js
+# for more info visit https://paraglidejs.com
+*

package/src/paraglide/README.md

@@ -0,0 +1,162 @@
+# Paraglide JS Compiled Output
+
+> Auto-generated i18n message functions. Import `messages.js` to use translated strings.
+
+Compiled from: `/Users/urmynami/HelloAI/AllBlue-Workspace/AllBlue/apps/admin/project.inlang`
+
+
+## What is this folder?
+
+This folder contains compiled [Paraglide JS](https://github.com/opral/paraglide-js) output. Paraglide JS compiles your translation messages into tree-shakeable JavaScript functions.
+
+## At a glance
+
+Purpose:
+- This folder stores compiled i18n message functions.
+- Source translations live outside this folder in your inlang project.
+
+Safe to import:
+- `messages.js` — all message functions
+- `runtime.js` — locale utilities
+- `server.js` — server-side middleware
+
+Do not edit:
+- All files in this folder are auto-generated.
+- Changes will be overwritten on next compilation.
+
+```
+paraglide/
+├── messages.js      # Message exports (import this)
+├── messages/        # Individual message functions
+├── runtime.js       # Locale detection & configuration
+├── registry.js      # Formatting utilities (plural, number, datetime, relativetime)
+├── server.js        # Server-side middleware
+└── .gitignore       # Marks folder as generated
+```
+
+## Usage
+
+```js
+import * as m from "./paraglide/messages.js";
+
+// Messages are functions that return localized strings
+m.hello_world();             // "Hello, World!" (in current locale)
+m.greeting({ name: "Sam" }); // "Hello, Sam!"
+
+// Override locale per-call
+m.hello_world({}, { locale: "de" });           // "Hallo, Welt!"
+m.greeting({ name: "Sam" }, { locale: "de" }); // "Hallo, Sam!"
+```
+
+## Runtime API
+
+```js
+import { getLocale, getTextDirection, setLocale, locales, baseLocale } from "./paraglide/runtime.js";
+
+getLocale();    // Current locale, e.g., "en"
+getTextDirection(); // "ltr" | "rtl" for current locale
+setLocale("de"); // Set locale
+locales;        // Available locales, e.g., ["en", "de", "fr"]
+baseLocale;     // Default locale, e.g., "en"
+```
+
+## Strategy
+
+The strategy determines how the current locale is detected and persisted:
+
+- **Cookie**: Stores locale preference in a cookie.
+- **URL**: Derives locale from URL patterns (e.g., `/en/about`, `en.example.com`).
+- **GlobalVariable**: Uses a global variable (client-side only).
+- **BaseLocale**: Always returns the base locale.
+
+Strategies can be combined. The order defines precedence:
+
+```js
+await compile({
+  project: "./project.inlang",
+  outdir: "./src/paraglide",
+  strategy: ["url", "cookie", "baseLocale"],
+});
+```
+
+See the [strategy documentation](https://paraglidejs.com/strategy) for details.
+
+## Markup (Rich Text)
+
+Messages can contain markup tags for bold, links, and other inline elements. Translators control where tags appear; developers control how they render.
+
+Important:
+- Tag names are app-defined. There is no built-in list of HTML tags.
+- `{#b}...{/b}` does not automatically render as `<b>...</b>`.
+- Renderers/snippets are looked up by the same tag name used in the message.
+
+### Message syntax
+
+```json
+{
+  "cta": "{#link to=|/docs| rel=$relationship @track}Read the docs{/link}",
+  "welcome": "{#b}Hi {name}{/b}{#icon/}"
+}
+```
+
+- `{#tagName}` opens a tag, `{/tagName}` closes it.
+- `{#tagName/}` creates a standalone tag.
+- Options: `to=|/docs|` or `rel=$relationship` (accessed via `options.*`).
+- Attributes: `@track` or `@variant=|hero|` (accessed via `attributes.*`).
+
+This is the default inlang message syntax. Paraglide's message format is plugin-based — you can use [ICU MessageFormat 1](https://inlang.com/m/p7c8m1d2/plugin-inlang-icu-messageformat-1), [i18next](https://inlang.com/m/3i8bor92/plugin-inlang-i18next), or other [plugins](https://inlang.com/c/plugins) instead.
+
+### Rendering markup
+
+Calling the message function still returns **plain text** (markup stripped):
+
+```js
+m.cta({ relationship: "noopener" }); // "Read the docs"
+```
+
+To render markup, use the framework adapter or the low-level `parts()` API:
+
+```js
+const parts = m.cta.parts({ relationship: "noopener" });
+// [
+//   { type: "markup-start", name: "link", options: { to: "/docs", rel: "noopener" }, attributes: { track: true } },
+//   { type: "text", value: "Read the docs" },
+//   { type: "markup-end", name: "link" }
+// ]
+```
+
+Framework adapters provide a `<ParaglideMessage>` component that accepts markup renderers:
+
+- `@inlang/paraglide-js-react`
+- `@inlang/paraglide-js-vue`
+- `@inlang/paraglide-js-svelte`
+- `@inlang/paraglide-js-solid`
+
+```jsx
+import { ParaglideMessage } from "@inlang/paraglide-js-react"; // or -vue, -svelte, -solid
+
+<ParaglideMessage
+  message={m.welcome}
+  inputs={{ name: "Ada" }}
+  markup={{
+    b: ({ children }) => <b>{children}</b>,
+    icon: () => <span aria-hidden="true" className="icon-wave" />,
+  }}
+/>
+```
+
+The available renderer/snippet names come from the message itself. You can inspect them through `message.parts()`, and TypeScript uses the same names to type-check your markup renderers.
+
+See the [markup documentation](https://paraglidejs.com/markup) for details.
+
+## Key concepts
+
+- **Tree-shakeable**: Each message is a function, enabling [up to 70% smaller i18n bundle sizes](https://paraglidejs.com/benchmark) than traditional i18n libraries.
+- **Typesafe**: Full TypeScript/JSDoc support with autocomplete.
+- **Variants**: Messages can have variants for pluralization, gender, etc.
+- **Fallbacks**: Missing translations fall back to the base locale.
+
+## Links
+
+- [Paraglide JS Documentation](https://paraglidejs.com)
+- [Source Repository](https://github.com/opral/paraglide-js)