105 lines
4.6 KiB
JavaScript
105 lines
4.6 KiB
JavaScript
import { KeyRound, Loader2, Shield } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { motion } from "framer-motion";
|
|
import toast, { Toaster } from "react-hot-toast";
|
|
import { sendEmailOTP, verifyEmail } from "@/app/utils/api";
|
|
import AuthService from "@/app/services/AuthService";
|
|
import { useRouter } from "next/navigation";
|
|
export default function OtpDialog({ formData, setShowOtpModal, type }) {
|
|
const { t } = useTranslation();
|
|
const router = useRouter();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [otpCode, setOtpCode] = useState("");
|
|
const handleVerifyOTP = async () => {
|
|
if (!otpCode || otpCode.length < 4) {
|
|
toast.error(t("register.otpRequired"));
|
|
return;
|
|
}
|
|
setIsLoading(true);
|
|
try {
|
|
const res = await verifyEmail(otpCode);
|
|
if (res.status === 200) {
|
|
AuthService.deleteToken();
|
|
toast.success(res.message || t("register.emailVerified"));
|
|
setShowOtpModal(false);
|
|
setTimeout(() => router.push("/login"), 1500);
|
|
} else {
|
|
toast.error(res.message || res.data?.message || t("accountVerification.otpInvalid"));
|
|
}
|
|
} catch (err) {
|
|
toast.error(err.message || t("register.verificationError"));
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleResendOTP = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
await sendEmailOTP();
|
|
toast.success(t("register.newOtpSent"));
|
|
} catch (err) {
|
|
toast.error(t("register.resendOtpFailed"));
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 z-50">
|
|
<motion.div initial={{ scale: 0.9, y: 20 }} animate={{ scale: 1, y: 0 }} exit={{ scale: 0.9, y: 20 }} className="bg-gray-900 border border-white/10 rounded-2xl w-full max-w-md p-6 shadow-2xl">
|
|
<div className="text-center mb-6">
|
|
<div className="w-16 h-16 bg-amber-500/20 rounded-full flex items-center justify-center mx-auto mb-3">
|
|
<Shield className={`w-8 h-8 ${type === "owner" ? "text-amber-500" : "text-blue-500"} `} />
|
|
</div>
|
|
<h2 className="text-xl font-bold text-white">{t("register.otpTitle")}</h2>
|
|
<p className="text-gray-400 text-sm mt-1">{t("register.otpSentTo")}</p>
|
|
<p className={`${type === "owner" ? "text-amber-500" : "text-blue-500"} font-medium text-sm`}>{formData.email}</p>
|
|
</div>
|
|
<div className="mb-6">
|
|
<label className="block text-sm font-medium text-gray-300 mb-2">{t("register.otpLabel")}</label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
|
<KeyRound className="w-5 h-5 text-gray-400" />
|
|
</div>
|
|
<input
|
|
type="text"
|
|
value={otpCode}
|
|
maxLength={6}
|
|
onChange={(e) => setOtpCode(e.target.value)}
|
|
className="w-full pr-12 pl-4 py-3 bg-white/5 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 text-white text-center tracking-[0.5em] text-xl"
|
|
placeholder="------"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={handleVerifyOTP}
|
|
disabled={isLoading || !otpCode}
|
|
className={`flex-1 bg-gradient-to-r ${type === "owner" ? "from-amber-500 to-amber-600" : "from-blue-500 to-blue-600"} text-white py-3 rounded-xl font-medium ${type === "owner" ? "hover:from-amber-600 hover:to-amber-700" : "hover:from-blue-600 hover:to-blue-700"} disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2`}
|
|
>
|
|
{isLoading ? (
|
|
<>
|
|
<Loader2 className="w-5 h-5 animate-spin" />
|
|
<span>{t("register.verifying")}</span>
|
|
</>
|
|
) : (
|
|
t("register.verify")
|
|
)}
|
|
</button>
|
|
</div>
|
|
<button
|
|
onClick={handleResendOTP}
|
|
disabled={isLoading}
|
|
className={`w-full text-center ${type === "owner" ? "text-amber-400 hover:text-amber-300" : "text-blue-400 hover:text-blue-300"} text-sm mt-3 disabled:opacity-50`}
|
|
>
|
|
{t("register.resendOtp")}
|
|
</button>
|
|
</motion.div>
|
|
</motion.div>
|
|
</>
|
|
);
|
|
}
|