254 lines
7.9 KiB
React
Raw Normal View History

2023-11-03 16:23:21 +03:00
import React, { useState } from "react";
2023-03-28 20:42:18 +03:00
2023-11-03 16:23:49 +03:00
import { apiRequest } from "@api/request";
2023-11-04 02:44:40 +03:00
import { useNotification } from "@hooks/useNotification";
2023-05-30 10:10:34 +03:00
import BaseButton from "@components/Common/BaseButton/BaseButton";
2023-11-23 16:48:45 +03:00
import { Loader } from "@components/Common/Loader/Loader";
2023-05-31 08:36:15 +03:00
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
2023-05-29 09:37:18 +03:00
2023-05-30 10:10:34 +03:00
import anyMoment from "assets/icons/anyMoment.svg";
2023-05-31 08:36:15 +03:00
import doc from "assets/icons/doc.svg";
import telegramLogo from "assets/icons/tgLogo.svg";
2023-03-28 20:42:18 +03:00
import "./modalRegistration.scss";
export const ModalRegistration = ({ active, setActive }) => {
2023-11-03 16:23:21 +03:00
const [inputsValue, setInputsValue] = useState({
2023-11-03 16:23:49 +03:00
userName: "",
email: "",
password: "",
});
2023-11-04 02:44:40 +03:00
2023-11-19 18:49:52 +03:00
const [inputsError, setInputsError] = useState({
name: false,
email: false,
2023-11-19 18:50:04 +03:00
password: false,
});
2023-11-19 18:49:52 +03:00
2023-11-23 16:48:56 +03:00
const [loader, setLoader] = useState(false);
2023-11-23 16:48:45 +03:00
2023-11-04 02:44:40 +03:00
const validateEmail = (email) => {
// регулярное выражение для проверки email
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
// возвращаем true, если email проходит проверку, и false, если нет
return re.test(email);
2023-11-05 20:41:40 +03:00
};
2023-11-04 02:39:58 +03:00
const { showNotification } = useNotification();
2023-11-19 18:49:52 +03:00
const validateForm = () => {
if (inputsValue.password.length < 6) {
2023-11-19 18:50:04 +03:00
setInputsError((prevValue) => ({ ...prevValue, password: true }));
2023-11-19 18:49:52 +03:00
}
2023-11-21 16:53:05 +03:00
if (inputsValue.userName.length < 2) {
2023-11-19 18:50:04 +03:00
setInputsError((prevValue) => ({ ...prevValue, name: true }));
2023-11-08 18:27:42 +03:00
}
if (!validateEmail(inputsValue.email)) {
2023-11-19 18:50:04 +03:00
setInputsError((prevValue) => ({ ...prevValue, email: true }));
2023-11-19 18:49:52 +03:00
}
2023-11-19 18:50:04 +03:00
if (
inputsValue.password.length < 6 ||
inputsValue.userName.length < 6 ||
!validateEmail(inputsValue.email)
) {
return true;
2023-11-19 18:49:52 +03:00
}
2023-11-19 18:50:04 +03:00
};
2023-11-19 18:49:52 +03:00
const submitHandler = () => {
2023-11-19 18:50:04 +03:00
if (validateForm()) {
return;
2023-11-08 18:27:42 +03:00
}
2023-11-23 16:48:56 +03:00
setLoader(true);
2023-11-03 16:23:21 +03:00
apiRequest("/register/sign-up", {
method: "POST",
data: {
username: inputsValue.userName,
email: inputsValue.email,
2023-11-03 16:23:49 +03:00
password: inputsValue.password,
},
2023-11-08 18:27:42 +03:00
}).then((data) => {
2023-11-23 16:48:56 +03:00
setLoader(false);
2023-11-08 18:27:42 +03:00
if (!data) {
showNotification({
show: true,
text: "Аккаунт с таким логином или email уже существует",
type: "error",
});
} else {
2023-11-23 16:48:56 +03:00
closeModal();
2023-11-08 18:27:42 +03:00
showNotification({
show: true,
text: "Аккаунт успешно создан",
type: "success",
});
}
2023-11-03 16:23:49 +03:00
});
};
2023-11-23 16:48:45 +03:00
const closeModal = () => {
setInputsValue({
userName: "",
email: "",
password: "",
});
setInputsError({
name: false,
email: false,
password: false,
});
setActive(false);
2023-11-23 16:48:56 +03:00
};
2023-03-28 20:42:18 +03:00
return (
2023-11-23 16:48:45 +03:00
<ModalLayout active={active} setActive={closeModal} styles={"registration"}>
2023-12-05 14:22:45 +03:00
<div className="registration-body__main">
2023-05-29 09:37:18 +03:00
<h2>
2023-12-05 14:22:45 +03:00
Подключайтесь к <p>ITguild</p>
2023-05-29 09:37:18 +03:00
</h2>
2023-12-05 14:22:45 +03:00
<p className="registration-body__main-desc">
2023-11-23 18:15:46 +03:00
Зарегистрируйтесь и начните работу уже сегодня
2023-05-29 09:37:18 +03:00
</p>
2023-03-28 20:42:18 +03:00
2023-05-29 09:37:18 +03:00
<div className="input-body">
<div className="input-body__box">
2023-11-19 18:50:04 +03:00
<div className="inputContainer">
2023-11-19 18:49:52 +03:00
<h5>Ваше имя</h5>
<input
2023-11-19 18:50:04 +03:00
className={inputsError.name ? "error" : ""}
2023-11-19 18:49:52 +03:00
onChange={(e) => {
setInputsError({
name: false,
email: false,
2023-11-19 18:50:04 +03:00
password: false,
});
2023-11-19 18:49:52 +03:00
setInputsValue((prevValue) => ({
...prevValue,
userName: e.target.value,
2023-11-19 18:50:04 +03:00
}));
2023-11-19 18:49:52 +03:00
}}
2023-11-23 16:48:45 +03:00
value={inputsValue.userName}
2023-11-21 16:53:05 +03:00
placeholder="Имя"
2023-11-19 18:49:52 +03:00
/>
2023-12-04 18:00:12 +03:00
{inputsError.name && <span>Минимум 2 символа</span>}
2023-11-19 18:49:52 +03:00
</div>
2023-11-19 18:50:04 +03:00
<div className="inputContainer">
2023-11-19 18:49:52 +03:00
<h5>E-mail</h5>
<input
type="email"
2023-11-19 18:50:04 +03:00
className={inputsError.email ? "error" : ""}
2023-11-19 18:49:52 +03:00
onChange={(e) => {
setInputsError({
name: false,
email: false,
2023-11-19 18:50:04 +03:00
password: false,
});
2023-11-19 18:49:52 +03:00
setInputsValue((prevValue) => ({
...prevValue,
email: e.target.value,
2023-11-19 18:50:04 +03:00
}));
2023-11-19 18:49:52 +03:00
}}
2023-11-23 16:48:45 +03:00
value={inputsValue.email}
2023-11-21 16:53:05 +03:00
placeholder="Почта"
2023-11-19 18:49:52 +03:00
/>
2023-12-04 18:00:12 +03:00
{inputsError.email && <span>Введите корректный email</span>}
2023-11-19 18:49:52 +03:00
</div>
2023-03-28 20:42:18 +03:00
</div>
2023-05-29 09:37:18 +03:00
<div className="input-body__box">
2023-11-19 18:50:04 +03:00
<div className="inputContainer">
2023-11-19 18:49:52 +03:00
<h5>Пароль</h5>
<input
2023-11-19 18:50:04 +03:00
className={inputsError.password ? "error" : ""}
2023-11-19 18:49:52 +03:00
type="password"
onChange={(e) => {
setInputsError({
name: false,
email: false,
2023-11-19 18:50:04 +03:00
password: false,
});
2023-11-19 18:49:52 +03:00
setInputsValue((prevValue) => ({
...prevValue,
password: e.target.value,
2023-11-19 18:50:04 +03:00
}));
2023-11-19 18:49:52 +03:00
}}
2023-11-23 16:48:45 +03:00
value={inputsValue.password}
2023-11-21 16:53:05 +03:00
placeholder="Пароль"
2023-11-19 18:49:52 +03:00
/>
2023-11-19 18:50:04 +03:00
{inputsError.password && <span>Минимум 6 символов</span>}
2023-11-19 18:49:52 +03:00
</div>
2023-12-05 14:22:45 +03:00
<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>
2023-03-28 20:42:18 +03:00
</div>
</div>
2023-12-05 14:22:45 +03:00
2023-05-29 09:37:18 +03:00
<div className="button-box">
2023-11-23 16:48:56 +03:00
{loader ? (
<Loader style={"green"} />
) : (
2023-11-23 16:48:45 +03:00
<BaseButton
2023-11-23 16:48:56 +03:00
onClick={(e) => {
e.preventDefault();
submitHandler();
}}
styles="button-box__submit"
2023-11-23 16:48:45 +03:00
>
Отправить
</BaseButton>
2023-11-23 16:48:56 +03:00
)}
2023-11-03 16:23:21 +03:00
{/*<h5>*/}
{/* У вас уже есть аккаунт? <p>Войти</p>*/}
{/*</h5>*/}
2023-05-29 09:37:18 +03:00
</div>
</div>
2023-12-05 14:22:45 +03:00
<div className="registration-body__about">
2023-05-29 09:37:18 +03:00
<h4>Отказ от специалиста в любой момент</h4>
2023-12-05 14:22:45 +03:00
<div className="registration-body__about-text">
2023-05-29 09:37:18 +03:00
<img src={anyMoment}></img>
<p>
Поменяйте, откажитесь или возьмите еще специалиста в любой момент
работы.
</p>
</div>
<h4>100% постоплата</h4>
2023-12-05 14:22:45 +03:00
<div className="registration-body__about-text">
2023-05-29 09:37:18 +03:00
<img src={doc}></img>
<p>
Договор не подразумевает какуюлибо оплату до того, как вы
арендовали специалиста
</p>
</div>
<h4>Есть вопросы?</h4>
2023-12-05 14:22:45 +03:00
<div className="registration-body__about-text">
2023-05-29 09:37:18 +03:00
<img src={telegramLogo}></img>
<p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p>
2023-03-28 20:42:18 +03:00
</div>
</div>
2023-11-23 16:48:45 +03:00
<span onClick={() => closeModal()} className="exit"></span>
2023-05-29 09:37:18 +03:00
</ModalLayout>
2023-03-28 20:42:18 +03:00
);
};
export default ModalRegistration;