188 lines
5.9 KiB
JavaScript
188 lines
5.9 KiB
JavaScript
import React, { useState } from "react";
|
||
|
||
import { useFormValidation } from "@hooks/useFormValidation";
|
||
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 accept from "assets/images/accept.png";
|
||
|
||
import "./modalRegistration.scss";
|
||
|
||
export const ModalRegistration = ({ active, setActive }) => {
|
||
const [loader, setLoader] = useState(false);
|
||
const [isPartner, setIsPartner] = useState(false);
|
||
|
||
const fields = {
|
||
username: "",
|
||
email: "",
|
||
password: "",
|
||
secondPassword: ""
|
||
};
|
||
const closeModal = () => {
|
||
setActive(false);
|
||
handleClearForm();
|
||
};
|
||
|
||
const apiEndpoint = "/register/sign-up";
|
||
|
||
const { showNotification } = useNotification();
|
||
const showNotificationError = (error) => {
|
||
showNotification({
|
||
show: true,
|
||
text: error,
|
||
type: "error"
|
||
});
|
||
};
|
||
const showNotificationTrue = () => {
|
||
showNotification({
|
||
show: true,
|
||
text: "Аккаунт успешно создан",
|
||
type: "success"
|
||
});
|
||
};
|
||
|
||
const {
|
||
formData,
|
||
validationErrors,
|
||
handleChange,
|
||
handleSubmit,
|
||
handleClearForm
|
||
} = useFormValidation(
|
||
apiEndpoint,
|
||
fields,
|
||
showNotificationError,
|
||
showNotificationTrue,
|
||
isPartner,
|
||
setLoader,
|
||
closeModal
|
||
);
|
||
|
||
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="input-container">
|
||
<h5>Ваше имя</h5>
|
||
<input
|
||
className={validationErrors.username ? "error" : ""}
|
||
onChange={handleChange}
|
||
value={formData.username}
|
||
placeholder="Имя"
|
||
id="username"
|
||
/>
|
||
<span>{validationErrors.username}</span>
|
||
</div>
|
||
<div className="input-container">
|
||
<h5>E-mail</h5>
|
||
<input
|
||
type="email"
|
||
className={validationErrors.email ? "error" : ""}
|
||
onChange={handleChange}
|
||
value={formData.email}
|
||
placeholder="Почта"
|
||
id="email"
|
||
/>
|
||
<span>{validationErrors.email}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="input-body__box">
|
||
<div className="input-container">
|
||
<h5>Пароль</h5>
|
||
<input
|
||
className={validationErrors.password ? "error" : ""}
|
||
type="password"
|
||
onChange={handleChange}
|
||
value={formData.password}
|
||
placeholder="Пароль"
|
||
id="password"
|
||
/>
|
||
<span>{validationErrors.password}</span>
|
||
</div>
|
||
<div className="input-container">
|
||
<h5>Повторите пароль</h5>
|
||
<input
|
||
className={validationErrors.secondPassword ? "error" : ""}
|
||
type="password"
|
||
onChange={handleChange}
|
||
value={formData.secondPassword}
|
||
placeholder="Пароль"
|
||
id="secondPassword"
|
||
/>
|
||
<span>{validationErrors.secondPassword}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
className="input_checkbox"
|
||
onClick={() => setIsPartner(!isPartner)}
|
||
>
|
||
<p>Партнер:</p>
|
||
<span className={isPartner ? "checkbox--active" : ""}>
|
||
{isPartner ? <img src={accept} alt="accept" /> : ""}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="button-box">
|
||
{loader ? (
|
||
<Loader />
|
||
) : (
|
||
<BaseButton
|
||
onClick={async (e) => {
|
||
e.preventDefault();
|
||
await handleSubmit(e);
|
||
}}
|
||
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;
|