parent
9fc4c07336
commit
b6f8d89567
5 changed files with 176 additions and 5 deletions
|
After Width: | Height: | Size: 656 B |
@ -0,0 +1,161 @@ |
|||||||
|
|
||||||
|
|
||||||
|
import React, { useEffect, useState, useRef } from "react"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
import logo from "../../assets/img/logo.png"; |
||||||
|
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 VerificationInput from "../../components/verificationInput"; |
||||||
|
import Input from "../../components/input"; |
||||||
|
import FileInput from "../../components/fileInput"; |
||||||
|
|
||||||
|
|
||||||
|
const Register = ({ 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"; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const stepCont = [ |
||||||
|
{ |
||||||
|
title: 'اطلاعات هویتی', |
||||||
|
step: 0 |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'مشخصات والدین', |
||||||
|
step: 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'قوانین و مقررات', |
||||||
|
step: 2 |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'تایید اطلاعات', |
||||||
|
step: 3 |
||||||
|
}, |
||||||
|
] |
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="w-full flex items-center justify-center" style={{ height: '100vh', direction: 'rtl' }}> |
||||||
|
<div className="w-11/12 flex "> |
||||||
|
{/* form */} |
||||||
|
|
||||||
|
<div className="flex w-1/5 border-0 border-l border-solid border flex-col items-center p-6"> |
||||||
|
|
||||||
|
<img src={logo} className="w-1/2 m-4 mt-0" /> |
||||||
|
<div className="flex flex-col items-center justify-start leading-normal"> |
||||||
|
<p className="w-3/5 text-red26"> |
||||||
|
سامانه ثبت نام مدارس موسسه علمی اندیشمند |
||||||
|
</p> |
||||||
|
|
||||||
|
<div className="flex flex-col mt-6"> |
||||||
|
{ |
||||||
|
stepCont.map((item) => ( |
||||||
|
|
||||||
|
<div key={`step__${item.step}`} className="flex my-2 items-center "> |
||||||
|
<div className="ml-2"> |
||||||
|
<div className={`w-6 h-6 rounded-full border border-solid border-gray-200 ${steps == item.step ? 'bg-red52' : ''}`}> |
||||||
|
|
||||||
|
</div> |
||||||
|
<span |
||||||
|
className=" w-2 mt-2 border-r-4 border-solid border-red46OP" |
||||||
|
style={{ |
||||||
|
|
||||||
|
// transform: "translateX(-1px)",
|
||||||
|
}} |
||||||
|
></span> |
||||||
|
</div> |
||||||
|
<h1 className="text-gray-400 font-bold">{item.title}</h1> |
||||||
|
</div> |
||||||
|
|
||||||
|
) |
||||||
|
) |
||||||
|
} |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* Content */} |
||||||
|
|
||||||
|
<div className="w-4/5 mx-10 flex flex-col items-start text-right b"> |
||||||
|
{ |
||||||
|
steps == 0 && |
||||||
|
<> |
||||||
|
<div className="w-full px-10 pb-6 border-b border-solid border-gray-200">
|
||||||
|
<div className="mb-4"> |
||||||
|
<h1 className="font-black">مشخصات هویتی دانش آموز</h1> |
||||||
|
<p className="font-bold text-gray-300 text-sm">اطلاعات هویتی دانش آموز را با دقت تکمیل و عکس مدارک را بارگزاری نمایید</p> |
||||||
|
</div> |
||||||
|
<div className="flex"> |
||||||
|
<div className="flex w-2/5 "> |
||||||
|
<div className="ml-2"> |
||||||
|
<Input title="نام" borderType="rounded" gapSize="8" direction='rtl'/> |
||||||
|
<Input title="کدملی" borderType="rounded" gapSize="12" id={1} type='number'/> |
||||||
|
</div> |
||||||
|
<div className="mr-2"> |
||||||
|
<Input title="نام خانوادگی" borderType="rounded" id={2} direction='rtl'/> |
||||||
|
<Input title="تاریخ تولد" borderType="rounded" gapSize="16" id={3} type='number'/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="w-3/5 flex justify-center"> |
||||||
|
<div className="w-2/5 mx-4"> |
||||||
|
<FileInput title="بارگزای صفحه اول شناسنامه" /> |
||||||
|
</div> |
||||||
|
<div className="w-2/5 mx-4"> |
||||||
|
<FileInput title="بارگزای صفحه اول شناسنامه" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="w-full px-10 py-6 border-b flex items-center border-solid border-gray-200">
|
||||||
|
<div className="mb-4"> |
||||||
|
<h1 className="font-black">پایه تحصیلی</h1> |
||||||
|
<p className="font-bold text-gray-300 text-sm">لطفا پایه تحصیلی دانش آموز را وارد کنید</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</> |
||||||
|
} |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Register; |
||||||
Loading…
Reference in new issue