refactoring useFormValidation and

registationForCandidate, adaptive
modalRegistration and registationForCandidate

src/components/Modal/ModalRegistration/modalRegistration.scss

@@ -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) {
+          @media (max-width: 703px) {
-            width: 75%;
+            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) {
+      @media (max-width: 1106px) {
-        padding: 0 0 0 10px;
-      }
-
-      @media (max-width: 740px) {
         display: none;
       }
 

src/hooks/useFormValidation.js

@@ -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({
+  const [formData, setFormData] = useState(fields);
-    name: "",
-    summary: "",
-    email: "",
-    tg: "",
-    password: "",
-    secondPassword: ""
-  });
 
   // Состояние ошибок валидации
   const [validationErrors, setValidationErrors] = useState({});
@@ -23,32 +23,41 @@ export const useFormValidation = () => {
   // Функция для валидации формы
   const validateForm = () => {
     const errors = {};
-
+    if (formData.name != undefined) {
-    if (formData.name.trim() === "") {
+      if (formData.name.trim() === "") {
-      errors.name = "Имя обязательно к заполнению";
+        errors.name = "Имя обязательно к заполнению";
+      }
     }
 
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (formData.email != undefined) {
-    if (formData.email.trim() === "") {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-      errors.email = "E-mail обязателен к заполнению";
+      if (formData.email.trim() === "") {
-    } else if (!emailRegex.test(formData.email)) {
+        errors.email = "E-mail обязателен к заполнению";
-      errors.email = "Неверный адрес электронной почты";
+      } else if (!emailRegex.test(formData.email)) {
+        errors.email = "Неверный адрес электронной почты";
+      }
     }
 
-    if (formData.tg.trim() === "") {
+    if (formData.tg != undefined) {
-      errors.tg = "Telegram обязателен к заполнению";
+      if (formData.tg.trim() === "") {
+        errors.tg = "Telegram обязателен к заполнению";
+      }
     }
 
-    if (formData.password.trim() === "") {
+    if (formData.password != undefined) {
-      errors.password = "Пароль обязателен к заполнению";
+      if (formData.password.trim() === "") {
-    } else if (formData.password.length < 8) {
+        errors.password = "Пароль обязателен к заполнению";
-      errors.password = "Пароль должен содержать более 8 символов";
+      } else if (formData.password.length < 8) {
+        errors.password = "Пароль должен содержать более 8 символов";
+      }
     }
 
-    if (formData.secondPassword.trim() === "") {
+    if (formData.secondPassword != undefined) {
-      errors.secondPassword = "Повторите пароль";
+      if (formData.secondPassword.trim() === "") {
-    } else if (formData.secondPassword !== formData.password) {
+        errors.secondPassword = "Повторите пароль";
-      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 {
-    } else {
+        const response = await apiRequest(apiEndpoint, {
-      alert("Пожалуйста, заполните форму правильно.");
+          method: "POST",
+          data: formData
+        });
+
+        if (!response) {
+          showNotificationError();
+        } else {
+          showNotificationTrue();
+        }
+      } catch (error) {
+        console.error("Error submitting form:", error);
+      }
     }
   };
 

src/pages/RegistrationForCandidate/RegistrationForCandidate.js

@@ -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 />

src/pages/RegistrationForCandidate/registationForCandidate.scss

@@ -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;