|
|
|
|
@ -11,6 +11,7 @@ import thirdPic from '../../../assets/img/undraw_certificate_re_yadi.svg'; |
|
|
|
|
|
|
|
|
|
import { connect } from "react-redux"; |
|
|
|
|
import { user, publicApi } from "../../../redux/actions"; |
|
|
|
|
import SignUpBox from "../SignUpBox"; |
|
|
|
|
|
|
|
|
|
const LoginSignUpMobile = ({ |
|
|
|
|
activeLogin, |
|
|
|
|
@ -22,443 +23,437 @@ const LoginSignUpMobile = ({ |
|
|
|
|
setHeaderOptions, |
|
|
|
|
isMobile, |
|
|
|
|
}) => { |
|
|
|
|
const [steps, setSteps] = useState(0); |
|
|
|
|
const [index, setIndex] = useState(1); |
|
|
|
|
const [register, setRegister] = useState(false); |
|
|
|
|
const timeoutRef = useRef(null); |
|
|
|
|
|
|
|
|
|
const focusHandler = (id) => { |
|
|
|
|
let inputs = document.querySelectorAll(".Login-box-form-item"); |
|
|
|
|
let label = document.querySelectorAll(".Login-box-form-item-label"); |
|
|
|
|
let line = document.querySelectorAll(".Login-box-form-item-line"); |
|
|
|
|
inputs[id].style.borderColor = "#df1452"; |
|
|
|
|
inputs[id].style.backgroundColor = "#fff"; |
|
|
|
|
label[id].style.transform = "translate(-10px,-27px)"; |
|
|
|
|
label[id].style.color = "#df1452"; |
|
|
|
|
line[id].style.backgroundColor = "#fff"; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const blurHandler = (id) => { |
|
|
|
|
let inputsBox = document.querySelectorAll(".Login-box-form-item"); |
|
|
|
|
let inputs = document.querySelectorAll(".Login-box-form-item-input"); |
|
|
|
|
let label = document.querySelectorAll(".Login-box-form-item-label"); |
|
|
|
|
let line = document.querySelectorAll(".Login-box-form-item-line"); |
|
|
|
|
if (inputs[id].value === "") { |
|
|
|
|
inputsBox[id].style.borderColor = "#EBEBEB"; |
|
|
|
|
label[id].style.transform = "translate(0px,0px)"; |
|
|
|
|
label[id].style.color = "#959595"; |
|
|
|
|
line[id].style.backgroundColor = "#EBEBEB"; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
function resetTimeout() { |
|
|
|
|
if (timeoutRef.current) { |
|
|
|
|
clearTimeout(timeoutRef.current); |
|
|
|
|
} |
|
|
|
|
//ark add------------------------------------------
|
|
|
|
|
const [signUp, setSignUp] = useState(false); |
|
|
|
|
//----------------------------------------
|
|
|
|
|
const [steps, setSteps] = useState(0); |
|
|
|
|
const [index, setIndex] = useState(1); |
|
|
|
|
const [register, setRegister] = useState(false); |
|
|
|
|
const timeoutRef = useRef(null); |
|
|
|
|
|
|
|
|
|
const focusHandler = (id) => { |
|
|
|
|
let inputs = document.querySelectorAll(".Login-box-form-item"); |
|
|
|
|
let label = document.querySelectorAll(".Login-box-form-item-label"); |
|
|
|
|
let line = document.querySelectorAll(".Login-box-form-item-line"); |
|
|
|
|
inputs[id].style.borderColor = "#df1452"; |
|
|
|
|
inputs[id].style.backgroundColor = "#fff"; |
|
|
|
|
label[id].style.transform = "translate(-10px,-27px)"; |
|
|
|
|
label[id].style.color = "#df1452"; |
|
|
|
|
line[id].style.backgroundColor = "#fff"; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const blurHandler = (id) => { |
|
|
|
|
let inputsBox = document.querySelectorAll(".Login-box-form-item"); |
|
|
|
|
let inputs = document.querySelectorAll(".Login-box-form-item-input"); |
|
|
|
|
let label = document.querySelectorAll(".Login-box-form-item-label"); |
|
|
|
|
let line = document.querySelectorAll(".Login-box-form-item-line"); |
|
|
|
|
if (inputs[id].value === "") { |
|
|
|
|
inputsBox[id].style.borderColor = "#EBEBEB"; |
|
|
|
|
label[id].style.transform = "translate(0px,0px)"; |
|
|
|
|
label[id].style.color = "#959595"; |
|
|
|
|
line[id].style.backgroundColor = "#EBEBEB"; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
resetTimeout(); |
|
|
|
|
timeoutRef.current = setTimeout( |
|
|
|
|
() => { |
|
|
|
|
setIndex((prevIndex) => prevIndex + 1 |
|
|
|
|
// prevIndex === slideContents.length - 1 ? 0 : prevIndex + 1
|
|
|
|
|
) |
|
|
|
|
if (index === slideContents.length) |
|
|
|
|
setTimeout(setIndex(1), 1000) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
delay |
|
|
|
|
function resetTimeout() { |
|
|
|
|
if (timeoutRef.current) { |
|
|
|
|
clearTimeout(timeoutRef.current); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
resetTimeout(); |
|
|
|
|
timeoutRef.current = setTimeout( |
|
|
|
|
() => { |
|
|
|
|
setIndex( |
|
|
|
|
(prevIndex) => prevIndex + 1 |
|
|
|
|
// prevIndex === slideContents.length - 1 ? 0 : prevIndex + 1
|
|
|
|
|
); |
|
|
|
|
if (index === slideContents.length) setTimeout(setIndex(1), 1000); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
return () => { |
|
|
|
|
resetTimeout(); |
|
|
|
|
}; |
|
|
|
|
}, [index]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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(); |
|
|
|
|
delay |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
|
return () => { |
|
|
|
|
resetTimeout(); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const checkPhoneNumber = (e) => { |
|
|
|
|
if ( |
|
|
|
|
signUpFields?.cellphone?.slice(0, 2) === "09" && |
|
|
|
|
signUpFields?.cellphone.length === 11 |
|
|
|
|
) { |
|
|
|
|
|
|
|
|
|
setSteps(2) |
|
|
|
|
|
|
|
|
|
sendPhoneNumber({ cellphone: signUpFields?.cellphone }); |
|
|
|
|
setError(undefined); |
|
|
|
|
console.log(signUpFields.cellphone) |
|
|
|
|
} else { |
|
|
|
|
setError("شماره موبایل خود را چک کنید."); |
|
|
|
|
}, [index]); |
|
|
|
|
|
|
|
|
|
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(); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const checkOtp = () => { |
|
|
|
|
if (steps !== 1 &&
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
break; |
|
|
|
|
case "otp2": |
|
|
|
|
if (value) { |
|
|
|
|
otp3.current.focus(); |
|
|
|
|
} else { |
|
|
|
|
setError("کد وارد شده را چک کنید."); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
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", |
|
|
|
|
}); |
|
|
|
|
otp1.current.focus(); |
|
|
|
|
} |
|
|
|
|
}, [signUpFields]); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (level === "phonenumber") { |
|
|
|
|
// numberInput.current.focus();
|
|
|
|
|
break; |
|
|
|
|
case "otp3": |
|
|
|
|
if (value) { |
|
|
|
|
otp4.current.focus(); |
|
|
|
|
} else { |
|
|
|
|
// otpInput.current.focus();
|
|
|
|
|
otp2.current.focus(); |
|
|
|
|
} |
|
|
|
|
}, [level]); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (loginFlag) { |
|
|
|
|
navigate("/"); |
|
|
|
|
break; |
|
|
|
|
case "otp4": |
|
|
|
|
if (value) { |
|
|
|
|
checkOtp(); |
|
|
|
|
} else { |
|
|
|
|
otp3.current.focus(); |
|
|
|
|
} |
|
|
|
|
}, [loginFlag]); |
|
|
|
|
const light = theme === "light"; |
|
|
|
|
|
|
|
|
|
const slideContents = [ |
|
|
|
|
{ |
|
|
|
|
id: 0, |
|
|
|
|
image: firstPic, |
|
|
|
|
title: 'یک معلم دیوانه در کمین شما نشسته است مراقب باشید', |
|
|
|
|
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 1, |
|
|
|
|
image: secondPic, |
|
|
|
|
title: 'یک آزمون سخت و افتضاح در راه هست!', |
|
|
|
|
description: 'لورم ایپسوم نمیخواستم استفاده کنم برای همین این متنای عجیب رو مینویسم ببینم چجوری میشه تهش بالاخره اونا هم قراره یه متن عجیب بنویسن ', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 2, |
|
|
|
|
image: thirdPic, |
|
|
|
|
title: 'یک اسلاید عجیب غریب دیگر در راه هست', |
|
|
|
|
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ', |
|
|
|
|
}, |
|
|
|
|
break; |
|
|
|
|
default: |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const checkPhoneNumber = (e) => { |
|
|
|
|
if ( |
|
|
|
|
signUpFields?.cellphone?.slice(0, 2) === "09" && |
|
|
|
|
signUpFields?.cellphone.length === 11 |
|
|
|
|
) { |
|
|
|
|
setSteps(2); |
|
|
|
|
|
|
|
|
|
sendPhoneNumber({ cellphone: signUpFields?.cellphone }); |
|
|
|
|
setError(undefined); |
|
|
|
|
console.log(signUpFields.cellphone); |
|
|
|
|
} else { |
|
|
|
|
setError("شماره موبایل خود را چک کنید."); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const checkOtp = () => { |
|
|
|
|
if ( |
|
|
|
|
steps !== 1 && |
|
|
|
|
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("کد وارد شده را چک کنید."); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
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]); |
|
|
|
|
|
|
|
|
|
]; |
|
|
|
|
const delay = 2500; |
|
|
|
|
return ( |
|
|
|
|
useEffect(() => { |
|
|
|
|
if (level === "phonenumber") { |
|
|
|
|
// numberInput.current.focus();
|
|
|
|
|
} else { |
|
|
|
|
// otpInput.current.focus();
|
|
|
|
|
} |
|
|
|
|
}, [level]); |
|
|
|
|
|
|
|
|
|
<div className="w-full flex flex-col items-center justify-center" style={{ height: '100vh', direction: 'rtl' }}> |
|
|
|
|
<div className="w-full flex flex-col h-full justify-between pt-10 pb-24 rounded-xl"> |
|
|
|
|
{/* form */} |
|
|
|
|
<div className="h-12 w-full px-5 flex justify-end"> |
|
|
|
|
{steps != 0 && |
|
|
|
|
<div className="w-12 h-12 bg-gray-200 rounded-xl flex items-center justify-center text-gray-500 m-0 text-2xl font-light cursor-pointer" onClick={() => setSteps(steps - 1)}> |
|
|
|
|
{`>`} |
|
|
|
|
useEffect(() => { |
|
|
|
|
if (loginFlag) { |
|
|
|
|
navigate("/"); |
|
|
|
|
} |
|
|
|
|
}, [loginFlag]); |
|
|
|
|
const light = theme === "light"; |
|
|
|
|
|
|
|
|
|
const slideContents = [ |
|
|
|
|
{ |
|
|
|
|
id: 0, |
|
|
|
|
image: firstPic, |
|
|
|
|
title: "یک معلم دیوانه در کمین شما نشسته است مراقب باشید", |
|
|
|
|
description: |
|
|
|
|
"معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 1, |
|
|
|
|
image: secondPic, |
|
|
|
|
title: "یک آزمون سخت و افتضاح در راه هست!", |
|
|
|
|
description: |
|
|
|
|
"لورم ایپسوم نمیخواستم استفاده کنم برای همین این متنای عجیب رو مینویسم ببینم چجوری میشه تهش بالاخره اونا هم قراره یه متن عجیب بنویسن ", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 2, |
|
|
|
|
image: thirdPic, |
|
|
|
|
title: "یک اسلاید عجیب غریب دیگر در راه هست", |
|
|
|
|
description: |
|
|
|
|
"معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ", |
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
const delay = 2500; |
|
|
|
|
return ( |
|
|
|
|
<div |
|
|
|
|
className="w-full flex flex-col items-center justify-center" |
|
|
|
|
style={{ height: "100vh", direction: "rtl" }} |
|
|
|
|
> |
|
|
|
|
<div className="w-full flex flex-col h-full justify-between pt-10 pb-24 rounded-xl"> |
|
|
|
|
{/* form */} |
|
|
|
|
<div className="h-12 w-full px-5 flex justify-end"> |
|
|
|
|
{steps != 0 && ( |
|
|
|
|
<div |
|
|
|
|
className="w-12 h-12 bg-gray-200 rounded-xl flex items-center justify-center text-gray-500 m-0 text-2xl font-light cursor-pointer" |
|
|
|
|
onClick={() => setSteps(steps - 1)} |
|
|
|
|
> |
|
|
|
|
{`>`} |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
className={`flex w-full ${ |
|
|
|
|
steps == 2 ? "h-full justify-center" : "justify-between" |
|
|
|
|
} flex-col items-center p-6`}
|
|
|
|
|
> |
|
|
|
|
<img src={logo} className="w-1/2 m-6" /> |
|
|
|
|
<div className="flex flex-col w-full items-start justify-start leading-normal"> |
|
|
|
|
{steps == 2 ? ( |
|
|
|
|
<h1 className="text-red26 text-lg font-bold">تاییدیه ثبت نام</h1> |
|
|
|
|
) : ( |
|
|
|
|
<> |
|
|
|
|
<div className=" w-full flex flex-col items-center justify-center h-4/5"> |
|
|
|
|
<div |
|
|
|
|
className="slideshow items-center justify-center" |
|
|
|
|
style={{ direction: "ltr" }} |
|
|
|
|
> |
|
|
|
|
<div |
|
|
|
|
className="slideshowSlider w-full" |
|
|
|
|
style={{ |
|
|
|
|
transform: `translate3d(${-index * 100}%, 0, 0)`, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{[ |
|
|
|
|
slideContents[slideContents.length - 1], |
|
|
|
|
...slideContents, |
|
|
|
|
slideContents[0], |
|
|
|
|
].map((item, index) => ( |
|
|
|
|
<div className="slide" key={`sildeNo${index}`}> |
|
|
|
|
<div className="w-full h-full flex flex-col justify-center items-center"> |
|
|
|
|
<img src={item.image} className="h-2/5" /> |
|
|
|
|
<h1 className="w-4/5 text-sm my-2 text-red26 font-bold whitespace-normal"> |
|
|
|
|
{item.title} |
|
|
|
|
</h1> |
|
|
|
|
<p className=" px-12 text-right text-xs whitespace-normal"> |
|
|
|
|
{item.description} |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
} |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div className={`flex w-full ${steps == 2 ? 'h-full justify-center' : 'justify-between'} flex-col items-center p-6`}> |
|
|
|
|
|
|
|
|
|
<img src={logo} className="w-1/2 m-6" /> |
|
|
|
|
<div className="flex flex-col w-full items-start justify-start leading-normal"> |
|
|
|
|
{ |
|
|
|
|
steps == 2 ? <h1 className="text-red26 text-lg font-bold">تاییدیه ثبت نام</h1> : |
|
|
|
|
<> |
|
|
|
|
<div className=" w-full flex flex-col items-center justify-center h-4/5" > |
|
|
|
|
<div className="slideshow items-center justify-center" style={{ direction: 'ltr' }}> |
|
|
|
|
<div |
|
|
|
|
className="slideshowSlider w-full" |
|
|
|
|
style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }} |
|
|
|
|
> |
|
|
|
|
{[slideContents[slideContents.length - 1], |
|
|
|
|
...slideContents, slideContents[0] |
|
|
|
|
].map((item, index) => ( |
|
|
|
|
<div |
|
|
|
|
className="slide" |
|
|
|
|
key={`sildeNo${index}`} |
|
|
|
|
|
|
|
|
|
> |
|
|
|
|
<div className="w-full h-full flex flex-col justify-center items-center"> |
|
|
|
|
<img src={item.image} className="h-2/5" /> |
|
|
|
|
<h1 className="w-4/5 text-sm my-2 text-red26 font-bold whitespace-normal">{item.title}</h1> |
|
|
|
|
<p className=" px-12 text-right text-xs whitespace-normal">{item.description}</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{/* <div className="slideshowDots"> |
|
|
|
|
{slideContents.map((_, idx) => ( |
|
|
|
|
<div |
|
|
|
|
key={idx} |
|
|
|
|
className={`slideshowDot${index === idx + 1 ? " active" : ""}`} |
|
|
|
|
onClick={() => { |
|
|
|
|
setIndex(idx + 1); |
|
|
|
|
}} |
|
|
|
|
></div> |
|
|
|
|
))} |
|
|
|
|
</div> */} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</> |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
<p className="text-gray-500 text-sm mt-2 flex justify-center"> |
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
steps == 2 && (resend ? |
|
|
|
|
<div> |
|
|
|
|
<span className="ml-2">کد تایید ارسال نشد؟</span> |
|
|
|
|
<button className="text-red52" |
|
|
|
|
onClick={() => { |
|
|
|
|
checkPhoneNumber(signUpFields?.cellphone); |
|
|
|
|
setResend(false) |
|
|
|
|
}} |
|
|
|
|
>درخواست مجدد کد تایید</button> |
|
|
|
|
</div> |
|
|
|
|
: <p className="w-4/5 "> |
|
|
|
|
یک کد چهار رقمی تا {" "} |
|
|
|
|
<Timer seconds={120} refresh={() => { setResend(true) }} /> |
|
|
|
|
دیگر برای شماره |
|
|
|
|
{" "} |
|
|
|
|
<span className="text-red52 text-sm"> |
|
|
|
|
{signUpFields?.cellphone} |
|
|
|
|
</span>{" "} |
|
|
|
|
ارسال خواهد شد. |
|
|
|
|
</p>) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
steps == 0 && |
|
|
|
|
<div className="flex w-full items-center mt-4"> |
|
|
|
|
<Link |
|
|
|
|
to="" |
|
|
|
|
className="Login-box-form-btn w-full h-12 rounded-lg bg-red52 text-white flex items-center justify-center ml-1" |
|
|
|
|
onClick={() => { |
|
|
|
|
setSteps(1); |
|
|
|
|
|
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
ورود |
|
|
|
|
</Link> |
|
|
|
|
<Link |
|
|
|
|
to="" |
|
|
|
|
className="Login-box-form-btn w-full h-12 rounded-lg border border-solid border-red52 text-red52 flex items-center justify-center mr-1" |
|
|
|
|
onClick={() => { |
|
|
|
|
setSteps(1); |
|
|
|
|
setRegister(true); |
|
|
|
|
|
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
ثبت نام |
|
|
|
|
</Link> |
|
|
|
|
</div> |
|
|
|
|
} |
|
|
|
|
{ |
|
|
|
|
steps == 1 && |
|
|
|
|
<> |
|
|
|
|
|
|
|
|
|
<Input |
|
|
|
|
title={"شماره موبایل"} |
|
|
|
|
name="cellphone" |
|
|
|
|
regex={onInput.numberOnly} |
|
|
|
|
onChange={(name, value) => onChange(name, value)} |
|
|
|
|
value={signUpFields?.cellphone} |
|
|
|
|
|
|
|
|
|
maxLength="11" |
|
|
|
|
direction="ltr" |
|
|
|
|
/> |
|
|
|
|
<span className="text-red-500 text-xs">{error}</span> |
|
|
|
|
|
|
|
|
|
<Link |
|
|
|
|
to="" |
|
|
|
|
className="Login-box-form-btn w-full h-12 rounded-lg bg-red52 text-white flex items-center justify-center mt-4" |
|
|
|
|
onClick={(e) => { |
|
|
|
|
// setSteps(2);
|
|
|
|
|
checkPhoneNumber(e) |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
ارسال کد تاییدیه |
|
|
|
|
</Link> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</> |
|
|
|
|
} |
|
|
|
|
{ |
|
|
|
|
steps == 2 && |
|
|
|
|
<> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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-red82OP rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1 focus:text-red52 focus:bg-white focus:outline-red52" |
|
|
|
|
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-red82OP rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1 focus:text-red52 focus:bg-white focus:outline-red52" |
|
|
|
|
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-red82OP rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1 focus:text-red52 focus:bg-white focus:outline-red52" |
|
|
|
|
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-red82OP rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1 focus:text-red52 focus:bg-white focus:outline-red52" |
|
|
|
|
onChange={(e) => |
|
|
|
|
onChange( |
|
|
|
|
e.target.name, |
|
|
|
|
(e.target.value = onInput.englishAndNumberWithoutSpace(e.target.value)) |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
maxlength="1" |
|
|
|
|
ref={otp4} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<Link |
|
|
|
|
to={register == true ? '/register' : `/`} |
|
|
|
|
className="Login-box-form-btn w-full h-12 rounded-lg bg-red52 text-white flex items-center justify-center mt-4" |
|
|
|
|
onClick={(e) => { |
|
|
|
|
|
|
|
|
|
checkOtp(e) |
|
|
|
|
// activeLogin()
|
|
|
|
|
|
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
تایید |
|
|
|
|
</Link> |
|
|
|
|
<div className="mt-3 flex flex-row text-center w-full justify-center"> |
|
|
|
|
<div className="text-xs text-gray1"> |
|
|
|
|
شماره خود را اشتباه وارد کردید؟{" "} |
|
|
|
|
<button |
|
|
|
|
className="bg-transparent border-none text-red52 font-medium" |
|
|
|
|
onClick={() => setSteps(1)} |
|
|
|
|
> |
|
|
|
|
اصلاح شماره تلفن |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</> |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
</> |
|
|
|
|
)} |
|
|
|
|
|
|
|
|
|
<p className="text-gray-500 text-sm mt-2 flex justify-center"> |
|
|
|
|
{steps == 2 && |
|
|
|
|
(resend ? ( |
|
|
|
|
<div> |
|
|
|
|
<span className="ml-2">کد تایید ارسال نشد؟</span> |
|
|
|
|
<button |
|
|
|
|
className="text-red52" |
|
|
|
|
onClick={() => { |
|
|
|
|
checkPhoneNumber(signUpFields?.cellphone); |
|
|
|
|
setResend(false); |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
درخواست مجدد کد تایید |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
) : ( |
|
|
|
|
<p className="w-4/5 "> |
|
|
|
|
یک کد چهار رقمی تا {" "} |
|
|
|
|
<Timer |
|
|
|
|
seconds={120} |
|
|
|
|
refresh={() => { |
|
|
|
|
setResend(true); |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
دیگر برای شماره {" "} |
|
|
|
|
<span className="text-red52 text-sm"> |
|
|
|
|
{signUpFields?.cellphone} |
|
|
|
|
</span>{" "} |
|
|
|
|
ارسال خواهد شد. |
|
|
|
|
</p> |
|
|
|
|
))} |
|
|
|
|
</p> |
|
|
|
|
|
|
|
|
|
{steps == 0 && ( |
|
|
|
|
<div className="flex w-full items-center mt-4"> |
|
|
|
|
<Link |
|
|
|
|
to="" |
|
|
|
|
className="Login-box-form-btn w-full h-12 rounded-lg bg-red52 text-white flex items-center justify-center ml-1" |
|
|
|
|
onClick={() => { |
|
|
|
|
setSteps(1); |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
ورود |
|
|
|
|
</Link> |
|
|
|
|
<Link |
|
|
|
|
to="" |
|
|
|
|
className="Login-box-form-btn w-full h-12 rounded-lg border border-solid border-red52 text-red52 flex items-center justify-center mr-1" |
|
|
|
|
onClick={() => { |
|
|
|
|
setSignUp(true); |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
ثبت نام |
|
|
|
|
</Link> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
{steps == 1 && ( |
|
|
|
|
<> |
|
|
|
|
<Input |
|
|
|
|
title={"شماره موبایل"} |
|
|
|
|
name="cellphone" |
|
|
|
|
regex={onInput.numberOnly} |
|
|
|
|
onChange={(name, value) => onChange(name, value)} |
|
|
|
|
value={signUpFields?.cellphone} |
|
|
|
|
maxLength={11} |
|
|
|
|
direction="ltr" |
|
|
|
|
/> |
|
|
|
|
<span className="text-red-500 text-xs">{error}</span> |
|
|
|
|
|
|
|
|
|
<Link |
|
|
|
|
to="" |
|
|
|
|
className="Login-box-form-btn w-full h-12 rounded-lg bg-red52 text-white flex items-center justify-center mt-4" |
|
|
|
|
onClick={(e) => { |
|
|
|
|
// setSteps(2);
|
|
|
|
|
checkPhoneNumber(e); |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
ارسال کد تاییدیه |
|
|
|
|
</Link> |
|
|
|
|
</> |
|
|
|
|
)} |
|
|
|
|
{steps == 2 && ( |
|
|
|
|
<> |
|
|
|
|
<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-red82OP rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1 focus:text-red52 focus:bg-white focus:outline-red52" |
|
|
|
|
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-red82OP rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1 focus:text-red52 focus:bg-white focus:outline-red52" |
|
|
|
|
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-red82OP rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1 focus:text-red52 focus:bg-white focus:outline-red52" |
|
|
|
|
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-red82OP rounded-md p-4 w-16 text-md text-center text-blueC0 mx-1 focus:text-red52 focus:bg-white focus:outline-red52" |
|
|
|
|
onChange={(e) => |
|
|
|
|
onChange( |
|
|
|
|
e.target.name, |
|
|
|
|
(e.target.value = |
|
|
|
|
onInput.englishAndNumberWithoutSpace( |
|
|
|
|
e.target.value |
|
|
|
|
)) |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
maxlength="1" |
|
|
|
|
ref={otp4} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<Link |
|
|
|
|
to={register == true ? "/register" : `/`} |
|
|
|
|
className="Login-box-form-btn w-full h-12 rounded-lg bg-red52 text-white flex items-center justify-center mt-4" |
|
|
|
|
onClick={(e) => { |
|
|
|
|
checkOtp(e); |
|
|
|
|
// activeLogin()
|
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
تایید |
|
|
|
|
</Link> |
|
|
|
|
<div className="mt-3 flex flex-row text-center w-full justify-center"> |
|
|
|
|
<div className="text-xs text-gray1"> |
|
|
|
|
شماره خود را اشتباه وارد کردید؟{" "} |
|
|
|
|
<button |
|
|
|
|
className="bg-transparent border-none text-red52 font-medium" |
|
|
|
|
onClick={() => setSteps(1)} |
|
|
|
|
> |
|
|
|
|
اصلاح شماره تلفن |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</> |
|
|
|
|
)} |
|
|
|
|
|
|
|
|
|
{/* <div className="w-full flex flex-col items-center justify-center"> |
|
|
|
|
{/* <div className="w-full flex flex-col items-center justify-center"> |
|
|
|
|
<p className="w-3/5 text-xs my-20 text-center text-red26"> |
|
|
|
|
ثبت نام شما در سامانه به منزله قبول |
|
|
|
|
<Link to="" className="font-bold"> شرایط و قوانین استفاده </Link> |
|
|
|
|
@ -466,19 +461,12 @@ const LoginSignUpMobile = ({ |
|
|
|
|
</p> |
|
|
|
|
<p className="text-gray-300 text-xs">1401 - 1400</p> |
|
|
|
|
</div> */} |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
); |
|
|
|
|
</div> |
|
|
|
|
{signUp && <SignUpBox setSignUp={setSignUp} />} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
|
|
|
