signup added

temp
Reza_ashrafi 3 years ago
parent bf42375d40
commit f309ac09a0
  1. 2
      src/components/Button/index.js
  2. 44
      src/components/Input/index.js
  3. 2
      src/components/Timer/index.js
  4. 2
      src/router.js
  5. 18
      src/utils/onInput.js
  6. 182
      src/views/Auth/SignUp/index.js
  7. 9
      src/views/Home/Landscape/index.js

@ -11,7 +11,7 @@ export default function Button({
}) {
return (
<button
className={`rounded-md py-3 justify-center text-xs ${backgroundColor} ${color} ${bgOpacity}`}
className={`rounded-md py-3 justify-center text-sm ${backgroundColor} ${color} ${bgOpacity}`}
style={{
border: `${border.width} solid ${border.color}`,
width: width,

@ -29,11 +29,20 @@ export default function Input(props) {
const [value, setValue] = useState("");
const [focusToggle, setFocusToggle] = useState(false);
const { lang, theme, inputMode, label, status, maxLength, message } = props;
const onChange = (val) => {
setValue(val);
};
const {
lang,
theme,
inputMode,
label,
status,
maxLength,
message,
onChange,
align,
name,
regex,
direction,
} = props;
return (
<div
@ -67,7 +76,7 @@ export default function Input(props) {
inputMode={inputMode}
className={_.join(
[
"flex-1 border border-gray-500 rounded-md outline-none py-3 px-4 text-xs",
`flex-1 border border-gray-400 rounded-md outline-none py-3 px-4 text-sm ${align}`,
inputStatusHandler(
value,
focusToggle,
@ -80,10 +89,12 @@ export default function Input(props) {
],
" "
)}
onChange={(e) => onChange(e.target.value)}
value={value}
style={{ direction: direction }}
onChange={(e) =>
onChange(name, (e.target.value = regex(e.target.value)))
}
onFocus={() => setFocusToggle(true)}
onBlur={() => !value ? setFocusToggle(false) : setFocusToggle(true)}
onBlur={() => (!value ? setFocusToggle(false) : setFocusToggle(true))}
maxLength={maxLength}
/>
{!status && value && (
@ -162,10 +173,11 @@ export default function Input(props) {
}
Input.defaultProps = {
lang : 'fa',
inputMode : 'numeric',
label : 'label',
status : '',
maxLength : '',
message : '',
}
lang: "fa",
inputMode: "numeric",
label: "label",
status: "",
maxLength: "",
message: "",
direction: "rtl",
};

@ -75,7 +75,7 @@ export default class Timer extends Component {
render() {
return (
<>
<div className="timer">
<div className="timer text-greenBA text-sm inline">
{this.state.time ? this.state.time.m : ''}:{this.state.time ? this.state.time.s : ''}
</div>
</>

@ -19,7 +19,7 @@ function Router({ isDark, isLogin }) {
<div
className={_.join(
[
"min-h-screen min-w-screen rtl overflow-x-hidden pt-20 lg:py-0",
"min-h-screen min-w-screen rtl overflow-x-hidden py-20 lg:py-0",
isDark ? "" : "bg-white",
],
" "

@ -36,8 +36,8 @@ class onInput {
newText = newText.replace(/j/g, "");
newText = newText.replace(/k/g, "");
newText = newText.replace(/l/g, "");
newText = newText.replace(/\;/g, "");
newText = newText.replace(/\'/g, "");
newText = newText.replace(/;/g, "");
newText = newText.replace(/'/g, "");
newText = newText.replace(/z/g, "");
newText = newText.replace(/x/g, "");
newText = newText.replace(/c/g, "");
@ -45,8 +45,8 @@ class onInput {
newText = newText.replace(/b/g, "");
newText = newText.replace(/n/g, "");
newText = newText.replace(/m/g, "");
newText = newText.replace(/\,/g, "");
newText = newText.replace(/\./g, "");
newText = newText.replace(/,/g, "");
newText = newText.replace(/./g, "");
newText = newText.replace(/\//g, "");
newText = newText.replace(/~/g, " ");
newText = newText.replace(/Q/g, "");
@ -111,8 +111,8 @@ class onInput {
newText = newText.replace(/ع/g, "");
newText = newText.replace(/غ/g, "");
newText = newText.replace(/ف/g, "");
newText = newText.replace(/\;/g, "");
newText = newText.replace(/\'/g, "");
newText = newText.replace(/;/g, "");
newText = newText.replace(/'/g, "");
newText = newText.replace(/ق/g, "");
newText = newText.replace(/س/g, "");
newText = newText.replace(/ش/g, "");
@ -120,7 +120,7 @@ class onInput {
newText = newText.replace(/ض/g, "");
newText = newText.replace(/ک/g, "");
newText = newText.replace(/گ/g, "");
newText = newText.replace(/\,/g, "");
newText = newText.replace(/,/g, "");
newText = newText.replace(/\./g, "");
newText = newText.replace(/\//g, "");
newText = newText.replace(/~/g, " ");
@ -170,8 +170,8 @@ class onInput {
newText = newText.replace(/ع/g, "");
newText = newText.replace(/غ/g, "");
newText = newText.replace(/ف/g, "");
newText = newText.replace(/\;/g, "");
newText = newText.replace(/\'/g, "");
newText = newText.replace(/;/g, "");
newText = newText.replace(/'/g, "");
newText = newText.replace(/ق/g, "");
newText = newText.replace(/س/g, "");
newText = newText.replace(/ش/g, "");

@ -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">
یک کد چهار رقمی تا &nbsp;{" "}
<Timer seconds={120} refresh={setResend} /> &nbsp; دیگر برای شماره
&nbsp;{" "}
<span className="text-greenBA text-sm">
{signUpFields?.cellphone}
</span>{" "}
&nbsp; ارسال خواهد شد.
</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,

@ -28,8 +28,8 @@ function Home({
// initialState
useEffect(() => {
window.addEventListener("scroll", () => {
if (window.innerWidth > 1024) {
const scrollY = window.scrollY;
localStorage.setItem("prevScroll", scrollY);
if (
@ -122,15 +122,16 @@ function Home({
if (scrollY >= 4.5 * height && scrollY <= 5 * height) {
handleTestTranslateY();
}
if(scrollY > 5 * height && scrollY <= 6 * height){
if (scrollY > 5 * height && scrollY <= 6 * height) {
handlePage3TopPosition();
}
if(scrollY >= 6.3 * height && scrollY <= 7 * height){
if (scrollY >= 6.3 * height && scrollY <= 7 * height) {
handlePage3TestTranslateY();
}
if(scrollY >= 7.3 * height && scrollY <= 8.3 * height){
if (scrollY >= 7.3 * height && scrollY <= 8.3 * height) {
handlePage4TopPosition();
}
}
});
}, []);
return (

Loading…
Cancel
Save