From f309ac09a09953e8591e81a5d287ff6eec26ec3f Mon Sep 17 00:00:00 2001
From: Reza_ashrafi <reza@Rezas-MacBook-Pro.local>
Date: Mon, 3 Jan 2022 20:39:29 +0330
Subject: [PATCH] signup added

---
 src/components/Button/index.js    |   2 +-
 src/components/Input/index.js     |  44 ++++---
 src/components/Timer/index.js     |   2 +-
 src/router.js                     |   2 +-
 src/utils/onInput.js              |  18 +--
 src/views/Auth/SignUp/index.js    | 204 ++++++++++++++++++++++++++----
 src/views/Home/Landscape/index.js | 199 ++++++++++++++---------------
 7 files changed, 320 insertions(+), 151 deletions(-)

diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index ac65d92..6d11234 100644
--- a/src/components/Button/index.js
+++ b/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,
diff --git a/src/components/Input/index.js b/src/components/Input/index.js
index 004f9eb..5737dcb 100644
--- a/src/components/Input/index.js
+++ b/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 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 : '',
-}
\ No newline at end of file
+  lang: "fa",
+  inputMode: "numeric",
+  label: "label",
+  status: "",
+  maxLength: "",
+  message: "",
+  direction: "rtl",
+};
diff --git a/src/components/Timer/index.js b/src/components/Timer/index.js
index 012062b..f7ae584 100644
--- a/src/components/Timer/index.js
+++ b/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>
       </>
diff --git a/src/router.js b/src/router.js
index d6cb73c..71ca2cb 100644
--- a/src/router.js
+++ b/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",
            ],
           " "
diff --git a/src/utils/onInput.js b/src/utils/onInput.js
index 9f64e8f..0a45958 100644
--- a/src/utils/onInput.js
+++ b/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, "");
diff --git a/src/views/Auth/SignUp/index.js b/src/views/Auth/SignUp/index.js
index 2e1783d..54d841d 100644
--- a/src/views/Auth/SignUp/index.js
+++ b/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"
-      style={{ height: "calc(100vh - 80px)" }}
+      className="w-screen overflow-x-hidden flex flex-row transform -translate-y-10 relative"
+      style={{ height: "calc(100vh - 160px)" }}
     >
