From 849403a1377f737dd67ebb40fba5b74f2dadaa25 Mon Sep 17 00:00:00 2001
From: LandaMm <qwer.009771@gmail.com>
Date: Sat, 7 Jun 2025 01:34:48 +0200
Subject: [PATCH] feat: confirm OTP integration

---
 web/src/pages/Verify/Email/OTP/index.tsx | 36 ++++++++++++++++++++----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/web/src/pages/Verify/Email/OTP/index.tsx b/web/src/pages/Verify/Email/OTP/index.tsx
index b166416..66f02a8 100644
--- a/web/src/pages/Verify/Email/OTP/index.tsx
+++ b/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>
   );
 };