邮箱注册要求

frontend/components/auth/login-form.tsx

@@ -10,10 +10,12 @@ 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 {Label} from "@/components/ui/label"
 import {Separator} from "@/components/ui/separator"
 import {Spinner} from "@/components/ui/spinner"
 import {Card, CardContent} from "@/components/ui/card"
 import {CapWidget} from "@/components/auth/cap-widget"
+import {OTPForm} from "./otp-form"
 import services from "@/lib/services"
 import type {LoginRequest} from "@/lib/services/auth/types"
 
@@ -49,9 +51,9 @@ export function LoginForm() {
   const [password, setPassword] = useState("")
   const [code, setCode] = useState("")
   const [showLoginCodeInput, setShowLoginCodeInput] = useState(false)
-  const [maskedEmail, setMaskedEmail] = useState("")
   const [loginCooldown, setLoginCooldown] = useState(0)
   const [errorMessage, setErrorMessage] = useState("")
+  const [loginCodeTip, setLoginCodeTip] = useState<React.ReactNode>(null)
 
   useEffect(() => {
     if (loginCooldown > 0) {
@@ -105,7 +107,11 @@ export function LoginForm() {
       const errorMsg = error.message || ""
       if (errorMsg.startsWith("need_email_code:")) {
         const emailMasked = errorMsg.substring("need_email_code:".length)
-        setMaskedEmail(emailMasked)
+        setLoginCodeTip(
+          <>
+            已向您的安全邮箱 <span className="font-medium text-foreground">{emailMasked}</span> 发送了登录验证码。
+          </>
+        )
         setShowLoginCodeInput(true)
         setLoginCooldown(60)
         toast.success("登录验证码已发送至您的邮箱，请注意查收")
@@ -117,6 +123,22 @@ export function LoginForm() {
         return
       }
 
+      if (errorMsg.startsWith("smtp_invalid:")) {
+        const tip = errorMsg.substring("smtp_invalid:".length)
+        setLoginCodeTip(
+          <span className="text-amber-500 font-medium">{tip}</span>
+        )
+        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
@@ -130,8 +152,8 @@ export function LoginForm() {
     setErrorMessage("")
     const trimmedUsername = username.trim()
     if (!trimmedUsername || !password) {
-      toast.error("账号或密码未填写完整", {
-        description: "请先输入账号 and 密码后再登录",
+      toast.error("邮箱/用户名或密码未填写完整", {
+        description: "请先输入邮箱/用户名和密码后再登录",
       })
       return
     }
@@ -203,6 +225,20 @@ export function LoginForm() {
     )
   }
 
+  if (showLoginCodeInput) {
+    return (
+      <OTPForm
+        code={code}
+        setCode={setCode}
+        loginCodeTip={loginCodeTip}
+        loginCooldown={loginCooldown}
+        isPending={loginMutation.isPending}
+        onResend={handleResendLoginCode}
+        onSubmit={handlePasswordLogin}
+      />
+    )
+  }
+
   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">
@@ -214,49 +250,31 @@ export function LoginForm() {
 
         <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()}
-              />
+            <div className="space-y-3">
+              <div className="space-y-1.5">
+                <Label htmlFor="username">邮箱/用户名</Label>
+                <Input
+                  id="username"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  placeholder="请输入邮箱或用户名"
+                  autoComplete="username"
+                  onKeyDown={(e) => e.key === "Enter" && handlePasswordLogin()}
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label htmlFor="password">密码</Label>
+                <Input
+                  id="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  type="password"
+                  placeholder="请输入密码"
+                  autoComplete="current-password"
+                  onKeyDown={(e) => e.key === "Enter" && handlePasswordLogin()}
+                />
+              </div>
 
-              {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 人机验证 */}
@@ -320,7 +338,7 @@ export function LoginForm() {
 
         {registrationEnabled && (
           <div className="text-center text-xs text-muted-foreground mt-4">
-            Don't have an account?{" "}
+            {"Don't have an account?"}{" "}
             <Link href="/register" className="font-semibold text-indigo-500 hover:text-indigo-600 transition-colors">
               Sign up
             </Link>

frontend/components/auth/otp-form.tsx

@@ -0,0 +1,105 @@
+"use client"
+
+import * as React from "react"
+import {RefreshCwIcon} from "lucide-react"
+
+import {Button} from "@/components/ui/button"
+import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/components/ui/card"
+import {Field, FieldLabel} from "@/components/ui/field"
+import {InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot,} from "@/components/ui/input-otp"
+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 (
+    <Card className="w-full border-border/60 bg-background/80 shadow-2xl backdrop-blur">
+      <CardHeader className="space-y-1.5 p-5 sm:p-6 pb-2 text-center">
+        <CardTitle className="text-xl font-semibold tracking-tight text-foreground">
+          验证登录
+        </CardTitle>
+        <CardDescription className="text-sm text-muted-foreground leading-normal">
+          {loginCodeTip}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-5 p-5 sm:p-6 pt-2">
+        <Field className="space-y-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="gap-1 text-xs px-2 py-1 h-7"
+            >
+              <RefreshCwIcon className={cn("size-3", isPending && "animate-spin")} />
+              {loginCooldown > 0 ? `${loginCooldown}秒后重发` : "重新发送"}
+            </Button>
+          </div>
+          <div className="flex justify-center">
+            <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>
+      </CardContent>
+      <CardFooter className="flex-col gap-4 p-5 sm:p-6 pt-2">
+        <Button
+          type="button"
+          className="w-full"
+          onClick={onSubmit}
+          disabled={isPending || code.length < 6}
+        >
+          {isPending ? "验证中..." : "验证"}
+        </Button>
+        <div className="text-xs text-muted-foreground text-center">
+          遇到登录问题？{" "}
+          <a
+            href="#"
+            className="underline underline-offset-4 transition-colors hover:text-primary"
+          >
+            联系客服
+          </a>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}

frontend/components/auth/register-form.tsx

@@ -10,6 +10,7 @@ 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 {Label} from "@/components/ui/label"
 import {Spinner} from "@/components/ui/spinner"
 import {Card, CardContent} from "@/components/ui/card"
 import services from "@/lib/services"
@@ -116,17 +117,25 @@ export function RegisterForm() {
       toast.error("密码长度不能少于 8 位")
       return
     }
-    if (emailRegisterEnabled) {
-      if (!email.trim() || !code.trim()) {
-        toast.error("邮箱和验证码不能为空")
-        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
     }
     registerMutation.mutate({
       username: username.trim(),
       password,
       nickname: nickname.trim() || undefined,
-      email: email.trim() || undefined,
+      email: trimmedEmail,
       code: code.trim() || undefined,
     })
   }
@@ -155,55 +164,78 @@ export function RegisterForm() {
         </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()}
-            />
+          <div className="space-y-3">
+            <div className="space-y-1.5">
+              <Label htmlFor="username">用户名</Label>
+              <Input
+                id="username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                placeholder="请输入用户名"
+                autoComplete="username"
+                onKeyDown={(e) => e.key === "Enter" && handleRegister()}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="nickname">
+                昵称
+                <span className="text-muted-foreground font-normal text-xs ml-1">（可选）</span>
+              </Label>
+              <Input
+                id="nickname"
+                value={nickname}
+                onChange={(e) => setNickname(e.target.value)}
+                placeholder="请输入昵称"
+                autoComplete="nickname"
+                onKeyDown={(e) => e.key === "Enter" && handleRegister()}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="password">密码</Label>
+              <Input
+                id="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                type="password"
+                placeholder="请输入密码（至少 8 位）"
+                autoComplete="new-password"
+                onKeyDown={(e) => e.key === "Enter" && handleRegister()}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="email">电子邮箱</Label>
+              <Input
+                id="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="请输入电子邮箱"
+                autoComplete="email"
+                onKeyDown={(e) => e.key === "Enter" && handleRegister()}
+              />
+            </div>
             {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 className="space-y-1.5">
+                <Label htmlFor="code">邮箱验证码</Label>
+                <div className="flex gap-2">
+                  <Input
+                    id="code"
+                    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>
             )}
           </div>