125 lines
3.9 KiB
JavaScript
125 lines
3.9 KiB
JavaScript
"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 Recode from "./Recode";
|
|
import SendReq from "./SendReq";
|
|
|
|
function VerificationPage({ setIsSendMsg, uuid, link, setUuid, 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 === 5 && isError) {
|
|
setIsError(false);
|
|
}
|
|
setCode(newCode);
|
|
if (val && index < inputRefs.length - 1) {
|
|
inputRefs[index + 1].current?.focus();
|
|
}
|
|
};
|
|
|
|
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
|
|
num={num}
|
|
timer={timer}
|
|
setUuid={setUuid}
|
|
setTimer={setTimer}
|
|
retryIcon={retryIcon}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<SendReq
|
|
code={code}
|
|
uuid={uuid}
|
|
loading={loading}
|
|
setStep={setStep}
|
|
setIsError={setIsError}
|
|
setLoading={setLoading}
|
|
setIsSendMsg={setIsSendMsg}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default VerificationPage;
|