|
|
|
@ -23,6 +23,7 @@ function SignUp({ |
|
|
|
|
loading, |
|
|
|
|
level, |
|
|
|
|
setLevel, |
|
|
|
|
isMobile, |
|
|
|
|
}) { |
|
|
|
|
const [signUpFields, setSignUpFiels] = useState({}); |
|
|
|
|
const [error, setError] = useState(""); |
|
|
|
@ -105,18 +106,21 @@ function SignUp({ |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const numberInput = useRef(); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
// numberInput.current.focus();
|
|
|
|
|
setHeaderOptions(headerOptions); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (signUpFields?.otp?.length === 4) { |
|
|
|
|
if ( |
|
|
|
|
signUpFields?.otp1 && |
|
|
|
|
signUpFields?.otp2 && |
|
|
|
|
signUpFields?.otp3 && |
|
|
|
|
signUpFields?.otp4 |
|
|
|
|
) { |
|
|
|
|
sendOtp({ |
|
|
|
|
cellphone: signUpFields?.cellphone, |
|
|
|
|
otp: signUpFields?.otp, |
|
|
|
|
otp: signUpFields?.otp1 + signUpFields?.otp2 + signUpFields?.otp3 + signUpFields?.otp4, |
|
|
|
|
userToken: "2", |
|
|
|
|
applicationToken: "22", |
|
|
|
|
}); |
|
|
|
@ -137,8 +141,6 @@ function SignUp({ |
|
|
|
|
} |
|
|
|
|
}, [loginFlag]); |
|
|
|
|
|
|
|
|
|
const light = theme === "light"; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div |
|
|
|
|
className="w-screen overflow-x-hidden flex flex-row transform relative" |
|
|
|
@ -153,13 +155,13 @@ function SignUp({ |
|
|
|
|
<img src={arrowIcon} className="transform rotate-90" alt="" /> |
|
|
|
|
</button> |
|
|
|
|
<div |
|
|
|
|
className={`flex flex-col items-center justify-between h-full w-full px-4 pt-16 transition transform duration-300 absolute top-0 left-0 ${ |
|
|
|
|
className={`flex flex-col items-center lg:pb-8 justify-between h-full w-full px-4 pt-16 lg:pt-16 transition transform duration-300 absolute top-0 left-0 ${ |
|
|
|
|
level === "phonenumber" ? "translate-x-0" : "-translate-x-full" |
|
|
|
|
}`}
|
|
|
|
|
> |
|
|
|
|
<div className="w-full flex flex-col items-center gap-6"> |
|
|
|
|
<img src={logoIcon} alt="" className="w-1/5" /> |
|
|
|
|
<p className="text-lg align-start"> |
|
|
|
|
<img src={logoIcon} alt="" className="w-1/5 lg:w-1/6" /> |
|
|
|
|
<p className="text-lg lg:text-base align-start"> |
|
|
|
|
{window.t("سلام به ")} |
|
|
|
|
<span className="font-bold text-blueC0"> |
|
|
|
|
{window.t(" دانوین خوش ")} |
|
|
|
@ -168,7 +170,7 @@ function SignUp({ |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
<div className="w-full flex flex-col"> |
|
|
|
|
<p className="text-base mt-4"> |
|
|
|
|
<p className="text-base lg:text-sm mt-4"> |
|
|
|
|
{window.t( |
|
|
|
|
" لطفا جهت ورود یا ثبت نام شماره همراه خود را وارد نمایید." |
|
|
|
|
)} |
|
|
|
@ -198,7 +200,7 @@ function SignUp({ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
className={`flex flex-col items-center justify-between w-full h-full px-4 pt-16 transition transform duration-300 absolute top-0 left-0 ${ |
|
|
|
|
className={`flex flex-col items-center justify-between w-full lg:pb-8 h-full px-4 pt-16 transition transform duration-300 absolute top-0 left-0 ${ |
|
|
|
|
level === "otp" ? "translate-x-0" : "translate-x-full" |
|
|
|
|
}`}
|
|
|
|
|
> |
|
|
|
@ -218,13 +220,13 @@ function SignUp({ |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div className="w-full flex flex-col"> |
|
|
|
|
<div className="w-full flex flex-row-reverse justify-center"> |
|
|
|
|
<div className="w-full flex flex-row-reverse justify-between"> |
|
|
|
|
<input |
|
|
|
|
inputMode="numeric" |
|
|
|
|
style={{ |
|
|
|
|
direction: "ltr", |
|
|
|
|
width: "calc(100% / 4)", |
|
|
|
|
height: "calc((100vw - 32px) / 4.1)", |
|
|
|
|
width: isMobile ? "calc(100% / 4)" : "70px", |
|
|
|
|
height: isMobile ? "calc((100vw - 32px) / 4.1)" : "70px", |
|
|
|
|
}} |
|
|
|
|
name="otp1" |
|
|
|
|
className="bg-grayF9 dark:bg-opacity-10 outline-none rounded-md text-2xl font-bold lg:text-lg text-center text-blueC0 mx-1" |
|
|
|
@ -241,8 +243,8 @@ function SignUp({ |
|
|
|
|
inputMode="numeric" |
|
|
|
|
style={{ |
|
|
|
|
direction: "ltr", |
|
|
|
|
width: "calc(100% / 4)", |
|
|
|
|
height: "calc((100vw - 32px) / 4.1)", |
|
|
|
|
width: isMobile ? "calc(100% / 4)" : "70px", |
|
|
|
|
height: isMobile ? "calc((100vw - 32px) / 4.1)" : "70px", |
|
|
|
|
}} |
|
|
|
|
name="otp2" |
|
|
|
|
className="bg-grayF9 dark:bg-opacity-10 outline-none rounded-md text-2xl font-bold lg:text-lg text-center text-blueC0 mx-1" |
|
|
|
@ -259,8 +261,8 @@ function SignUp({ |
|
|
|
|
inputMode="numeric" |
|
|
|
|
style={{ |
|
|
|
|
direction: "ltr", |
|
|
|
|
width: "calc(100% / 4)", |
|
|
|
|
height: "calc((100vw - 32px) / 4.1)", |
|
|
|
|
width: isMobile ? "calc(100% / 4)" : "70px", |
|
|
|
|
height: isMobile ? "calc((100vw - 32px) / 4.1)" : "70px", |
|
|
|
|
}} |
|
|
|
|
name="otp3" |
|
|
|
|
className="bg-grayF9 dark:bg-opacity-10 outline-none rounded-md text-2xl font-bold lg:text-lg text-center text-blueC0 mx-1" |
|
|
|
@ -277,8 +279,8 @@ function SignUp({ |
|
|
|
|
inputMode="numeric" |
|
|
|
|
style={{ |
|
|
|
|
direction: "ltr", |
|
|
|
|
width: "calc(100% / 4)", |
|
|
|
|
height: "calc((100vw - 32px) / 4.1)", |
|
|
|
|
width: isMobile ? "calc(100% / 4)" : "70px", |
|
|
|
|
height: isMobile ? "calc((100vw - 32px) / 4.1)" : "70px", |
|
|
|
|
}} |
|
|
|
|
name="otp4" |
|
|
|
|
className="bg-grayF9 dark:bg-opacity-10 outline-none rounded-md text-2xl font-bold lg:text-lg text-center text-blueC0 mx-1" |
|
|
|
@ -326,6 +328,7 @@ function SignUp({ |
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
|
|
loginFlag: state.user.status, |
|
|
|
|
loading: state.user.loading, |
|
|
|
|
isMobile: state.publicApi.isMobile, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const mapDispatchToProps = { |
|
|
|
|