guild_front/src/components/Modal/ModalRegistration/ModalRegistration.jsx

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;