191 lines
6.1 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 { 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 = () => {
showNotification({
show: true,
text: "Аккаунт с таким логином или email уже существует",
type: "error"
});
};
const showNotificationTrue = () => {
showNotification({
show: true,
text: "Аккаунт успешно создан",
type: "success"
});
};
const {
formData,
validationErrors,
handleChange,
handleSubmit,
handleClearForm
} = useFormValidation(
apiEndpoint,
fields,
showNotificationError,
showNotificationTrue,
isPartner
);
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={validationErrors.username ? "error" : ""}
onChange={handleChange}
value={formData.username}
placeholder="Имя"
id="username"
/>
<span>{validationErrors.username}</span>
</div>
<div className="inputContainer">
<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="inputContainer">
<h5>Пароль</h5>
<input
className={validationErrors.password ? "error" : ""}
type="password"
onChange={handleChange}
value={formData.password}
placeholder="Пароль"
id="password"
/>
<span>{validationErrors.password}</span>
</div>
<div className="inputContainer">
<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 style={"green"} />
) : (
<BaseButton
onClick={async (e) => {
e.preventDefault();
setLoader(true);
const result = await handleSubmit(e);
if (result === true) {
closeModal();
}
setLoader(false);
}}
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;