signup added

src/components/Button/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,

src/components/Input/index.js

@@ -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 {
-
+    lang,
-  const onChange = (val) => {
+    theme,
-    setValue(val);
+    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)}
+        style={{ direction: direction }}
-        value={value}
+        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',
+  lang: "fa",
-  inputMode : 'numeric',
+  inputMode: "numeric",
-  label : 'label',
+  label: "label",
-  status : '',
+  status: "",
-  maxLength : '',
+  maxLength: "",
-  message : '',
+  message: "",
-}
+  direction: "rtl",
+};

src/components/Timer/index.js

@@ -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>
       </>

src/router.js

@@ -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",
            ],
           " "

src/utils/onInput.js

@@ -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, "");

src/views/Auth/SignUp/index.js

@@ -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"
+      className="w-screen overflow-x-hidden flex flex-row transform -translate-y-10 relative"
-      style={{ height: "calc(100vh - 80px)" }}
+      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">
+        <div className="w-full flex flex-col mt-10">
-        <Input label={"شماره موبایل"} />
+          <Input
-        <br/>
+            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,

src/views/Home/Landscape/index.js

@@ -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 (