modalRegistration, create hook useFormValidation, add Validation in registationForCandidate
261 lines
8.2 KiB
JavaScript
261 lines
8.2 KiB
JavaScript
import React, { useState } from "react";
|
||
|
||
import { apiRequest } from "@api/request";
|
||
|
||
import { useNotification } from "@hooks/useNotification";
|
||
|
||
import BaseButton from "@components/Common/BaseButton/BaseButton";
|
||
import { Loader } from "@components/Common/Loader/Loader";
|
||
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
|
||
|
||
import anyMoment from "assets/icons/anyMoment.svg";
|
||
import doc from "assets/icons/doc.svg";
|
||
import telegramLogo from "assets/icons/tgLogo.svg";
|
||
|
||
import "./modalRegistration.scss";
|
||
|
||
export const ModalRegistration = ({ active, setActive }) => {
|
||
const [inputsValue, setInputsValue] = useState({
|
||
userName: "",
|
||
email: "",
|
||
password: "",
|
||
secondPassword: ""
|
||
});
|
||
|
||
const [inputsError, setInputsError] = useState({
|
||
name: false,
|
||
email: false,
|
||
password: false,
|
||
secondPassword: false
|
||
});
|
||
|
||
const [loader, setLoader] = useState(false);
|
||
|
||
const validateEmail = (email) => {
|
||
// регулярное выражение для проверки email
|
||
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
|
||
// возвращаем true, если email проходит проверку, и false, если нет
|
||
return re.test(email);
|
||
};
|
||
|
||
const { showNotification } = useNotification();
|
||
|
||
const validateForm = () => {
|
||
if (inputsValue.password.length < 6) {
|
||
setInputsError((prevValue) => ({ ...prevValue, password: true }));
|
||
}
|
||
if (inputsValue.password !== inputsValue.secondPassword) {
|
||
setInputsError((prevValue) => ({ ...prevValue, secondPassword: true }));
|
||
}
|
||
if (inputsValue.userName.length < 2) {
|
||
setInputsError((prevValue) => ({ ...prevValue, name: true }));
|
||
}
|
||
if (!validateEmail(inputsValue.email)) {
|
||
setInputsError((prevValue) => ({ ...prevValue, email: true }));
|
||
}
|
||
if (
|
||
inputsValue.password.length < 6 ||
|
||
inputsValue.userName.length < 6 ||
|
||
!validateEmail(inputsValue.email)
|
||
) {
|
||
return true;
|
||
}
|
||
};
|
||
|
||
const submitHandler = () => {
|
||
if (validateForm()) {
|
||
return;
|
||
}
|
||
setLoader(true);
|
||
apiRequest("/register/sign-up", {
|
||
method: "POST",
|
||
data: {
|
||
username: inputsValue.userName,
|
||
email: inputsValue.email,
|
||
password: inputsValue.password
|
||
}
|
||
}).then((data) => {
|
||
setLoader(false);
|
||
if (!data) {
|
||
showNotification({
|
||
show: true,
|
||
text: "Аккаунт с таким логином или email уже существует",
|
||
type: "error"
|
||
});
|
||
} else {
|
||
closeModal();
|
||
showNotification({
|
||
show: true,
|
||
text: "Аккаунт успешно создан",
|
||
type: "success"
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
const closeModal = () => {
|
||
setInputsValue({
|
||
userName: "",
|
||
email: "",
|
||
password: ""
|
||
});
|
||
setInputsError({
|
||
name: false,
|
||
email: false,
|
||
password: false
|
||
});
|
||
setActive(false);
|
||
};
|
||
return (
|
||
<ModalLayout active={active} setActive={closeModal} styles={"registration"}>
|
||
<div className="registration-body__main">
|
||
<h2 className="registration-body__main-title">
|
||
Подключайтесь к <span>ITguild</span>
|
||
</h2>
|
||
<p className="registration-body__main-desc">
|
||
Зарегистрируйтесь и начните работу уже сегодня
|
||
</p>
|
||
|
||
<div className="input-body">
|
||
<div className="input-body__box">
|
||
<div className="inputContainer">
|
||
<h5>Ваше имя</h5>
|
||
<input
|
||
className={inputsError.name ? "error" : ""}
|
||
onChange={(e) => {
|
||
setInputsError({
|
||
name: false,
|
||
email: false,
|
||
password: false
|
||
});
|
||
setInputsValue((prevValue) => ({
|
||
...prevValue,
|
||
userName: e.target.value
|
||
}));
|
||
}}
|
||
value={inputsValue.userName}
|
||
placeholder="Имя"
|
||
/>
|
||
{inputsError.name && <span>Минимум 2 символа</span>}
|
||
</div>
|
||
<div className="inputContainer">
|
||
<h5>E-mail</h5>
|
||
<input
|
||
type="email"
|
||
className={inputsError.email ? "error" : ""}
|
||
onChange={(e) => {
|
||
setInputsError({
|
||
name: false,
|
||
email: false,
|
||
password: false
|
||
});
|
||
setInputsValue((prevValue) => ({
|
||
...prevValue,
|
||
email: e.target.value
|
||
}));
|
||
}}
|
||
value={inputsValue.email}
|
||
placeholder="Почта"
|
||
/>
|
||
{inputsError.email && <span>Введите корректный e-mail</span>}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="input-body__box">
|
||
<div className="inputContainer">
|
||
<h5>Пароль</h5>
|
||
<input
|
||
className={inputsError.password ? "error" : ""}
|
||
type="password"
|
||
onChange={(e) => {
|
||
setInputsError({
|
||
name: false,
|
||
email: false,
|
||
password: false
|
||
});
|
||
setInputsValue((prevValue) => ({
|
||
...prevValue,
|
||
password: e.target.value
|
||
}));
|
||
}}
|
||
value={inputsValue.password}
|
||
placeholder="Пароль"
|
||
/>
|
||
{inputsError.password && <span>Минимум 6 символов</span>}
|
||
</div>
|
||
<div className="inputContainer">
|
||
<h5>Повторите пароль</h5>
|
||
<input
|
||
className={inputsError.secondPassword ? "error" : ""}
|
||
type="password"
|
||
onChange={(e) => {
|
||
setInputsError({
|
||
name: false,
|
||
email: false,
|
||
secondPassword: false
|
||
});
|
||
setInputsValue((prevValue) => ({
|
||
...prevValue,
|
||
secondPassword: e.target.value
|
||
}));
|
||
}}
|
||
value={inputsValue.secondPassword}
|
||
placeholder="Пароль"
|
||
/>
|
||
{inputsError.secondPassword && (
|
||
<span>Пароли должны совпадать</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="button-box">
|
||
{loader ? (
|
||
<Loader style={"green"} />
|
||
) : (
|
||
<BaseButton
|
||
onClick={(e) => {
|
||
e.preventDefault();
|
||
submitHandler();
|
||
}}
|
||
styles="button-box__submit"
|
||
>
|
||
Отправить
|
||
</BaseButton>
|
||
)}
|
||
{/*<h5>*/}
|
||
{/* У вас уже есть аккаунт? <p>Войти</p>*/}
|
||
{/*</h5>*/}
|
||
</div>
|
||
</div>
|
||
<div className="registration-body__about">
|
||
<h4>Отказ от специалиста в любой момент</h4>
|
||
<div className="registration-body__about-text">
|
||
<img src={anyMoment}></img>
|
||
<p>
|
||
Поменяйте, откажитесь или возьмите еще специалиста в любой момент
|
||
работы.
|
||
</p>
|
||
</div>
|
||
<h4>100% постоплата</h4>
|
||
<div className="registration-body__about-text">
|
||
<img src={doc}></img>
|
||
<p>
|
||
Договор не подразумевает какую‑либо оплату до того, как вы
|
||
арендовали специалиста
|
||
</p>
|
||
</div>
|
||
<h4>Есть вопросы?</h4>
|
||
<div className="registration-body__about-text">
|
||
<img src={telegramLogo}></img>
|
||
<p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p>
|
||
</div>
|
||
</div>
|
||
<span onClick={() => closeModal()} className="exit"></span>
|
||
</ModalLayout>
|
||
);
|
||
};
|
||
|
||
export default ModalRegistration;
|