add adaptive registationForCandidate,

modalRegistration, create hook useFormValidation, add Validation in registationForCandidate
2023-12-26 02:42:49 +03:00 · 2023-12-26 02:42:49 +03:00 · c345bdf5ca
commit c345bdf5ca
parent ce6c2d965a
8 changed files with 278 additions and 46 deletions
--- a/src/components/AuthBlock/authBlock.scss
+++ b/src/components/AuthBlock/authBlock.scss
@ -67,7 +67,7 @@
      margin-bottom: 30px;
      background: #eff2f7;
      border-radius: 8px;
-      min-width: 300px;
+      min-width: 200px;
      width: 100%;
      padding: 8px 12px;
      border: none;
--- a/src/components/Modal/ModalRegistration/ModalRegistration.jsx
+++ b/src/components/Modal/ModalRegistration/ModalRegistration.jsx
@ -18,13 +18,15 @@ export const ModalRegistration = ({ active, setActive }) => {
  const [inputsValue, setInputsValue] = useState({
    userName: "",
    email: "",
-    password: ""
+    password: "",
+    secondPassword: ""
  });

  const [inputsError, setInputsError] = useState({
    name: false,
    email: false,
-    password: false
+    password: false,
+    secondPassword: false
  });

  const [loader, setLoader] = useState(false);
@ -43,6 +45,9 @@ export const ModalRegistration = ({ active, setActive }) => {
    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 }));
    }
