From c345bdf5cad6777fc75046ec447c215b3f471751 Mon Sep 17 00:00:00 2001 From: Gubar Nikita Date: Tue, 26 Dec 2023 02:42:49 +0300 Subject: [PATCH] add adaptive registationForCandidate, modalRegistration, create hook useFormValidation, add Validation in registationForCandidate --- src/components/AuthBlock/authBlock.scss | 2 +- .../ModalRegistration/ModalRegistration.jsx | 25 ++-- .../ModalRegistration/modalRegistration.scss | 122 ++++++++++++++---- .../SliderWorkers/sliderWorkers.scss | 6 + .../StepsForCandidate/stepForCandidate.scss | 8 +- src/hooks/useFormValidation.js | 77 +++++++++++ .../RegistrationForCandidate.js | 75 +++++++++-- .../registationForCandidate.scss | 9 ++ 8 files changed, 278 insertions(+), 46 deletions(-) create mode 100644 src/hooks/useFormValidation.js diff --git a/src/components/AuthBlock/authBlock.scss b/src/components/AuthBlock/authBlock.scss index 23f073bf..434925e0 100644 --- 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; diff --git a/src/components/Modal/ModalRegistration/ModalRegistration.jsx b/src/components/Modal/ModalRegistration/ModalRegistration.jsx index 35197555..e1c12f57 100644 --- 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 (
-

- Подключайтесь к

ITguild

+

+ Подключайтесь к ITguild

Зарегистрируйтесь и начните работу уже сегодня @@ -182,23 +187,25 @@ export const ModalRegistration = ({ active, setActive }) => {

Повторите пароль
{ 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 && Минимум 6 символов} + {inputsError.secondPassword && ( + Пароли должны совпадать + )}
diff --git a/src/components/Modal/ModalRegistration/modalRegistration.scss b/src/components/Modal/ModalRegistration/modalRegistration.scss index 3f5aa077..633f1ee3 100644 --- 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; - h2 > p { - font-size: 35px; - color: #52b709; + @media (max-width: 960px) { + font-size: 25px; + } + + @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 { diff --git a/src/components/SliderWorkers/sliderWorkers.scss b/src/components/SliderWorkers/sliderWorkers.scss index 8bf7a978..bd548e8c 100644 --- 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) { diff --git a/src/components/StepsForCandidate/stepForCandidate.scss b/src/components/StepsForCandidate/stepForCandidate.scss index e4f9c8f0..169183d1 100644 --- 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; + } } } } diff --git a/src/hooks/useFormValidation.js b/src/hooks/useFormValidation.js new file mode 100644 index 00000000..507f3b2c --- /dev/null +++ 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 + }; +}; diff --git a/src/pages/RegistrationForCandidate/RegistrationForCandidate.js b/src/pages/RegistrationForCandidate/RegistrationForCandidate.js index 11402ef7..de6b3d22 100644 --- 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 (
@@ -23,7 +26,7 @@ export const RegistrationForCandidate = () => {

- Для нас не имеет значение Ваша локация. + Для нас не имеет значения Ваша локация.

@@ -39,33 +42,87 @@ export const RegistrationForCandidate = () => { img
-
+ {/* форма регистрации */} +
- + + {form.validationErrors.name}
- + + {form.validationErrors.summary}
- + + {form.validationErrors.email}
- + + {form.validationErrors.tg}
- + + {form.validationErrors.password}
- + + {form.validationErrors.secondPassword}
- +
diff --git a/src/pages/RegistrationForCandidate/registationForCandidate.scss b/src/pages/RegistrationForCandidate/registationForCandidate.scss index f714d54f..ad636528 100644 --- 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 {