登录注册分开

frontend/app/(auth)/register/page.tsx

@@ -0,0 +1,10 @@
+import {Suspense} from "react"
+import {RegisterPage} from "@/components/auth/register-page"
+
+export default function Page() {
+  return (
+    <Suspense>
+      <RegisterPage />
+    </Suspense>
+  )
+}

frontend/components/auth/login-form.tsx

@@ -3,19 +3,19 @@
 import {useEffect, useMemo, useRef, useState} from "react"
 import {useMutation, useQuery} from "@tanstack/react-query"
 import {useRouter, useSearchParams} from "next/navigation"
-import {KeyRound, UserPlus} from "lucide-react"
+import {KeyRound} 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 {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"
+import type {LoginRequest} from "@/lib/services/auth/types"
 
 function getRedirectTarget(searchParams: ReturnType<typeof useSearchParams>) {
   const callbackUrl = searchParams.get("callbackUrl")
@@ -45,16 +45,12 @@ export function LoginForm() {
   const router = useRouter()
   const searchParams = useSearchParams()
   const { setUser } = useAuth()
-  const [mode, setMode] = useState<"login" | "register">("login")
   const [username, setUsername] = useState("")
   const [password, setPassword] = useState("")
-  const [nickname, setNickname] = useState("")
-  const [email, setEmail] = useState("")
   const [code, setCode] = useState("")
   const [showLoginCodeInput, setShowLoginCodeInput] = useState(false)
   const [maskedEmail, setMaskedEmail] = useState("")
   const [loginCooldown, setLoginCooldown] = useState(0)
-  const [registerCooldown, setRegisterCooldown] = useState(0)
   const [errorMessage, setErrorMessage] = useState("")
 
   useEffect(() => {
@@ -64,13 +60,6 @@ export function LoginForm() {
     }
   }, [loginCooldown])
 
-  useEffect(() => {
-    if (registerCooldown > 0) {
-      const timer = setTimeout(() => setRegisterCooldown(registerCooldown - 1), 1000)
-      return () => clearTimeout(timer)
-    }
-  }, [registerCooldown])
-
   // Cap token management — ref to hold latest token without triggering re-render
   const capTokenRef = useRef<string | null>(null)
   const [capReady, setCapReady] = useState(false)
@@ -110,6 +99,7 @@ export function LoginForm() {
     onSuccess: (user) => {
       setUser(user)
       router.replace(redirectTarget)
+      toast.success("登录成功")
     },
     onError: (error: Error) => {
       const errorMsg = error.message || ""
@@ -127,7 +117,7 @@ export function LoginForm() {
         return
       }
 
-      toast.error(errorMsg || "登录失败，请重试")
+      setErrorMessage(errorMsg || "登录失败，请重试")
       if (capEnabled) {
         capTokenRef.current = null
         setCapReady(false)
@@ -136,48 +126,12 @@ export function LoginForm() {
     },
   })
 
-  const registerMutation = useMutation({
-    mutationFn: (req: RegisterRequest) => services.auth.register(req),
-    onSuccess: (user) => {
-      setUser(user)
-      router.replace(redirectTarget)
-    },
-    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 handlePasswordLogin = () => {
     setErrorMessage("")
     const trimmedUsername = username.trim()
     if (!trimmedUsername || !password) {
       toast.error("账号或密码未填写完整", {
-        description: "请先输入账号和密码后再登录",
+        description: "请先输入账号 and 密码后再登录",
       })
       return
     }
@@ -204,23 +158,6 @@ export function LoginForm() {
     })
   }
 
-  const handleRegister = () => {
-    setErrorMessage("")
-    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,
-    })
-  }
-
   const handleOAuthLogin = async (sourceName: string) => {
     try {
       setErrorMessage("")
@@ -249,20 +186,23 @@ export function LoginForm() {
     configBool(publicConfigQuery.data?.password_register_enabled, true)
 
   const passwordLoginEnabled = configBool(publicConfigQuery.data?.password_login_enabled, true)
-  const emailRegisterEnabled = configBool(publicConfigQuery.data?.email_register_verification_enabled, false)
-
   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)
 
+  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>
+    )
+  }
+
   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">
@@ -272,122 +212,30 @@ export function LoginForm() {
           </h2>
         </div>
 
-        <Tabs value={mode} onValueChange={(value) => setMode(value as "login" | "register")}>
-          <TabsList className="grid w-full grid-cols-2">
-            <TabsTrigger value="login">登录</TabsTrigger>
-            <TabsTrigger value="register" disabled={!registrationEnabled}>
-              注册
-            </TabsTrigger>
-          </TabsList>
+        <div className="space-y-4 pt-2">
+          <div className="space-y-3">
+            <div className="space-y-2">
+              <Input
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                placeholder="用户名"
+                autoComplete="username"
+                onKeyDown={(e) => e.key === "Enter" && handlePasswordLogin()}
+              />
+              <Input
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                type="password"
+                placeholder="密码"
+                autoComplete="current-password"
+                onKeyDown={(e) => e.key === "Enter" && handlePasswordLogin()}
+              />
 
-          <TabsContent value="login" className="space-y-4 pt-4">
-            <div className="space-y-3">
-              <div className="space-y-2">
-                <Input
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
-                  placeholder="用户名"
-                  autoComplete="username"
-                  onKeyDown={(e) => e.key === "Enter" && handlePasswordLogin()}
-                />
-                <Input
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  type="password"
-                  placeholder="密码"
-                  autoComplete="current-password"
-                  onKeyDown={(e) => e.key === "Enter" && handlePasswordLogin()}
-                />
-
-                {showLoginCodeInput && (
-                  <div className="space-y-1.5 pt-1">
-                    <p className="text-[11px] text-muted-foreground leading-normal">
-                      已向您的安全邮箱 <span className="font-medium text-foreground">{maskedEmail}</span> 发送了登录验证码。
-                    </p>
-                    <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" && handlePasswordLogin()}
-                      />
-                      <Button
-                        type="button"
-                        variant="outline"
-                        onClick={handleResendLoginCode}
-                        disabled={loginCooldown > 0 || loginMutation.isPending}
-                        className="w-[120px] text-xs"
-                      >
-                        {loginCooldown > 0 ? `${loginCooldown}秒后重发` : "重新发送"}
-                      </Button>
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              {/* Cap 人机验证 */}
-              {capEnabled && (
-                <CapWidget
-                  key={capResetKey}
-                  onToken={handleCapToken}
-                  onError={handleCapError}
-                  autoStart={capAutoSolve}
-                />
-              )}
-
-              <Button
-                type="button"
-                className="w-full"
-                variant={"secondary"}
-                onClick={handlePasswordLogin}
-                disabled={loginDisabled}
-              >
-                {loginMutation.isPending ? (
-                  <>
-                    <Spinner className="mr-2" />
-                    登录中...
-                  </>
-                ) : (
-                  <>
-                    <KeyRound className="mr-2 size-4" />
-                    登录
-                  </>
-                )}
-              </Button>
-            </div>
-          </TabsContent>
-
-          <TabsContent value="register" className="space-y-4 pt-4">
-            <div className="space-y-3">
-              <div className="space-y-2">
-                <Input
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
-                  placeholder="用户名"
-                  autoComplete="username"
-                />
-                <Input
-                  value={nickname}
-                  onChange={(e) => setNickname(e.target.value)}
-                  placeholder="昵称（可选）"
-                  autoComplete="nickname"
-                />
-                <Input
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  type="password"
-                  placeholder="密码（至少 8 位）"
-                  autoComplete="new-password"
-                />
-                <Input
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  placeholder={emailRegisterEnabled ? "电子邮箱" : "电子邮箱（可选）"}
-                  autoComplete="email"
-                />
-                {emailRegisterEnabled && (
+              {showLoginCodeInput && (
+                <div className="space-y-1.5 pt-1">
+                  <p className="text-[11px] text-muted-foreground leading-normal">
+                    已向您的安全邮箱 <span className="font-medium text-foreground">{maskedEmail}</span> 发送了登录验证码。
+                  </p>
                   <div className="flex gap-2">
                     <Input
                       value={code}
@@ -395,69 +243,89 @@ export function LoginForm() {
                       placeholder="6 位邮箱验证码"
                       maxLength={6}
                       className="flex-1"
+                      onKeyDown={(e) => e.key === "Enter" && handlePasswordLogin()}
                     />
                     <Button
                       type="button"
                       variant="outline"
-                      onClick={handleSendRegisterCode}
-                      disabled={registerCooldown > 0 || sendRegisterCodeMutation.isPending}
+                      onClick={handleResendLoginCode}
+                      disabled={loginCooldown > 0 || loginMutation.isPending}
                       className="w-[120px] text-xs"
                     >
-                      {registerCooldown > 0 ? `${registerCooldown}秒后重发` : "获取验证码"}
+                      {loginCooldown > 0 ? `${loginCooldown}秒后重发` : "重新发送"}
                     </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={!registrationEnabled || registerMutation.isPending}
-              >
-                {registerMutation.isPending ? (
-                  <>
-                    <Spinner className="mr-2" />
-                    注册中...
-                  </>
-                ) : (
-                  <>
-                    <UserPlus className="mr-2 size-4" />
-                    创建账号
-                  </>
-                )}
-              </Button>
+              )}
             </div>
-          </TabsContent>
-        </Tabs>
 
-        <Separator />
+            {/* 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="w-full"
+              variant={"secondary"}
+              onClick={handlePasswordLogin}
+              disabled={loginDisabled}
+            >
+              {loginMutation.isPending ? (
+                <>
+                  <Spinner className="mr-2" />
+                  登录中...
+                </>
+              ) : (
+                <>
+                  <KeyRound className="mr-2 size-4" />
+                  登录
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
 
         {authSources.length > 0 ? (
-          authSources.map((source) => (
-            <div className="space-y-3" key={source.id}>
+          <>
+            <Separator />
+            <div className="space-y-3">
               <div className="grid gap-2">
-                <Button
-                  key={source.id}
-                  type="button"
-                  variant="outline"
-                  className="justify-start"
-                  onClick={() => void handleOAuthLogin(source.name)}
-                >
-                  {source.display_name || source.name} 登录
-                </Button>
+                {authSources.map((source) => (
+                  <Button
+                    key={source.id}
+                    type="button"
+                    variant="outline"
+                    className="justify-start"
+                    onClick={() => void handleOAuthLogin(source.name)}
+                  >
+                    {source.display_name || source.name} 登录
+                  </Button>
+                ))}
               </div>
             </div>
-          ))
+          </>
         ) : null}
 
+        {registrationEnabled && (
+          <div className="text-center text-xs text-muted-foreground mt-4">
+            Don't have an account?{" "}
+            <Link href="/register" className="font-semibold text-indigo-500 hover:text-indigo-600 transition-colors">
+              Sign up
+            </Link>
+          </div>
+        )}
       </CardContent>
     </Card>
   )

frontend/components/auth/register-form.tsx

@@ -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>
+  )
+}

frontend/components/auth/register-page.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import {motion} from "motion/react"
+import {RegisterForm} from "@/components/auth/register-form"
+import {AuroraBackground} from "@/components/ui/aurora-background"
+
+export function RegisterPage() {
+  return (
+    <AuroraBackground>
+      <motion.div
+        initial={{ opacity: 0, y: 40 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{
+          delay: 0.3,
+          duration: 0.8,
+          ease: "easeInOut",
+        }}
+        className="relative z-10 w-full max-w-sm px-4"
+      >
+        <RegisterForm />
+      </motion.div>
+    </AuroraBackground>
+  )
+}