add adaptive registationForCandidate,

modalRegistration,
create hook useFormValidation,
add Validation in registationForCandidate
This commit is contained in:
Никита Губарь 2023-12-26 02:42:49 +03:00
parent ce6c2d965a
commit c345bdf5ca
8 changed files with 278 additions and 46 deletions

View File

@ -67,7 +67,7 @@
margin-bottom: 30px; margin-bottom: 30px;
background: #eff2f7; background: #eff2f7;
border-radius: 8px; border-radius: 8px;
min-width: 300px; min-width: 200px;
width: 100%; width: 100%;
padding: 8px 12px; padding: 8px 12px;
border: none; border: none;

View File

@ -18,13 +18,15 @@ export const ModalRegistration = ({ active, setActive }) => {
const [inputsValue, setInputsValue] = useState({ const [inputsValue, setInputsValue] = useState({
userName: "", userName: "",
email: "", email: "",
password: "" password: "",
secondPassword: ""
}); });
const [inputsError, setInputsError] = useState({ const [inputsError, setInputsError] = useState({
name: false, name: false,
email: false, email: false,
password: false password: false,
secondPassword: false
}); });
const [loader, setLoader] = useState(false); const [loader, setLoader] = useState(false);
@ -43,6 +45,9 @@ export const ModalRegistration = ({ active, setActive }) => {
if (inputsValue.password.length < 6) { if (inputsValue.password.length < 6) {
setInputsError((prevValue) => ({ ...prevValue, password: true })); setInputsError((prevValue) => ({ ...prevValue, password: true }));
} }
if (inputsValue.password !== inputsValue.secondPassword) {
setInputsError((prevValue) => ({ ...prevValue, secondPassword: true }));
}
if (inputsValue.userName.length < 2) { if (inputsValue.userName.length < 2) {
setInputsError((prevValue) => ({ ...prevValue, name: true })); setInputsError((prevValue) => ({ ...prevValue, name: true }));
} }
@ -105,8 +110,8 @@ export const ModalRegistration = ({ active, setActive }) => {
return ( return (
<ModalLayout active={active} setActive={closeModal} styles={"registration"}> <ModalLayout active={active} setActive={closeModal} styles={"registration"}>
<div className="registration-body__main"> <div className="registration-body__main">
<h2> <h2 className="registration-body__main-title">
Подключайтесь к <p>ITguild</p> Подключайтесь к <span>ITguild</span>
</h2> </h2>
<p className="registration-body__main-desc"> <p className="registration-body__main-desc">
Зарегистрируйтесь и начните работу уже сегодня Зарегистрируйтесь и начните работу уже сегодня
@ -182,23 +187,25 @@ export const ModalRegistration = ({ active, setActive }) => {
<div className="inputContainer"> <div className="inputContainer">
<h5>Повторите пароль</h5> <h5>Повторите пароль</h5>
<input <input
className={inputsError.password ? "error" : ""} className={inputsError.secondPassword ? "error" : ""}
type="password" type="password"
onChange={(e) => { onChange={(e) => {
setInputsError({ setInputsError({
name: false, name: false,
email: false, email: false,
password: false secondPassword: false
}); });
setInputsValue((prevValue) => ({ setInputsValue((prevValue) => ({
...prevValue, ...prevValue,
password: e.target.value secondPassword: e.target.value
})); }));
}} }}
value={inputsValue.password} value={inputsValue.secondPassword}
placeholder="Пароль" placeholder="Пароль"
/> />
{inputsError.password && <span>Минимум 6 символов</span>} {inputsError.secondPassword && (
<span>Пароли должны совпадать</span>
)}
</div> </div>
</div> </div>
</div> </div>

View File

@ -2,58 +2,105 @@
background: white; background: white;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 0; padding: 40px 20px 40px 20px;
justify-content: space-between; justify-content: space-between;
border: 1px solid #dde2e4; border: 1px solid #dde2e4;
border-radius: 8px; border-radius: 8px;
width: 60%;
@media (max-width: 1375px) {
width: 80%;
}
@media (max-width: 617px) {
top: 7%;
padding: 20px 10px 20px 10px;
}
&-body { &-body {
&__main { &__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-weight: 500;
font-size: 35px; font-size: 35px;
line-height: 32px; line-height: 32px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 405px; margin: 0;
margin: 0 auto;
}
h2 > p { @media (max-width: 960px) {
font-size: 35px; font-size: 25px;
color: #52b709; }
@media (max-width: 617px) {
flex-direction: column;
align-items: center;
font-size: 20px;
}
span {
color: #52b709;
margin: 0 0 0 10px;
}
} }
&-desc { &-desc {
text-align: center; text-align: center;
width: 500px; width: 100%;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
line-height: 28px; 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 { .input-body {
margin-top: 44px; margin: 44px 0 0 0;
display: flex; display: flex;
flex-direction: row; 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 { &__box {
margin-right: 25px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 47%;
@media (max-width: 617px) {
width: 75%;
}
h5 { h5 {
font-weight: 400; font-weight: 400;
font-size: 15px; font-size: 15px;
line-height: 18px; line-height: 18px;
margin-left: 10px; margin: 0 0 0 10px;
} }
input { input {
width: 294px;
height: 35px; height: 35px;
background: #eff2f7; background: #eff2f7;
border-radius: 8px; border-radius: 8px;
@ -63,9 +110,8 @@
} }
.inputContainer { .inputContainer {
height: 81px; margin: 0 0 20px 0;
margin-bottom: 10px; width: 100%;
max-width: 294px;
} }
span { span {
@ -88,7 +134,11 @@
width: 174px; width: 174px;
height: 50px; height: 50px;
font-size: 18px; font-size: 18px;
margin-right: 55px; margin: 0 55px 0 0;
@media (max-width: 740px) {
margin: 0;
}
} }
.disable { .disable {
@ -112,20 +162,34 @@
} }
&__about { &__about {
border-left: 1px solid #f1f1f1; border-left: 1px solid #cdcdcd;
padding: 20px; padding: 0 20px 0 10px;
margin: 0 0 0 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
width: 35%;
@media (max-width: 960px) {
padding: 0 0 0 10px;
}
@media (max-width: 740px) {
display: none;
}
h4 { h4 {
margin: 22px 0 22px 0; margin: 30px 0 5px 0;
font-weight: 900; font-weight: 900;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
color: #52b709; color: #52b709;
margin-right: 100px; width: 100%;
width: 180px;
@media (max-width: 960px) {
margin: 15px 0 5px 0;
font-size: 12px;
}
} }
&-text { &-text {
@ -136,7 +200,15 @@
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 22px; line-height: 22px;
width: 205px; width: 230px;
@media (max-width: 1643px) {
width: 100%;
}
@media (max-width: 960px) {
font-size: 10px;
}
} }
img { img {

View File

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

View File

@ -47,8 +47,8 @@
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
@media (max-width: 450px) { @media (max-width: 312px) {
max-width: 180px; font-size: 14px;
} }
} }
@ -57,6 +57,10 @@
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 32px; line-height: 32px;
@media (max-width: 450px) {
display: none;
}
} }
} }
} }

View File

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

View File

@ -1,5 +1,7 @@
import React from "react"; import React from "react";
import { useFormValidation } from "@hooks/useFormValidation";
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";
import SideBar from "@components/SideBar/SideBar"; import SideBar from "@components/SideBar/SideBar";
@ -11,6 +13,7 @@ import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
import "./registationForCandidate.scss"; import "./registationForCandidate.scss";
export const RegistrationForCandidate = () => { export const RegistrationForCandidate = () => {
const form = useFormValidation();
return ( return (
<div className="registrationCandidate"> <div className="registrationCandidate">
<AuthHeader /> <AuthHeader />
@ -23,7 +26,7 @@ export const RegistrationForCandidate = () => {
<img src={arrowBtn}></img> <img src={arrowBtn}></img>
</div> </div>
<p className="auth-candidate__start__description"> <p className="auth-candidate__start__description">
Для нас не имеет значение Ваша локация. Для нас не имеет значения Ваша локация.
</p> </p>
<StepsForCandidate step="шаг 2 - заполните данные" /> <StepsForCandidate step="шаг 2 - заполните данные" />
<div className="registrationCandidate__formWrapper"> <div className="registrationCandidate__formWrapper">
@ -39,33 +42,87 @@ export const RegistrationForCandidate = () => {
<img src={arrowBtn} alt="img" /> <img src={arrowBtn} alt="img" />
</div> </div>
</div> </div>
<form className="registrationCandidate__form"> {/* форма регистрации */}
<form
className="registrationCandidate__form"
onSubmit={form.handleSubmit}
>
<div className="registrationCandidate__form__input"> <div className="registrationCandidate__form__input">
<label htmlFor="name">Ваше имя</label> <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>
<div className="registrationCandidate__form__input"> <div className="registrationCandidate__form__input">
<label htmlFor="summary">Если есть ссылка на резюме</label> <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>
<div className="registrationCandidate__form__input"> <div className="registrationCandidate__form__input">
<label htmlFor="email">Ваш e-mail</label> <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>
<div className="registrationCandidate__form__input"> <div className="registrationCandidate__form__input">
<label htmlFor="tg">Ваш telegram</label> <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>
<div className="registrationCandidate__form__input"> <div className="registrationCandidate__form__input">
<label htmlFor="password">Придумайте пароль</label> <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>
<div className="registrationCandidate__form__input"> <div className="registrationCandidate__form__input">
<label htmlFor="secondPassword">Повторите пароль</label> <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>
<div className="registrationCandidate__form__submit"> <div className="registrationCandidate__form__submit">
<button>Отправить</button> <button type="submit">Отправить</button>
</div> </div>
</form> </form>
</div> </div>

View File

@ -142,6 +142,15 @@
font-size: 15px; font-size: 15px;
line-height: 18px; line-height: 18px;
} }
.error {
border: 1px solid red;
}
span {
color: red;
font-size: 12px;
}
} }
&__submit { &__submit {