modalRegistration, create hook useFormValidation, add Validation in registationForCandidate
136 lines
5.5 KiB
JavaScript
136 lines
5.5 KiB
JavaScript
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";
|
|
import StepsForCandidate from "@components/StepsForCandidate/StepsForCandidate";
|
|
|
|
import arrowBtn from "assets/icons/arrows/arrowRight.svg";
|
|
import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
|
|
|
|
import "./registationForCandidate.scss";
|
|
|
|
export const RegistrationForCandidate = () => {
|
|
const form = useFormValidation();
|
|
return (
|
|
<div className="registrationCandidate">
|
|
<AuthHeader />
|
|
<div className="container">
|
|
<div className="registrationCandidate__start">
|
|
<h2 className="auth-candidate__start__title">
|
|
Хочу в команду <span>IT-специалистов</span>
|
|
</h2>
|
|
<div className="change-mode__arrow">
|
|
<img src={arrowBtn}></img>
|
|
</div>
|
|
<p className="auth-candidate__start__description">
|
|
Для нас не имеет значения Ваша локация.
|
|
</p>
|
|
<StepsForCandidate step="шаг 2 - заполните данные" />
|
|
<div className="registrationCandidate__formWrapper">
|
|
<div className="registrationCandidate__info">
|
|
<div className="registrationCandidate__info__category">
|
|
<img src={BackEndImg} alt="img" />
|
|
<p>Backend разработчики</p>
|
|
</div>
|
|
<p className="registrationCandidate__info__skills">
|
|
Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript
|
|
</p>
|
|
<div className="registrationCandidate__info__arrow">
|
|
<img src={arrowBtn} alt="img" />
|
|
</div>
|
|
</div>
|
|
{/* форма регистрации */}
|
|
<form
|
|
className="registrationCandidate__form"
|
|
onSubmit={form.handleSubmit}
|
|
>
|
|
<div className="registrationCandidate__form__input">
|
|
<label htmlFor="name">Ваше имя</label>
|
|
<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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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 type="submit">Отправить</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<SideBar />
|
|
<Footer />
|
|
</div>
|
|
);
|
|
};
|