You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

281 lines
14 KiB

3 years ago
import React, { useEffect, useState, useRef } from "react";
import { Link } from "react-router-dom";
import logo from "../../assets/img/big-logo.svg";
3 years ago
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";
3 years ago
const LoginSignUp = ({ activeLogin }) => {
3 years ago
const [steps, setSteps] = useState(0);
3 years ago
const [index, setIndex] = useState(1);
3 years ago
const timeoutRef = useRef(null);
3 years ago
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) => {
3 years ago
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";
3 years ago
}
};
3 years ago
function resetTimeout() {
3 years ago
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
3 years ago
}
3 years ago
3 years ago
useEffect(() => {
resetTimeout();
3 years ago
timeoutRef.current = setTimeout(
3 years ago
() =>{setIndex((prevIndex) =>prevIndex + 1
// prevIndex === slideContents.length - 1 ? 0 : prevIndex + 1
)
if(index === slideContents.length)
setTimeout(setIndex(1),1000)
},
3 years ago
delay
);
return () => {
resetTimeout();
};
3 years ago
}, [index]);
const slideContents = [
{
3 years ago
id: 0,
3 years ago
image: firstPic,
3 years ago
title: 'یک معلم دیوانه در کمین شما نشسته است مراقب باشید',
3 years ago
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
},
{
3 years ago
id: 1,
3 years ago
image: secondPic,
3 years ago
title: 'یک آزمون سخت و افتضاح در راه هست!',
3 years ago
description: 'لورم ایپسوم نمیخواستم استفاده کنم برای همین این متنای عجیب رو مینویسم ببینم چجوری میشه تهش بالاخره اونا هم قراره یه متن عجیب بنویسن ',
},
{
3 years ago
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,
3 years ago
image: thirdPic,
3 years ago
title: 'یک اسلاید عجیب غریب دیگر در راه هست',
3 years ago
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
},
3 years ago
];
3 years ago
const delay = 2500;
return (
3 years ago
<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">
3 years ago
<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>
}
3 years ago
</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>
3 years ago
{
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="/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 &&
<>
3 years ago
<div className="Login-box-form-item w-full h-12 rounded-lg border border-color7 mt-6 relative flex items-center flex-row-reverse">
3 years ago
<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
3 years ago
type="number"
3 years ago
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=""
3 years ago
className="Login-box-form-btn w-full h-12 rounded-lg bg-red52 text-white flex items-center justify-center mt-4"
3 years ago
onClick={() => {
setSteps(2);
}}
>
ارسال کد تاییدیه
</Link>
</>
}
{
steps == 2 &&
<>
<div style={{ direction: 'ltr' }} className="w-full mt-6">
<VerificationInput />
</div>
3 years ago
<Link
to="/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()
3 years ago
}}
>
تایید
</Link>
</>
}
3 years ago
<div className="w-full flex flex-col items-center justify-center">
<p className="w-3/5 text-xs my-20 text-center text-red26">
3 years ago
ثبت نام شما در سامانه به منزله قبول
<Link to="" className="font-bold"> شرایط و قوانین استفاده </Link>
میباشد
</p>
<p className="text-gray-300 text-xs">1401 - 1400</p>
</div>
3 years ago
</div>
</div>
{/* Slider */}
3 years ago
<div className="bg-grayEC w-3/5 rounded-tl-xl rounded-bl-xl flex flex-col items-center justify-center" >
3 years ago
<div className="slideshow" style={{ direction: 'ltr' }}>
3 years ago
<div
className="slideshowSlider"
style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}
>
3 years ago
{[slideContents[slideContents.length-1],
...slideContents,slideContents[0]
].map((item, index) => (
3 years ago
<div
className="slide"
key={`sildeNo${index}`}
3 years ago
3 years ago
>
<div className="w-full flex flex-col justify-center items-center">
3 years ago
<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>
3 years ago
</div>
</div>
))}
</div>
3 years ago
<div className="slideshowDots">
{slideContents.map((_, idx) => (
<div
key={idx}
3 years ago
className={`slideshowDot${index === idx+1 ? " active" : ""}`}
3 years ago
onClick={() => {
3 years ago
setIndex(idx+1);
3 years ago
}}
></div>
))}
</div>
</div>
</div>
</div>
3 years ago
</div>
3 years ago
);
};
export default LoginSignUp;