Steps Made

src/view/LoginSignUp/index.js

@@ -7,10 +7,36 @@ import thirdPic from '../../assets/img/undraw_certificate_re_yadi.svg';
 import { Slide } from 'react-slideshow-image';
 import './index.css';
 
+
 const LoginSignUp = ({ activeLogin }) => {
+    const [steps, setSteps] = useState(0);
     const [index, setIndex] = useState(0);
+   
     const timeoutRef = useRef(null);
 
+    const focusHandler = (id) => {
+        let inputs = document.querySelectorAll(".Login-box-form-item");
+        let label = document.querySelectorAll(".Login-box-form-item-label");
+        let line = document.querySelectorAll(".Login-box-form-item-line");
+        inputs[id].style.borderColor = "#df1452";
+        inputs[id].style.backgroundColor = "#fff";
+        label[id].style.transform = "translate(-10px,-27px)";
+        label[id].style.color = "#df1452";
+        line[id].style.backgroundColor = "#fff";
+      };
+    
+      const blurHandler = (id) => {
+        let inputsBox = document.querySelectorAll(".Login-box-form-item");
+        let inputs = document.querySelectorAll(".Login-box-form-item-input");
+        let label = document.querySelectorAll(".Login-box-form-item-label");
+        let line = document.querySelectorAll(".Login-box-form-item-line");
+        if (inputs[id].value === "") {
+          inputsBox[id].style.borderColor = "#EBEBEB";
+          label[id].style.transform = "translate(0px,0px)";
+          label[id].style.color = "#959595";
+          line[id].style.backgroundColor = "#EBEBEB";
+        }
+      };
     function resetTimeout() {
         if (timeoutRef.current) {
             clearTimeout(timeoutRef.current);
@@ -58,6 +84,11 @@ const LoginSignUp = ({ activeLogin }) => {
                 {/* form */}
 
                 <div className="flex w-2/5 border-0 border-l border-solid border flex-col items-center p-6">
+                    { steps != 0 &&
+                    <div className="w-12 h-12 bg-gray-200 rounded-xl" onClick={() => setSteps(steps - 1)}>
+                        
+                    </div>
+}
                     <img src={logo} className="w-1/2 m-4" />
                     <div className="flex flex-col  items-start justify-start leading-normal">
                         <h1 className="text-red26 text-lg font-bold">ورود یا ثبت نام</h1>
@@ -67,10 +98,17 @@ const LoginSignUp = ({ activeLogin }) => {
                             <br />
                             در صورتی که عضو نیستید روی دکمه ثبت نام بزنید
                         </p>
+
+                        {
+                            steps == 0 &&
+                            <>
                                 <Link
-                            to="/dashboard"
+                                    to=""
                                     className="Login-box-form-btn w-full h-12 rounded-lg bg-red52 text-white flex items-center justify-center mt-6"
-                            onClick={activeLogin}
+                                    onClick={() => {
+                                        setSteps(1);
+
+                                    }}
                                 >
                                     ورود
                                 </Link>
@@ -81,6 +119,43 @@ const LoginSignUp = ({ activeLogin }) => {
                                 >
                                     ثبت نام
                                 </Link>
+                            </>
+                        }
+                        {
+                            steps == 1 &&
+                            <>
+
+                                <div className="Login-box-form-item w-full h-12 rounded-lg border border-color7  mt-8 relative flex items-center flex-row-reverse">
+                                    <div className="Login-box-form-item-line w-20 h-px absolute top-[-1px] right-7 bg-color7"></div>
+                                    <div className="Login-box-form-item-label text-sm text-color19 absolute right-6 transition-all duration-300 pointer-events-none">
+                                        شماره تلفن
+                                    </div>
+                                    <input
+                                        type="text"
+                                        name="Login-box-form-item-input-name"
+                                        id="Login-box-form-item-input-name"
+                                        className="Login-box-form-item-input w-full h-full bg-transparent px-4 outline-0 rounded text-red52"
+                                        style={{ direction: "ltr" }}
+                                        onFocus={() => focusHandler(0)}
+                                        onBlur={() => blurHandler(0)}
+                                    />
+                                </div>
+
+                                <Link
+                                    to=""
+                                    className="Login-box-form-btn w-full h-12 rounded-lg bg-red52 text-white flex items-center justify-center mt-6"
+                                    onClick={() => {
+                                        setSteps(2);
+
+                                    }}
+                                >
+                                    ارسال کد تاییدیه
+                                </Link>
+
+                            </>
+                        }
+
+
                         <div className="w-full flex flex-col items-center justify-center">
                             <p className="w-3/5 text-xs  my-20 text-center text-red26">
                                 ثبت نام شما در سامانه به منزله قبول