refactoring useFormValidation and
registationForCandidate, adaptive modalRegistration and registationForCandidate
This commit is contained in:
parent
c345bdf5ca
commit
94a13f4903
@ -12,7 +12,7 @@
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
@media (max-width: 617px) {
|
||||
@media (max-width: 703px) {
|
||||
top: 7%;
|
||||
padding: 20px 10px 20px 10px;
|
||||
}
|
||||
@ -22,10 +22,9 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 0 0 30px;
|
||||
width: 65%;
|
||||
|
||||
@media (max-width: 740px) {
|
||||
@media (max-width: 1106px) {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
@ -42,7 +41,7 @@
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
@media (max-width: 617px) {
|
||||
@media (max-width: 703px) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
@ -66,7 +65,7 @@
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 617px) {
|
||||
@media (max-width: 703px) {
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
}
|
||||
@ -78,7 +77,7 @@
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: 617px) {
|
||||
@media (max-width: 703px) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 22px 0 0 0;
|
||||
@ -89,8 +88,8 @@
|
||||
flex-direction: column;
|
||||
width: 47%;
|
||||
|
||||
@media (max-width: 617px) {
|
||||
width: 75%;
|
||||
@media (max-width: 703px) {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@ -101,7 +100,7 @@
|
||||
}
|
||||
|
||||
input {
|
||||
height: 35px;
|
||||
height: 43px;
|
||||
background: #eff2f7;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
@ -134,11 +133,6 @@
|
||||
width: 174px;
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
margin: 0 55px 0 0;
|
||||
|
||||
@media (max-width: 740px) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.disable {
|
||||
@ -170,11 +164,7 @@
|
||||
justify-content: space-between;
|
||||
width: 35%;
|
||||
|
||||
@media (max-width: 960px) {
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 740px) {
|
||||
@media (max-width: 1106px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
@ -1,15 +1,15 @@
|
||||
import { useState } from "react";
|
||||
|
||||
export const useFormValidation = () => {
|
||||
import { apiRequest } from "@api/request";
|
||||
|
||||
export const useFormValidation = (
|
||||
apiEndpoint,
|
||||
fields,
|
||||
showNotificationError,
|
||||
showNotificationTrue
|
||||
) => {
|
||||
// Состояние формы, содержащее значения полей
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
summary: "",
|
||||
email: "",
|
||||
tg: "",
|
||||
password: "",
|
||||
secondPassword: ""
|
||||
});
|
||||
const [formData, setFormData] = useState(fields);
|
||||
|
||||
// Состояние ошибок валидации
|
||||
const [validationErrors, setValidationErrors] = useState({});
|
||||
@ -23,33 +23,42 @@ export const useFormValidation = () => {
|
||||
// Функция для валидации формы
|
||||
const validateForm = () => {
|
||||
const errors = {};
|
||||
|
||||
if (formData.name != undefined) {
|
||||
if (formData.name.trim() === "") {
|
||||
errors.name = "Имя обязательно к заполнению";
|
||||
}
|
||||
}
|
||||
|
||||
if (formData.email != undefined) {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (formData.email.trim() === "") {
|
||||
errors.email = "E-mail обязателен к заполнению";
|
||||
} else if (!emailRegex.test(formData.email)) {
|
||||
errors.email = "Неверный адрес электронной почты";
|
||||
}
|
||||
}
|
||||
|
||||
if (formData.tg != undefined) {
|
||||
if (formData.tg.trim() === "") {
|
||||
errors.tg = "Telegram обязателен к заполнению";
|
||||
}
|
||||
}
|
||||
|
||||
if (formData.password != undefined) {
|
||||
if (formData.password.trim() === "") {
|
||||
errors.password = "Пароль обязателен к заполнению";
|
||||
} else if (formData.password.length < 8) {
|
||||
errors.password = "Пароль должен содержать более 8 символов";
|
||||
}
|
||||
}
|
||||
|
||||
if (formData.secondPassword != undefined) {
|
||||
if (formData.secondPassword.trim() === "") {
|
||||
errors.secondPassword = "Повторите пароль";
|
||||
} else if (formData.secondPassword !== formData.password) {
|
||||
errors.secondPassword = "Пароли должны совпадать";
|
||||
}
|
||||
}
|
||||
|
||||
setValidationErrors(errors);
|
||||
|
||||
@ -58,13 +67,25 @@ export const useFormValidation = () => {
|
||||
};
|
||||
|
||||
// Функция для обработки отправки формы
|
||||
const handleSubmit = (e) => {
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Проверка валидации формы
|
||||
if (validateForm()) {
|
||||
alert("Форма успешно отправлена!");
|
||||
try {
|
||||
const response = await apiRequest(apiEndpoint, {
|
||||
method: "POST",
|
||||
data: formData
|
||||
});
|
||||
|
||||
if (!response) {
|
||||
showNotificationError();
|
||||
} else {
|
||||
alert("Пожалуйста, заполните форму правильно.");
|
||||
showNotificationTrue();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error submitting form:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -1,6 +1,7 @@
|
||||
import React from "react";
|
||||
|
||||
import { useFormValidation } from "@hooks/useFormValidation";
|
||||
import { useNotification } from "@hooks/useNotification";
|
||||
|
||||
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
|
||||
import { Footer } from "@components/Common/Footer/Footer";
|
||||
@ -13,7 +14,40 @@ import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
|
||||
import "./registationForCandidate.scss";
|
||||
|
||||
export const RegistrationForCandidate = () => {
|
||||
const form = useFormValidation();
|
||||
const apiEndpoint = "/register/sign-up";
|
||||
|
||||
const fields = {
|
||||
name: "",
|
||||
summary: "",
|
||||
email: "",
|
||||
tg: "",
|
||||
password: "",
|
||||
secondPassword: ""
|
||||
};
|
||||
|
||||
const { showNotification } = useNotification();
|
||||
const showNotificationError = () => {
|
||||
showNotification({
|
||||
show: true,
|
||||
text: "Аккаунт с таким логином или email уже существует",
|
||||
type: "error"
|
||||
});
|
||||
};
|
||||
const showNotificationTrue = () => {
|
||||
showNotification({
|
||||
show: true,
|
||||
text: "Аккаунт успешно создан",
|
||||
type: "success"
|
||||
});
|
||||
};
|
||||
|
||||
const form = useFormValidation(
|
||||
apiEndpoint,
|
||||
fields,
|
||||
showNotificationError,
|
||||
showNotificationTrue
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="registrationCandidate">
|
||||
<AuthHeader />
|
||||
|
@ -26,7 +26,7 @@
|
||||
}
|
||||
|
||||
@media (max-width: 1072px) {
|
||||
top: 32%;
|
||||
top: 31.5%;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@ -110,17 +110,28 @@
|
||||
row-gap: 28px;
|
||||
column-gap: 55px;
|
||||
|
||||
@media (max-width: 1072px) {
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (max-width: 660px) {
|
||||
width: 100%;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 46%;
|
||||
|
||||
@media (max-width: 1072px) {
|
||||
width: 75%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 478px) {
|
||||
width: 100%;
|
||||
// width: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
@ -135,7 +146,7 @@
|
||||
background: #eff2f7;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
padding: 10px 12px;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-weight: 400;
|
||||
|
Loading…
Reference in New Issue
Block a user