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-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-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
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const resetInputsValue = () => {
|
|
|
|
|
setInputsValue({
|
|
|
|
|
userName: "",
|
|
|
|
|
email: "",
|
|
|
|
|
password: "",
|
2023-11-05 20:42:03 +03:00
|
|
|
|
});
|
|
|
|
|
};
|
2023-11-04 02:44: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-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) => {
|
|
|
|
|
if (!data) {
|
|
|
|
|
showNotification({
|
|
|
|
|
show: true,
|
|
|
|
|
text: "Аккаунт с таким логином или email уже существует",
|
|
|
|
|
type: "error",
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
setActive(false);
|
|
|
|
|
resetInputsValue();
|
|
|
|
|
showNotification({
|
|
|
|
|
show: true,
|
|
|
|
|
text: "Аккаунт успешно создан",
|
|
|
|
|
type: "success",
|
|
|
|
|
});
|
|
|
|
|
}
|
2023-11-03 16:23:49 +03:00
|
|
|
|
});
|
|
|
|
|
};
|
2023-03-28 20:42:18 +03:00
|
|
|
|
return (
|
2023-05-29 09:37:18 +03:00
|
|
|
|
<ModalLayout active={active} setActive={setActive} styles={"registration"}>
|
|
|
|
|
<div className="registration-body__left">
|
|
|
|
|
<h2>
|
|
|
|
|
Подключайтесь к <p>itguild.</p>
|
|
|
|
|
</h2>
|
|
|
|
|
<p className="registration-body__left-desc">
|
|
|
|
|
Зарегистрируйтесь и назначайте собеседования любым специалистам без
|
|
|
|
|
задержек
|
|
|
|
|
</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-21 16:53:05 +03:00
|
|
|
|
placeholder="Имя"
|
2023-11-19 18:49:52 +03:00
|
|
|
|
/>
|
2023-11-21 16:53:05 +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-21 16:53:05 +03:00
|
|
|
|
placeholder="Почта"
|
2023-11-19 18:49:52 +03:00
|
|
|
|
/>
|
2023-11-19 18:50:04 +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-03 16:23:21 +03:00
|
|
|
|
{/*<h5>Название компании</h5>*/}
|
|
|
|
|
{/*<input></input>*/}
|
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-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-03-28 20:42:18 +03:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-05-29 09:37:18 +03:00
|
|
|
|
<div className="button-box">
|
2023-05-29 15:01:38 +03:00
|
|
|
|
<BaseButton
|
2023-11-04 02:39:58 +03:00
|
|
|
|
onClick={(e) => {
|
2023-11-04 02:44:40 +03:00
|
|
|
|
e.preventDefault();
|
|
|
|
|
submitHandler();
|
2023-11-04 02:39:58 +03:00
|
|
|
|
}}
|
2023-11-08 18:27:42 +03:00
|
|
|
|
styles="button-box__submit"
|
2023-05-29 09:37:18 +03:00
|
|
|
|
>
|
|
|
|
|
Отправить
|
2023-05-29 15:01:38 +03:00
|
|
|
|
</BaseButton>
|
2023-11-03 16:23:21 +03:00
|
|
|
|
{/*<h5>*/}
|
|
|
|
|
{/* У вас уже есть аккаунт? <p>Войти</p>*/}
|
|
|
|
|
{/*</h5>*/}
|
2023-05-29 09:37:18 +03:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="registration-body__right">
|
|
|
|
|
<h4>Отказ от специалиста в любой момент</h4>
|
|
|
|
|
<div className="registration-body__right-text">
|
|
|
|
|
<img src={anyMoment}></img>
|
|
|
|
|
<p>
|
|
|
|
|
Поменяйте, откажитесь или возьмите еще специалиста в любой момент
|
|
|
|
|
работы.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<h4>100% постоплата</h4>
|
|
|
|
|
<div className="registration-body__right-text">
|
|
|
|
|
<img src={doc}></img>
|
|
|
|
|
<p>
|
|
|
|
|
Договор не подразумевает какую‑либо оплату до того, как вы
|
|
|
|
|
арендовали специалиста
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<h4>Есть вопросы?</h4>
|
|
|
|
|
<div className="registration-body__right-text">
|
|
|
|
|
<img src={telegramLogo}></img>
|
|
|
|
|
<p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p>
|
2023-03-28 20:42:18 +03:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-05-29 09:37:18 +03:00
|
|
|
|
<span onClick={() => setActive(false)} className="exit"></span>
|
|
|
|
|
</ModalLayout>
|
2023-03-28 20:42:18 +03:00
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default ModalRegistration;
|