mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-07 16:16:37 +08:00
登录注册分开
This commit is contained in:
ryan
@@ -0,0 +1,247 @@
|
||||
"use client"
|
||||
|
||||
import {useEffect, useMemo, useState} from "react"
|
||||
import {useMutation, useQuery} from "@tanstack/react-query"
|
||||
import {useRouter, useSearchParams} from "next/navigation"
|
||||
import {UserPlus} 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 {Spinner} from "@/components/ui/spinner"
|
||||
import {Card, CardContent} from "@/components/ui/card"
|
||||
import services from "@/lib/services"
|
||||
import type {RegisterRequest} from "@/lib/services/auth/types"
|
||||
|
||||
function getRedirectTarget(searchParams: ReturnType<typeof useSearchParams>) {
|
||||
const callbackUrl = searchParams.get("callbackUrl")
|
||||
const storedRedirect = sessionStorage.getItem("redirect_after_login")
|
||||
return callbackUrl || storedRedirect || "/home"
|
||||
}
|
||||
|
||||
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: () => services.config.getPublicConfig(),
|
||||
})
|
||||
|
||||
const redirectTarget = useMemo(
|
||||
() => getRedirectTarget(searchParams),
|
||||
[searchParams],
|
||||
)
|
||||
|
||||
const registrationEnabled =
|
||||
configBool(publicConfigQuery.data?.registration_enabled, true) &&
|
||||
configBool(publicConfigQuery.data?.password_register_enabled, true)
|
||||
|
||||
const emailRegisterEnabled = configBool(publicConfigQuery.data?.email_register_verification_enabled, false)
|
||||
|
||||
// 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) => services.auth.register(req),
|
||||
onSuccess: (user) => {
|
||||
setUser(user)
|
||||
router.replace(redirectTarget)
|
||||
toast.success("注册并登录成功")
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
setErrorMessage(error.message || "注册失败，请重试")
|
||||
},
|
||||
})
|
||||
|
||||
const sendRegisterCodeMutation = useMutation({
|
||||
mutationFn: (targetEmail: string) => services.auth.sendEmailCode(targetEmail, "register"),
|
||||
onSuccess: () => {
|
||||
setRegisterCooldown(60)
|
||||
toast.success("验证码已发送至您的邮箱，请查收")
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
toast.error(error.message || "发送验证码失败，请重试")
|
||||
},
|
||||
})
|
||||
|
||||
const handleSendRegisterCode = () => {
|
||||
const trimmedEmail = email.trim()
|
||||
if (!trimmedEmail) {
|
||||
toast.error("请先输入邮箱地址")
|
||||
return
|
||||
}
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
if (!emailRegex.test(trimmedEmail)) {
|
||||
toast.error("请输入有效的邮箱地址")
|
||||
return
|
||||
}
|
||||
sendRegisterCodeMutation.mutate(trimmedEmail)
|
||||
}
|
||||
|
||||
const handleRegister = () => {
|
||||
setErrorMessage("")
|
||||
if (!username.trim() || !password) {
|
||||
toast.error("用户名和密码不能为空")
|
||||
return
|
||||
}
|
||||
if (password.length < 8) {
|
||||
toast.error("密码长度不能少于 8 位")
|
||||
return
|
||||
}
|
||||
if (emailRegisterEnabled) {
|
||||
if (!email.trim() || !code.trim()) {
|
||||
toast.error("邮箱和验证码不能为空")
|
||||
return
|
||||
}
|
||||
}
|
||||
registerMutation.mutate({
|
||||
username: username.trim(),
|
||||
password,
|
||||
nickname: nickname.trim() || undefined,
|
||||
email: email.trim() || undefined,
|
||||
code: code.trim() || undefined,
|
||||
})
|
||||
}
|
||||
|
||||
if (publicConfigQuery.isPending) {
|
||||
return (
|
||||
<Card className="w-full border-border/60 bg-background/80 shadow-2xl backdrop-blur">
|
||||
<CardContent className="flex justify-center items-center py-12">
|
||||
<Spinner />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
if (!registrationEnabled) {
|
||||
return null
|
||||
}
|
||||
|
||||
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">
|
||||
<div className="space-y-2 text-center">
|
||||
<h2 className="text-xl font-semibold tracking-tight text-foreground">
|
||||
创建账号
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 pt-2">
|
||||
<div className="space-y-2">
|
||||
<Input
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="用户名"
|
||||
autoComplete="username"
|
||||
onKeyDown={(e) => e.key === "Enter" && handleRegister()}
|
||||
/>
|
||||
<Input
|
||||
value={nickname}
|
||||
onChange={(e) => setNickname(e.target.value)}
|
||||
placeholder="昵称（可选）"
|
||||
autoComplete="nickname"
|
||||
onKeyDown={(e) => e.key === "Enter" && handleRegister()}
|
||||
/>
|
||||
<Input
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
type="password"
|
||||
placeholder="密码（至少 8 位）"
|
||||
autoComplete="new-password"
|
||||
onKeyDown={(e) => e.key === "Enter" && handleRegister()}
|
||||
/>
|
||||
<Input
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder={emailRegisterEnabled ? "电子邮箱" : "电子邮箱（可选）"}
|
||||
autoComplete="email"
|
||||
onKeyDown={(e) => e.key === "Enter" && handleRegister()}
|
||||
/>
|
||||
{emailRegisterEnabled && (
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
placeholder="6 位邮箱验证码"
|
||||
maxLength={6}
|
||||
className="flex-1"
|
||||
onKeyDown={(e) => e.key === "Enter" && handleRegister()}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleSendRegisterCode}
|
||||
disabled={registerCooldown > 0 || sendRegisterCodeMutation.isPending}
|
||||
className="w-[120px] text-xs"
|
||||
>
|
||||
{registerCooldown > 0 ? `${registerCooldown}秒后重发` : "获取验证码"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{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="w-full"
|
||||
variant="secondary"
|
||||
onClick={handleRegister}
|
||||
disabled={registerMutation.isPending}
|
||||
>
|
||||
{registerMutation.isPending ? (
|
||||
<>
|
||||
<Spinner className="mr-2" />
|
||||
注册中...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<UserPlus className="mr-2 size-4" />
|
||||
创建账号
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-xs text-muted-foreground mt-4">
|
||||
Already have an account?{" "}
|
||||
<Link href="/login" className="font-semibold text-indigo-500 hover:text-indigo-600 transition-colors">
|
||||
Sign in
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user