handle all pages dashboard & register api
This commit is contained in:
Ehsan
@@ -0,0 +1,53 @@
|
||||
import RetryLogin from "@/components/icons/RetryLogin";
|
||||
import { Button } from "@mui/material";
|
||||
const time_resend_code = 120;
|
||||
|
||||
function Recode({ retryIcon, timer, setTimer }) {
|
||||
const handleTimer = () => {
|
||||
setTimer("loading");
|
||||
setTimeout(() => {
|
||||
setTimer(time_resend_code);
|
||||
let timePresent = time_resend_code;
|
||||
const timerInterval = setInterval(() => {
|
||||
timePresent--;
|
||||
setTimer(timePresent);
|
||||
|
||||
!timePresent && clearInterval(timerInterval);
|
||||
}, 1000);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
className="flex !p-1 items-center justify-start gap-1 hover-rotate-90 cursor-pointer"
|
||||
disabled={typeof timer === "number" && timer !== 0}
|
||||
onClick={() => {
|
||||
if (!timer && timer !== "loading") {
|
||||
handleTimer();
|
||||
retryIcon.current.classList.add("retry-icon");
|
||||
setTimeout(() => {
|
||||
retryIcon.current &&
|
||||
retryIcon.current.classList.remove("retry-icon");
|
||||
}, 1000);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{timer && timer !== "loading" ? (
|
||||
<p className="text-[#F17732] text-[14px] font-normal select-none">
|
||||
{timer} ثانیه
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<div ref={retryIcon}>
|
||||
<RetryLogin />
|
||||
</div>
|
||||
<p className="text-[#F17732] text-[14px] font-normal select-none">
|
||||
دریافت مجدد کد
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
export default Recode;
|
||||
@@ -0,0 +1,174 @@
|
||||
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";
|
||||
|
||||
function VerificationPage({ setIsSendMsg, link, num, setStep }) {
|
||||
const retryIcon = useRef();
|
||||
|
||||
const [timer, setTimer] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
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);
|
||||
if (index > 0) {
|
||||
inputRefs[index - 1].current?.focus();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
newCode[index] = val;
|
||||
|
||||
if (newCode.join("").length === 4 && 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]
|
||||
p-0 border-transparent sm:p-[40px] sm:pb-[48px] w-full sm:w-fit sm:min-w-[425px]"
|
||||
>
|
||||
<div
|
||||
className="cursor-pointer"
|
||||
onClick={() => {
|
||||
setStep && setStep((prev) => prev - 1);
|
||||
setIsSendMsg && setIsSendMsg(false);
|
||||
}}
|
||||
>
|
||||
<ArrowRightS />
|
||||
</div>
|
||||
<p className="text-[#525252] mt-[10px] sm:mt-[12px] md:mt-[14px] lg:mt-[16px] text-[18px] font-bold">
|
||||
کد تایید را وارد نمایید
|
||||
</p>
|
||||
<p className="text-[#616161] mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px] text-[14px] font-normal text-right">
|
||||
کد تایید برای شماره <span dir="ltr">09{num}</span> ارسال شد.
|
||||
</p>
|
||||
<div className="mt-[26px] sm:mt-[28px] md:mt-[30px] lg:mt-[32px] mb-[56px] sm:mb-[47px] md:mb-[38px] lg:mb-[30px]">
|
||||
<div className="mb-[27px]" dir="ltr">
|
||||
<div
|
||||
className="w-full flex items-center justify-center gap-6 sm:gap-6"
|
||||
dir="ltr"
|
||||
>
|
||||
{code.map((digit, index) => (
|
||||
<OTPForm
|
||||
key={index}
|
||||
index={index}
|
||||
value={digit}
|
||||
isError={isError}
|
||||
onChange={handleChange}
|
||||
inputRef={inputRefs[index]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<p
|
||||
className={`
|
||||
text-[#d32f2f] text-[14px] mt-2 min-h-[21px] transition-all duration-1000 ease-in-out
|
||||
transform text-right
|
||||
${!isError ? "opacity-0 -translate-y-1" : "opacity-100 translate-y-0"}
|
||||
`}
|
||||
>
|
||||
!کد را وارد کنید
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex w-full items-center justify-between flex-wrap gap-y-5">
|
||||
<Button
|
||||
className="flex !p-1 items-center justify-start gap-1 cursor-pointer"
|
||||
onClick={() => {
|
||||
setStep && setStep((prev) => prev - 1);
|
||||
setIsSendMsg && setIsSendMsg(false);
|
||||
}}
|
||||
>
|
||||
<EditLogin />
|
||||
<p className="text-[#F17732] text-[14px] font-normal select-none">
|
||||
ویرایش شماره موبایل
|
||||
</p>
|
||||
</Button>
|
||||
|
||||
<Recode retryIcon={retryIcon} timer={timer} setTimer={setTimer} />
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
fullWidth
|
||||
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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default VerificationPage;
|
||||
Reference in New Issue
Block a user