import React, { useState } from "react"; import { apiRequest } from "@api/request"; import { useNotification } from "@hooks/useNotification"; import BaseButton from "@components/Common/BaseButton/BaseButton"; 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: "", }); const [inputsError, setInputsError] = useState({ name: false, email: false, password: false, }); const validateEmail = (email) => { // регулярное выражение для проверки email const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // возвращаем true, если email проходит проверку, и false, если нет return re.test(email); }; const resetInputsValue = () => { setInputsValue({ userName: "", email: "", password: "", }); }; const { showNotification } = useNotification(); const validateForm = () => { if (inputsValue.password.length < 6) { setInputsError((prevValue) => ({ ...prevValue, password: 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; } apiRequest("/register/sign-up", { method: "POST", data: { username: inputsValue.userName, email: inputsValue.email, password: inputsValue.password, }, }).then((data) => { if (!data) { showNotification({ show: true, text: "Аккаунт с таким логином или email уже существует", type: "error", }); } else { setActive(false); resetInputsValue(); showNotification({ show: true, text: "Аккаунт успешно создан", type: "success", }); } }); }; return (

Подключайтесь к

itguild.

Зарегистрируйтесь и назначайте собеседования любым специалистам без задержек

Ваше имя
{ setInputsError({ name: false, email: false, password: false, }); setInputsValue((prevValue) => ({ ...prevValue, userName: e.target.value, })); }} placeholder="Имя" /> {inputsError.name && Минимум 2 символов}
E-mail
{ setInputsError({ name: false, email: false, password: false, }); setInputsValue((prevValue) => ({ ...prevValue, email: e.target.value, })); }} placeholder="Почта" /> {inputsError.email && Введите коректный email}
{/*
Название компании
*/} {/**/}
Пароль
{ setInputsError({ name: false, email: false, password: false, }); setInputsValue((prevValue) => ({ ...prevValue, password: e.target.value, })); }} placeholder="Пароль" /> {inputsError.password && Минимум 6 символов}
{ e.preventDefault(); submitHandler(); }} styles="button-box__submit" > Отправить {/*
*/} {/* У вас уже есть аккаунт?

Войти

*/} {/*
*/}

Отказ от специалиста в любой момент

Поменяйте, откажитесь или возьмите еще специалиста в любой момент работы.

100% постоплата

Договор не подразумевает какую‑либо оплату до того, как вы арендовали специалиста

Есть вопросы?

Напишите нам в Телеграм. Мы с удовольствием ответим!

setActive(false)} className="exit">
); }; export default ModalRegistration;