@ -105,8 +110,8 @@ export const ModalRegistration = ({ active, setActive }) => {
  return (
    <ModalLayout active={active} setActive={closeModal} styles={"registration"}>
      <div className="registration-body__main">
-        <h2>
-          Подключайтесь к <p>ITguild</p>
+        <h2 className="registration-body__main-title">
+          Подключайтесь к <span>ITguild</span>
        </h2>
        <p className="registration-body__main-desc">
          Зарегистрируйтесь и начните работу уже сегодня
@ -182,23 +187,25 @@ export const ModalRegistration = ({ active, setActive }) => {
            <div className="inputContainer">
              <h5>Повторите пароль</h5>
              <input
-                className={inputsError.password ? "error" : ""}
+                className={inputsError.secondPassword ? "error" : ""}
                type="password"
                onChange={(e) => {
                  setInputsError({
                    name: false,
                    email: false,
-                    password: false
+                    secondPassword: false
                  });
                  setInputsValue((prevValue) => ({
                    ...prevValue,
-                    password: e.target.value
+                    secondPassword: e.target.value
                  }));
                }}
-                value={inputsValue.password}
+                value={inputsValue.secondPassword}
                placeholder="Пароль"
              />
-              {inputsError.password && <span>Минимум 6 символов</span>}
+              {inputsError.secondPassword && (
+                <span>Пароли должны совпадать</span>
+              )}
            </div>
          </div>
        </div>
--- a/src/components/Modal/ModalRegistration/modalRegistration.scss
+++ b/src/components/Modal/ModalRegistration/modalRegistration.scss
@ -2,58 +2,105 @@
  background: white;
  display: flex;
  flex-direction: row;
-  padding: 0;
+  padding: 40px 20px 40px 20px;
  justify-content: space-between;
  border: 1px solid #dde2e4;
  border-radius: 8px;
+  width: 60%;
+
+  @media (max-width: 1375px) {
+    width: 80%;
+  }
+
+  @media (max-width: 617px) {
+    top: 7%;
+    padding: 20px 10px 20px 10px;
+  }

  &-body {
    &__main {
-      padding-left: 30px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 0 0 0 30px;
+      width: 65%;

-      h2 {
+      @media (max-width: 740px) {
+        width: 100%;
+        padding: 0;
+      }
+
+      &-title {
        font-weight: 500;
        font-size: 35px;
        line-height: 32px;
        display: flex;
        justify-content: space-between;
-        width: 405px;
-        margin: 0 auto;
+        margin: 0;
+
+        @media (max-width: 960px) {
+          font-size: 25px;
        }

-      h2 > p {
-        font-size: 35px;
+        @media (max-width: 617px) {
+          flex-direction: column;
+          align-items: center;
+          font-size: 20px;
+        }
+
+        span {
          color: #52b709;
+          margin: 0 0 0 10px;
+        }
      }

      &-desc {
        text-align: center;
-        width: 500px;
+        width: 100%;
        font-weight: 500;
        font-size: 16px;
        line-height: 28px;
-        margin: 20px auto 0 auto;
+        margin: 20px 0 0 0;
+
+        @media (max-width: 960px) {
+          font-size: 15px;
+        }
+
+        @media (max-width: 617px) {
+          margin: 10px 0 0 0;
+        }
      }

      .input-body {
-        margin-top: 44px;
+        margin: 44px 0 0 0;
        display: flex;
        flex-direction: row;
+        justify-content: space-between;
+        width: 100%;
+
+        @media (max-width: 617px) {
+          flex-direction: column;
+          align-items: center;
+          margin: 22px 0 0 0;
+        }

        &__box {
-          margin-right: 25px;
          display: flex;
          flex-direction: column;
+          width: 47%;
+
+          @media (max-width: 617px) {
+            width: 75%;
+          }

          h5 {
            font-weight: 400;
            font-size: 15px;
            line-height: 18px;
-            margin-left: 10px;
+            margin: 0 0 0 10px;
          }

          input {
-            width: 294px;
            height: 35px;
            background: #eff2f7;
            border-radius: 8px;
@ -63,9 +110,8 @@
          }

          .inputContainer {
-            height: 81px;
-            margin-bottom: 10px;
-            max-width: 294px;
+            margin: 0 0 20px 0;
+            width: 100%;
          }

          span {
@ -88,7 +134,11 @@
          width: 174px;
          height: 50px;
          font-size: 18px;
-          margin-right: 55px;
+          margin: 0 55px 0 0;
+
+          @media (max-width: 740px) {
+            margin: 0;
+          }
        }

        .disable {
@ -112,20 +162,34 @@
    }

    &__about {
-      border-left: 1px solid #f1f1f1;
-      padding: 20px;
+      border-left: 1px solid #cdcdcd;
+      padding: 0 20px 0 10px;
+      margin: 0 0 0 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
+      width: 35%;
+
+      @media (max-width: 960px) {
+        padding: 0 0 0 10px;
+      }
+
+      @media (max-width: 740px) {
+        display: none;
+      }

      h4 {
-        margin: 22px 0 22px 0;
+        margin: 30px 0 5px 0;
        font-weight: 900;
        font-size: 14px;
        line-height: 24px;
        color: #52b709;
-        margin-right: 100px;
-        width: 180px;
+        width: 100%;
+
+        @media (max-width: 960px) {
+          margin: 15px 0 5px 0;
+          font-size: 12px;
+        }
      }

      &-text {
@ -136,7 +200,15 @@
          font-weight: 400;
          font-size: 12px;
          line-height: 22px;
-          width: 205px;
+          width: 230px;
+
+          @media (max-width: 1643px) {
+            width: 100%;
+          }
+
+          @media (max-width: 960px) {
+            font-size: 10px;
+          }
        }

        img {
--- a/src/components/SliderWorkers/sliderWorkers.scss
+++ b/src/components/SliderWorkers/sliderWorkers.scss
@ -103,6 +103,9 @@
    &:hover {
      background-color: #8ec63f91;
    }
+    @media (max-width: 1200px) {
+      margin-right: 20px;
+    }
  }

  .slick-prev {
@ -125,6 +128,9 @@
    &:hover {
      background-color: #8ec63f91;
    }
+    @media (max-width: 1200px) {
+      margin-left: 20px;
+    }
  }

  @media (max-width: 1375px) {
--- a/src/components/StepsForCandidate/stepForCandidate.scss
+++ b/src/components/StepsForCandidate/stepForCandidate.scss
@ -47,8 +47,8 @@
      font-weight: 400;
      font-size: 16px;

-      @media (max-width: 450px) {
-        max-width: 180px;
+      @media (max-width: 312px) {
+        font-size: 14px;
      }
    }

@ -57,6 +57,10 @@
      font-weight: 400;
      font-size: 16px;
      line-height: 32px;
+
+      @media (max-width: 450px) {
+        display: none;
+      }
    }
  }
 }
--- a/src/hooks/useFormValidation.js
+++ b/src/hooks/useFormValidation.js
@ -0,0 +1,77 @@
+import { useState } from "react";
+
+export const useFormValidation = () => {
+  // Состояние формы, содержащее значения полей
+  const [formData, setFormData] = useState({
+    name: "",
+    summary: "",
+    email: "",
+    tg: "",
+    password: "",
+    secondPassword: ""
+  });
+
+  // Состояние ошибок валидации
+  const [validationErrors, setValidationErrors] = useState({});
+
+  // Функция для обработки изменений в полях ввода
+  const handleChange = (e) => {
+    const { id, value } = e.target;
+    setFormData((prevData) => ({ ...prevData, [id]: value }));
+  };
+
+  // Функция для валидации формы
+  const validateForm = () => {
+    const errors = {};
+
+    if (formData.name.trim() === "") {
+      errors.name = "Имя обязательно к заполнению";
+    }
+
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (formData.email.trim() === "") {
+      errors.email = "E-mail обязателен к заполнению";
+    } else if (!emailRegex.test(formData.email)) {
+      errors.email = "Неверный адрес электронной почты";
+    }
+
+    if (formData.tg.trim() === "") {
+      errors.tg = "Telegram обязателен к заполнению";
+    }
+
+    if (formData.password.trim() === "") {
+      errors.password = "Пароль обязателен к заполнению";
+    } else if (formData.password.length < 8) {
+      errors.password = "Пароль должен содержать более 8 символов";
+    }
+
+    if (formData.secondPassword.trim() === "") {
+      errors.secondPassword = "Повторите пароль";
+    } else if (formData.secondPassword !== formData.password) {
+      errors.secondPassword = "Пароли должны совпадать";
+    }
+
+    setValidationErrors(errors);
+
+    // Возвращаем true, если ошибок нет, иначе - false
+    return Object.keys(errors).length === 0;
+  };
+
+  // Функция для обработки отправки формы
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (validateForm()) {
+      alert("Форма успешно отправлена!");
+    } else {
+      alert("Пожалуйста, заполните форму правильно.");
+    }
+  };
+
+  return {
+    formData,
+    validationErrors,
+    handleChange,
+    handleSubmit
+  };
+};
--- a/src/pages/RegistrationForCandidate/RegistrationForCandidate.js
+++ b/src/pages/RegistrationForCandidate/RegistrationForCandidate.js
@ -1,5 +1,7 @@
 import React from "react";

+import { useFormValidation } from "@hooks/useFormValidation";
+
 import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
 import { Footer } from "@components/Common/Footer/Footer";
 import SideBar from "@components/SideBar/SideBar";
@ -11,6 +13,7 @@ import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
 import "./registationForCandidate.scss";

 export const RegistrationForCandidate = () => {
+  const form = useFormValidation();
  return (
    <div className="registrationCandidate">
      <AuthHeader />
@ -23,7 +26,7 @@ export const RegistrationForCandidate = () => {
            <img src={arrowBtn}></img>
          </div>
          <p className="auth-candidate__start__description">
-            Для нас не имеет значение Ваша локация.
+            Для нас не имеет значения Ваша локация.
          </p>
          <StepsForCandidate step="шаг 2 - заполните данные" />
          <div className="registrationCandidate__formWrapper">
@ -39,33 +42,87 @@ export const RegistrationForCandidate = () => {
                <img src={arrowBtn} alt="img" />
              </div>
            </div>
-            <form className="registrationCandidate__form">
+            {/* форма регистрации */}
+            <form
+              className="registrationCandidate__form"
+              onSubmit={form.handleSubmit}
+            >
              <div className="registrationCandidate__form__input">
                <label htmlFor="name">Ваше имя</label>
-                <input id="name" type="text" placeholder="Имя" />
+                <input
+                  className={form.validationErrors.name ? "error" : ""}
+                  value={form.formData.name}
+                  onChange={form.handleChange}
+                  id="name"
+                  type="text"
+                  placeholder="Имя"
+                />
+                <span>{form.validationErrors.name}</span>
              </div>
              <div className="registrationCandidate__form__input">
                <label htmlFor="summary">Если есть ссылка на резюме</label>
-                <input id="summary" type="text" placeholder="Резюме" />
+                <input
+                  className={form.validationErrors.summary ? "error" : ""}
+                  value={form.formData.summary}
+                  onChange={form.handleChange}
+                  id="summary"
+                  type="url"
+                  placeholder="Резюме"
+                />
+                <span>{form.validationErrors.summary}</span>
              </div>
              <div className="registrationCandidate__form__input">
                <label htmlFor="email">Ваш e-mail</label>
-                <input id="email" type="text" placeholder="E-mail" />
+                <input
+                  className={form.validationErrors.email ? "error" : ""}
+                  value={form.formData.email}
+                  onChange={form.handleChange}
+                  id="email"
+                  type="email"
+                  placeholder="E-mail"
+                />
+                <span>{form.validationErrors.email}</span>
              </div>
              <div className="registrationCandidate__form__input">
                <label htmlFor="tg">Ваш telegram</label>
-                <input id="tg" type="text" placeholder="Telegram" />
+                <input
+                  className={form.validationErrors.tg ? "error" : ""}
+                  value={form.formData.tg}
+                  onChange={form.handleChange}
+                  id="tg"
+                  type="text"
+                  placeholder="Telegram"
+                />
+                <span>{form.validationErrors.tg}</span>
              </div>
              <div className="registrationCandidate__form__input">
                <label htmlFor="password">Придумайте пароль</label>
-                <input id="password" type="text" placeholder="Пароль" />
+                <input
+                  className={form.validationErrors.password ? "error" : ""}
+                  value={form.formData.password}
+                  onChange={form.handleChange}
+                  id="password"
+                  type="password"
+                  placeholder="Пароль"
+                />
+                <span>{form.validationErrors.password}</span>
              </div>
              <div className="registrationCandidate__form__input">
                <label htmlFor="secondPassword">Повторите пароль</label>
-                <input id="secondPassword" type="text" placeholder="Пароль" />
+                <input
+                  className={
+                    form.validationErrors.secondPassword ? "error" : ""
+                  }
+                  value={form.formData.secondPassword}
+                  onChange={form.handleChange}
+                  id="secondPassword"
+                  type="password"
+                  placeholder="Пароль"
+                />
+                <span>{form.validationErrors.secondPassword}</span>
              </div>
              <div className="registrationCandidate__form__submit">
-                <button>Отправить</button>
+                <button type="submit">Отправить</button>
              </div>
            </form>
          </div>
--- a/src/pages/RegistrationForCandidate/registationForCandidate.scss
+++ b/src/pages/RegistrationForCandidate/registationForCandidate.scss
@ -142,6 +142,15 @@
        font-size: 15px;
        line-height: 18px;
      }
+
+      .error {
+        border: 1px solid red;
+      }
+
+      span {
+        color: red;
+        font-size: 12px;
+      }
    }

    &__submit {