Gubar Nikita c345bdf5ca add adaptive registationForCandidate,
modalRegistration,
create hook useFormValidation,
add Validation in registationForCandidate
2023-12-26 02:42:49 +03:00

261 lines
8.2 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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;