feat(auth): hook up verification code sending

app/(auth)/register/page.tsx

@@ -4,15 +4,15 @@ import { Button } from "@/components/ui/button"
 import { Checkbox } from "@/components/ui/checkbox"
 import { IconInput } from "@/components/ui/icon-input"
 import { Label } from "@/components/ui/label"
-import { register as registerApi } from "@/lib/api"
+import { register as registerApi, sendEmailVerificationCode } from "@/lib/api"
 import { toApiError } from "@/lib/errors"
-import { notifyInfo } from "@/lib/toast"
+import { notifyInfo, notifySuccess } from "@/lib/toast"
 import { useAuthStore } from "@/store/auth"
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
 import { Eye, EyeOff, Lock, Mail, Shield, User } from "lucide-react"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { Controller, useForm } from "react-hook-form"
 import { z } from "zod"
 
@@ -39,16 +39,40 @@ export default function RegisterPage() {
   const { login: storeLogin } = useAuthStore()
   const [showPassword, setShowPassword] = useState(false)
   const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+  const [countdown, setCountdown] = useState(0)
   const {
     register,
     handleSubmit,
     control,
+    getValues,
+    trigger,
     formState: { errors, isSubmitting },
   } = useForm({
     resolver: standardSchemaResolver(registerSchema),
     defaultValues: { agreeTerms: false },
   })
 
+  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
+
+    const email = String(getValues("email") ?? "")
+
+    try {
+      await sendEmailVerificationCode({ email, scene: "register" })
+      setCountdown(60)
+      notifySuccess("验证码已发送到你的邮箱")
+    } catch (err) {
+      notifyInfo(toApiError(err).msg)
+    }
+  }
+
   const onSubmit = async (data: z.infer<typeof registerSchema>) => {
     try {
       const user = await registerApi({
@@ -100,8 +124,14 @@ export default function RegisterPage() {
                 {...register("vcode")}
               />
             </div>
-            <Button type="button" variant="outline" onClick={() => {}}>
-              发送验证码
+            <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}</p>}