feat: confirm OTP integration

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

@@ -1,9 +1,21 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { type FC } from "react";
-import { Link } from "react-router";
+import { useVerify } from "@/store/verify";
+import { useCallback, useState, type FC } from "react";
 
 const VerifyEmailOtpPage: FC = () => {
+  const [otp, setOtp] = useState("");
+
+  const confirmOtp = useVerify((s) => s.confirmOTP);
+  const confirming = useVerify((s) => s.confirming);
+
+  const handleVerify = useCallback(() => {
+    if (otp.length !== 6) return;
+    confirmOtp({
+      otp,
+    });
+  }, [confirmOtp, otp]);
+
   return (
     <div className="flex flex-col items-stretch gap-2 max-w-sm mx-auto p-4">
       <h1 className="text-xl font-medium dark:text-gray-200">
@@ -13,10 +25,22 @@ const VerifyEmailOtpPage: FC = () => {
         We've sent you verification code on your email address, please open your
         mailbox and enter the verification code in order to continue.
       </p>
-      <Input placeholder="Enter OTP" />
-      <Link to="/verify/avatar" className="w-full">
-        <Button className="mt-3 w-full">Verify</Button>
-      </Link>
+      <Input
+        placeholder="Enter OTP"
+        value={otp}
+        onChange={(e) => {
+          e.preventDefault();
+          setOtp(e.target.value);
+        }}
+      />
+      <Button
+        className="mt-3 w-full"
+        onClick={handleVerify}
+        loading={confirming}
+        disabled={confirming}
+      >
+        Verify
+      </Button>
     </div>
   );
 };