guild_front/src/pages/RegistrationForCandidate/RegistrationForCandidate.js
Gubar Nikita c345bdf5ca add adaptive registationForCandidate,
modalRegistration,
create hook useFormValidation,
add Validation in registationForCandidate
2023-12-26 02:42:49 +03:00

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