debug ModalRegistration and
RegistrationForCandidate
This commit is contained in:
@ -1,7 +1,6 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
import { apiRequest } from "@api/request";
|
||||
|
||||
import { useFormValidation } from "@hooks/useFormValidation";
|
||||
import { useNotification } from "@hooks/useNotification";
|
||||
|
||||
import BaseButton from "@components/Common/BaseButton/BaseButton";
|
||||
@ -15,98 +14,51 @@ import telegramLogo from "assets/icons/tgLogo.svg";
|
||||
import "./modalRegistration.scss";
|
||||
|
||||
export const ModalRegistration = ({ active, setActive }) => {
|
||||
const [inputsValue, setInputsValue] = useState({
|
||||
userName: "",
|
||||
const [loader, setLoader] = useState(false);
|
||||
|
||||
const fields = {
|
||||
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 closeModal = () => {
|
||||
setActive(false);
|
||||
handleClearForm();
|
||||
};
|
||||
|
||||
const apiEndpoint = "/register/sign-up";
|
||||
|
||||
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 showNotificationError = () => {
|
||||
showNotification({
|
||||
show: true,
|
||||
text: "Аккаунт с таким логином или email уже существует",
|
||||
type: "error"
|
||||
});
|
||||
};
|
||||
|
||||
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 showNotificationTrue = () => {
|
||||
showNotification({
|
||||
show: true,
|
||||
text: "Аккаунт успешно создан",
|
||||
type: "success"
|
||||
});
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
setInputsValue({
|
||||
userName: "",
|
||||
email: "",
|
||||
password: ""
|
||||
});
|
||||
setInputsError({
|
||||
name: false,
|
||||
email: false,
|
||||
password: false
|
||||
});
|
||||
setActive(false);
|
||||
};
|
||||
const {
|
||||
formData,
|
||||
validationErrors,
|
||||
handleChange,
|
||||
handleSubmit,
|
||||
handleClearForm
|
||||
} = useFormValidation(
|
||||
apiEndpoint,
|
||||
fields,
|
||||
showNotificationError,
|
||||
showNotificationTrue,
|
||||
closeModal
|
||||
);
|
||||
|
||||
return (
|
||||
<ModalLayout active={active} setActive={closeModal} styles={"registration"}>
|
||||
<div className="registration-body__main">
|
||||
@ -122,43 +74,25 @@ export const ModalRegistration = ({ active, setActive }) => {
|
||||
<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}
|
||||
className={validationErrors.username ? "error" : ""}
|
||||
onChange={handleChange}
|
||||
value={formData.username}
|
||||
placeholder="Имя"
|
||||
id="username"
|
||||
/>
|
||||
{inputsError.name && <span>Минимум 2 символа</span>}
|
||||
<span>{validationErrors.username}</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}
|
||||
className={validationErrors.email ? "error" : ""}
|
||||
onChange={handleChange}
|
||||
value={formData.email}
|
||||
placeholder="Почта"
|
||||
id="email"
|
||||
/>
|
||||
{inputsError.email && <span>Введите корректный e-mail</span>}
|
||||
<span>{validationErrors.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -166,46 +100,26 @@ export const ModalRegistration = ({ active, setActive }) => {
|
||||
<div className="inputContainer">
|
||||
<h5>Пароль</h5>
|
||||
<input
|
||||
className={inputsError.password ? "error" : ""}
|
||||
className={validationErrors.password ? "error" : ""}
|
||||
type="password"
|
||||
onChange={(e) => {
|
||||
setInputsError({
|
||||
name: false,
|
||||
email: false,
|
||||
password: false
|
||||
});
|
||||
setInputsValue((prevValue) => ({
|
||||
...prevValue,
|
||||
password: e.target.value
|
||||
}));
|
||||
}}
|
||||
value={inputsValue.password}
|
||||
onChange={handleChange}
|
||||
value={formData.password}
|
||||
placeholder="Пароль"
|
||||
id="password"
|
||||
/>
|
||||
{inputsError.password && <span>Минимум 6 символов</span>}
|
||||
<span>{validationErrors.password}</span>
|
||||
</div>
|
||||
<div className="inputContainer">
|
||||
<h5>Повторите пароль</h5>
|
||||
<input
|
||||
className={inputsError.secondPassword ? "error" : ""}
|
||||
className={validationErrors.secondPassword ? "error" : ""}
|
||||
type="password"
|
||||
onChange={(e) => {
|
||||
setInputsError({
|
||||
name: false,
|
||||
email: false,
|
||||
secondPassword: false
|
||||
});
|
||||
setInputsValue((prevValue) => ({
|
||||
...prevValue,
|
||||
secondPassword: e.target.value
|
||||
}));
|
||||
}}
|
||||
value={inputsValue.secondPassword}
|
||||
onChange={handleChange}
|
||||
value={formData.secondPassword}
|
||||
placeholder="Пароль"
|
||||
id="secondPassword"
|
||||
/>
|
||||
{inputsError.secondPassword && (
|
||||
<span>Пароли должны совпадать</span>
|
||||
)}
|
||||
<span>{validationErrors.secondPassword}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -217,7 +131,10 @@ export const ModalRegistration = ({ active, setActive }) => {
|
||||
<BaseButton
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
submitHandler();
|
||||
setLoader(true);
|
||||
handleSubmit(e);
|
||||
setLoader(false);
|
||||
closeModal();
|
||||
}}
|
||||
styles="button-box__submit"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user