update src/components/Navbar/index.js and src/views/Auth/SignUp/index.js

master
Reza_ashrafi 3 years ago
parent a8d24bf965
commit 3979d86209
  1. 13
      src/components/Navbar/index.js
  2. 43
      src/views/Auth/SignUp/index.js

@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate, NavLink } from "react-router-dom";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { userProduct, userFavorite } from "../../redux/actions"; import { userProduct, userFavorite } from "../../redux/actions";
import location from "../../utils/location"; import location from "../../utils/location";
@ -99,7 +99,6 @@ function Navbar({
/> />
</> </>
)} )}
{!title && back ? ( {!title && back ? (
<img <img
src={isDark ? arrowWhiteIcon : arrowBlueIcon} src={isDark ? arrowWhiteIcon : arrowBlueIcon}
@ -222,12 +221,16 @@ function Navbar({
<ul className="flex flex-row list-none items-center relative top-0.5 mr-6"> <ul className="flex flex-row list-none items-center relative top-0.5 mr-6">
{pages.map((page, index) => ( {pages.map((page, index) => (
<li key={index}> <li key={index}>
<Link <NavLink
to={page.link} to={page.link}
className="text-tiny font-semibold text-green7B py-2 px-4 mx-4" className="text-tiny py-2 px-4 mx-4"
style={({ isActive }) => ({
color: isActive ? "rgb(19, 123, 79)" : "#202020",
fontWeight: isActive ? "700" : "200",
})}
> >
{page.name} {page.name}
</Link> </NavLink>
</li> </li>
))} ))}
</ul> </ul>

@ -23,6 +23,7 @@ function SignUp({
loading, loading,
level, level,
setLevel, setLevel,
isMobile,
}) { }) {
const [signUpFields, setSignUpFiels] = useState({}); const [signUpFields, setSignUpFiels] = useState({});
const [error, setError] = useState(""); const [error, setError] = useState("");
@ -105,18 +106,21 @@ function SignUp({
} }
}; };
const numberInput = useRef();
useEffect(() => { useEffect(() => {
// numberInput.current.focus(); // numberInput.current.focus();
setHeaderOptions(headerOptions); setHeaderOptions(headerOptions);
}, []); }, []);
useEffect(() => { useEffect(() => {
if (signUpFields?.otp?.length === 4) { if (
signUpFields?.otp1 &&
signUpFields?.otp2 &&
signUpFields?.otp3 &&
signUpFields?.otp4
) {
sendOtp({ sendOtp({
cellphone: signUpFields?.cellphone, cellphone: signUpFields?.cellphone,
otp: signUpFields?.otp, otp: signUpFields?.otp1 + signUpFields?.otp2 + signUpFields?.otp3 + signUpFields?.otp4,
userToken: "2", userToken: "2",
applicationToken: "22", applicationToken: "22",
}); });
@ -137,8 +141,6 @@ function SignUp({
} }
}, [loginFlag]); }, [loginFlag]);
const light = theme === "light";
return ( return (
<div <div
className="w-screen overflow-x-hidden flex flex-row transform relative" className="w-screen overflow-x-hidden flex flex-row transform relative"
@ -153,13 +155,13 @@ function SignUp({
<img src={arrowIcon} className="transform rotate-90" alt="" /> <img src={arrowIcon} className="transform rotate-90" alt="" />
</button> </button>
<div <div
className={`flex flex-col items-center justify-between h-full w-full px-4 pt-16 transition transform duration-300 absolute top-0 left-0 ${ className={`flex flex-col items-center lg:pb-8 justify-between h-full w-full px-4 pt-16 lg:pt-16 transition transform duration-300 absolute top-0 left-0 ${
level === "phonenumber" ? "translate-x-0" : "-translate-x-full" level === "phonenumber" ? "translate-x-0" : "-translate-x-full"
}`} }`}
> >
<div className="w-full flex flex-col items-center gap-6"> <div className="w-full flex flex-col items-center gap-6">
<img src={logoIcon} alt="" className="w-1/5" /> <img src={logoIcon} alt="" className="w-1/5 lg:w-1/6" />
<p className="text-lg align-start"> <p className="text-lg lg:text-base align-start">
{window.t("سلام به ")} {window.t("سلام به ")}
<span className="font-bold text-blueC0"> <span className="font-bold text-blueC0">
{window.t(" دانوین خوش ")} {window.t(" دانوین خوش ")}
@ -168,7 +170,7 @@ function SignUp({
</p> </p>
</div> </div>
<div className="w-full flex flex-col"> <div className="w-full flex flex-col">
<p className="text-base mt-4"> <p className="text-base lg:text-sm mt-4">
{window.t( {window.t(
" لطفا جهت ورود یا ثبت نام شماره همراه خود را وارد نمایید." " لطفا جهت ورود یا ثبت نام شماره همراه خود را وارد نمایید."
)} )}
@ -198,7 +200,7 @@ function SignUp({
</div> </div>
</div> </div>
<div <div
className={`flex flex-col items-center justify-between w-full h-full px-4 pt-16 transition transform duration-300 absolute top-0 left-0 ${ className={`flex flex-col items-center justify-between w-full lg:pb-8 h-full px-4 pt-16 transition transform duration-300 absolute top-0 left-0 ${
level === "otp" ? "translate-x-0" : "translate-x-full" level === "otp" ? "translate-x-0" : "translate-x-full"
}`} }`}
> >
@ -218,13 +220,13 @@ function SignUp({
</div> </div>
<div className="w-full flex flex-col"> <div className="w-full flex flex-col">
<div className="w-full flex flex-row-reverse justify-center"> <div className="w-full flex flex-row-reverse justify-between">
<input <input
inputMode="numeric" inputMode="numeric"
style={{ style={{
direction: "ltr", direction: "ltr",
width: "calc(100% / 4)", width: isMobile ? "calc(100% / 4)" : "70px",
height: "calc((100vw - 32px) / 4.1)", height: isMobile ? "calc((100vw - 32px) / 4.1)" : "70px",
}} }}
name="otp1" name="otp1"
className="bg-grayF9 dark:bg-opacity-10 outline-none rounded-md text-2xl font-bold lg:text-lg text-center text-blueC0 mx-1" className="bg-grayF9 dark:bg-opacity-10 outline-none rounded-md text-2xl font-bold lg:text-lg text-center text-blueC0 mx-1"
@ -241,8 +243,8 @@ function SignUp({
inputMode="numeric" inputMode="numeric"
style={{ style={{
direction: "ltr", direction: "ltr",
width: "calc(100% / 4)", width: isMobile ? "calc(100% / 4)" : "70px",
height: "calc((100vw - 32px) / 4.1)", height: isMobile ? "calc((100vw - 32px) / 4.1)" : "70px",
}} }}
name="otp2" name="otp2"
className="bg-grayF9 dark:bg-opacity-10 outline-none rounded-md text-2xl font-bold lg:text-lg text-center text-blueC0 mx-1" className="bg-grayF9 dark:bg-opacity-10 outline-none rounded-md text-2xl font-bold lg:text-lg text-center text-blueC0 mx-1"
@ -259,8 +261,8 @@ function SignUp({
inputMode="numeric" inputMode="numeric"
style={{ style={{
direction: "ltr", direction: "ltr",
width: "calc(100% / 4)", width: isMobile ? "calc(100% / 4)" : "70px",
height: "calc((100vw - 32px) / 4.1)", height: isMobile ? "calc((100vw - 32px) / 4.1)" : "70px",
}} }}
name="otp3" name="otp3"
className="bg-grayF9 dark:bg-opacity-10 outline-none rounded-md text-2xl font-bold lg:text-lg text-center text-blueC0 mx-1" className="bg-grayF9 dark:bg-opacity-10 outline-none rounded-md text-2xl font-bold lg:text-lg text-center text-blueC0 mx-1"
@ -277,8 +279,8 @@ function SignUp({
inputMode="numeric" inputMode="numeric"
style={{ style={{
direction: "ltr", direction: "ltr",
width: "calc(100% / 4)", width: isMobile ? "calc(100% / 4)" : "70px",
height: "calc((100vw - 32px) / 4.1)", height: isMobile ? "calc((100vw - 32px) / 4.1)" : "70px",
}} }}
name="otp4" name="otp4"
className="bg-grayF9 dark:bg-opacity-10 outline-none rounded-md text-2xl font-bold lg:text-lg text-center text-blueC0 mx-1" className="bg-grayF9 dark:bg-opacity-10 outline-none rounded-md text-2xl font-bold lg:text-lg text-center text-blueC0 mx-1"
@ -326,6 +328,7 @@ function SignUp({
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
loginFlag: state.user.status, loginFlag: state.user.status,
loading: state.user.loading, loading: state.user.loading,
isMobile: state.publicApi.isMobile,
}); });
const mapDispatchToProps = { const mapDispatchToProps = {

Loading…
Cancel
Save