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,50 +7,76 @@ 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) {
+        if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
+            clearTimeout(timeoutRef.current);
-      }
+        }
     }
-  
+
     useEffect(() => {
-      resetTimeout();
-      timeoutRef.current = setTimeout(
-        () =>
-          setIndex((prevIndex) =>
-            prevIndex === slideContents.length - 1 ? 0 : prevIndex + 1
-          ),
-        delay
-      );
-  
-      return () => {
         resetTimeout();
-      };
+        timeoutRef.current = setTimeout(
+            () =>
+                setIndex((prevIndex) =>
+                    prevIndex === slideContents.length - 1 ? 0 : prevIndex + 1
+                ),
+            delay
+        );
+
+        return () => {
+            resetTimeout();
+        };
     }, [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: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
         },
-        ];
+    ];
     const delay = 2500;
     return (
         <div className="w-full flex items-center justify-center" style={{ height: '100vh', direction: 'rtl' }}>
@@ -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,20 +98,64 @@ const LoginSignUp = ({ activeLogin }) => {
                             <br />
                             در صورتی که عضو نیستید روی دکمه ثبت نام بزنید
                         </p>
-                        <Link
+
-                            to="/dashboard"
+                        {
-                            className="Login-box-form-btn w-full h-12 rounded-lg bg-red52 text-white flex items-center justify-center mt-6"
+                            steps == 0 &&
-                            onClick={activeLogin}
+                            <>
-                        >
+                                <Link
-                            ورود
+                                    to=""
-                        </Link>
+                                    className="Login-box-form-btn w-full h-12 rounded-lg bg-red52 text-white flex items-center justify-center mt-6"
-                        <Link
+                                    onClick={() => {
-                            to="/dashboard"
+                                        setSteps(1);
-                            className="Login-box-form-btn w-full h-12 rounded-lg border border-solid border-red52 text-red52 flex items-center justify-center mt-4"
+
-                            onClick={activeLogin}
+                                    }}
-                        >
+                                >
-                            ثبت نام
+                                    ورود
-                        </Link>
+                                </Link>
+                                <Link
+                                    to="/dashboard"
+                                    className="Login-box-form-btn w-full h-12 rounded-lg border border-solid border-red52 text-red52 flex items-center justify-center mt-4"
+                                    onClick={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)` }}
@@ -105,12 +180,12 @@ const LoginSignUp = ({ activeLogin }) => {
                                 <div
                                     className="slide"
                                     key={`sildeNo${index}`}
-                                    
+
                                 >
                                     <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>
+                                        <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>
+                                        <p className=" px-12 text-right text-sm whitespace-normal">{item.description}</p>
                                     </div>
                                 </div>
                             ))}