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.
 
 
 

308 lines
9.3 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="" />
<div className="mt-7">
<p className="text-sm align-start ">
{window.t("سلام به ")}
<span className="font-bold text-blueC0">
{window.t(" دانوین خوش ")}
</span>
{window.t("آمدید")}
</p>
<p className="text-sm mt-4">
{window.t(
" لطفا جهت ورود یا ثبت نام شماره همراه خود را وارد نمایید."
)}
</p>
</div>
<div className="w-full flex flex-col mt-4">
<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("یک کد چهار رقمی تا")} &nbsp;
<Timer seconds={120} refresh={setResend} /> &nbsp;
{window.t("دیگر برای شماره")}
&nbsp;
<span className="text-greenBA text-sm lg:text-tiny">
{signUpFields?.cellphone}
</span>
&nbsp; {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);