mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-04 23:16:37 +08:00
refactor(repo): consolidate openflare-server to root and move subprojects to internal/apps
- Merge all files inside openflare-server to the repository root directory. - Relocate agent, relay, and flared subprojects from internal/ to internal/apps/. - Combine docker-compose files and update build context paths to root. - Update GitHub workflows and Dockerfiles to refer to new directories and package names. - Rewrite Go package imports across all files. - Resolve database renew test race condition and clean up docs.
This commit is contained in:
ryan
@@ -0,0 +1,67 @@
|
||||
"use client"
|
||||
|
||||
import type {ReactNode} from "react"
|
||||
import {motion} from "motion/react"
|
||||
import {WavesIcon} from "lucide-react"
|
||||
|
||||
import {cn} from "@/lib/utils"
|
||||
|
||||
interface AuthShellProps {
|
||||
children: ReactNode
|
||||
wide?: boolean
|
||||
}
|
||||
|
||||
export function AuthShell({children, wide = false}: AuthShellProps) {
|
||||
return (
|
||||
<main className="relative flex min-h-screen w-full items-center justify-center overflow-x-hidden bg-background px-4 py-6 sm:px-8 sm:py-8 [@media(max-height:700px)]:py-3">
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,var(--border)_1px,transparent_1px),linear-gradient(to_bottom,var(--border)_1px,transparent_1px)] bg-[size:56px_56px] opacity-45 [mask-image:linear-gradient(to_bottom,transparent,black_12%,black_88%,transparent)]"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-border/70"
|
||||
/>
|
||||
<motion.section
|
||||
initial={{opacity: 0, y: 18}}
|
||||
animate={{opacity: 1, y: 0}}
|
||||
transition={{duration: 0.45, ease: "easeOut"}}
|
||||
className={cn(
|
||||
"relative w-full border-x border-dashed border-border/80 bg-background/95 px-6 py-8 backdrop-blur-sm sm:px-10 sm:py-10 [@media(max-height:700px)]:py-5",
|
||||
wide ? "max-w-2xl" : "max-w-xl",
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</motion.section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
interface AuthHeadingProps {
|
||||
title: string
|
||||
description: string
|
||||
siteName?: string
|
||||
}
|
||||
|
||||
export function AuthHeading({
|
||||
title,
|
||||
description,
|
||||
siteName = "OpenFlare",
|
||||
}: AuthHeadingProps) {
|
||||
return (
|
||||
<header className="flex flex-col gap-6 [@media(max-height:700px)]:gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex size-9 items-center justify-center rounded-full bg-foreground text-background [@media(max-height:700px)]:size-8">
|
||||
<WavesIcon aria-hidden="true" />
|
||||
</span>
|
||||
<span className="font-semibold tracking-tight [@media(min-height:761px)]:text-lg">{siteName}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5 [@media(max-height:700px)]:gap-1">
|
||||
<h1 className="text-2xl font-semibold tracking-tight text-foreground sm:text-3xl [@media(min-height:900px)]:sm:text-4xl">
|
||||
{title}
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground [@media(min-height:900px)]:text-base">{description}</p>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,347 @@
|
||||
"use client"
|
||||
|
||||
import {useEffect, useRef, useState} from "react"
|
||||
import {useMutation, useQuery} from "@tanstack/react-query"
|
||||
import {useSearchParams} from "next/navigation"
|
||||
import {EyeIcon, EyeOffIcon} from "lucide-react"
|
||||
import {toast} from "sonner"
|
||||
import Link from "next/link"
|
||||
|
||||
import {useAuth} from "@/components/providers/auth-provider"
|
||||
import {Button} from "@/components/ui/button"
|
||||
import {Input} from "@/components/ui/input"
|
||||
import {Separator} from "@/components/ui/separator"
|
||||
import {Spinner} from "@/components/ui/spinner"
|
||||
import {Field, FieldGroup, FieldLabel} from "@/components/ui/field"
|
||||
import {CapWidget} from "@/components/auth/cap-widget"
|
||||
import {AuthHeading} from "@/components/auth/auth-shell"
|
||||
import {OTPForm} from "./otp-form"
|
||||
import {AuthService} from "@/lib/services/auth"
|
||||
import {ConfigService} from "@/lib/services/config"
|
||||
import type {LoginRequest} from "@/lib/services/auth/types"
|
||||
import {safeRedirectTarget} from "@/lib/utils"
|
||||
|
||||
function persistRedirectTarget(searchParams: ReturnType<typeof useSearchParams>) {
|
||||
const callbackUrl = searchParams.get("callbackUrl")
|
||||
if (callbackUrl && typeof window !== "undefined") {
|
||||
sessionStorage.setItem("redirect_after_login", safeRedirectTarget(callbackUrl))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function configBool(value: string | undefined, fallback: boolean) {
|
||||
if (value === undefined) return fallback
|
||||
return value === "true"
|
||||
}
|
||||
|
||||
export function LoginForm({ onOTPStateChange }: { onOTPStateChange?: (show: boolean) => void }) {
|
||||
const searchParams = useSearchParams()
|
||||
const { setUser } = useAuth()
|
||||
const [username, setUsername] = useState("")
|
||||
const [password, setPassword] = useState("")
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [code, setCode] = useState("")
|
||||
const [showLoginCodeInput, setShowLoginCodeInput] = useState(false)
|
||||
const [loginCooldown, setLoginCooldown] = useState(0)
|
||||
const [errorMessage, setErrorMessage] = useState("")
|
||||
const [loginCodeTip, setLoginCodeTip] = useState<React.ReactNode>(null)
|
||||
|
||||
useEffect(() => {
|
||||
onOTPStateChange?.(showLoginCodeInput)
|
||||
}, [showLoginCodeInput, onOTPStateChange])
|
||||
|
||||
useEffect(() => {
|
||||
if (loginCooldown > 0) {
|
||||
const timer = setTimeout(() => setLoginCooldown(loginCooldown - 1), 1000)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [loginCooldown])
|
||||
|
||||
// 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: () => ConfigService.getPublicConfig(),
|
||||
})
|
||||
|
||||
const authSourcesQuery = useQuery({
|
||||
queryKey: ["auth-sources"],
|
||||
queryFn: () => AuthService.getAuthSources(),
|
||||
})
|
||||
|
||||
const capEnabled = configBool(publicConfigQuery.data?.cap_login_enabled, true)
|
||||
const capAutoSolve = configBool(publicConfigQuery.data?.cap_auto_solve, true)
|
||||
|
||||
const loginMutation = useMutation({
|
||||
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 AuthService.login(req, Object.keys(headers).length ? headers : undefined)
|
||||
},
|
||||
onSuccess: (user) => {
|
||||
setUser(user)
|
||||
toast.success("登录成功")
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
const errorMsg = error.message || ""
|
||||
if (errorMsg.startsWith("need_email_code:")) {
|
||||
const emailMasked = errorMsg.substring("need_email_code:".length)
|
||||
setLoginCodeTip(
|
||||
<>
|
||||
已向您的安全邮箱 <span className="font-medium text-foreground">{emailMasked}</span> 发送了登录验证码。
|
||||
</>
|
||||
)
|
||||
setShowLoginCodeInput(true)
|
||||
setLoginCooldown(60)
|
||||
toast.success("登录验证码已发送至您的邮箱，请注意查收")
|
||||
if (capEnabled) {
|
||||
capTokenRef.current = null
|
||||
setCapReady(false)
|
||||
setCapResetKey((key) => key + 1)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (errorMsg.startsWith("smtp_invalid:")) {
|
||||
const tip = errorMsg.substring("smtp_invalid:".length)
|
||||
setLoginCodeTip("请输入您的登录验证码。")
|
||||
setShowLoginCodeInput(true)
|
||||
setLoginCooldown(0)
|
||||
toast.warning(tip)
|
||||
if (capEnabled) {
|
||||
capTokenRef.current = null
|
||||
setCapReady(false)
|
||||
setCapResetKey((key) => key + 1)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
setErrorMessage(errorMsg || "登录失败，请重试")
|
||||
if (capEnabled) {
|
||||
capTokenRef.current = null
|
||||
setCapReady(false)
|
||||
setCapResetKey((key) => key + 1)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const handlePasswordLogin = () => {
|
||||
setErrorMessage("")
|
||||
const trimmedUsername = username.trim()
|
||||
if (!trimmedUsername || !password) {
|
||||
toast.error("邮箱/用户名或密码未填写完整", {
|
||||
description: "请先输入邮箱/用户名和密码后再登录",
|
||||
})
|
||||
return
|
||||
}
|
||||
if (capEnabled && !capReady) {
|
||||
toast.error(
|
||||
capAutoSolve
|
||||
? "人机验证尚未完成，请稍候…"
|
||||
: "请先点击「开始验证」完成人机验证",
|
||||
)
|
||||
return
|
||||
}
|
||||
loginMutation.mutate({
|
||||
username: trimmedUsername,
|
||||
password,
|
||||
code: showLoginCodeInput ? code.trim() : undefined,
|
||||
})
|
||||
}
|
||||
|
||||
const handleResendLoginCode = () => {
|
||||
setCode("")
|
||||
loginMutation.mutate({
|
||||
username: username.trim(),
|
||||
password,
|
||||
})
|
||||
}
|
||||
|
||||
const handleOAuthLogin = async (sourceName: string) => {
|
||||
try {
|
||||
setErrorMessage("")
|
||||
persistRedirectTarget(searchParams)
|
||||
const { authorize_url } = await AuthService.getAuthorizeUrl(sourceName)
|
||||
window.location.href = authorize_url
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : "第三方登录失败")
|
||||
}
|
||||
}
|
||||
|
||||
const handleCapToken = (token: string) => {
|
||||
capTokenRef.current = token
|
||||
setCapReady(true)
|
||||
setCapError(false)
|
||||
}
|
||||
|
||||
const handleCapError = () => {
|
||||
capTokenRef.current = null
|
||||
setCapReady(false)
|
||||
setCapError(true)
|
||||
}
|
||||
|
||||
const registrationEnabled =
|
||||
configBool(publicConfigQuery.data?.registration_enabled, false) &&
|
||||
configBool(publicConfigQuery.data?.password_register_enabled, false)
|
||||
|
||||
const passwordLoginEnabled = configBool(publicConfigQuery.data?.password_login_enabled, true)
|
||||
const oidcLoginEnabled = configBool(publicConfigQuery.data?.oidc_login_enabled, true)
|
||||
const authSources = oidcLoginEnabled ? (authSourcesQuery.data ?? []) : []
|
||||
|
||||
const loginDisabled =
|
||||
!passwordLoginEnabled ||
|
||||
loginMutation.isPending ||
|
||||
(capEnabled && capAutoSolve && !capReady && !capError)
|
||||
|
||||
if (publicConfigQuery.isPending) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-24">
|
||||
<Spinner />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (showLoginCodeInput) {
|
||||
return (
|
||||
<OTPForm
|
||||
code={code}
|
||||
setCode={setCode}
|
||||
loginCodeTip={loginCodeTip}
|
||||
loginCooldown={loginCooldown}
|
||||
isPending={loginMutation.isPending}
|
||||
onResend={handleResendLoginCode}
|
||||
onSubmit={handlePasswordLogin}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 [@media(max-height:700px)]:gap-4">
|
||||
<AuthHeading
|
||||
siteName={publicConfigQuery.data?.site_name}
|
||||
title="登录到您的账号"
|
||||
description="欢迎回来，请输入您的账号信息继续。"
|
||||
/>
|
||||
|
||||
<div className="flex flex-col gap-5 [@media(max-height:700px)]:gap-3">
|
||||
<FieldGroup className="gap-4 [@media(max-height:700px)]:gap-3">
|
||||
<Field className="gap-1.5">
|
||||
<FieldLabel htmlFor="username">
|
||||
邮箱或用户名 <span className="text-destructive">*</span>
|
||||
</FieldLabel>
|
||||
<Input
|
||||
id="username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="输入邮箱或用户名"
|
||||
autoComplete="username"
|
||||
className="h-10 text-sm [@media(max-height:700px)]:h-9"
|
||||
onKeyDown={(e) => e.key === "Enter" && handlePasswordLogin()}
|
||||
/>
|
||||
</Field>
|
||||
<Field className="gap-1.5">
|
||||
<FieldLabel htmlFor="password">
|
||||
密码 <span className="text-destructive">*</span>
|
||||
</FieldLabel>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="输入您的密码"
|
||||
autoComplete="current-password"
|
||||
className="h-10 pr-11 text-sm [@media(max-height:700px)]:h-9"
|
||||
onKeyDown={(e) => e.key === "Enter" && handlePasswordLogin()}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
aria-label={showPassword ? "隐藏密码" : "显示密码"}
|
||||
className="absolute right-1.5 top-1/2 -translate-y-1/2 text-muted-foreground"
|
||||
onClick={() => setShowPassword((visible) => !visible)}
|
||||
>
|
||||
{showPassword ? <EyeOffIcon /> : <EyeIcon />}
|
||||
</Button>
|
||||
</div>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
{/* Cap 人机验证 */}
|
||||
{capEnabled && (
|
||||
<CapWidget
|
||||
key={capResetKey}
|
||||
onToken={handleCapToken}
|
||||
onError={handleCapError}
|
||||
autoStart={capAutoSolve}
|
||||
/>
|
||||
)}
|
||||
|
||||
{errorMessage ? (
|
||||
<div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
|
||||
{errorMessage}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
className="h-10 w-full [@media(max-height:700px)]:h-9"
|
||||
variant="auth"
|
||||
onClick={handlePasswordLogin}
|
||||
disabled={loginDisabled}
|
||||
>
|
||||
{loginMutation.isPending ? (
|
||||
<>
|
||||
<Spinner />
|
||||
登录中...
|
||||
</>
|
||||
) : (
|
||||
"登录"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{authSources.length > 0 ? (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Separator className="flex-1" />
|
||||
<span className="text-xs text-muted-foreground">或者使用</span>
|
||||
<Separator className="flex-1" />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
{authSources.map((source) => (
|
||||
<Button
|
||||
key={source.id}
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="h-10 [@media(max-height:700px)]:h-9"
|
||||
onClick={() => void handleOAuthLogin(source.name)}
|
||||
>
|
||||
{source.display_name || source.name} 登录
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{registrationEnabled && (
|
||||
<div className="text-center text-sm text-muted-foreground">
|
||||
还没有账号？{" "}
|
||||
<Link href="/register" className="font-medium text-foreground underline underline-offset-4">
|
||||
立即注册
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
"use client"
|
||||
|
||||
import {useCallback, useEffect, useRef, useState} from "react"
|
||||
import {AnimatePresence, motion} from "motion/react"
|
||||
import {useRouter, useSearchParams} from "next/navigation"
|
||||
import {toast} from "sonner"
|
||||
import {Spinner} from "@/components/ui/spinner"
|
||||
import {LoginForm} from "@/components/auth/login-form"
|
||||
import {AuthShell} from "@/components/auth/auth-shell"
|
||||
import {Check} from "lucide-react"
|
||||
|
||||
import {AuthService} from "@/lib/services/auth"
|
||||
import {useAuth} from "@/components/providers/auth-provider"
|
||||
import {safeRedirectTarget} from "@/lib/utils"
|
||||
|
||||
|
||||
/**
|
||||
* 登录页面组件
|
||||
* 显示登录表单和登录按钮
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <LoginPage />
|
||||
* ```
|
||||
* @returns {React.ReactNode} 登录页面组件
|
||||
*/
|
||||
export function LoginPage() {
|
||||
const router = useRouter()
|
||||
const searchParams = useSearchParams()
|
||||
const { user, loading, setUser } = useAuth()
|
||||
const [showOTP, setShowOTP] = useState(false)
|
||||
|
||||
/* 处理OAuth回调 */
|
||||
const isOAuthCallback = !!(searchParams.get('state') && searchParams.get('code'))
|
||||
const [isProcessingCallback, setIsProcessingCallback] = useState(isOAuthCallback)
|
||||
const isCheckingSession = !isOAuthCallback && loading
|
||||
|
||||
const [loginSuccess, setLoginSuccess] = useState(false)
|
||||
const redirectedRef = useRef(false)
|
||||
const callbackProcessedRef = useRef(false)
|
||||
|
||||
const resolveRedirectTarget = useCallback(() => {
|
||||
const callbackUrl = searchParams.get('callbackUrl')
|
||||
const storedRedirect = sessionStorage.getItem('redirect_after_login')
|
||||
const target = callbackUrl || storedRedirect || '/'
|
||||
|
||||
if (storedRedirect) {
|
||||
sessionStorage.removeItem('redirect_after_login')
|
||||
}
|
||||
|
||||
return safeRedirectTarget(target)
|
||||
}, [searchParams])
|
||||
|
||||
const resolveRedirectTargetRef = useRef(resolveRedirectTarget)
|
||||
useEffect(() => {
|
||||
resolveRedirectTargetRef.current = resolveRedirectTarget
|
||||
}, [resolveRedirectTarget])
|
||||
|
||||
|
||||
/* 登录页兜底：已登录用户直接跳转 */
|
||||
useEffect(() => {
|
||||
const state = searchParams.get('state')
|
||||
const code = searchParams.get('code')
|
||||
|
||||
if ((state && code) || loading || !user) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!redirectedRef.current) {
|
||||
redirectedRef.current = true
|
||||
router.replace(resolveRedirectTargetRef.current())
|
||||
}
|
||||
}, [loading, router, searchParams, user])
|
||||
|
||||
/* 回调逻辑 */
|
||||
useEffect(() => {
|
||||
const handleOAuthCallback = async () => {
|
||||
const state = searchParams.get('state')
|
||||
const code = searchParams.get('code')
|
||||
|
||||
if (state && code) {
|
||||
if (callbackProcessedRef.current) return
|
||||
callbackProcessedRef.current = true
|
||||
|
||||
setIsProcessingCallback(true)
|
||||
try {
|
||||
const result = await AuthService.handleCallback({ state, code })
|
||||
if (result.status === "need_bind") {
|
||||
toast.info("您的第三方账号未绑定本地账号，系统已关闭注册。请登录已有本地账号进行绑定。")
|
||||
setIsProcessingCallback(false)
|
||||
router.replace('/login')
|
||||
return
|
||||
}
|
||||
if (result.user) {
|
||||
setUser(result.user)
|
||||
}
|
||||
setLoginSuccess(true)
|
||||
toast.success(result.status === "bound" ? "绑定成功" : "登录成功")
|
||||
|
||||
setTimeout(() => {
|
||||
if (!redirectedRef.current) {
|
||||
redirectedRef.current = true
|
||||
router.replace(resolveRedirectTargetRef.current())
|
||||
}
|
||||
}, 1500)
|
||||
} catch (error) {
|
||||
console.error('OAuth callback error:', error)
|
||||
toast.error(error instanceof Error ? error.message : "登录失败，请重试")
|
||||
setIsProcessingCallback(false)
|
||||
router.replace('/login')
|
||||
}
|
||||
}
|
||||
}
|
||||
handleOAuthCallback()
|
||||
}, [router, searchParams, setUser])
|
||||
|
||||
return (
|
||||
<AuthShell wide={showOTP}>
|
||||
<div className="w-full">
|
||||
<AnimatePresence mode="wait">
|
||||
{isProcessingCallback || isCheckingSession ? (
|
||||
<motion.div
|
||||
key={isProcessingCallback ? "processing" : "session-check"}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="w-full"
|
||||
>
|
||||
{isCheckingSession ? (
|
||||
<div className="flex flex-col items-center justify-center gap-4 py-16">
|
||||
<div className="relative">
|
||||
<Spinner className="size-8" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 text-center">
|
||||
<h3 className="font-semibold tracking-tight text-foreground">正在检查登录状态</h3>
|
||||
<p className="text-xs text-muted-foreground">请稍候，我们正在确认当前会话...</p>
|
||||
</div>
|
||||
</div>
|
||||
) : loginSuccess ? (
|
||||
<div className="flex flex-col items-center justify-center gap-4 py-16">
|
||||
<motion.div
|
||||
initial={{ scale: 0.5, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 20 }}
|
||||
className="flex size-8 items-center justify-center rounded-full bg-primary/10 text-primary ring-1 ring-primary/20"
|
||||
>
|
||||
<Check className="size-6" strokeWidth={3} />
|
||||
</motion.div>
|
||||
<div className="flex flex-col gap-2 text-center">
|
||||
<h3 className="font-semibold tracking-tight text-foreground">登录成功</h3>
|
||||
<p className="text-xs text-muted-foreground">正在跳转至控制台...</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center gap-4 py-16">
|
||||
<div className="relative">
|
||||
<Spinner className="size-8" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 text-center">
|
||||
<h3 className="font-semibold tracking-tight text-foreground">正在验证凭据</h3>
|
||||
<p className="text-xs text-muted-foreground">请稍候，我们正在为您建立安全会话...</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="login-form-wrapper"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="w-full"
|
||||
>
|
||||
<LoginForm onOTPStateChange={setShowOTP} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</AuthShell>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import {RefreshCwIcon} from "lucide-react"
|
||||
|
||||
import {Button} from "@/components/ui/button"
|
||||
import {Field, FieldLabel} from "@/components/ui/field"
|
||||
import {InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot,} from "@/components/ui/input-otp"
|
||||
import {AuthHeading} from "@/components/auth/auth-shell"
|
||||
import {cn} from "@/lib/utils"
|
||||
|
||||
interface OTPFormProps {
|
||||
code: string
|
||||
setCode: (val: string) => void
|
||||
loginCodeTip: React.ReactNode
|
||||
loginCooldown: number
|
||||
isPending: boolean
|
||||
onResend: () => void
|
||||
onSubmit: () => void
|
||||
}
|
||||
|
||||
export function OTPForm({
|
||||
code,
|
||||
setCode,
|
||||
loginCodeTip,
|
||||
loginCooldown,
|
||||
isPending,
|
||||
onResend,
|
||||
onSubmit,
|
||||
}: OTPFormProps) {
|
||||
return (
|
||||
<div className="flex flex-col gap-6 [@media(max-height:700px)]:gap-4">
|
||||
<AuthHeading
|
||||
title="验证您的登录"
|
||||
description="输入发送到安全邮箱的 6 位验证码。"
|
||||
/>
|
||||
{loginCodeTip ? (
|
||||
<p className="text-sm leading-6 text-muted-foreground">{loginCodeTip}</p>
|
||||
) : null}
|
||||
<div className="flex flex-col gap-5 [@media(max-height:700px)]:gap-3">
|
||||
<Field className="gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<FieldLabel htmlFor="otp-verification" className="text-sm font-medium">
|
||||
验证码
|
||||
</FieldLabel>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
type="button"
|
||||
onClick={onResend}
|
||||
disabled={loginCooldown > 0 || isPending}
|
||||
className="h-8 text-xs"
|
||||
>
|
||||
<RefreshCwIcon className={cn(isPending && "animate-spin")} />
|
||||
{loginCooldown > 0 ? `${loginCooldown}秒后重发` : "重新发送"}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex justify-start">
|
||||
<InputOTP
|
||||
maxLength={6}
|
||||
id="otp-verification"
|
||||
required
|
||||
value={code}
|
||||
onChange={setCode}
|
||||
onComplete={onSubmit}
|
||||
disabled={isPending}
|
||||
>
|
||||
<InputOTPGroup className="*:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
|
||||
<InputOTPSlot index={0} />
|
||||
<InputOTPSlot index={1} />
|
||||
<InputOTPSlot index={2} />
|
||||
</InputOTPGroup>
|
||||
<InputOTPSeparator className="mx-2" />
|
||||
<InputOTPGroup className="*:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
|
||||
<InputOTPSlot index={3} />
|
||||
<InputOTPSlot index={4} />
|
||||
<InputOTPSlot index={5} />
|
||||
</InputOTPGroup>
|
||||
</InputOTP>
|
||||
</div>
|
||||
</Field>
|
||||
<Button
|
||||
type="button"
|
||||
className="h-10 w-full [@media(max-height:700px)]:h-9"
|
||||
variant="auth"
|
||||
onClick={onSubmit}
|
||||
disabled={isPending || code.length < 6}
|
||||
>
|
||||
{isPending ? "验证中..." : "验证"}
|
||||
</Button>
|
||||
<div className="text-center text-sm text-muted-foreground">
|
||||
遇到登录问题？{" "}
|
||||
<a
|
||||
href="#"
|
||||
className="underline underline-offset-4 transition-colors hover:text-primary"
|
||||
>
|
||||
联系客服
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,376 @@
|
||||
"use client"
|
||||
|
||||
import {useEffect, useMemo, useRef, useState} from "react"
|
||||
import {useMutation, useQuery} from "@tanstack/react-query"
|
||||
import {useRouter, useSearchParams} from "next/navigation"
|
||||
import {toast} from "sonner"
|
||||
import Link from "next/link"
|
||||
|
||||
import {useAuth} from "@/components/providers/auth-provider"
|
||||
import {Button} from "@/components/ui/button"
|
||||
import {Input} from "@/components/ui/input"
|
||||
import {Spinner} from "@/components/ui/spinner"
|
||||
import {Field, FieldGroup, FieldLabel} from "@/components/ui/field"
|
||||
import {AuthHeading} from "@/components/auth/auth-shell"
|
||||
import {CapWidget} from "@/components/auth/cap-widget"
|
||||
import {AuthService} from "@/lib/services/auth"
|
||||
import {ConfigService} from "@/lib/services/config"
|
||||
import type {RegisterRequest} from "@/lib/services/auth/types"
|
||||
import {safeRedirectTarget} from "@/lib/utils"
|
||||
|
||||
function getRedirectTarget(searchParams: ReturnType<typeof useSearchParams>) {
|
||||
const callbackUrl = searchParams.get("callbackUrl")
|
||||
const storedRedirect =
|
||||
typeof window === "undefined"
|
||||
? null
|
||||
: sessionStorage.getItem("redirect_after_login")
|
||||
return safeRedirectTarget(callbackUrl || storedRedirect || "/")
|
||||
}
|
||||
|
||||
|
||||
function configBool(value: string | undefined, fallback: boolean) {
|
||||
if (value === undefined) return fallback
|
||||
return value === "true"
|
||||
}
|
||||
|
||||
export function RegisterForm() {
|
||||
const router = useRouter()
|
||||
const searchParams = useSearchParams()
|
||||
const { setUser } = useAuth()
|
||||
const [username, setUsername] = useState("")
|
||||
const [password, setPassword] = useState("")
|
||||
const [nickname, setNickname] = useState("")
|
||||
const [email, setEmail] = useState("")
|
||||
const [code, setCode] = useState("")
|
||||
const [registerCooldown, setRegisterCooldown] = useState(0)
|
||||
const [errorMessage, setErrorMessage] = useState("")
|
||||
|
||||
useEffect(() => {
|
||||
if (registerCooldown > 0) {
|
||||
const timer = setTimeout(() => setRegisterCooldown(registerCooldown - 1), 1000)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [registerCooldown])
|
||||
|
||||
const publicConfigQuery = useQuery({
|
||||
queryKey: ["public-config"],
|
||||
queryFn: () => ConfigService.getPublicConfig(),
|
||||
})
|
||||
|
||||
const redirectTarget = useMemo(
|
||||
() => getRedirectTarget(searchParams),
|
||||
[searchParams],
|
||||
)
|
||||
|
||||
const registrationEnabled =
|
||||
configBool(publicConfigQuery.data?.registration_enabled, false) &&
|
||||
configBool(publicConfigQuery.data?.password_register_enabled, false)
|
||||
|
||||
const emailRegisterEnabled = configBool(publicConfigQuery.data?.email_register_verification_enabled, false)
|
||||
|
||||
const capEnabled = configBool(publicConfigQuery.data?.cap_login_enabled, true)
|
||||
const capAutoSolve = configBool(publicConfigQuery.data?.cap_auto_solve, true)
|
||||
|
||||
const [capScope, setCapScope] = useState<'send_email_code' | 'register'>('send_email_code')
|
||||
|
||||
// 监听 emailRegisterEnabled 改变初始 scope
|
||||
useEffect(() => {
|
||||
setCapScope(emailRegisterEnabled ? 'send_email_code' : 'register')
|
||||
}, [emailRegisterEnabled])
|
||||
|
||||
const capTokenRef = useRef<string | null>(null)
|
||||
const [capReady, setCapReady] = useState(false)
|
||||
const [capError, setCapError] = useState(false)
|
||||
const [capResetKey, setCapResetKey] = useState(0)
|
||||
|
||||
const handleCapToken = (token: string) => {
|
||||
capTokenRef.current = token
|
||||
setCapReady(true)
|
||||
setCapError(false)
|
||||
}
|
||||
|
||||
const handleCapError = () => {
|
||||
capTokenRef.current = null
|
||||
setCapReady(false)
|
||||
setCapError(true)
|
||||
}
|
||||
|
||||
// Redirect to login if registration is closed
|
||||
useEffect(() => {
|
||||
if (publicConfigQuery.isSuccess && !registrationEnabled) {
|
||||
toast.error("系统注册功能已关闭")
|
||||
router.replace("/login")
|
||||
}
|
||||
}, [publicConfigQuery.isSuccess, registrationEnabled, router])
|
||||
|
||||
const registerMutation = useMutation({
|
||||
mutationFn: (req: RegisterRequest) => {
|
||||
const headers: Record<string, string> = {}
|
||||
if (capEnabled && capTokenRef.current) {
|
||||
headers["X-Cap-Token"] = capTokenRef.current
|
||||
capTokenRef.current = null
|
||||
setCapReady(false)
|
||||
}
|
||||
return AuthService.register(req, Object.keys(headers).length ? headers : undefined)
|
||||
},
|
||||
onSuccess: (user) => {
|
||||
setUser(user)
|
||||
router.replace(redirectTarget)
|
||||
toast.success("注册并登录成功")
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
setErrorMessage(error.message || "注册失败，请重试")
|
||||
if (capEnabled) {
|
||||
capTokenRef.current = null
|
||||
setCapReady(false)
|
||||
setCapResetKey((key) => key + 1)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const sendRegisterCodeMutation = useMutation({
|
||||
mutationFn: (targetEmail: string) => {
|
||||
const headers: Record<string, string> = {}
|
||||
if (capEnabled && capTokenRef.current) {
|
||||
headers["X-Cap-Token"] = capTokenRef.current
|
||||
capTokenRef.current = null
|
||||
setCapReady(false)
|
||||
}
|
||||
return AuthService.sendEmailCode(targetEmail, "register", Object.keys(headers).length ? headers : undefined)
|
||||
},
|
||||
onSuccess: () => {
|
||||
setRegisterCooldown(60)
|
||||
toast.success("验证码已发送至您的邮箱，请查收")
|
||||
if (capEnabled) {
|
||||
setCapScope('register')
|
||||
capTokenRef.current = null
|
||||
setCapReady(false)
|
||||
setCapResetKey((key) => key + 1)
|
||||
}
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
toast.error(error.message || "发送验证码失败，请重试")
|
||||
if (capEnabled) {
|
||||
capTokenRef.current = null
|
||||
setCapReady(false)
|
||||
setCapResetKey((key) => key + 1)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const registerDisabled =
|
||||
registerMutation.isPending ||
|
||||
(capEnabled && capScope === 'register' && capAutoSolve && !capReady && !capError)
|
||||
|
||||
const sendCodeDisabled =
|
||||
registerCooldown > 0 ||
|
||||
sendRegisterCodeMutation.isPending ||
|
||||
(capEnabled && capScope === 'send_email_code' && capAutoSolve && !capReady && !capError)
|
||||
|
||||
const handleSendRegisterCode = () => {
|
||||
const trimmedEmail = email.trim()
|
||||
if (!trimmedEmail) {
|
||||
toast.error("请先输入邮箱地址")
|
||||
return
|
||||
}
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
if (!emailRegex.test(trimmedEmail)) {
|
||||
toast.error("请输入有效的邮箱地址")
|
||||
return
|
||||
}
|
||||
if (capEnabled && capScope === 'send_email_code' && !capReady) {
|
||||
toast.error(
|
||||
capAutoSolve
|
||||
? "人机验证尚未完成，请稍候…"
|
||||
: "请先点击「开始验证」完成人机验证",
|
||||
)
|
||||
return
|
||||
}
|
||||
sendRegisterCodeMutation.mutate(trimmedEmail)
|
||||
}
|
||||
|
||||
const handleRegister = () => {
|
||||
setErrorMessage("")
|
||||
if (!username.trim() || !password) {
|
||||
toast.error("用户名和密码不能为空")
|
||||
return
|
||||
}
|
||||
if (password.length < 8) {
|
||||
toast.error("密码长度不能少于 8 位")
|
||||
return
|
||||
}
|
||||
const trimmedEmail = email.trim()
|
||||
if (!trimmedEmail) {
|
||||
toast.error("邮箱不能为空")
|
||||
return
|
||||
}
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
if (!emailRegex.test(trimmedEmail)) {
|
||||
toast.error("请输入有效的邮箱地址")
|
||||
return
|
||||
}
|
||||
if (emailRegisterEnabled && !code.trim()) {
|
||||
toast.error("验证码不能为空")
|
||||
return
|
||||
}
|
||||
if (capEnabled && capScope === 'register' && !capReady) {
|
||||
toast.error(
|
||||
capAutoSolve
|
||||
? "人机验证尚未完成，请稍候…"
|
||||
: "请先点击「开始验证」完成人机验证",
|
||||
)
|
||||
return
|
||||
}
|
||||
registerMutation.mutate({
|
||||
username: username.trim(),
|
||||
password,
|
||||
nickname: nickname.trim() || undefined,
|
||||
email: trimmedEmail,
|
||||
code: code.trim() || undefined,
|
||||
})
|
||||
}
|
||||
|
||||
if (publicConfigQuery.isPending) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-24">
|
||||
<Spinner />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!registrationEnabled) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 [@media(max-height:700px)]:gap-4">
|
||||
<AuthHeading
|
||||
siteName={publicConfigQuery.data?.site_name}
|
||||
title="创建您的账号"
|
||||
description="填写以下信息，开始使用平台服务。"
|
||||
/>
|
||||
|
||||
<div className="flex flex-col gap-5 [@media(max-height:700px)]:gap-3">
|
||||
<FieldGroup className="gap-4 [@media(min-width:500px)]:grid [@media(min-width:500px)]:grid-cols-2 [@media(max-height:700px)]:gap-3">
|
||||
<Field className="gap-1.5">
|
||||
<FieldLabel htmlFor="username">用户名 <span className="text-destructive">*</span></FieldLabel>
|
||||
<Input
|
||||
id="username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="请输入用户名"
|
||||
autoComplete="username"
|
||||
className="h-10 text-sm [@media(max-height:700px)]:h-9"
|
||||
onKeyDown={(e) => e.key === "Enter" && handleRegister()}
|
||||
/>
|
||||
</Field>
|
||||
<Field className="gap-1.5">
|
||||
<FieldLabel htmlFor="nickname">
|
||||
昵称
|
||||
<span className="ml-1 text-xs font-normal text-muted-foreground">（可选）</span>
|
||||
</FieldLabel>
|
||||
<Input
|
||||
id="nickname"
|
||||
value={nickname}
|
||||
onChange={(e) => setNickname(e.target.value)}
|
||||
placeholder="请输入昵称"
|
||||
autoComplete="nickname"
|
||||
className="h-10 text-sm [@media(max-height:700px)]:h-9"
|
||||
onKeyDown={(e) => e.key === "Enter" && handleRegister()}
|
||||
/>
|
||||
</Field>
|
||||
<Field className="gap-1.5">
|
||||
<FieldLabel htmlFor="email">电子邮箱 <span className="text-destructive">*</span></FieldLabel>
|
||||
<Input
|
||||
id="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="请输入电子邮箱"
|
||||
autoComplete="email"
|
||||
className="h-10 text-sm [@media(max-height:700px)]:h-9"
|
||||
onKeyDown={(e) => e.key === "Enter" && handleRegister()}
|
||||
/>
|
||||
</Field>
|
||||
<Field className="gap-1.5">
|
||||
<FieldLabel htmlFor="password">密码 <span className="text-destructive">*</span></FieldLabel>
|
||||
<Input
|
||||
id="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
type="password"
|
||||
placeholder="请输入密码（至少 8 位）"
|
||||
autoComplete="new-password"
|
||||
className="h-10 text-sm [@media(max-height:700px)]:h-9"
|
||||
onKeyDown={(e) => e.key === "Enter" && handleRegister()}
|
||||
/>
|
||||
</Field>
|
||||
{emailRegisterEnabled && (
|
||||
<Field className="gap-1.5 [@media(min-width:500px)]:col-span-2">
|
||||
<FieldLabel htmlFor="code">邮箱验证码 <span className="text-destructive">*</span></FieldLabel>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="code"
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
placeholder="请输入 6 位邮箱验证码"
|
||||
maxLength={6}
|
||||
className="h-10 flex-1 text-sm [@media(max-height:700px)]:h-9"
|
||||
onKeyDown={(e) => e.key === "Enter" && handleRegister()}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleSendRegisterCode}
|
||||
disabled={sendCodeDisabled}
|
||||
className="h-10 w-[120px] text-xs [@media(max-height:700px)]:h-9"
|
||||
>
|
||||
{registerCooldown > 0 ? `${registerCooldown}秒后重发` : "获取验证码"}
|
||||
</Button>
|
||||
</div>
|
||||
</Field>
|
||||
)}
|
||||
</FieldGroup>
|
||||
|
||||
{capEnabled && (
|
||||
<CapWidget
|
||||
key={capResetKey}
|
||||
scope={capScope}
|
||||
onToken={handleCapToken}
|
||||
onError={handleCapError}
|
||||
autoStart={capAutoSolve}
|
||||
/>
|
||||
)}
|
||||
|
||||
{errorMessage ? (
|
||||
<div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
|
||||
{errorMessage}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
className="h-10 w-full [@media(max-height:700px)]:h-9"
|
||||
variant="auth"
|
||||
onClick={handleRegister}
|
||||
disabled={registerDisabled}
|
||||
>
|
||||
{registerMutation.isPending ? (
|
||||
<>
|
||||
<Spinner />
|
||||
注册中...
|
||||
</>
|
||||
) : (
|
||||
"创建账号"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-sm text-muted-foreground">
|
||||
已经有账号？{" "}
|
||||
<Link href="/login" className="font-medium text-foreground underline underline-offset-4">
|
||||
返回登录
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
"use client"
|
||||
|
||||
import {RegisterForm} from "@/components/auth/register-form"
|
||||
import {AuthShell} from "@/components/auth/auth-shell"
|
||||
|
||||
export function RegisterPage() {
|
||||
return (
|
||||
<AuthShell wide>
|
||||
<RegisterForm />
|
||||
</AuthShell>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
"use client"
|
||||
|
||||
import type {ReactNode} from "react"
|
||||
import {Loader2} from "lucide-react"
|
||||
|
||||
import {ErrorPage} from "@/components/layout/error"
|
||||
import {useUser} from "@/contexts/user-context"
|
||||
|
||||
type RequireAuthProps = {
|
||||
children: ReactNode
|
||||
fallback?: ReactNode
|
||||
minHeightClassName?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Guards page content until the session user is available.
|
||||
* Redirect to login is handled by the parent layout; this only covers the content slot.
|
||||
*/
|
||||
export function RequireAuth({
|
||||
children,
|
||||
fallback,
|
||||
minHeightClassName = "min-h-[400px]",
|
||||
}: RequireAuthProps) {
|
||||
const {user, loading} = useUser()
|
||||
|
||||
if (loading) {
|
||||
return fallback ?? (
|
||||
<div className={`flex items-center justify-center ${minHeightClassName}`}>
|
||||
<Loader2 className="size-6 animate-spin text-primary" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return null
|
||||
}
|
||||
|
||||
return <>{children}</>
|
||||
}
|
||||
|
||||
type RequireAdminAuthProps = {
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
/** Guards admin routes after the shared shell has rendered. */
|
||||
export function RequireAdminAuth({children}: RequireAdminAuthProps) {
|
||||
const {user, loading} = useUser()
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex min-h-[400px] items-center justify-center">
|
||||
<Loader2 className="size-6 animate-spin text-primary" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!user?.is_admin) {
|
||||
return (
|
||||
<ErrorPage
|
||||
title="访问被拒绝"
|
||||
message="您没有权限访问此页面"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return <>{children}</>
|
||||
}
|
||||
Reference in New Issue
Block a user