You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
296 lines
8.9 KiB
296 lines
8.9 KiB
import React, { useState, useRef, useEffect } from "react"; |
|
import { useNavigate } from "react-router-dom"; |
|
import Input from "../../../components/Input"; |
|
import Button from "../../../components/Button"; |
|
import Timer from "../../../components/Timer"; |
|
import onInput from "../../../utils/onInput"; |
|
import Loading from "../../../components/Loading"; |
|
|
|
import { connect } from "react-redux"; |
|
import { user, publicApi } from "../../../redux/actions"; |
|
import _ from "lodash"; |
|
//assets |
|
import logoIcon from "./assets/logo.svg"; |
|
|
|
function SignUp({ |
|
sendOtp, |
|
sendPhoneNumber, |
|
loginFlag, |
|
theme, |
|
headerOptions, |
|
setHeaderOptions, |
|
loading, |
|
}) { |
|
const [level, setLevel] = useState("phonenumber"); |
|
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 = (e) => { |
|
if ( |
|
signUpFields?.cellphone?.slice(0, 2) === "09" && |
|
signUpFields?.cellphone.length === 11 |
|
) { |
|
setLevel("otp"); |
|
setResend(false); |
|
sendPhoneNumber({ cellphone: signUpFields?.cellphone }); |
|
setError(undefined); |
|
} else { |
|
setError(window.t("شماره موبایل خود را وارد کنید.")); |
|
} |
|
}; |
|
|
|
const checkOtp = () => { |
|
if ( |
|
signUpFields?.otp1 && |
|
signUpFields?.otp2 && |
|
signUpFields?.otp3 && |
|
signUpFields?.otp4 |
|
) { |
|
sendOtp({ |
|
cellphone: signUpFields?.cellphone, |
|
otp: |
|
signUpFields?.otp1 + |
|
signUpFields?.otp2 + |
|
signUpFields?.otp3 + |
|
signUpFields?.otp4, |
|
userToken: "2", |
|
applicationToken: "22", |
|
}); |
|
setError(undefined); |
|
} else { |
|
setError(window.t("کد وارد شده را چک کنید.")); |
|
} |
|
}; |
|
|
|
const numberInput = useRef(); |
|
|
|
useEffect(() => { |
|
// numberInput.current.focus(); |
|
setHeaderOptions(headerOptions); |
|
}, []); |
|
|
|
useEffect(() => { |
|
if (signUpFields?.otp?.length === 4) { |
|
sendOtp({ |
|
cellphone: signUpFields?.cellphone, |
|
otp: signUpFields?.otp, |
|
userToken: "2", |
|
applicationToken: "22", |
|
}); |
|
} |
|
}, [signUpFields]); |
|
|
|
useEffect(() => { |
|
if (level === "phonenumber") { |
|
// numberInput.current.focus(); |
|
} else { |
|
// otpInput.current.focus(); |
|
} |
|
}, [level]); |
|
|
|
useEffect(() => { |
|
if (loginFlag) { |
|
navigate("/"); |
|
} |
|
}, [loginFlag]); |
|
const light = theme === "light"; |
|
|
|
return ( |
|
<div |
|
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"> |
|
{window.t("سلام")} <br /> {window.t("خوش برگشتی!")} |
|
</strong> |
|
<div className="w-full flex flex-col mt-10"> |
|
<Input |
|
label={window.t("شماره موبایل")} |
|
name="cellphone" |
|
regex={onInput.numberOnly} |
|
onChange={(name, value) => onChange(name, value)} |
|
value={signUpFields?.cellphone} |
|
align="text-center" |
|
maxLength="11" |
|
direction="ltr" |
|
/> |
|
<span className="text-red-500 text-xs">{error}</span> |
|
<br /> |
|
<Button |
|
title={window.t("ادامه")} |
|
backgroundColor="bg-blueC0" |
|
border={{ color: "#196EC055", width: "0px" }} |
|
width="100%" |
|
color="text-white" |
|
onClick={(e) => checkPhoneNumber(e)} |
|
/> |
|
</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 lg:text-sm text-gray1"> |
|
{window.t("یک کد چهار رقمی تا")} |
|
<Timer seconds={120} refresh={setResend} /> |
|
{window.t("دیگر برای شماره")} |
|
|
|
<span className="text-greenBA text-sm lg:text-tiny"> |
|
{signUpFields?.cellphone} |
|
</span> |
|
{window.t("ارسال خواهد شد.")} |
|
</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 dark:bg-opacity-10 outline-none rounded-md p-4 w-16 text-2xl font-bold lg:text-lg 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 dark:bg-opacity-10 outline-none rounded-md p-4 w-16 text-2xl font-bold lg:text-lg 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 dark:bg-opacity-10 outline-none rounded-md p-4 w-16 text-2xl font-bold lg:text-lg 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 dark:bg-opacity-10 outline-none rounded-md p-4 w-16 text-2xl font-bold lg:text-lg text-center text-blueC0 mx-1" |
|
onChange={(e) => |
|
onChange( |
|
e.target.name, |
|
(e.target.value = onInput.englishAndNumberWithoutSpace( |
|
e.target.value |
|
)) |
|
) |
|
} |
|
maxlength="1" |
|
ref={otp4} |
|
/> |
|
</div> |
|
<br /> |
|
<Button |
|
title={window.t("ادامه")} |
|
loading={loading} |
|
backgroundColor="bg-blueC0" |
|
border={{ color: "#196EC055", width: "0px" }} |
|
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 dark:text-gray-200 lg:text-sm"> |
|
{window.t(" شماره خود را اشتباه وارد کردید؟")} |
|
<button |
|
className="bg-transparent border-none text-greenBA font-medium" |
|
onClick={() => setLevel("phonenumber")} |
|
> |
|
{window.t(" اصلاح شماره تلفن")} |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
); |
|
} |
|
|
|
const mapStateToProps = (state) => ({ |
|
loginFlag: state.user.status, |
|
loading: state.user.loading, |
|
}); |
|
|
|
const mapDispatchToProps = { |
|
sendOtp: user.otp_login, |
|
sendPhoneNumber: user.otp, |
|
setHeaderOptions: publicApi.setHeaderOptions, |
|
}; |
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(SignUp);
|
|
|