-      <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/>
-        <Button
-          title="ادامه فرایند خرید"
-          backgroundColor="bg-blueC0"
-          border={{ color: "#196EC055", width: "1px" }}
-          width="100%"
-          color="text-white"
-        />
-      </form>
+      <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>
+        <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)}
+          />
+        </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,
diff --git a/src/views/Home/Landscape/index.js b/src/views/Home/Landscape/index.js
index a238d68..21998a8 100644
--- a/src/views/Home/Landscape/index.js
+++ b/src/views/Home/Landscape/index.js
@@ -28,108 +28,109 @@ function Home({
   // initialState
 
   useEffect(() => {
-    
     window.addEventListener("scroll", () => {
-      const scrollY = window.scrollY;
-      localStorage.setItem("prevScroll", scrollY);
-      if (
-        !JSON.parse(localStorage.getItem("joiRect")) &&
-        window.scrollY > 1000 &&
-        window.scrollY < 2000
-      ) {
-        localStorage.setItem(
-          "joiRect",
-          JSON.stringify(
-            document.getElementById("video-joi").getBoundingClientRect()
-          )
-        );
-      }
-      // Dotes
-      if (scrollY < 1.5 * height) {
-        if (scrollY > height) {
-          floatMouseToggle(false);
-        } else {
-          floatMouseToggle(true);
+      if (window.innerWidth > 1024) {
+        const scrollY = window.scrollY;
+        localStorage.setItem("prevScroll", scrollY);
+        if (
+          !JSON.parse(localStorage.getItem("joiRect")) &&
+          window.scrollY > 1000 &&
+          window.scrollY < 2000
+        ) {
+          localStorage.setItem(
+            "joiRect",
+            JSON.stringify(
+              document.getElementById("video-joi").getBoundingClientRect()
+            )
+          );
+        }
+        // Dotes
+        if (scrollY < 1.5 * height) {
+          if (scrollY > height) {
+            floatMouseToggle(false);
+          } else {
+            floatMouseToggle(true);
+          }
         }
-      }
 
-      // Page_1
-      if (scrollY >= 0 && scrollY <= height) {
-        handlePage1TopPosition();
-      }
-      // Page_2
-      if (scrollY >= 0 && scrollY <= height) {
-        handlePage2TopPosition();
-      }
-      if (scrollY >= 0 && scrollY <= height) {
-        handlePage2RotateX(window.scrollY);
-      }
-      if (scrollY >= height && scrollY <= 2 * height) {
-        handlePage2BoxPosition({
-          scrollY,
-          translateX: {
-            pos1: -5,
-            pos2: 32,
-          },
-          translateY: {
-            pos1: -5,
-            pos2: 10,
-          },
-          rotate: {
-            pos1: 5,
-            pos2: 0,
-          },
-          start: height,
-          end: 2 * height,
-        });
-      }
-      if (scrollY > 2.5 * height && scrollY <= 3 * height) {
-        handlePage2BoxPosition({
-          scrollY,
-          translateX: {
-            pos1: 32,
-            pos2: 32,
-          },
-          translateY: {
-            pos1: 10,
-            pos2: -30,
-          },
-          rotate: {
-            pos1: 0,
-            pos2: 0,
-          },
-          start: 2.5 * height,
-          end: 3 * height,
-        });
-      }
-      if (scrollY > 2 * height && scrollY <= 2.5 * height) {
-        handlePage2MobilePosition();
-      }
-      if (scrollY > 2.8 * height && scrollY <= 3 * height) {
-        handlePage2VideoTopPosition();
-      }
-      if (scrollY > 3.5 * height && scrollY <= 4 * height) {
-        handlePage2VideoPosition();
-      }
-      if (scrollY > 2 * height && scrollY < 3.5 * height) {
-        handlePage2MobileUnit();
-      }
-      // Page_3
-      if (scrollY > 3.5 * height && scrollY < 4 * height) {
-        handleVideoTubeTopPosition();
-      }
-      // Test
-      if (scrollY >= 4.5 * height && scrollY <= 5 * height) {
-        handleTestTranslateY();
-      }
-      if(scrollY > 5 * height && scrollY <= 6 * height){
-        handlePage3TopPosition();
-      }
-      if(scrollY >= 6.3 * height && scrollY <= 7 * height){
-        handlePage3TestTranslateY();
-      }
-      if(scrollY >= 7.3 * height && scrollY <= 8.3 * height){
-        handlePage4TopPosition();
+        // Page_1
+        if (scrollY >= 0 && scrollY <= height) {
+          handlePage1TopPosition();
+        }
+        // Page_2
+        if (scrollY >= 0 && scrollY <= height) {
+          handlePage2TopPosition();
+        }
+        if (scrollY >= 0 && scrollY <= height) {
+          handlePage2RotateX(window.scrollY);
+        }
+        if (scrollY >= height && scrollY <= 2 * height) {
+          handlePage2BoxPosition({
+            scrollY,
+            translateX: {
+              pos1: -5,
+              pos2: 32,
+            },
+            translateY: {
+              pos1: -5,
+              pos2: 10,
+            },
+            rotate: {
+              pos1: 5,
+              pos2: 0,
+            },
+            start: height,
+            end: 2 * height,
+          });
+        }
+        if (scrollY > 2.5 * height && scrollY <= 3 * height) {
+          handlePage2BoxPosition({
+            scrollY,
+            translateX: {
+              pos1: 32,
+              pos2: 32,
+            },
+            translateY: {
+              pos1: 10,
+              pos2: -30,
+            },
+            rotate: {
+              pos1: 0,
+              pos2: 0,
+            },
+            start: 2.5 * height,
+            end: 3 * height,
+          });
+        }
+        if (scrollY > 2 * height && scrollY <= 2.5 * height) {
+          handlePage2MobilePosition();
+        }
+        if (scrollY > 2.8 * height && scrollY <= 3 * height) {
+          handlePage2VideoTopPosition();
+        }
+        if (scrollY > 3.5 * height && scrollY <= 4 * height) {
+          handlePage2VideoPosition();
+        }
+        if (scrollY > 2 * height && scrollY < 3.5 * height) {
+          handlePage2MobileUnit();
+        }
+        // Page_3
+        if (scrollY > 3.5 * height && scrollY < 4 * height) {
+          handleVideoTubeTopPosition();
+        }
+        // Test
+        if (scrollY >= 4.5 * height && scrollY <= 5 * height) {
+          handleTestTranslateY();
+        }
+        if (scrollY > 5 * height && scrollY <= 6 * height) {
+          handlePage3TopPosition();
+        }
+        if (scrollY >= 6.3 * height && scrollY <= 7 * height) {
+          handlePage3TestTranslateY();
+        }
+        if (scrollY >= 7.3 * height && scrollY <= 8.3 * height) {
+          handlePage4TopPosition();
+        }
       }
     });
   }, []);