|
|
|
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';
|
|
|
|
import secondPic from '../../assets/img/undraw_quiz_nlyh.svg';
|
|
|
|
import thirdPic from '../../assets/img/undraw_certificate_re_yadi.svg';
|
|
|
|
import { Slide } from 'react-slideshow-image';
|
|
|
|
import './index.css';
|
|
|
|
import VerificationInput from "../../components/verificationInput";
|
|
|
|
|
|
|
|
|
|
|
|
const LoginSignUp = ({ activeLogin }) => {
|
|
|
|
const [steps, setSteps] = useState(0);
|
|
|
|
const [index, setIndex] = useState(1);
|
|
|
|
const [register, setRegister] = useState(false);
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
resetTimeout();
|
|
|
|
timeoutRef.current = setTimeout(
|
|
|
|
() =>{setIndex((prevIndex) =>prevIndex + 1
|
|
|
|
// prevIndex === slideContents.length - 1 ? 0 : prevIndex + 1
|
|
|
|
)
|
|
|
|
if(index === slideContents.length)
|
|
|
|
setTimeout(setIndex(1),1000)
|
|
|
|
},
|
|
|
|
|
|
|
|
delay
|
|
|
|
);
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
resetTimeout();
|
|
|
|
};
|
|
|
|
}, [index]);
|
|
|
|
const slideContents = [
|
|
|
|
{
|
|
|
|
id: 0,
|
|
|
|
image: firstPic,
|
|
|
|
title: 'یک معلم دیوانه در کمین شما نشسته است مراقب باشید',
|
|
|
|
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 1,
|
|
|
|
image: secondPic,
|
|
|
|
title: 'یک آزمون سخت و افتضاح در راه هست!',
|
|
|
|
description: 'لورم ایپسوم نمیخواستم استفاده کنم برای همین این متنای عجیب رو مینویسم ببینم چجوری میشه تهش بالاخره اونا هم قراره یه متن عجیب بنویسن ',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 2,
|
|
|
|
image: thirdPic,
|
|
|
|
title: 'یک اسلاید عجیب غریب دیگر در راه هست',
|
|
|
|
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 2,
|
|
|
|
image: thirdPic,
|
|
|
|
title: 'یک اسلاید عجیب غریب دیگر در راه هست',
|
|
|
|
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
|
|
|
|
},{
|
|
|
|
id: 2,
|
|
|
|
image: thirdPic,
|
|
|
|
title: 'یک اسلاید عجیب غریب دیگر در راه هست',
|
|
|
|
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
|
|
|
|
},{
|
|
|
|
id: 2,
|
|
|
|
image: thirdPic,
|
|
|
|
title: 'یک اسلاید عجیب غریب دیگر در راه هست',
|
|
|
|
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
|
|
|
|
},{
|
|
|
|
id: 2,
|
|
|
|
image: thirdPic,
|
|
|
|
title: 'یک اسلاید عجیب غریب دیگر در راه هست',
|
|
|
|
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
|
|
|
|
},{
|
|
|
|
id: 2,
|
|
|
|
image: thirdPic,
|
|
|
|
title: 'یک اسلاید عجیب غریب دیگر در راه هست',
|
|
|
|
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
|
|
|
|
},{
|
|
|
|
id: 2,
|
|
|
|
image: thirdPic,
|
|
|
|
title: 'یک اسلاید عجیب غریب دیگر در راه هست',
|
|
|
|
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
|
|
|
|
},{
|
|
|
|
id: 2,
|
|
|
|
image: thirdPic,
|
|
|
|
title: 'یک اسلاید عجیب غریب دیگر در راه هست',
|
|
|
|
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
|
|
|
|
},{
|
|
|
|
id: 2,
|
|
|
|
image: thirdPic,
|
|
|
|
title: 'یک اسلاید عجیب غریب دیگر در راه هست',
|
|
|
|
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
const delay = 2500;
|
|
|
|
return (
|
|
|
|
<div className="w-full flex items-center justify-center" style={{ height: '100vh', direction: 'rtl' }}>
|
|
|
|
<div className="w-3/4 border border-solid border-gray-200 flex rounded-xl">
|
|
|
|
{/* form */}
|
|
|
|
|
|
|
|
<div className="flex w-2/5 border-0 border-l border-solid border flex-col items-center p-6">
|
|
|
|
<div className="h-12 w-full flex justify-end">
|
|
|
|
{steps != 0 &&
|
|
|
|
<div className="w-12 h-full bg-gray-200 rounded-xl flex items-center justify-center text-gray-500 m-0 text-2xl font-light cursor-pointer" onClick={() => setSteps(steps - 1)}>
|
|
|
|
{`>`}
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
</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>
|
|
|
|
<h1 className="text-red26 text-lg font-bold">سامانه ثبت نام مدارس موسسه علمی اندیشمند</h1>
|
|
|
|
<p className="text-gray-500 text-sm mt-2">
|
|
|
|
کاربر گرامی لطفا یکی از دو گزینه زیر را انتخاب نمایید.
|
|
|
|
<br />
|
|
|
|
در صورتی که عضو نیستید روی دکمه ثبت نام بزنید
|
|
|
|
</p>
|
|
|
|
|
|
|
|
{
|
|
|
|
steps == 0 &&
|
|
|
|
<>
|
|
|
|
<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(1);
|
|
|
|
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
ورود
|
|
|
|
</Link>
|
|
|
|
<Link
|
|
|
|
to=""
|
|
|
|
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={() => {
|
|
|
|
setSteps(1);
|
|
|
|
setRegister(true);
|
|
|
|
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
ثبت نام
|
|
|
|
</Link>
|
|
|
|
</>
|
|
|
|
}
|
|
|
|
{
|
|
|
|
steps == 1 &&
|
|
|
|
<>
|
|
|
|
|
|
|
|
<div className="Login-box-form-item w-full h-12 rounded-lg border border-color7 mt-6 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="number"
|
|
|
|
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-4"
|
|
|
|
onClick={() => {
|
|
|
|
setSteps(2);
|
|
|
|
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
ارسال کد تاییدیه
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
</>
|
|
|
|
}
|
|
|
|
{
|
|
|
|
steps == 2 &&
|
|
|
|
<>
|
|
|
|
<div style={{ direction: 'ltr' }} className="w-full mt-6">
|
|
|
|
<VerificationInput />
|
|
|
|
</div>
|
|
|
|
<Link
|
|
|
|
to={register == true ? '/dashboard/register' : `/dashboard`}
|
|
|
|
className="Login-box-form-btn w-full h-12 rounded-lg bg-red52 text-white flex items-center justify-center mt-4"
|
|
|
|
onClick={() => {
|
|
|
|
|
|
|
|
activeLogin()
|
|
|
|
|
|
|
|
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
تایید
|
|
|
|
</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">
|
|
|
|
ثبت نام شما در سامانه به منزله قبول
|
|
|
|
<Link to="" className="font-bold"> شرایط و قوانین استفاده </Link>
|
|
|
|
میباشد
|
|
|
|
</p>
|
|
|
|
<p className="text-gray-300 text-xs">1401 - 1400</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{/* 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="slideshowSlider"
|
|
|
|
style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}
|
|
|
|
>
|
|
|
|
{[slideContents[slideContents.length-1],
|
|
|
|
...slideContents,slideContents[0]
|
|
|
|
].map((item, index) => (
|
|
|
|
<div
|
|
|
|
className="slide"
|
|
|
|
key={`sildeNo${index}`}
|
|
|
|
|
|
|
|
>
|
|
|
|
<div className="w-full flex flex-col justify-center items-center">
|
|
|
|
<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>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="slideshowDots">
|
|
|
|
{slideContents.map((_, idx) => (
|
|
|
|
<div
|
|
|
|
key={idx}
|
|
|
|
className={`slideshowDot${index === idx+1 ? " active" : ""}`}
|
|
|
|
onClick={() => {
|
|
|
|
setIndex(idx+1);
|
|
|
|
}}
|
|
|
|
></div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default LoginSignUp;
|