|
|
|
|
@ -14,16 +14,51 @@ import logoIcon from "./assets/logo.svg"; |
|
|
|
|
|
|
|
|
|
function SignUp({ sendOtp, sendPhoneNumber, loginFlag, theme }) { |
|
|
|
|
const [level, setLevel] = useState("phonenumber"); |
|
|
|
|
const [signUpFields, setSignUpFiels] = useState(null); |
|
|
|
|
const [signUpFields, setSignUpFiels] = useState({}); |
|
|
|
|
const [error, setError] = useState(""); |
|
|
|
|
const [resend, setResend] = useState(false); |
|
|
|
|
const navigate = useNavigate(); |
|
|
|
|
|
|
|
|
|
const otp1 = useRef(); |
|
|
|
|
const otp2 = useRef(); |
|
|
|
|
const otp3 = useRef(); |
|
|
|
|
const otp4 = useRef(); |
|
|
|
|
|
|
|
|
|
const onChange = (name, value) => { |
|
|
|
|
setSignUpFiels({ ...signUpFields, [name]: value }); |
|
|
|
|
switch (name) { |
|
|
|
|
case "otp1": |
|
|
|
|
if (value) { |
|
|
|
|
otp2.current.focus(); |
|
|
|
|
} |
|
|
|
|
break; |
|
|
|
|
case "otp2": |
|
|
|
|
if (value) { |
|
|
|
|
otp3.current.focus(); |
|
|
|
|
} else { |
|
|
|
|
otp1.current.focus(); |
|
|
|
|
} |
|
|
|
|
break; |
|
|
|
|
case "otp3": |
|
|
|
|
if (value) { |
|
|
|
|
otp4.current.focus(); |
|
|
|
|
} else { |
|
|
|
|
otp2.current.focus(); |
|
|
|
|
} |
|
|
|
|
break; |
|
|
|
|
case "otp4": |
|
|
|
|
if (value) { |
|
|
|
|
checkOtp(); |
|
|
|
|
} else { |
|
|
|
|
otp3.current.focus(); |
|
|
|
|
} |
|
|
|
|
break; |
|
|
|
|
default: |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const checkPhoneNumber = () => { |
|
|
|
|
const checkPhoneNumber = (e) => { |
|
|
|
|
if ( |
|
|
|
|
signUpFields?.cellphone?.slice(0, 2) === "09" && |
|
|
|
|
signUpFields?.cellphone.length === 11 |
|
|
|
|
@ -38,10 +73,14 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag, theme }) { |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const checkOtp = () => { |
|
|
|
|
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", |
|
|
|
|
}); |
|
|
|
|
@ -51,7 +90,6 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag, theme }) { |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const otpInput = useRef(); |
|
|
|
|
const numberInput = useRef(); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
@ -79,37 +117,155 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag, theme }) { |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (loginFlag) { |
|
|
|
|
navigate("/"); |
|
|
|
|
// navigate("/");
|
|
|
|
|
} |
|
|
|
|
}, [loginFlag]); |
|
|
|
|
const light = theme === "light"; |
|
|
|
|
return ( |
|
|
|
|
<div |
|
|
|
|
className="flex flex-col items-center justify-center w-screen p-4 transform -translate-y-20" |
|
|
|
|
style={{ height: "calc(100vh - 80px)" }} |
|
|
|
|
className="w-screen overflow-x-hidden flex flex-row transform -translate-y-10 relative" |
|
|
|
|
style={{ height: "calc(100vh - 160px)" }} |
|
|
|
|
> |
|
|
|
|
<div |
|
|
|
|
className={`flex flex-col items-center justify-center h-full w-full p-4 transition transform duration-300 absolute top-0 left-0 ${ |
|
|
|
|
level === "phonenumber" ? "translate-x-0" : "-translate-x-full" |
|
|
|
|
}`}
|
|
|
|
|
> |
|
|
|
|
<img src={logoIcon} alt="" className="" /> |
|
|
|
|
<strong className="w-full leading-6 dark:text-white mt-10"> |
|
|
|
|
سلام <br /> خوش برگشتی! |
|
|
|
|
</strong> |
|
|
|
|
<form className="w-full flex flex-col mt-10"> |
|
|
|
|
<Input label={"شماره موبایل"} /> |
|
|
|
|
<br/> |
|
|
|
|
<div className="w-full flex flex-col mt-10"> |
|
|
|
|
<Input |
|
|
|
|
label={"شماره موبایل"} |
|
|
|
|
name="cellphone" |
|
|
|
|
regex={onInput.phonenumber} |
|
|
|
|
onChange={(name, value) => onChange(name, value)} |
|
|
|
|
value={signUpFields?.cellphone} |
|
|
|
|
align="text-left" |
|
|
|
|
maxLength="11" |
|
|
|
|
direction="ltr" |
|
|
|
|
/> |
|
|
|
|
<span className="text-red-500 text-xs">{error}</span> |
|
|
|
|
<br /> |
|
|
|
|
<Button |
|
|
|
|
title="ادامه فرایند خرید" |
|
|
|
|
backgroundColor="bg-blueC0" |
|
|
|
|
border={{ color: "#196EC055", width: "1px" }} |
|
|
|
|
width="100%" |
|
|
|
|
color="text-white" |
|
|
|
|
onClick={(e) => checkPhoneNumber(e)} |
|
|
|
|
/> |
|
|
|
|
</form> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
className={`flex flex-col items-center justify-center w-full h-full p-4 transition transform duration-300 absolute top-0 left-0 ${ |
|
|
|
|
level === "otp" ? "translate-x-0" : "translate-x-full" |
|
|
|
|
}`}
|
|
|
|
|
> |
|
|
|
|
<img src={logoIcon} alt="" className="" /> |
|
|
|
|
{!resend && ( |
|
|
|
|
<div className="w-full leading-6 dark:text-white mt-10 text-xs text-gray1"> |
|
|
|
|
یک کد چهار رقمی تا {" "} |
|
|
|
|
<Timer seconds={120} refresh={setResend} /> دیگر برای شماره |
|
|
|
|
{" "} |
|
|
|
|
<span className="text-greenBA text-sm"> |
|
|
|
|
{signUpFields?.cellphone} |
|
|
|
|
</span>{" "} |
|
|
|
|
ارسال خواهد شد. |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
|
|
|
|
|
<div className="w-full flex flex-col mt-5"> |
|
|
|
|
<div className="w-full flex flex-row-reverse justify-center"> |
|
|
|
|
<input |
|
|
|
|
inputMode="numeric" |
|
|
|
|
style={{ direction: "ltr" }} |
|
|
|
|
name="otp1" |
|
|
|
|
className="bg-grayF9 rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1" |
|
|
|
|
onChange={(e) => |
|
|
|
|
onChange( |
|
|
|
|
e.target.name, |
|
|
|
|
(e.target.value = onInput.numberOnly(e.target.value)) |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
maxlength="1" |
|
|
|
|
ref={otp1} |
|
|
|
|
/> |
|
|
|
|
<input |
|
|
|
|
inputMode="numeric" |
|
|
|
|
style={{ direction: "ltr" }} |
|
|
|
|
name="otp2" |
|
|
|
|
className="bg-grayF9 rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1" |
|
|
|
|
onChange={(e) => |
|
|
|
|
onChange( |
|
|
|
|
e.target.name, |
|
|
|
|
(e.target.value = onInput.numberOnly(e.target.value)) |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
maxlength="1" |
|
|
|
|
ref={otp2} |
|
|
|
|
/> |
|
|
|
|
<input |
|
|
|
|
inputMode="numeric" |
|
|
|
|
style={{ direction: "ltr" }} |
|
|
|
|
name="otp3" |
|
|
|
|
className="bg-grayF9 rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1" |
|
|
|
|
onChange={(e) => |
|
|
|
|
onChange( |
|
|
|
|
e.target.name, |
|
|
|
|
(e.target.value = onInput.numberOnly(e.target.value)) |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
maxlength="1" |
|
|
|
|
ref={otp3} |
|
|
|
|
/> |
|
|
|
|
<input |
|
|
|
|
inputMode="numeric" |
|
|
|
|
style={{ direction: "ltr" }} |
|
|
|
|
name="otp4" |
|
|
|
|
className="bg-grayF9 rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1" |
|
|
|
|
onChange={(e) => |
|
|
|
|
onChange( |
|
|
|
|
e.target.name, |
|
|
|
|
(e.target.value = onInput.numberOnly(e.target.value)) |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
maxlength="1" |
|
|
|
|
ref={otp4} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<br /> |
|
|
|
|
<Button |
|
|
|
|
title="ادامه فرایند خرید" |
|
|
|
|
backgroundColor="bg-blueC0" |
|
|
|
|
border={{ color: "#196EC055", width: "1px" }} |
|
|
|
|
width="100%" |
|
|
|
|
color="text-white" |
|
|
|
|
onClick={(e) => |
|
|
|
|
level === "phonenumber" ? checkPhoneNumber(e) : checkOtp(e) |
|
|
|
|
} |
|
|
|
|
/> |
|
|
|
|
<div className="mt-10 flex flex-row text-center w-full justify-center"> |
|
|
|
|
<div className="text-xs text-gray1"> |
|
|
|
|
شماره خود را اشتباه وارد کردید؟{" "} |
|
|
|
|
<button |
|
|
|
|
className="bg-transparent border-none text-greenBA font-medium" |
|
|
|
|
onClick={() => setLevel("phonenumber")} |
|
|
|
|
> |
|
|
|
|
اصلاح شماره تلفن |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export default connect( |
|
|
|
|
(state) => ({ |
|
|
|
|
loginFlag: state.user.setLogin, |
|
|
|
|
loginFlag: state.user.status, |
|
|
|
|
}), |
|
|
|
|
{ |
|
|
|
|
sendOtp: user.otp_login, |
|
|
|
|
|
Reza_ashrafi
3 years ago