generated from muhtadeetaron/nextjs-template
97 lines
2.6 KiB
TypeScript
97 lines
2.6 KiB
TypeScript
"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;
|