install and handle casle & prevent page dashboard & handle register and code verfication & get data in clinics page

components/register/verificationPage/SendReq.js

@@ -0,0 +1,83 @@
+import { Button } from "@mui/material";
+import { useRouter } from "next/navigation";
+import { request } from "@/services/response";
+import Cookies from "js-cookie";
+
+function SendReq({
+  loading,
+  setLoading,
+  code,
+  setIsSendMsg,
+  setStep,
+  setIsError,
+  uuid,
+}) {
+  const router = useRouter();
+
+  const handleSetCookie = (response) => {
+    const accessTokenExpires = new Date();
+    accessTokenExpires.setSeconds(
+      accessTokenExpires.getSeconds() + response.expires_in
+    );
+    const refreshTokenExpires = new Date();
+    refreshTokenExpires.setDate(refreshTokenExpires.getDate() + 30);
+
+    Cookies.set("access_token", response.access_token, {
+      expires: accessTokenExpires,
+      path: "/",
+      secure: true,
+      sameSite: "strict",
+    });
+
+    Cookies.set("refresh_token", response.refresh_token, {
+      expires: refreshTokenExpires,
+      path: "/",
+      secure: true,
+      sameSite: "strict",
+    });
+  };
+
+  const handleReq = async () => {
+    setLoading(true);
+    request
+      .getToken(
+        "mobile",
+        process.env.NEXT_PUBLIC_CLIENT_ID,
+        process.env.NEXT_PUBLIC_CLIENT_SECRET,
+        uuid,
+        code.join("")
+      )
+      .then((response) => {
+        setLoading(false);
+        if (response.access_token) {
+          router.replace("/");
+          handleSetCookie(response);
+        }
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+  };
+
+  return (
+    <Button
+      fullWidth
+      loading={loading}
+      variant="contained"
+      onClick={() => {
+        setIsSendMsg && setIsSendMsg(true);
+        setStep && setStep((prev) => prev + 1);
+        if (code.join("").length !== 5) {
+          setIsError(true);
+        } else {
+          handleReq();
+        }
+      }}
+      className="!rounded-[8px] !bg-[#5559CE]"
+    >
+      تایید
+    </Button>
+  );
+}
+
+export default SendReq;

components/register/verificationPage/index.js

@@ -1,25 +1,25 @@
+"use client";
+
 import { useRef, useState } from "react";
 
 import { Button } from "@mui/material";
 import OTPForm from "../element/OTPForm";
 import EditLogin from "../../icons/EditLogin";
 import ArrowRightS from "../../icons/ArrowRightS";
-import { request } from "@/services/response";
-import { changeNumToDefault } from "@/helper";
 import Recode from "./Recode";
+import SendReq from "./SendReq";
 
-function VerificationPage({ setIsSendMsg, link, num, setStep }) {
+function VerificationPage({ setIsSendMsg, uuid, link, num, setStep }) {
   const retryIcon = useRef();
 
   const [timer, setTimer] = useState(0);
   const [loading, setLoading] = useState(false);
-  const [code, setCode] = useState(["", "", "", ""]);
+  const [code, setCode] = useState(["", "", "", "", ""]);
   const [isError, setIsError] = useState(false);
   const inputRefs = Array.from({ length: 5 }, () => useRef());
 
   const handleChange = (index, val) => {
     const newCode = [...code];
-
     if (val === "backspace") {
       newCode[index] = "";
       setCode(newCode);
@@ -28,64 +28,16 @@ function VerificationPage({ setIsSendMsg, link, num, setStep }) {
       }
       return;
     }
-
     newCode[index] = val;
-
-    if (newCode.join("").length === 4 && isError) {
+    if (newCode.join("").length === 5 && isError) {
       setIsError(false);
     }
-    // if (newCode.join("").length === 4) {
-    //   handleReq();
-    // }
-
     setCode(newCode);
-
     if (val && index < inputRefs.length - 1) {
       inputRefs[index + 1].current?.focus();
     }
   };
 
-  const handleReq = async () => {
-    // const formData = new URLSearchParams();
-    // formData.append("grant_type", "mobile");
-    // formData.append("client_id", process.env.NEXT_PUBLIC_CLIENT_ID);
-    // formData.append("client_secret", process.env.NEXT_PUBLIC_CLIENT_SECRET);
-    // formData.append("mobile_number", changeNumToDefault(num));
-    // formData.append("code", code.join(""));
-
-    // try {
-    //   const res = await axios.post(
-    //     "https://back-dev.clinic-pro.ir/oauth/token",
-    //     formData,
-    //     {
-    //       withCredentials: true,
-    //       headers: {
-    //         "Content-Type": "application/x-www-form-urlencoded",
-    //       },
-    //     }
-    //   );
-    //   console.log(res);
-    // } catch (err) {
-    //   console.error("Request failed:", err);
-    // }
-
-    setLoading(true);
-    request
-      .getToken(
-        "mobile",
-        process.env.NEXT_PUBLIC_CLIENT_ID,
-        process.env.NEXT_PUBLIC_CLIENT_SECRET,
-        changeNumToDefault(num),
-        code.join("")
-      )
-      .then((response) => {
-        setLoading(false);
-      })
-      .catch((err) => {
-        setLoading(false);
-      });
-  };
-
   return (
     <div
       className="rounded-[16px] opacity-page mt-[51px] sm:mt-[45px] md:mt-[39px] lg:mt-[32px] border border-solid sm:border-[#EFEFEF] bg-transparent sm:bg-[#FFF] 
@@ -150,23 +102,15 @@ function VerificationPage({ setIsSendMsg, link, num, setStep }) {
           <Recode retryIcon={retryIcon} timer={timer} setTimer={setTimer} />
         </div>
       </div>
-      <Button
-        fullWidth
+      <SendReq
+        code={code}
+        uuid={uuid}
         loading={loading}
-        variant="contained"
-        onClick={() => {
-          setIsSendMsg && setIsSendMsg(true);
-          setStep && setStep((prev) => prev + 1);
-          if (code.join("").length !== 4) {
-            setIsError(true);
-          } else {
-            handleReq();
-          }
-        }}
-        className="!rounded-[8px] !bg-[#5559CE]"
-      >
-        تایید
-      </Button>
+        setStep={setStep}
+        setIsError={setIsError}
+        setLoading={setLoading}
+        setIsSendMsg={setIsSendMsg}
+      />
     </div>
   );
 }