refactor(auth): align auth UI and mock auth API

app/(auth)/forgot-password/page.tsx

@@ -3,36 +3,72 @@
 import { Button } from "@/components/ui/button"
 import { IconInput } from "@/components/ui/icon-input"
 import { Label } from "@/components/ui/label"
-import { notifySuccess } from "@/lib/toast"
+import { resetPassword } from "@/lib/api"
+import { toApiError } from "@/lib/errors"
+import { notifyInfo, notifySuccess } from "@/lib/toast"
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
-import { Mail } from "lucide-react"
+import { KeyRound, Lock, Mail } from "lucide-react"
 import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { useEffect, useState } from "react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 
-const forgotSchema = z.object({
-  email: z.string().email("请输入正确的邮箱地址"),
-})
+const forgotSchema = z
+  .object({
+    email: z.string().email("请输入正确的邮箱地址"),
+    vcode: z.string().min(6, "验证码至少6位"),
+    newPassword: z.string().min(8, "密码至少8位"),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.newPassword === data.confirmPassword, {
+    message: "两次输入的密码不一致",
+    path: ["confirmPassword"],
+  })
 
 export default function ForgotPasswordPage() {
+  const router = useRouter()
+  const [countdown, setCountdown] = useState(0)
+
   const {
     register,
     handleSubmit,
+    trigger,
     formState: { errors, isSubmitting },
   } = useForm({
     resolver: standardSchemaResolver(forgotSchema),
   })
 
-  const onSubmit = async (_data: z.infer<typeof forgotSchema>) => {
-    await new Promise((r) => setTimeout(r, 500))
-    notifySuccess("重置链接已发送到你的邮箱")
+  useEffect(() => {
+    if (countdown <= 0) return
+    const timer = setInterval(() => setCountdown((c) => c - 1), 1000)
+    return () => clearInterval(timer)
+  }, [countdown])
+
+  const handleSendCode = async () => {
+    const isValid = await trigger("email")
+    if (!isValid) return
+
+    // Mock sending code
+    setCountdown(60)
+    notifySuccess("验证码已发送到你的邮箱")
+  }
+
+  const onSubmit = async (data: z.infer<typeof forgotSchema>) => {
+    try {
+      await resetPassword({ email: data.email, vcode: data.vcode, newPassword: data.newPassword })
+      notifySuccess("密码已重置")
+      router.push("/login")
+    } catch (err) {
+      notifyInfo(toApiError(err).msg)
+    }
   }
 
   return (
     <>
       <div className="mb-8">
         <h2 className="text-2xl font-bold">找回密码</h2>
-        <p className="mt-2 text-sm text-muted-foreground">输入注册邮箱，我们将发送重置链接</p>
+        <p className="mt-2 text-sm text-muted-foreground">输入注册邮箱和新密码进行重置</p>
       </div>
 
       <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
@@ -45,11 +81,67 @@ export default function ForgotPasswordPage() {
             placeholder="输入注册邮箱"
             {...register("email")}
           />
-          {errors.email && <p className="text-xs text-destructive">{errors.email.message}</p>}
+          {errors.email && (
+            <p className="text-xs text-destructive">{errors.email.message as string}</p>
+          )}
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="vcode">验证码</Label>
+          <div className="flex gap-2">
+            <div className="flex-1">
+              <IconInput
+                id="vcode"
+                icon={<KeyRound />}
+                placeholder="输入6位验证码"
+                {...register("vcode")}
+              />
+            </div>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleSendCode}
+              disabled={countdown > 0}
+              className="w-[110px]"
+            >
+              {countdown > 0 ? `${countdown}s` : "获取验证码"}
+            </Button>
+          </div>
+          {errors.vcode && (
+            <p className="text-xs text-destructive">{errors.vcode.message as string}</p>
+          )}
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="newPassword">新密码</Label>
+          <IconInput
+            id="newPassword"
+            icon={<Lock />}
+            type="password"
+            placeholder="输入新密码"
+            {...register("newPassword")}
+          />
+          {errors.newPassword && (
+            <p className="text-xs text-destructive">{errors.newPassword.message as string}</p>
+          )}
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="confirmPassword">确认新密码</Label>
+          <IconInput
+            id="confirmPassword"
+            icon={<Lock />}
+            type="password"
+            placeholder="再次输入新密码"
+            {...register("confirmPassword")}
+          />
+          {errors.confirmPassword && (
+            <p className="text-xs text-destructive">{errors.confirmPassword.message as string}</p>
+          )}
         </div>
 
         <Button type="submit" className="mt-2 w-full" size="lg" disabled={isSubmitting}>
-          {isSubmitting ? "发送中..." : "发送重置链接"}
+          {isSubmitting ? "提交中..." : "重置密码"}
         </Button>
       </form>