feat(auth): add verification feature in settings

2025-09-09 00:54:06 +06:00
parent 4042e28bf7
commit c3ead879ad
7 changed files with 205 additions and 1 deletions
--- a/app/(tabs)/settings/verify/page.tsx
+++ b/app/(tabs)/settings/verify/page.tsx
@ -0,0 +1,96 @@
+"use client";
+
+import BackgroundWrapper from "@/components/BackgroundWrapper";
+import Header from "@/components/Header";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/components/ui/input-otp";
+import { API_URL } from "@/lib/auth";
+import { useAuthStore } from "@/stores/authStore";
+import Image from "next/image";
+import React, { useState } from "react";
+
+const VerificationScreen = () => {
+  const [otp, setOtp] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { fetchUser } = useAuthStore();
+
+  const handleVerify = async () => {
+    if (otp.length < 6) return;
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(`${API_URL}/auth/verify?code=${otp}`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.message || "Verification failed");
+      }
+
+      // 🔥 Call zustand action to update auth state
+      await fetchUser();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <BackgroundWrapper>
+      <Header displayTabTitle="Verification" />
+      <div className="flex flex-col items-center justify-center pt-10 px-6 gap-4">
+        <Image
+          src={"/images/icons/otp.svg"}
+          height={200}
+          width={300}
+          alt="otp-banner"
+        />
+        <h1 className="font-medium text-xl text-center ">
+          Enter the code here that you received in your email.
+        </h1>
+        <InputOTP
+          maxLength={6}
+          value={otp}
+          onChange={setOtp}
+          onComplete={handleVerify} // auto-submit when complete
+        >
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+          </InputOTPGroup>
+          <InputOTPSeparator />
+          <InputOTPGroup>
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+          </InputOTPGroup>
+        </InputOTP>
+
+        {error && <p className="text-red-500 mt-3">{error}</p>}
+
+        <button
+          onClick={handleVerify}
+          disabled={otp.length < 6 || loading}
+          className="mt-6 px-6 py-2 bg-blue-600 text-white rounded-lg disabled:bg-gray-400 transition"
+        >
+          {loading ? "Verifying..." : "Verify"}
+        </button>
+      </div>
+    </BackgroundWrapper>
+  );
+};
+
+export default VerificationScreen;