update src/views/Auth/Desktop/index.js, src/views/Auth/SignUp/index.js and src/views/Auth/index.js

src/views/Auth/Desktop/index.js

@@ -1,90 +1,29 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect, useMemo, useCallback } from "react";
 import { connect } from "react-redux";
 import { publicApi } from "../../../redux/actions";
 import { useNavigate } from "react-router-dom";
 import SignUp from "../SignUp";
-import Button from "../../../components/Button";
 
 //assets
-import logoIcon from "../SignUp/assets/logo.svg";
 import bgImage from "./bg.svg";
-import arrowIcon from "../../../assets/icons/dropdown-blue.svg";
 
-export const Desktop = ({ setHeaderOptions }) => {
-  const [phase, setPhase] = useState("signup");
+export const Desktop = ({ setHeaderOptions, level, setLevel}) => {
   const navigate = useNavigate();
 
   useEffect(() => {
     setHeaderOptions({ show: false });
   }, []);
 
-  const UserMangement = () => {
-    return (
-      <div
-        className={`flex flex-col items-center justify-center w-full relative h-full transform transition-all duration-700 ${
-          phase !== "manage" ? "translate-x-full" : ""
-        }`}
-      >
-        <img
-          src={logoIcon}
-          alt=""
-          className="w-20 absolute left-1/2 top-10 transform -translate-x-1/2"
-        />
-        <strong className="text-2xl text-blueC0 self-start tracking-tighter">
-          {window.t("ورود یا ثبت نام")}
-        </strong>
-        <p className="text-tiny self-start text-gray-500 mt-6 leading-6">
-          {window.t(" کاربر گرامی لطفا یکی از دوگزینه زیر را انتخاب نمائید.")}
-          <br />
-          {window.t("درصورتی که عضو نیستید روی دکمه ثبت نام بزنید")}
-        </p>
-        <div className="mt-16 flex flex-col gap-4 w-full">
-          <Button
-            title={window.t("ورود یا ثبت نام")}
-            backgroundColor="bg-blueC0"
-            border={{ color: "#196EC055", width: "0px" }}
-            width="100%"
-            color="text-white"
-            onClick={() => setPhase("signup")}
-          />
-          {/* <Button
-            title="ورود"
-            backgroundColor="bg-transparent border border-solid border-blueC0"
-            border={{ color: "", width: 1 }}
-            width="100%"
-            color="text-blueC0"
-            onClick={() => setPhase("login")}
-          /> */}
-        </div>
-      </div>
-    );
-  };
-
-  const phases = {
-    manage: <UserMangement />,
-    signup: <SignUp />,
-    login: <SignUp />,
-  };
-
   return (
     <div className="h-screen w-full flex justify-center items-center">
       <div className="w-4/5 h-4/5 rounded-xl flex overflow-hidden border border-solid border-gray-200">
         <div className="w-2/5 h-full flex justify-center items-center">
           <div
-            className="w-4/5 flex justify-center items-center relative"
+            className="w-4/5 flex justify-center items-center"
             style={{ height: "90%" }}
           >
-            <button
-              className="absolute left-0 top-0 p-3 bg-grayF4 rounded-xl z-20"
-              onClick={() =>
-                setPhase(() =>
-                  phase === "manage" ? navigate("/blogs") : "manage"
-                )
-              }
-            >
-              <img src={arrowIcon} className="transform rotate-90" alt="" />
-            </button>
-            {phases[phase]}
+            
+            <SignUp setLevel={setLevel} level={level} />
           </div>
         </div>
         <div className="w-3/5 h-full bg-grayF9 flex justify-center items-center">

src/views/Auth/SignUp/index.js

@@ -11,6 +11,8 @@ import { user, publicApi } from "../../../redux/actions";
 import _ from "lodash";
 //assets
 import logoIcon from "./assets/logo.svg";
+import arrowIcon from "../../../assets/icons/dropdown-blue.svg";
+
 
 function SignUp({
   sendOtp,
@@ -20,8 +22,9 @@ function SignUp({
   headerOptions,
   setHeaderOptions,
   loading,
+  level,
+  setLevel,
 }) {
-  const [level, setLevel] = useState("phonenumber");
   const [signUpFields, setSignUpFiels] = useState({});
   const [error, setError] = useState("");
   const [resend, setResend] = useState(false);
@@ -142,6 +145,14 @@ function SignUp({
       className="w-screen overflow-x-hidden flex flex-row transform -translate-y-10 relative"
       style={{ height: "calc(100vh - 160px)" }}
     >
+      <button
+        className="absolute left-4 top-12 lg:top-16 p-3 bg-grayF4 rounded-xl z-20"
+        onClick={() =>
+          setLevel(level === "phonenumber" ? navigate("/") : "phonenumber")
+        }
+      >
+        <img src={arrowIcon} className="transform rotate-90" alt="" />
+      </button>
       <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"
@@ -217,7 +228,7 @@ function SignUp({
                   (e.target.value = onInput.numberOnly(e.target.value))
                 )
               }
-              maxlength="1"
+              maxLength="1"
               ref={otp1}
             />
             <input
@@ -231,7 +242,7 @@ function SignUp({
                   (e.target.value = onInput.numberOnly(e.target.value))
                 )
               }
-              maxlength="1"
+              maxLength="1"
               ref={otp2}
             />
             <input
@@ -245,7 +256,7 @@ function SignUp({
                   (e.target.value = onInput.numberOnly(e.target.value))
                 )
               }
-              maxlength="1"
+              maxLength="1"
               ref={otp3}
             />
             <input
@@ -261,7 +272,7 @@ function SignUp({
                   ))
                 )
               }
-              maxlength="1"
+              maxLength="1"
               ref={otp4}
             />
           </div>

src/views/Auth/index.js

@@ -6,20 +6,29 @@ import { connect } from "react-redux";
 
 function Auth(props) {
   const [page, setPage] = useState(props.page);
+  const [level, setLevel] = useState("phonenumber");
+
   useEffect(() => {
     setPage(() => props.page);
   }, [props.page]);
   return props.isMobile ? (
     <>
       {page === "signup" && (
-        <SignUp theme={props.theme} headerOptions={props.headerOptions} />
+        <SignUp
+          theme={props.theme}
+          headerOptions={props.headerOptions}
+          level={level}
+          setLevel={setLevel}
+        />
       )}
       {page === "profile" && <Profile theme={props.theme} />}
     </>
-  ) : <Desktop />
+  ) : (
+    <Desktop level={level} setLevel={setLevel} />
+  );
 }
 
 export default connect((state) => ({
   theme: state.publicApi.theme,
-  isMobile: state.publicApi.isMobile
+  isMobile: state.publicApi.isMobile,
 }))(Auth);