add adaptive registationForCandidate,
modalRegistration, create hook useFormValidation, add Validation in registationForCandidate
This commit is contained in:
parent
ce6c2d965a
commit
c345bdf5ca
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
@ -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) {
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
77
src/hooks/useFormValidation.js
Normal file
77
src/hooks/useFormValidation.js
Normal 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
|
||||
};
|
||||
};
|
@ -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>
|
||||
|
@ -142,6 +142,15 @@
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.error {
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
span {
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&__submit {
|
||||
|
Loading…
Reference in New Issue
Block a user