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

Mobile Register Made

Browse Source
main
Pedram Keshavarzi 3 years ago
parent 15f4dee690
commit 15c534c00d
7 changed files with 233 additions and 145 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/App.js
  2. 5
      src/components/header/Header.js
  3. 9
      src/components/header/MobileSideMenu/index.js
  4. 2
      src/components/nav/Nav.js
  5. 42
      src/view/LoginSignUp/index.css
  6. 122
      src/view/LoginSignUp/mobile/index.js
  7. 196
      src/view/register/mobile/index.js

2
src/App.js
Unescape View File

@ -666,7 +666,7 @@ function App() {
<Router> <Router>
<div className="App"> <div className="App">
{LOGIN && <Header />} {LOGIN && <Header logOut={logOut} />}
{LOGIN && <Nav logOut={logOut} />} {LOGIN && <Nav logOut={logOut} />}
<Routes> <Routes>
<Route path="/" element={LOGIN ? <Route path="/" element={LOGIN ?

5
src/components/header/Header.js
Unescape View File

@ -13,7 +13,8 @@ import arrowIcon from './MobileSideMenu/arrow-down.svg'
import exitIcon from '../../assets/img/group-9.svg' import exitIcon from '../../assets/img/group-9.svg'
import backIcon from './arrow-left-1.svg'; import backIcon from './arrow-left-1.svg';
const Header = ({ const Header = ({
isMobile, cart isMobile, cart,
logOut
}) => { }) => {
let today = moment().locale("fa").format("YYYY/M/D"); let today = moment().locale("fa").format("YYYY/M/D");
console.log("today:"); console.log("today:");
@ -138,7 +139,7 @@ const Header = ({
<> <>
<div className='h-screen top-0 w-full z-30 backdrop-blur bg-black bg-opacity-20 fixed'></div> <div className='h-screen top-0 w-full z-30 backdrop-blur bg-black bg-opacity-20 fixed'></div>
<div className='w-full flex'> <div className='w-full flex'>
<MobileSideMenu profilePic={avatar1} users={[ <MobileSideMenu logOut={logOut} profilePic={avatar1} users={[
{ {
name: 'کوروش زراندوز', name: 'کوروش زراندوز',
title: 'پایه ششم' title: 'پایه ششم'

9
src/components/header/MobileSideMenu/index.js
Unescape View File

@ -24,7 +24,8 @@ import radarIconActive from './radar-1-active.svg';
const MobileSideMenu = ({ const MobileSideMenu = ({
profilePic, profilePic,
users, users,
close close,
logOut
}) => { }) => {
const location = useLocation(); const location = useLocation();
const [showUsers, setShowUsers] = useState(false); const [showUsers, setShowUsers] = useState(false);
@ -83,7 +84,8 @@ const MobileSideMenu = ({
icon: exitIcon, icon: exitIcon,
activeIcon: exitIcon, activeIcon: exitIcon,
title: 'خروج', title: 'خروج',
link: '' link: '',
onClick: () => logOut()
}, },
] ]
return ( return (
@ -114,7 +116,8 @@ const MobileSideMenu = ({
{ {
options.map((item) => ( options.map((item) => (
<Link to={item.link} <Link to={item.link}
onClick={() => close()}
onClick={() => {close(); item?.onClick()}}
className={`w-full py-1 flex items-center ${location.pathname == item.link ? 'border-r-4 border-red52 text-red52 font-bold' : 'text-grayAB '}`} className={`w-full py-1 flex items-center ${location.pathname == item.link ? 'border-r-4 border-red52 text-red52 font-bold' : 'text-grayAB '}`}
style={{background: location.pathname == item.link && 'linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(223,20,82,0.2) 100%)', borderRight: location.pathname == item.link && '8px solid #df1452'}} style={{background: location.pathname == item.link && 'linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(223,20,82,0.2) 100%)', borderRight: location.pathname == item.link && '8px solid #df1452'}}
> >

2
src/components/nav/Nav.js
Unescape View File

@ -105,7 +105,7 @@ useEffect(() => {
if (isMobile) { if (isMobile) {
return ( return (
location2.pathname.includes('azmoon_list') || location2.pathname.includes('messages') || location2.pathname.includes('shoppingCart') ? null : location2.pathname.includes('azmoon_list') || location2.pathname.includes('messages') || location2.pathname.includes('shoppingCart') || location2.pathname.includes('register') ? null :
<div className="w-full flex fixed bg-white justify-center z-20 py-4 bottom-0"> <div className="w-full flex fixed bg-white justify-center z-20 py-4 bottom-0">
<div className="flex w-11/12 bg-white justify-between rtl border border-red82OP rounded-xl"> <div className="flex w-11/12 bg-white justify-between rtl border border-red82OP rounded-xl">
{ {

42
src/view/LoginSignUp/index.css
Unescape View File

@ -39,4 +39,46 @@
.slideshowDot.active { .slideshowDot.active {
background-color: #521326; background-color: #521326;
}
@media only screen and (max-width: 800px) {
.slideshow {
margin: 0 auto;
overflow: hidden;
width:100%;
}
.slideshowSlider {
white-space: nowrap;
transition: ease 1000ms;
}
.slide {
display: inline-block;
height: 300px;
width: 100%;
border-radius: 40px;
}
/* Buttons */
.slideshowDots {
text-align: center;
}
.slideshowDot {
display: inline-block;
height: 6px;
width: 6px;
border-radius: 50%;
cursor: pointer;
margin: 15px 7px 0px;
background-color: #c4c4c4;
}
.slideshowDot.active {
background-color: #521326;
}
} }

122
src/view/LoginSignUp/mobile/index.js
Unescape View File

@ -5,7 +5,9 @@ import { useNavigate } from "react-router-dom";
import Input from "../../../components/input/signUpInput"; import Input from "../../../components/input/signUpInput";
import onInput from "../../../utils/onInput"; import onInput from "../../../utils/onInput";
import Timer from "../../../components/Timer"; import Timer from "../../../components/Timer";
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 { connect } from "react-redux"; import { connect } from "react-redux";
import { user, publicApi } from "../../../redux/actions"; import { user, publicApi } from "../../../redux/actions";
@ -48,6 +50,31 @@ const LoginSignUpMobile = ({
line[id].style.backgroundColor = "#EBEBEB"; 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]);
@ -170,13 +197,36 @@ const LoginSignUpMobile = ({
} }
}, [loginFlag]); }, [loginFlag]);
const light = theme === "light"; const light = theme === "light";
const slideContents = [
{
id: 0,
image: firstPic,
title: 'یک معلم دیوانه در کمین شما نشسته است مراقب باشید',
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
},
{
id: 1,
image: secondPic,
title: 'یک آزمون سخت و افتضاح در راه هست!',
description: 'لورم ایپسوم نمیخواستم استفاده کنم برای همین این متنای عجیب رو مینویسم ببینم چجوری میشه تهش بالاخره اونا هم قراره یه متن عجیب بنویسن ',
},
{
id: 2,
image: thirdPic,
title: 'یک اسلاید عجیب غریب دیگر در راه هست',
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
},
];
const delay = 2500;
return ( return (
<div className="w-full flex items-center justify-center" style={{ height: '100vh', direction: 'rtl' }}> <div className="w-full flex flex-col items-center justify-center" style={{ height: '100vh', direction: 'rtl' }}>
<div className="w-fullflex rounded-xl"> <div className="w-full flex flex-col justify-between rounded-xl">
{/* form */} {/* form */}
<div className="flex w-full border-0 border-l border-solid border flex-col items-center p-6"> <div className="flex w-full border-0 border-l border-solid border flex-col items-center justify-between p-6">
<div className="h-12 w-full flex justify-end"> <div className="h-12 w-full flex justify-end">
{steps != 0 && {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 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)}>
@ -185,18 +235,54 @@ const LoginSignUpMobile = ({
} }
</div> </div>
<img src={logo} className="w-1/3 m-6" /> <img src={logo} className="w-1/3 m-6" />
<div className="flex flex-col items-start justify-start leading-normal"> <div className="flex flex-col w-full items-start justify-start leading-normal">
{ {
steps == 2 ? <h1 className="text-red26 text-lg font-bold">تاییدیه ثبت نام</h1> : <> steps == 2 ? <h1 className="text-red26 text-lg font-bold">تاییدیه ثبت نام</h1> :
<h1 className="text-red26 text-lg font-bold">ورود یا ثبت نام</h1> <>
<h1 className="text-red26 text-lg font-bold">سامانه ثبت نام مدارس موسسه علمی اندیشمند</h1> <div className=" w-full 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: '200px' }} />
<h1 className="w-4/5 text-sm my-2 text-red26 font-bold whitespace-normal">{item.title}</h1>
<p className=" px-12 text-right text-xs 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>
</> </>
} }
<p className="text-gray-500 text-sm mt-2"> <p className="text-gray-500 text-sm mt-2">
{ {
steps == 2 ? <div> steps == 2 && <div>
یک کد چهار رقمی تا &nbsp;{" "} یک کد چهار رقمی تا &nbsp;{" "}
<Timer seconds={120} refresh={setResend} /> &nbsp; دیگر برای شماره <Timer seconds={120} refresh={setResend} /> &nbsp; دیگر برای شماره
&nbsp;{" "} &nbsp;{" "}
@ -204,21 +290,17 @@ const LoginSignUpMobile = ({
{signUpFields?.cellphone} {signUpFields?.cellphone}
</span>{" "} </span>{" "}
&nbsp; ارسال خواهد شد. &nbsp; ارسال خواهد شد.
</div> : <div> </div>
کاربر گرامی لطفا یکی از دو گزینه زیر را انتخاب نمایید.
<br />
در صورتی که عضو نیستید روی دکمه ثبت نام بزنید
</div>
} }
</p> </p>
{ {
steps == 0 && steps == 0 &&
<> <div className="flex w-full items-center mt-4">
<Link <Link
to="" to=""
className="Login-box-form-btn w-full h-12 rounded-lg bg-red52 text-white flex items-center justify-center mt-6" className="Login-box-form-btn w-full h-12 rounded-lg bg-red52 text-white flex items-center justify-center ml-1"
onClick={() => { onClick={() => {
setSteps(1); setSteps(1);
@ -228,7 +310,7 @@ const LoginSignUpMobile = ({
</Link> </Link>
<Link <Link
to="" 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" className="Login-box-form-btn w-full h-12 rounded-lg border border-solid border-red52 text-red52 flex items-center justify-center mr-1"
onClick={() => { onClick={() => {
setSteps(1); setSteps(1);
setRegister(true); setRegister(true);
@ -237,7 +319,7 @@ const LoginSignUpMobile = ({
> >
ثبت نام ثبت نام
</Link> </Link>
</> </div>
} }
{ {
steps == 1 && steps == 1 &&
@ -364,14 +446,14 @@ const LoginSignUpMobile = ({
} }
<div className="w-full flex flex-col items-center justify-center"> {/* <div className="w-full flex flex-col items-center justify-center">
<p className="w-3/5 text-xs my-20 text-center text-red26"> <p className="w-3/5 text-xs my-20 text-center text-red26">
ثبت نام شما در سامانه به منزله قبول ثبت نام شما در سامانه به منزله قبول
<Link to="" className="font-bold"> شرایط و قوانین استفاده </Link> <Link to="" className="font-bold"> شرایط و قوانین استفاده </Link>
میباشد میباشد
</p> </p>
<p className="text-gray-300 text-xs">1401 - 1400</p> <p className="text-gray-300 text-xs">1401 - 1400</p>
</div> </div> */}
</div> </div>
</div> </div>

196
src/view/register/mobile/index.js
Unescape View File

@ -9,6 +9,8 @@ import Button from "../../../components/Button";
import Stepper from "../../../components/Stepper"; import Stepper from "../../../components/Stepper";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { toast } from "react-toastify";
import Checkbox from "../../../components/Checkbox";
const MobileRegister = ({ activeLogin, isMobile }) => { const MobileRegister = ({ activeLogin, isMobile }) => {
@ -19,7 +21,9 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
const [activeStep, setActiveStep] = useState([true, false, false, false]); const [activeStep, setActiveStep] = useState([true, false, false, false]);
const [error, setError] = useState(''); const [error, setError] = useState('');
useEffect(() => {
window.scrollTo(0,0)
}, [steps])
const [userInfo, setUserInfo] = useState({ const [userInfo, setUserInfo] = useState({
name: null, name: null,
@ -266,108 +270,64 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
return ( return (
<div className="flex justify-center mb-4" style={{ direction: 'rtl', marginTop: '8.5%', marginRight: '6.5%', width: '93.5%', marginRight: '6.5%' }}> <div className="flex w-full px-4 justify-center py-20" style={{ direction: 'rtl'}}>
<div className="w-11/12 flex flex-col "> <div className="w-full flex flex-col ">
{/* form */} {/* form */}
{console.log(userInfo)} {console.log(userInfo)}
<div className="flex w-full 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-full text-xl text-red52 font-bold">
{/* سامانه ثبت نام مدارس موسسه علمی اندیشمند */}
تکمیل اطلاعات پروفایل
</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>
)
)
} */}
<Stepper count={4} currentStep={steps} steps={stepCont} direction="horizontal"/>
</div>
</div>
</div>
{/* Content */} {/* Content */}
<div className="w-4/5 mx-10 flex flex-col items-start text-right b"> <div className="w-full flex flex-col items-start text-right b">
{ {
steps == 0 && steps == 0 &&
<form> <form className="w-full">
<div className="w-full px-10 pb-6 border-b border-solid border-gray-200"> <div className="w-full border-b border-solid border-gray-200">
<div className="mb-4"> <div className="mb-4 flex w-full justify-between font-black text-red52">
<h1 className="font-black">مشخصات هویتی دانش آموز</h1> <h1 className="">مشخصات هویتی دانش آموز</h1>
<p className="font-bold text-gray-300 text-sm">اطلاعات هویتی دانش آموز را با دقت تکمیل و عکس مدارک را بارگزاری نمایید</p> <p>مرحله ۱ از ۴</p>
</div> </div>
<div className="flex"> <div className="flex w-full flex-col">
<div className="flex w-2/5 ">
<div className="ml-2">
<Input title="نام" borderType="rounded" gapSize="8" direction='rtl' id={0} /> <Input title="نام" borderType="rounded" gapSize="8" direction='rtl' id={0} />
<Input title="کدملی" borderType="rounded" gapSize="12" id={1} type='number' /> <Input title="کدملی" borderType="rounded" gapSize="12" id={1} type='number' />
<Input title="جنسیت" borderType="rounded" gapSize="16" id={2} /> <Input title="جنسیت" borderType="rounded" gapSize="16" id={2} />
</div>
<div className="mr-2">
<Input title="نام خانوادگی" borderType="rounded" id={3} direction='rtl' /> <Input title="نام خانوادگی" borderType="rounded" id={3} direction='rtl' />
<Input title="تاریخ تولد" borderType="rounded" gapSize="16" id={4} type='number' /> <Input title="تاریخ تولد" borderType="rounded" gapSize="16" id={4} type='number' />
</div>
</div> <br></br>
<div className="w-3/5 flex justify-center">
<div className="w-2/5 mx-4">
<FileInput title="بارگزاری صفحه اول شناسنامه" id={1} /> <FileInput title="بارگزاری صفحه اول شناسنامه" id={1} />
</div> <br></br>
<div className="w-2/5 mx-4">
<FileInput title="بارگزاری عکس پرسنلی" id={2} /> <FileInput title="بارگزاری عکس پرسنلی" id={2} />
</div>
</div>
</div> </div>
</div> </div>
<div className="w-full px-10 py-10 border-b flex items-center border-solid border-gray-200"> <div className="w-full py-10 leading-normal border-b flex flex-col items-center border-solid border-gray-200">
<div className=""> <div className="w-full pb-2">
<h1 className="font-black">پایه تحصیلی</h1> <h1 className="font-black">پایه تحصیلی</h1>
<p className="font-bold text-gray-300 text-sm">لطفا پایه تحصیلی دانش آموز را وارد کنید</p> <p className="font-bold text-gray-300 text-sm">لطفا پایه تحصیلی دانش آموز را وارد کنید</p>
</div> </div>
<select className="bg-white border border-solid border-gray-300 w-48 p-3 rounded-lg text-gray-400 outline-red52 mx-6"> <select className="bg-white border border-solid border-gray-300 w-full p-3 rounded-lg text-gray-400 outline-red52 mx-6">
{grades.map((item) => ( {grades.map((item) => (
<option key={`Grade__${item.id}`}>{item.title}</option> <option key={`Grade__${item.id}`}>{item.title}</option>
))} ))}
</select> </select>
</div> </div>
<div className="w-full px-10 py-8 flex flex-col "> <div className="w-full py-8 flex flex-col ">
<div className="mb-4"> <div className="mb-4">
<h1 className="font-black">مشخصات هویتی دانش آموز</h1> <h1 className="font-black">مشخصات هویتی دانش آموز</h1>
<p className="font-bold text-gray-300 text-sm">اطلاعات هویتی دانش آموز را با دقت تکمیل و عکس مدارک را بارگزاری نمایید</p> <p className="font-bold text-gray-300 text-sm">اطلاعات هویتی دانش آموز را با دقت تکمیل و عکس مدارک را بارگزاری نمایید</p>
</div> </div>
<div className="flex justify-between items-center"> <div className="flex flex-col items-center">
<Input title="نام مدرسه" borderType="rounded" gapSize="20" direction='rtl' id={5} /> <Input title="نام مدرسه" borderType="rounded" gapSize="20" direction='rtl' id={5} />
<select className="bg-white border border-solid border-gray-200 w-full px-3 rounded text-gray-400 outline-red52 mx-2 h-12 mt-6"> <select className="bg-white border border-solid border-gray-200 w-full px-3 rounded text-gray-400 outline-red52 mx-2 h-12 mt-6">
{grades.map((item) => ( {grades.map((item) => (
@ -383,13 +343,13 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
<div className="w-40"> <div className="w-40">
<Button borderType='rounded' title='مرحله بعد' onClick={() => { <Button borderType='rounded' title='مرحله بعد' onClick={() => {
const inputs = document.querySelectorAll('.Login-box-form-item-input') const inputs = document.querySelectorAll('.Login-box-form-item-input')
if (inputs[0].value) { // if (inputs[0].value) {
setSteps(1) setSteps(1)
setActiveStep([true, true, false, false]) setActiveStep([true, true, false, false])
setError('') setError('')
} else { // } else {
alert('لطفا تمامی فیلد ها را پر کنید') // toast.warn('لطفا تمامی فیلد ها را پر کنید')
} // }
setUserInfo(prevState => { setUserInfo(prevState => {
return { return {
...prevState, ...prevState,
@ -408,7 +368,7 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
}) })
}} /> }} />
</div> </div>
</div> </div>
</div> </div>
@ -416,13 +376,17 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
} }
{ {
steps == 1 && steps == 1 &&
<form> <form className="w-full">
<div className="w-full px-10 pb-6 border-b border-solid border-gray-200"> <div className="mb-4 flex w-full justify-between font-black text-red52">
<h1 className="">مشخصات هویتی خانواده دانش آموز</h1>
<p>مرحله ۲ از ۴</p>
</div>
<div className="w-full pb-6 border-b border-solid border-gray-200">
<div className="mb-4"> <div className="mb-4">
<h1 className="font-black">مشخصات هویتی پدر</h1> <h1 className="font-black">مشخصات هویتی پدر</h1>
<p className="font-bold text-gray-300 text-sm">لطفا اطلاعات مربوط هویتی پدر را وارد کنید</p> <p className="font-bold text-gray-300 text-sm">لطفا اطلاعات مربوط هویتی پدر را وارد کنید</p>
</div> </div>
<div className="flex"> <div className="flex flex-col">
<Input title="نام" borderType="rounded" gapSize="8" direction='rtl' id={0} /> <Input title="نام" borderType="rounded" gapSize="8" direction='rtl' id={0} />
@ -435,8 +399,7 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
</div>
<div className="flex">
<Input title="تلفن همراه" borderType="rounded" type='number' id={4} /> <Input title="تلفن همراه" borderType="rounded" type='number' id={4} />
@ -454,12 +417,12 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
<div className="w-full px-10 py-6 border-b border-solid border-gray-200"> <div className="w-full py-6 border-b border-solid border-gray-200">
<div className="mb-4"> <div className="mb-4">
<h1 className="font-black">مشخصات هویتی مادر</h1> <h1 className="font-black">مشخصات هویتی مادر</h1>
<p className="font-bold text-gray-300 text-sm">لطفا اطلاعات مربوط هویتی مادر را وارد کنید</p> <p className="font-bold text-gray-300 text-sm">لطفا اطلاعات مربوط هویتی مادر را وارد کنید</p>
</div> </div>
<div className="flex"> <div className="flex w-full flex-col">
<Input title="نام" borderType="rounded" gapSize="8" direction='rtl' id={8} /> <Input title="نام" borderType="rounded" gapSize="8" direction='rtl' id={8} />
@ -472,8 +435,7 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
</div>
<div className="flex">
<Input title="تلفن همراه" borderType="rounded" type='number' id={12} /> <Input title="تلفن همراه" borderType="rounded" type='number' id={12} />
@ -490,51 +452,49 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
</div> </div>
<div className="w-full px-10 py-8 flex flex-col "> <div className="w-full py-8 flex flex-col ">
<div className="mb-4"> <div className="mb-4">
<h1 className="font-black">زندگی با خانواده </h1> <h1 className="font-black">زندگی با خانواده </h1>
<p className="font-bold text-gray-300 text-sm">در این قسمت مشخص کنید دانشس آموز به همراه چه کسانی زندگی میکند </p> <p className="font-bold text-gray-300 text-sm">در این قسمت مشخص کنید دانشس آموز به همراه چه کسانی زندگی میکند </p>
</div> </div>
<div className="flex justify-between items-center"> <div className="flex flex-col items-center">
<div className="w-4/5 flex">
<select className="bg-white border border-solid border-gray-200 w-full px-3 rounded text-gray-400 outline-red52 mx-2 h-12 mt-6"> <select className="bg-white border border-solid border-gray-200 w-full px-3 rounded text-gray-400 outline-red52 mx-2 h-12 mt-6">
{grades.map((item) => ( {grades.map((item) => (
<option key={`Grade__${item.id}`}>{item.title}</option> <option key={`Grade__${item.id}`}>{item.title}</option>
))} ))}
</select> </select>
<Input title="تعداد افراد خانواده" borderType="rounded" type='number' gapSize="40" direction='rtl' id={16} /> <Input title="تعداد افراد خانواده" borderType="rounded" type='number' gapSize="40" direction='rtl' id={16} />
</div>
<Input title="نشانی محل سکونت" borderType="rounded" gapSize="40" id={17} /> <Input title="نشانی محل سکونت" borderType="rounded" gapSize="40" id={17} />
</div>
<div className="flex justify-start items-center">
<div className="w-2/5 flex">
<Input title="تلفن ثابت" borderType="rounded" type='number' gapSize="40" direction='rtl' id={18} className="w-1/2" /> <Input title="تلفن ثابت" borderType="rounded" type='number' gapSize="40" direction='rtl' id={18} />
<Input title="تعداد افراد خانواده" borderType="rounded" type='number' gapSize="40" direction='rtl' id={19} className="w-1/2" /> <Input title="تعداد افراد خانواده" borderType="rounded" type='number' gapSize="40" direction='rtl' id={19} />
</div>
</div> </div>
<div className="flex pt-10 justify-end"> <div className="flex w-full pt-10 justify-between">
<div className="w-40 mx-4"> <div className="w-1/2 ml-2">
<Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => { <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => {
setSteps(0); setSteps(0);
setActiveStep([true, false, false, false]) setActiveStep([true, false, false, false])
}} /> }} />
</div> </div>
<div className="w-40"> <div className="w-1/2 mr-2">
<Button borderType='rounded' title='مرحله بعد' onClick={() => { <Button borderType='rounded' title='مرحله بعد' onClick={() => {
const inputs = document.querySelectorAll('.Login-box-form-item-input') const inputs = document.querySelectorAll('.Login-box-form-item-input')
if (inputs[0].value) { // if (inputs[0].value) {
setSteps(2); setSteps(2);
setActiveStep([true, true, true, false]) setActiveStep([true, true, true, false])
} else { // } else {
alert('لطفا تمامی فیلد ها را پر کنید') // alert('لطفا تمامی فیلد ها را پر کنید')
} // }
setUserInfo(prevState => { setUserInfo(prevState => {
return { return {
...prevState, ...prevState,
@ -579,13 +539,14 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
{ {
steps == 2 && steps == 2 &&
<> <>
<div className="w-full px-10 pb-6 border-b border-solid border-gray-200"> <div className="w-full pb-6 border-b border-solid border-gray-200">
<div className="mb-4"> <div className="mb-4 flex w-full justify-between font-black text-red52">
<h1 className="font-black">قوانین و مقررات ثبت نام</h1> <h1 className="">تایید قوانین و مقررات</h1>
<p className="font-bold text-gray-300 text-sm">لطفا اطلاعات مربوط هویتی پدر را وارد کنید</p> <p>مرحله ۳ از ۴</p>
</div> </div>
<p className="text-gray-500"> <p className="text-gray-500 text-sm overflow-x-hidden overflow-scroll w-full" style={{height:'60vh'}}>
بند اول: موارد مربوط به آموزش مخاطبین بند اول: موارد مربوط به آموزش مخاطبین
پیر مردی هر روز تو محله می دید پسر کی با کفش های پاره و پای برهنه با توپ پلاستیکی فوتبال بازی می کند، روزی رفت ی کتانی نو خرید و اومد و به پسرک گفت بیا این کفشا رو بپوش…پسرک کفشا رو پوشید و خوشحال رو به پیر مرد کرد و گفت: شما خدایید؟! پیر مرد لبش را گزید و گفت نه! پسرک گفت پس دوست خدایی، چون من دیشب فقط به خدا گفتم كه کفش ندارم پیر مردی هر روز تو محله می دید پسر کی با کفش های پاره و پای برهنه با توپ پلاستیکی فوتبال بازی می کند، روزی رفت ی کتانی نو خرید و اومد و به پسرک گفت بیا این کفشا رو بپوش…پسرک کفشا رو پوشید و خوشحال رو به پیر مرد کرد و گفت: شما خدایید؟! پیر مرد لبش را گزید و گفت نه! پسرک گفت پس دوست خدایی، چون من دیشب فقط به خدا گفتم كه کفش ندارم
هر نفسی که فرو می‌ بریم، مرگی را که مدام به ما دست‌ اندازی می‌کند پس می‌زند... در نهایت این مرگ است که باید پیروز شود، زیرا از هنگام تولد بخشی از سرنوشت ما شده و فقط مدت کوتاهی پیش از بلعیدن طعمه اش، با آن بازی می کند. با این همه، ما تا آنجا که ممکن است، با علاقه فراوان و دلواپسی زیاد به زندگی ادامه می دهیم، همان‌ طور که تا آنجا که ممکن است طولانی‌ تر در یک حباب صابون می‌ دمیم تا بزرگتر شود، گر چه با قطعیتی تمام می‌ دانیم که خواهد ترکید. هر نفسی که فرو می‌ بریم، مرگی را که مدام به ما دست‌ اندازی می‌کند پس می‌زند... در نهایت این مرگ است که باید پیروز شود، زیرا از هنگام تولد بخشی از سرنوشت ما شده و فقط مدت کوتاهی پیش از بلعیدن طعمه اش، با آن بازی می کند. با این همه، ما تا آنجا که ممکن است، با علاقه فراوان و دلواپسی زیاد به زندگی ادامه می دهیم، همان‌ طور که تا آنجا که ممکن است طولانی‌ تر در یک حباب صابون می‌ دمیم تا بزرگتر شود، گر چه با قطعیتی تمام می‌ دانیم که خواهد ترکید.
@ -601,8 +562,8 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
</p> </p>
</div> </div>
<div className="flex items-center px-10 py-6"> <div className="flex items-start text-xs py-6">
<input type="checkbox" className="w-6 h-6" /> <Checkbox name="TAEED_REGISTER_MOBILE" />
<label className="mr-4 font-bold text-gray-500"> <label className="mr-4 font-bold text-gray-500">
اینجانبان اینجانبان
<span className="text-red52 font-bold"> {userInfo.fatherName} {userInfo.fatherFamilyName} </span> <span className="text-red52 font-bold"> {userInfo.fatherName} {userInfo.fatherFamilyName} </span>
@ -613,15 +574,15 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
با قوانین و مقررات موافقت نموده و تمامی موارد به عهده اینجانب میباشد با قوانین و مقررات موافقت نموده و تمامی موارد به عهده اینجانب میباشد
</label> </label>
</div> </div>
<div className="w-full flex pt-10 justify-end"> <div className="w-full flex pt-10 justify-between">
<div className="w-40 mx-4"> <div className="w-1/2 ml-2">
<Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => { <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => {
setSteps(1); setSteps(1);
setActiveStep([true, true, false, false]) setActiveStep([true, true, false, false])
}} /> }} />
</div> </div>
<div className="w-40"> <div className="w-1/2 mr-2">
<Button borderType='rounded' title='مرحله بعد' onClick={() => { <Button borderType='rounded' title='مرحله بعد' onClick={() => {
setSteps(3); setSteps(3);
setActiveStep([true, true, true, true]) setActiveStep([true, true, true, true])
@ -636,11 +597,10 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
{ {
steps == 3 && steps == 3 &&
<> <>
<div className="w-full px-10 pb-6 border-b border-solid border-gray-200"> <div className="w-full pb-6">
<div className="mb-4 pb-4"> <div className="mb-4 flex w-full justify-between font-black text-red52">
<h1 className="font-black">تایید اطلاعات</h1> <h1 className="">تایید اطلاعات</h1>
<p className="font-bold text-gray-300 text-sm">لطفا اطلاعاتی که وارد کرده اید را چک کنید</p> <p>مرحله ۴ از ۴</p>
</div> </div>
<div className="flex flex-col border-b border-solid border-gray-300 leading-7 pb-6"> <div className="flex flex-col border-b border-solid border-gray-300 leading-7 pb-6">
@ -685,16 +645,16 @@ const MobileRegister = ({ activeLogin, isMobile }) => {
</div> </div>
</div> </div>
<div className="w-full flex pt-10 justify-end"> <div className="w-full flex pt-10 justify-between">
<div className="w-40 mx-4"> <div className="w-1/2 ml-2">
<Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => { <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => {
setSteps(2) setSteps(2)
setActiveStep([true, true, true, false]) setActiveStep([true, true, true, false])
}} /> }} />
</div> </div>
<div className="w-40"> <div className="w-1/2 mr-2">
<Button borderType='rounded' title='ورود' to='/dashboard' onClick={() => <Button borderType='rounded' title='ورود' to='/' onClick={() =>
activeLogin() activeLogin()
} /> } />
</div> </div>

Write Preview
Loading…
Cancel
Save