fixed owner and customer register make reuseable component and completed it

2026-08-05 23:27:34 +03:00
parent 7973c15e3f
commit 7da4bf9f2b
35 changed files with 1815 additions and 1510 deletions
--- a/app/components/OwnerComponents/OtpDialog.js
+++ b/app/components/OwnerComponents/OtpDialog.js
@ -0,0 +1,104 @@
+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>
+    </>
+  );
+}