cap 与系统信息

frontend/components/auth/cap-widget.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+import {useEffect, useRef, useState} from 'react'
+import {CheckCircle2, Loader2, ShieldAlert, ShieldCheck, ShieldQuestion} from 'lucide-react'
+import {getCapToken} from '@/lib/cap-solver'
+
+type CapStatus = 'idle' | 'solving' | 'solved' | 'error'
+
+interface CapWidgetProps {
+  /** Called with the one-time token once the challenge is solved */
+  onToken: (token: string) => void
+  /** Called when the challenge fails or encounters an error */
+  onError?: (err: Error) => void
+  /** Whether to auto-start solving when the component mounts. Defaults to true. */
+  autoStart?: boolean
+  /** PoW scope sent to the backend */
+  scope?: string
+}
+
+/**
+ * Cap 人机验证小部件
+ *
+ * autoStart=true（默认）：挂载后立即在后台运行 PoW 求解，完成后回调 onToken。
+ * autoStart=false：显示「点击开始验证」按钮，用户手动触发后才开始求解。
+ */
+export function CapWidget({ onToken, onError, autoStart = true, scope = 'login' }: CapWidgetProps) {
+  const [status, setStatus] = useState<CapStatus>('idle')
+  const [errorMsg, setErrorMsg] = useState('')
+  const solving = useRef(false)
+
+  const solve = async () => {
+    if (solving.current) return
+    solving.current = true
+    setStatus('solving')
+    setErrorMsg('')
+    try {
+      const token = await getCapToken(scope)
+      setStatus('solved')
+      onToken(token)
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err))
+      setStatus('error')
+      setErrorMsg(error.message)
+      onError?.(error)
+    } finally {
+      solving.current = false
+    }
+  }
+
+  // Auto-start on mount (only when autoStart is enabled)
+  useEffect(() => {
+    if (autoStart) {
+      void solve()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <div className="flex items-center gap-2 rounded-lg border border-border/60 bg-muted/30 px-3 py-2 text-sm">
+      {/* idle + autoStart=false: 手动触发按钮 */}
+      {status === 'idle' && !autoStart && (
+        <button
+          type="button"
+          className="flex w-full items-center gap-2 text-left"
+          onClick={() => void solve()}
+        >
+          <ShieldQuestion className="size-4 shrink-0 text-muted-foreground" />
+          <span className="flex-1 text-muted-foreground">点击开始人机验证</span>
+        </button>
+      )}
+
+      {/* idle + autoStart=true: 等待自动开始（极短暂状态） */}
+      {status === 'idle' && autoStart && (
+        <>
+          <ShieldAlert className="size-4 shrink-0 text-muted-foreground" />
+          <span className="text-muted-foreground">等待人机验证…</span>
+        </>
+      )}
+
+      {status === 'solving' && (
+        <>
+          <Loader2 className="size-4 shrink-0 animate-spin text-primary" />
+          <span className="text-muted-foreground">正在完成人机验证…</span>
+        </>
+      )}
+
+      {status === 'solved' && (
+        <>
+          <CheckCircle2 className="size-4 shrink-0 text-green-500" />
+          <span className="text-green-600 dark:text-green-400">人机验证通过</span>
+          <ShieldCheck className="ml-auto size-4 shrink-0 text-green-500" />
+        </>
+      )}
+
+      {status === 'error' && (
+        <button
+          type="button"
+          className="flex w-full items-center gap-2 text-left"
+          onClick={() => void solve()}
+        >
+          <ShieldAlert className="size-4 shrink-0 text-destructive" />
+          <span className="flex-1 text-destructive">
+            {errorMsg || '人机验证失败'}
+          </span>
+          <span className="text-xs text-muted-foreground underline">重试</span>
+        </button>
+      )}
+    </div>
+  )
+}

frontend/components/auth/login-form.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import {useMemo, useState} from "react"
+import {useMemo, useRef, useState} from "react"
 import {useMutation, useQuery} from "@tanstack/react-query"
 import {useRouter, useSearchParams} from "next/navigation"
 import {KeyRound, ShieldCheck, UserPlus} from "lucide-react"
@@ -13,7 +13,9 @@ import {Separator} from "@/components/ui/separator"
 import {Spinner} from "@/components/ui/spinner"
 import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
 import {Card, CardContent} from "@/components/ui/card"
+import {CapWidget} from "@/components/auth/cap-widget"
 import services from "@/lib/services"
+import type {LoginRequest, RegisterRequest} from "@/lib/services/auth/types"
 
 function getRedirectTarget(searchParams: ReturnType<typeof useSearchParams>) {
   const callbackUrl = searchParams.get("callbackUrl")
@@ -44,6 +46,12 @@ export function LoginForm() {
   const [nickname, setNickname] = useState("")
   const [errorMessage, setErrorMessage] = useState("")
 
+  // Cap token management — ref to hold latest token without triggering re-render
+  const capTokenRef = useRef<string | null>(null)
+  const [capReady, setCapReady] = useState(false)
+  const [capError, setCapError] = useState(false)
+  const [capResetKey, setCapResetKey] = useState(0)
+
   const publicConfigQuery = useQuery({
     queryKey: ["public-config"],
     queryFn: () => services.config.getPublicConfig(),
@@ -60,19 +68,36 @@ export function LoginForm() {
     [searchParams],
   )
 
+  const capEnabled = publicConfigQuery.data?.cap_login_enabled ?? false
+  const capAutoSolve = publicConfigQuery.data?.cap_auto_solve ?? true
+
   const loginMutation = useMutation({
-    mutationFn: (req: any) => services.auth.login(req),
+    mutationFn: (req: LoginRequest) => {
+      const headers: Record<string, string> = {}
+      if (capEnabled && capTokenRef.current) {
+        headers["X-Cap-Token"] = capTokenRef.current
+        // Consume the token — next login attempt will need a new one
+        capTokenRef.current = null
+        setCapReady(false)
+      }
+      return services.auth.login(req, Object.keys(headers).length ? headers : undefined)
+    },
     onSuccess: (user) => {
       setUser(user)
       router.replace(redirectTarget)
     },
     onError: (error: Error) => {
-      setErrorMessage(error.message || "登录失败，请重试")
+      toast.error(error.message || "登录失败，请重试")
+      if (capEnabled) {
+        capTokenRef.current = null
+        setCapReady(false)
+        setCapResetKey((key) => key + 1)
+      }
     },
   })
 
   const registerMutation = useMutation({
-    mutationFn: (req: any) => services.auth.register(req),
+    mutationFn: (req: RegisterRequest) => services.auth.register(req),
     onSuccess: (user) => {
       setUser(user)
       router.replace(redirectTarget)
@@ -84,8 +109,23 @@ export function LoginForm() {
 
   const handlePasswordLogin = () => {
     setErrorMessage("")
+    const trimmedUsername = username.trim()
+    if (!trimmedUsername || !password) {
+      toast.error("账号或密码未填写完整", {
+        description: "请先输入账号和密码后再登录",
+      })
+      return
+    }
+    if (capEnabled && !capReady) {
+      toast.error(
+        capAutoSolve
+          ? "人机验证尚未完成，请稍候…"
+          : "请先点击「开始验证」完成人机验证",
+      )
+      return
+    }
     loginMutation.mutate({
-      username: username.trim(),
+      username: trimmedUsername,
       password,
     })
   }
@@ -110,6 +150,18 @@ export function LoginForm() {
     }
   }
 
+  const handleCapToken = (token: string) => {
+    capTokenRef.current = token
+    setCapReady(true)
+    setCapError(false)
+  }
+
+  const handleCapError = () => {
+    capTokenRef.current = null
+    setCapReady(false)
+    setCapError(true)
+  }
+
   const registrationEnabled =
     (publicConfigQuery.data?.registration_enabled ?? true) &&
     (publicConfigQuery.data?.password_register_enabled ?? true)
@@ -118,6 +170,16 @@ export function LoginForm() {
 
   const authSources = authSourcesQuery.data ?? []
 
+  // Login button disabled when:
+  //   - password login is off, OR
+  //   - login mutation is pending, OR
+  //   - cap is enabled AND auto-solve mode AND not yet solved (and not in error state)
+  // When autoStart=false (manual mode), idle means the user hasn't clicked yet — don't block.
+  const loginDisabled =
+    !passwordLoginEnabled ||
+    loginMutation.isPending ||
+    (capEnabled && capAutoSolve && !capReady && !capError)
+
   return (
     <Card className="w-full border-border/60 bg-background/80 shadow-2xl backdrop-blur">
       <CardContent className="space-y-5 p-5 sm:p-6">
@@ -143,6 +205,7 @@ export function LoginForm() {
                   onChange={(e) => setUsername(e.target.value)}
                   placeholder="用户名"
                   autoComplete="username"
+                  onKeyDown={(e) => e.key === "Enter" && handlePasswordLogin()}
                 />
                 <Input
                   value={password}
@@ -150,21 +213,26 @@ export function LoginForm() {
                   type="password"
                   placeholder="密码"
                   autoComplete="current-password"
+                  onKeyDown={(e) => e.key === "Enter" && handlePasswordLogin()}
                 />
               </div>
 
-              {errorMessage ? (
-                <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
-                  {errorMessage}
-                </div>
-              ) : null}
+              {/* Cap 人机验证 */}
+              {capEnabled && (
+                <CapWidget
+                  key={capResetKey}
+                  onToken={handleCapToken}
+                  onError={handleCapError}
+                  autoStart={capAutoSolve}
+                />
+              )}
 
               <Button
                 type="button"
                 className="w-full"
                 variant={"secondary"}
                 onClick={handlePasswordLogin}
-                disabled={!passwordLoginEnabled || loginMutation.isPending}
+                disabled={loginDisabled}
               >
                 {loginMutation.isPending ? (
                   <>
@@ -238,7 +306,7 @@ export function LoginForm() {
 
         {authSources.length > 0 ? (
           authSources.map((source) => (
-            <div className="space-y-3">
+            <div className="space-y-3" key={source.id}>
               <div className="flex items-center gap-2 text-sm font-medium text-foreground">
                 <ShieldCheck className="size-4" />
                 第三方认证源