feat: request OTP query

web/src/pages/Verify/Email/index.tsx

@@ -1,12 +1,18 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useAuth } from "@/store/auth";
+import { useVerify } from "@/store/verify";
 import maskEmail from "@/util/maskEmail";
-import { useCallback, useMemo, useState, type FC } from "react";
+import { useCallback, useEffect, useMemo, useState, type FC } from "react";
 import { useNavigate } from "react-router";
 
 const VerifyEmailPage: FC = () => {
   const profile = useAuth((s) => s.profile);
+
+  const requestOtp = useVerify((s) => s.requestOTP);
+  const requesting = useVerify((s) => s.requesting);
+  const requested = useVerify((s) => s.requested);
+
   const navigate = useNavigate();
 
   const [email, setEmail] = useState("");
@@ -17,9 +23,15 @@ const VerifyEmailPage: FC = () => {
 
   const handleNext = useCallback(() => {
     if (matches) {
+      requestOtp();
+    }
+  }, [matches, requestOtp]);
+
+  useEffect(() => {
+    if (requested) {
       navigate("/verify/email/otp");
     }
-  }, [matches, navigate]);
+  }, [navigate, requested]);
 
   return (
     <div className="flex flex-col items-stretch gap-2 sm:max-w-sm mx-auto p-4">
@@ -38,7 +50,8 @@ const VerifyEmailPage: FC = () => {
       <Button
         className={`mt-3 ${!matches ? "opacity-60" : ""}`}
         onClick={handleNext}
-        disabled={!matches}
+        disabled={!matches || requesting}
+        loading={requesting}
       >
         Next
       </Button>