pedram
/
Andishmand
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Steps Made

Browse Source
main
Pedram Keshavarzi 3 years ago
parent f4e7c3c779
commit 6735b75474
1 changed files with 118 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 97
      src/view/LoginSignUp/index.js

97
src/view/LoginSignUp/index.js
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save