apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #65 from apuc/candidate-area

Browse Source 
candidate auth
This commit is contained in:
NikoM1k 2023-04-04 19:07:47 +03:00 committed by GitHub
commit 802e48eb1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 684 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.js
View File

@ -28,6 +28,8 @@ import {PartnerBid} from './pages/PartnerBid/PartnerBid'
import {PartnerCategories} from "./pages/PartnerСategories/PartnerСategories";
import {PartnerTreaties} from "./pages/PartnerTreaties/PartnerTreaties";
import {PartnerEmployees} from "./pages/PartnerEmployees/PartnerEmployees";
import {AuthForCandidate} from "./pages/AuthForCandidate/AuthForCandidate";
import {RegistrationForCandidate} from "./pages/RegistrationForCandidate/RegistrationForCandidate";
import './fonts/stylesheet.css'
import 'bootstrap/dist/css/bootstrap.min.css'
@ -44,6 +46,8 @@ const App = () => {
<Route exact path='/authdev' element={<AuthForDevelopers/>}/>
<Route exact path='/auth' element={<AuthForPartners/>}/>
<Route exact path='/auth-candidate' element={<AuthForCandidate/>}/>
<Route exact path='/registration-candidate' element={<RegistrationForCandidate/>}/>
<Route exact path='/candidate/:id' element={<Candidate/>}/>
<Route exact path='/candidate/:id/form' element={<FormPage/>}/>
@ -77,7 +81,7 @@ const App = () => {
<Route exact path='categories/employees' element={<PartnerEmployees/>}/>
</Route>
<Route path="*" element={<Navigate to="/profile" replace/>}/>
<Route path="*" element={<Navigate to="/auth" replace/>}/>
</Routes>
</Router>
</>

14
src/components/AuthHeader/AuthHeader.js
View File

@ -1,4 +1,5 @@
import React from "react";
import { NavLink } from "react-router-dom";
import userIcon from "../../images/userIcon.png";
@ -17,7 +18,11 @@ export const AuthHeader = ({}) => {
<div className="auth-nav">
<ul>
<li>
<a href="#">Главная</a>
<NavLink to={'/auth'}>
<span>
Главная
</span>
</NavLink>
</li>
<li>
<a href="#">Кабинет разработчика</a>
@ -25,6 +30,13 @@ export const AuthHeader = ({}) => {
<li>
<a href="#">Школа</a>
</li>
<li>
<NavLink to={'/auth-candidate'} className="candidate">
<span>
Войти в команду
</span>
</NavLink>
</li>
</ul>
<a href="#">

10
src/components/AuthHeader/authHeader.scss
View File

@ -41,14 +41,20 @@
font-size: 18px;
line-height: 32px;
a,
a:hover {
a {
color: #897676;
}
a:hover {
text-decoration: none;
}
a:focus {
color: #000000;
}
.candidate {
color: #1458DD;
}
}
}
}

25
src/components/CategoriesItem/CategoriesItem.js Normal file
View File

@ -0,0 +1,25 @@
import React from "react";
import {Link} from "react-router-dom";
import rightArrow from "../../images/arrowRight.png"
import './categoriesItem.scss'
export const CategoriesItem = ({img, title, skills, available, link}) => {
return(
<Link to={link} className={available ? "categoriesItem" : "categoriesItem categoriesItem__disable"}>
<div className='categoriesItem__title'>
<img src={img} alt='img' />
<h5>{title}</h5>
</div>
<div className='categoriesItem__description'>
<p>{skills}</p>
<div className='more'>
<img src={rightArrow} alt="arrow" />
</div>
</div>
</Link>
)
};
export default CategoriesItem

63
src/components/CategoriesItem/categoriesItem.scss Normal file
View File

@ -0,0 +1,63 @@
.categoriesItem {
display: flex;
flex-direction: column;
padding: 33px 32px 25px 28px;
width: 32%;
background: #FFFFFF;
border-radius: 12px;
transition: all 0.3s ease;
position: relative;
&:hover {
box-shadow: 6px 5px 20px rgba(87, 98, 80, 0.21);
transform: scale(1.02);
text-decoration: none;
}
&__disable {
opacity: 0.5;
pointer-events: none;
}
&__title {
display: flex;
align-items: center;
margin-bottom: 27px;
h5 {
color: #000000;
font-weight: 500;
font-size: 18px;
line-height: 22px;
margin-left: 18px;
max-width: 190px;
margin-bottom: 0;
}
}
&__description {
display: flex;
justify-content: space-between;
align-items: center;
p {
max-width: 181px;
margin-bottom: 0;
color: #6F6F6F;
font-weight: 400;
font-size: 12px;
line-height: 20px;
}
.more {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: #DDEEC6;
border-radius: 50px;
}
}
}

20
src/components/StepsForCandidate/StepsForCandidate.js Normal file
View File

@ -0,0 +1,20 @@
import React from 'react';
import './stepForCandidate.scss'
export const StepsForCandidate = ({step}) => {
return(
<div className='step'>
<div className='step__start'>
<span>2</span>
<p>шага для твоего входа в команду </p>
</div>
<div className='step__info'>
<p>{step}</p>
<span>из 2</span>
</div>
</div>
)
};
export default StepsForCandidate

50
src/components/StepsForCandidate/stepForCandidate.scss Normal file
View File

@ -0,0 +1,50 @@
.step {
position: absolute;
display: flex;
align-items: center;
justify-content: space-between;
top: -100px;
padding:0 55px 0 85px;
width: 100%;
&__start {
display: flex;
align-items: center;
span {
font-weight: 900;
font-size: 258px;
line-height: 32px;
color: #52B709;
}
p {
margin-left: 20px;
max-width: 230px;
font-weight: 500;
font-size: 22px;
line-height: 32px;
color: #000000;
}
}
&__info {
display: flex;
align-items: center;
p {
background: #DDEEC6;
border-radius: 44px;
padding: 8px 26px;
font-weight: 400;
font-size: 16px;
line-height: 32px;
}
span {
margin-left: 55px;
font-weight: 400;
font-size: 16px;
line-height: 32px;
}
}
}

BIN
src/images/authCandidateFormImg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

188
src/pages/AuthForCandidate/AuthForCandidate.js Normal file
View File

@ -0,0 +1,188 @@
import React, {useEffect, useRef, useState} from "react";
import {loading, selectIsLoading} from "../../redux/loaderSlice";
import {apiRequest} from "../../api/request";
import {auth, selectAuth, setUserInfo} from "../../redux/outstaffingSlice";
import {setRole} from "../../redux/roleSlice";
import {useDispatch, useSelector} from "react-redux";
import { useNavigate } from "react-router-dom";
import AuthHeader from "../../components/AuthHeader/AuthHeader";
import SideBar from "../../components/SideBar/SideBar";
import CategoriesItem from "../../components/CategoriesItem/CategoriesItem"
import StepsForCandidate from "../../components/StepsForCandidate/StepsForCandidate"
import {Footer} from "../../components/Footer/Footer";
import BackEndImg from "../../pages/PartnerСategories/images/personalBackEnd.png"
import FrontendImg from "../../pages/PartnerСategories/images/PersonalFrontend.png"
import ArchitectureImg from "../../pages/PartnerСategories/images/PersonalArchitecture.png"
import DesignImg from "../../pages/PartnerСategories/images/PersonalDesign.png"
import TestImg from "../../pages/PartnerСategories/images/PersonalTesters.png"
import AdminImg from "../../pages/PartnerСategories/images/PersonalAdmin.png"
import ManageImg from "../../pages/PartnerСategories/images/PersonalMng.png"
import CopyImg from "../../pages/PartnerСategories/images/PersonalCopy.png"
import SmmImg from "../../pages/PartnerСategories/images/PersonalSMM.png"
import authImg from "../../images/authCandidateFormImg.png"
import arrowBtn from "../../images/arrowRight.png";
import './authForCandidate.scss';
export const AuthForCandidate = () => {
const isLoading = useSelector(selectIsLoading);
const ref = useRef();
const dispatch = useDispatch();
const isAuth = useSelector(selectAuth);
let navigate = useNavigate();
const getToken = localStorage.getItem("auth_token");
const [personalInfoItems] = useState([
{
title: 'Backend разработчики',
link: '/registration-candidate',
description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
available: true,
img: BackEndImg
},
{
title: 'Frontend разработчики',
link: '/registration-candidate',
description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
available: true,
img: FrontendImg
},
{
title: 'Архитектура проектов',
link: '/registration-candidate',
description: 'Потоки данных ER ERP CRM CQRS UML BPMN',
available: true,
img: ArchitectureImg
},
{
title: 'Дизайн проектов',
link: '/registration-candidate',
description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
available: true,
img: DesignImg
},
{
title: 'Тестирование проектов',
link: '/registration-candidate',
description: 'SQL Postman TestRail Kibana Ручное тестирование',
available: false,
img: TestImg
},
{
title: 'Администрирование проектов',
link: '/registration-candidate',
description: 'DevOps ELK Kubernetes Docker Bash Apache Oracle Git',
available: false,
img: AdminImg
},
{
title: 'Управление проектом',
link: '/registration-candidate',
description: 'Scrum Kanban Agile Miro CustDev',
available: false,
img: ManageImg
},
{
title: 'Копирайтинг проектов',
link: '/registration-candidate',
description: 'Теги Заголовок H1 Дескриптор Абзац Сценарий',
available: false,
img: CopyImg
},
{
title: 'Реклама и SMM',
link: '/registration-candidate',
description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
available: false,
img: SmmImg
},
]);
useEffect(() => {
if (isAuth || getToken) {
navigate("/profile");
}
}, [getToken]);
const submitHandler = () => {
let formData = new FormData(ref.current);
if (!isLoading) {
dispatch(loading(true));
apiRequest("/user/login", {
method: "POST",
data: formData,
}).then((res) => {
if (!res.access_token) {
dispatch(loading(false));
} else {
localStorage.setItem("auth_token", res.access_token);
localStorage.setItem("id", res.id);
localStorage.setItem("cardId", res.card_id);
localStorage.setItem("role_status", res.status);
localStorage.setItem(
"access_token_expired_at",
res.access_token_expired_at
);
dispatch(auth(true));
dispatch(setUserInfo(res));
dispatch(loading(false));
dispatch(setRole("ROLE_PARTNER"));
}
});
}
};
return(
<div className='auth-candidate'>
<AuthHeader />
<div className='container'>
<div className='auth__wrapper'>
<div className='auth__info'>
<h3>Войти, уже есть доступ</h3>
<img src={authImg} alt='img' />
<p>если вы получили доступ пройдя 2 шага для входа или хотите узнать свои результаты в кабинете</p>
</div>
<form ref={ref} className='auth__form'>
<label htmlFor="login">Ваш email *</label>
<input id="login" type="text" name="username" placeholder="Email" />
<label htmlFor="password">Ваш пароль*</label>
<input
id="password"
type="password"
name="password"
placeholder="Пароль"
/>
<button
onClick={(e) => {
e.preventDefault();
submitHandler();
}}
>Войти</button>
</form>
</div>
<div className='auth-candidate__start'>
<h2 className="auth-candidate__start__title">Хочу в команду <span>Айти специалистов</span></h2>
<div className="change-mode__arrow">
<img src={arrowBtn}></img>
</div>
<p className="auth-candidate__start__description">Для нас не имеет значение Ваша локация.</p>
<div className='auth-candidate__start__categoriesWrapper'>
<StepsForCandidate step="шаг 1 - выбери специализацтию" />
{personalInfoItems.map((item, index) => {
return <CategoriesItem link={item.link} key={index} title={item.title} img={item.img} skills={item.description} available={item.available} />
})
}
</div>
</div>
</div>
<SideBar />
<Footer/>
</div>
)
};

112
src/pages/AuthForCandidate/authForCandidate.scss Normal file
View File

@ -0,0 +1,112 @@
.auth-candidate {
font-family: "LabGrotesque", sans-serif;
overflow: hidden;
position: relative;
background-color: #f1f1f1;
.auth {
&__wrapper {
background: #FFFFFF;
border-radius: 12px;
padding: 50px 0 35px 56px;
margin-top: 40px;
display: flex;
}
&__info {
margin-right: 115px;
h3 {
font-weight: 500;
font-size: 30px;
line-height: 32px;
margin-bottom: 20px;
}
p {
max-width: 310px;
margin-top: 17px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
}
}
&__form {
display: flex;
flex-direction: column;
input {
margin-bottom: 30px;
background: #EFF2F7;
border-radius: 8px;
min-width: 300px;
width: 100%;
padding: 8px 12px;
border: none;
outline: none;
font-weight: 400;
font-size: 15px;
line-height: 18px;
}
label {
margin-bottom: 15px;
font-weight: 400;
font-size: 15px;
line-height: 18px;
color: #000000;
}
button {
background: #52B709;
border-radius: 44px;
max-width: 130px;
border: none;
font-weight: 500;
font-size: 18px;
line-height: 32px;
color: white;
height: 45px;
}
}
}
&__start {
margin-top: 60px;
display: flex;
flex-direction: column;
align-items: center;
&__title {
font-weight: 500;
font-size: 44px;
line-height: 32px;
color: #000000;
text-align: center;
span {
color: #52B709;
}
}
&__description {
font-weight: 400;
font-size: 22px;
line-height: 32px;
}
&__categoriesWrapper {
display: flex;
position: relative;
margin-top: 200px;
flex-wrap: wrap;
row-gap: 24px;
column-gap: 21px;
width: 100%;
}
}
footer {
margin-top: 70px;
}
}

72
src/pages/RegistrationForCandidate/RegistrationForCandidate.js Normal file
View File

@ -0,0 +1,72 @@
import React from 'react';
import AuthHeader from "../../components/AuthHeader/AuthHeader";
import SideBar from "../../components/SideBar/SideBar";
import StepsForCandidate from "../../components/StepsForCandidate/StepsForCandidate"
import {Footer} from "../../components/Footer/Footer";
import BackEndImg from "../../pages/PartnerСategories/images/personalBackEnd.png"
import arrowBtn from "../../images/arrowRight.png";
import './registationForCandidate.scss'
export const RegistrationForCandidate = () => {
return(
<div className='registrationCandidate'>
<AuthHeader/>
<div className='container'>
<div className='registrationCandidate__start'>
<h2 className="auth-candidate__start__title">Хочу в команду <span>Айти специалистов</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'>
<div className='registrationCandidate__form__input'>
<label htmlFor="name">Ваше имя *</label>
<input id="name" type="text" placeholder="Имя" />
</div>
<div className='registrationCandidate__form__input'>
<label htmlFor="summary">Если есть ссылка на резюме</label>
<input id="summary" type="text" placeholder="Резюме" />
</div>
<div className='registrationCandidate__form__input'>
<label htmlFor="email">Ваш email *</label>
<input id="email" type="text" placeholder="Email" />
</div>
<div className='registrationCandidate__form__input'>
<label htmlFor="tg">Ваш телеграм*</label>
<input id="tg" type="text" placeholder="Телеграм" />
</div>
<div className='registrationCandidate__form__input'>
<label htmlFor="password">Придумайте пароль*</label>
<input id="password" type="text" placeholder="Пароль" />
</div>
<div className='registrationCandidate__form__input'>
<label htmlFor="secondPassword">Повторите пароль*</label>
<input id="secondPassword" type="text" placeholder="Пароль" />
</div>
<div className='registrationCandidate__form__submit'>
<button>Отправить</button>
</div>
</form>
</div>
</div>
</div>
<SideBar/>
<Footer/>
</div>
)
}

128
src/pages/RegistrationForCandidate/registationForCandidate.scss Normal file
View File

@ -0,0 +1,128 @@
.registrationCandidate {
font-family: "LabGrotesque", sans-serif;
position: relative;
background-color: #f1f1f1;
&__start {
display: flex;
position: relative;
flex-direction: column;
align-items: center;
margin-top: 55px;
.step {
top: 36.5%;
}
}
&__formWrapper {
position: relative;
margin-top: 200px;
display: flex;
padding: 33px 69px 32px 30px;
background: #FFFFFF;
border-radius: 12px;
width: 100%;
}
&__info {
display: flex;
flex-direction: column;
row-gap: 30px;
&__category {
display: flex;
align-items: center;
img {
width: 48px;
}
p {
margin-left: 18px;
font-weight: 500;
font-size: 18px;
line-height: 22px;
max-width: 120px;
}
}
&__skills {
max-width: 180px;
font-weight: 400;
font-size: 12px;
line-height: 20px;
color: #6F6F6F;
}
&__arrow {
width: 48px;
height: 48px;
background: #DDEEC6;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
img {
transform: rotate(180deg);
}
}
}
&__form {
display: flex;
flex-wrap: wrap;
margin-left: 70px;
margin-top: 20px;
row-gap: 28px;
column-gap: 55px;
&__input {
display: flex;
flex-direction: column;
width: 46%;
label {
font-weight: 400;
font-size: 15px;
line-height: 18px;
color: #000000;
margin-bottom: 15px;
}
input {
background: #EFF2F7;
border-radius: 8px;
width: 100%;
padding: 8px 12px;
border: none;
outline: none;
font-weight: 400;
font-size: 15px;
line-height: 18px;
}
}
&__submit {
width: 100%;
margin-top: 10px;
button {
border: none;
font-weight: 500;
font-size: 18px;
line-height: 32px;
color: #FFFFFF;
background: #52B709;
border-radius: 44px;
width: 180px;
height: 46px;
}
}
}
footer {
margin-top: 80px;
}
}