Steps Made

src/view/LoginSignUp/index.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState, useRef} from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { Link } from "react-router-dom";
 import logo from "../../assets/img/big-logo.svg";
 import firstPic from '../../assets/img/undraw_professor_-8-lrt.svg';
@@ -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);
@@ -33,21 +59,21 @@ const LoginSignUp = ({ activeLogin }) => {
     }, [index]);
     const slideContents = [
         {
-            id:0,
+            id: 0,
             image: firstPic,
-            title: 'یک معلم دیوانه در کمین شما نشسته است مراقب باشید' ,
+            title: 'یک معلم دیوانه در کمین شما نشسته است مراقب باشید',
             description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
         },
         {
-            id:1,
+            id: 1,
             image: secondPic,
-            title: 'یک آزمون سخت و افتضاح در راه هست!' ,
+            title: 'یک آزمون سخت و افتضاح در راه هست!',
             description: 'لورم ایپسوم نمیخواستم استفاده کنم برای همین این متنای عجیب رو مینویسم ببینم چجوری میشه تهش بالاخره اونا هم قراره یه متن عجیب بنویسن ',
         },
         {
-            id:1,
+            id: 1,
             image: thirdPic,
-            title: 'یک اسلاید عجیب غریب دیگر در راه هست' ,
+            title: 'یک اسلاید عجیب غریب دیگر در راه هست',
             description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
         },
     ];
@@ -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">
                                 ثبت نام شما در سامانه به منزله قبول
@@ -96,7 +171,7 @@ const LoginSignUp = ({ activeLogin }) => {
                 {/* Slider */}
 
                 <div className="bg-grayEC w-3/5 rounded-tl-xl rounded-bl-xl flex flex-col items-center justify-center" >
-                    <div className="slideshow" style={{direction: 'ltr'}}>
+                    <div className="slideshow" style={{ direction: 'ltr' }}>
                         <div
                             className="slideshowSlider"
                             style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}
@@ -108,7 +183,7 @@ const LoginSignUp = ({ activeLogin }) => {
 
                                 >
                                     <div className="w-full flex flex-col justify-center items-center">
-                                    <img src={item.image} style={{height: '500px'}}/>
+                                        <img src={item.image} style={{ height: '500px' }} />
                                         <h1 className="w-4/5 text-xl my-2 text-red26 font-bold">{item.title}</h1>
                                         <p className=" px-12 text-right text-sm whitespace-normal">{item.description}</p>
                                     </div>