Merge pull request #65 from apuc/candidate-area

candidate auth

src/App.js

@@ -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>
       </>

src/components/AuthHeader/AuthHeader.js

@@ -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="#">

src/components/AuthHeader/authHeader.scss

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

src/components/CategoriesItem/CategoriesItem.js

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

src/components/CategoriesItem/categoriesItem.scss

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

src/components/StepsForCandidate/StepsForCandidate.js

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

src/components/StepsForCandidate/stepForCandidate.scss

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

src/pages/AuthForCandidate/AuthForCandidate.js

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

src/pages/AuthForCandidate/authForCandidate.scss

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

src/pages/RegistrationForCandidate/RegistrationForCandidate.js

@@ -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>
+    )
+}

src/pages/RegistrationForCandidate/registationForCandidate.scss

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