refactoring useFormValidation and

registationForCandidate, adaptive
modalRegistration and registationForCandidate
This commit is contained in:
Никита Губарь 2023-12-28 07:09:15 +03:00
parent c345bdf5ca
commit 94a13f4903
4 changed files with 111 additions and 55 deletions

View File

@ -12,7 +12,7 @@
width: 80%; width: 80%;
} }
@media (max-width: 617px) { @media (max-width: 703px) {
top: 7%; top: 7%;
padding: 20px 10px 20px 10px; padding: 20px 10px 20px 10px;
} }
@ -22,10 +22,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 0 0 0 30px;
width: 65%; width: 65%;
@media (max-width: 740px) { @media (max-width: 1106px) {
width: 100%; width: 100%;
padding: 0; padding: 0;
} }
@ -42,7 +41,7 @@
font-size: 25px; font-size: 25px;
} }
@media (max-width: 617px) { @media (max-width: 703px) {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
font-size: 20px; font-size: 20px;
@ -66,7 +65,7 @@
font-size: 15px; font-size: 15px;
} }
@media (max-width: 617px) { @media (max-width: 703px) {
margin: 10px 0 0 0; margin: 10px 0 0 0;
} }
} }
@ -78,7 +77,7 @@
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
@media (max-width: 617px) { @media (max-width: 703px) {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin: 22px 0 0 0; margin: 22px 0 0 0;
@ -89,8 +88,8 @@
flex-direction: column; flex-direction: column;
width: 47%; width: 47%;
@media (max-width: 617px) { @media (max-width: 703px) {
width: 75%; width: 85%;
} }
h5 { h5 {
@ -101,7 +100,7 @@
} }
input { input {
height: 35px; height: 43px;
background: #eff2f7; background: #eff2f7;
border-radius: 8px; border-radius: 8px;
border: none; border: none;
@ -134,11 +133,6 @@
width: 174px; width: 174px;
height: 50px; height: 50px;
font-size: 18px; font-size: 18px;
margin: 0 55px 0 0;
@media (max-width: 740px) {
margin: 0;
}
} }
.disable { .disable {
@ -170,11 +164,7 @@
justify-content: space-between; justify-content: space-between;
width: 35%; width: 35%;
@media (max-width: 960px) { @media (max-width: 1106px) {
padding: 0 0 0 10px;
}
@media (max-width: 740px) {
display: none; display: none;
} }

View File

@ -1,15 +1,15 @@
import { useState } from "react"; import { useState } from "react";
export const useFormValidation = () => { import { apiRequest } from "@api/request";
export const useFormValidation = (
apiEndpoint,
fields,
showNotificationError,
showNotificationTrue
) => {
// Состояние формы, содержащее значения полей // Состояние формы, содержащее значения полей
const [formData, setFormData] = useState({ const [formData, setFormData] = useState(fields);
name: "",
summary: "",
email: "",
tg: "",
password: "",
secondPassword: ""
});
// Состояние ошибок валидации // Состояние ошибок валидации
const [validationErrors, setValidationErrors] = useState({}); const [validationErrors, setValidationErrors] = useState({});
@ -23,33 +23,42 @@ export const useFormValidation = () => {
// Функция для валидации формы // Функция для валидации формы
const validateForm = () => { const validateForm = () => {
const errors = {}; const errors = {};
if (formData.name != undefined) {
if (formData.name.trim() === "") { if (formData.name.trim() === "") {
errors.name = "Имя обязательно к заполнению"; errors.name = "Имя обязательно к заполнению";
} }
}
if (formData.email != undefined) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (formData.email.trim() === "") { if (formData.email.trim() === "") {
errors.email = "E-mail обязателен к заполнению"; errors.email = "E-mail обязателен к заполнению";
} else if (!emailRegex.test(formData.email)) { } else if (!emailRegex.test(formData.email)) {
errors.email = "Неверный адрес электронной почты"; errors.email = "Неверный адрес электронной почты";
} }
}
if (formData.tg != undefined) {
if (formData.tg.trim() === "") { if (formData.tg.trim() === "") {
errors.tg = "Telegram обязателен к заполнению"; errors.tg = "Telegram обязателен к заполнению";
} }
}
if (formData.password != undefined) {
if (formData.password.trim() === "") { if (formData.password.trim() === "") {
errors.password = "Пароль обязателен к заполнению"; errors.password = "Пароль обязателен к заполнению";
} else if (formData.password.length < 8) { } else if (formData.password.length < 8) {
errors.password = "Пароль должен содержать более 8 символов"; errors.password = "Пароль должен содержать более 8 символов";
} }
}
if (formData.secondPassword != undefined) {
if (formData.secondPassword.trim() === "") { if (formData.secondPassword.trim() === "") {
errors.secondPassword = "Повторите пароль"; errors.secondPassword = "Повторите пароль";
} else if (formData.secondPassword !== formData.password) { } else if (formData.secondPassword !== formData.password) {
errors.secondPassword = "Пароли должны совпадать"; errors.secondPassword = "Пароли должны совпадать";
} }
}
setValidationErrors(errors); setValidationErrors(errors);
@ -58,13 +67,25 @@ export const useFormValidation = () => {
}; };
// Функция для обработки отправки формы // Функция для обработки отправки формы
const handleSubmit = (e) => { const handleSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
// Проверка валидации формы
if (validateForm()) { if (validateForm()) {
alert("Форма успешно отправлена!"); try {
const response = await apiRequest(apiEndpoint, {
method: "POST",
data: formData
});
if (!response) {
showNotificationError();
} else { } else {
alert("Пожалуйста, заполните форму правильно."); showNotificationTrue();
}
} catch (error) {
console.error("Error submitting form:", error);
}
} }
}; };

View File

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import { useFormValidation } from "@hooks/useFormValidation"; import { useFormValidation } from "@hooks/useFormValidation";
import { useNotification } from "@hooks/useNotification";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader"; import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer"; import { Footer } from "@components/Common/Footer/Footer";
@ -13,7 +14,40 @@ import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
import "./registationForCandidate.scss"; import "./registationForCandidate.scss";
export const RegistrationForCandidate = () => { 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 ( return (
<div className="registrationCandidate"> <div className="registrationCandidate">
<AuthHeader /> <AuthHeader />

View File

@ -26,7 +26,7 @@
} }
@media (max-width: 1072px) { @media (max-width: 1072px) {
top: 32%; top: 31.5%;
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
@ -110,17 +110,28 @@
row-gap: 28px; row-gap: 28px;
column-gap: 55px; 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 { &__input {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 46%; width: 46%;
@media (max-width: 1072px) { @media (max-width: 1072px) {
width: 75%; width: 100%;
} }
@media (max-width: 478px) { @media (max-width: 478px) {
width: 100%; // width: 100%;
} }
label { label {
@ -135,7 +146,7 @@
background: #eff2f7; background: #eff2f7;
border-radius: 8px; border-radius: 8px;
width: 100%; width: 100%;
padding: 8px 12px; padding: 10px 12px;
border: none; border: none;
outline: none; outline: none;
font-weight: 400; font-weight: 400;