Merge pull request #30 from apuc/authentication

Authentication

src/App.js

@@ -1,5 +1,7 @@
 import React, { Suspense, lazy } from 'react'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+import { selectAuth } from './redux/outstaffingSlice';
 import 'bootstrap/dist/css/bootstrap.min.css'
 import './fonts/stylesheet.css'
 import { ProtectedRoute } from './components/ProtectedRoute/ProtectedRoute';
@@ -12,7 +14,8 @@ import CalendarPage from'./pages/CalendarPage';
 import ReportPage from './pages/ReportFormPage.js';
 import FormPage from './pages/FormPage.js';
 
-const App = () => {
+const App = (props) => {
+  const isAuth = useSelector(selectAuth)
   return (<>
     <h1>IT Аутстаффинг в России</h1>
     <Router>

src/components/Auth/AuthForDevelopers.js

@@ -8,9 +8,6 @@ import arrow from '../../images/arrow__login_page.png'
 import authImg from '../../images/auth_img.png'
 import cross from '../../images/cross.png'
 import text from '../../images/Body_Text.png'
-import align from '../../images/align-left.png'
-import phone from '../../images/phone.png'
-import telegram from '../../images/telegram.png'
 import vector from '../../images/Vector_Smart_Object.png'
 import vectorBlack from '../../images/Vector_Smart_Object_black.png'
 import { fetchAuth } from '../../server/server'
@@ -22,6 +19,7 @@ import { Loader } from '../Loader/Loader'
 
 import { withSwalInstance } from 'sweetalert2-react';
 import swal from 'sweetalert2';
+import { Footer } from '../Footer/Footer'
  
 const SweetAlert = withSwalInstance(swal);
 
@@ -153,36 +151,7 @@ const AuthForDevelopers = () => {
               </div>
             </div>
           </div>
-
+          <Footer />
-          <div className='row'>
-            <div className='col-12 col-xl-7'>
-              <div className={style.developers__footer__left}>
-                <div className={style.footer__left__img}>
-                  <img src={align} alt='' />
-                </div>
-                <div className={style.footer__left__sp}>
-                  <span>
-                    Подберем и документально оформим IT-специалистов, после чего передадим исполнителей под ваше руководство. 
-                    Вы получаете полное управление над сотрудниками, имея возможность контролировать и заменять IT штат.{' '}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <div className='col-4 col-xl-2'>
-              <div className={style.developers__footer__icon}>
-                <img src={phone} alt='' />
-                <img src={telegram} alt='' />
-              </div>
-            </div>
-
-            <div className='col-8 col-xl-3'>
-              <div className={style.developers__footer__right}>
-                <p className={style.phone}>+7 495 156 78 98</p>
-                <p className={style.workingHours}>Будни с 9:00 до 21:00</p>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     </section>

src/components/Auth/AuthForDevelopers.module.css

@@ -361,91 +361,6 @@
   }
 }
 
-.developers__footer__left {
-  display: flex;
-  align-items: center;
-  margin-bottom: 60px;
-}
-
-@media (max-width: 575.98px) {
-  .developers__footer__left {
-    margin-top: 120px;
-  }
-}
-
-.footer__left__sp {
-  padding: 0 100px 0 34px;
-}
-
-@media (max-width: 575.98px) {
-  .footer__left__sp {
-    padding: 0;
-    margin-left: 10px;
-  }
-}
-
-.developers__footer__left > div > span {
-  color: #18586e;
-  font-family: 'GT Eesti Pro Display';
-  font-size: 1.6em;
-  font-weight: 400;
-  font-style: normal;
-  letter-spacing: normal;
-  line-height: 16.81px;
-  text-align: left;
-}
-
-@media (max-width: 575.98px) {
-  .developers__footer__left > div > span {
-    font-size: 1.2em;
-  }
-}
-
-.developers__footer__icon {
-  text-align: end;
-}
-
-.developers__footer__icon > img {
-  margin-left: 20px;
-}
-
-@media (max-width: 575.98px) {
-  .developers__footer__icon > img {
-    margin-left: 10px;
-  }
-}
-
-.developers__footer__right {
-  display: flex;
-  flex-direction: column;
-  align-items: left;
-}
-
-@media (max-width: 575.98px) {
-  .developers__footer__right {
-    margin-bottom: 20px;
-  }
-}
-.phone {
-  color: #003b65;
-  font-family: 'CeraPro';
-  font-size: 2.1em;
-  letter-spacing: normal;
-  line-height: 25px;
-  text-align: left;
-}
-
-.workingHours {
-  color: #003b65;
-  font-family: 'CeraPro';
-  font-size: 1.2em;
-  font-weight: 400;
-  font-style: normal;
-  letter-spacing: normal;
-  line-height: normal;
-  margin-left: 24px;
-}
-
 .auth__link {
   display: block;
 }

src/components/Auth/AuthForPartners.js

@@ -23,6 +23,7 @@ import { Loader } from '../Loader/Loader'
 
 import { withSwalInstance } from 'sweetalert2-react';
 import swal from 'sweetalert2';
+import { Footer } from '../Footer/Footer'
  
 const SweetAlert = withSwalInstance(swal);
 
@@ -144,36 +145,7 @@ const AuthForPartners = () => {
               </div>
             </div>
           </div>
-
+          <Footer />
-          <div className="row">
-            <div className="col-12 col-xl-7">
-              <div className={style.partners__footer__left}>
-                <div className={style.footer__left__img}>
-                  <img src={align} alt="" />
-                </div>
-                <div className={style.footer__left__sp}>
-                  <span>
-                    Подберем и документально оформим IT-специалистов, после чего передадим исполнителей под ваше руководство. 
-                    Вы получаете полное управление над сотрудниками, имея возможность контролировать и заменять IT штат.{' '}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <div className="col-4 col-xl-2">
-              <div className={style.partners__footer__icon}>
-                <img src={phone} alt="" />
-                <img src={telegram} alt="" />
-              </div>
-            </div>
-
-            <div className="col-8 col-xl-3">
-              <div className={style.partners__footer__right}>
-                <p className={style.phone}>+7 495 156 78 98</p>
-                <p className={style.workingHours}>Будни с 9:00 до 21:00</p>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     </section>

src/components/Calendar/Calendar.js

@@ -7,6 +7,7 @@ import calendarMale from '../../images/medium_male.png';
 import rectangle from '../../images/rectangle_secondPage.png';
 import CalendarComponent from './CalendarComponent';
 import { currentMonth } from './calendarHelper';
+import { Footer } from '../Footer/Footer';
 
 const Calendar = () => {
   const candidateForCalendar = useSelector(selectCurrentCandidate);
@@ -52,6 +53,7 @@ const Calendar = () => {
             </p>
           </div>
         </div>
+        <Footer />
     </section>
   );
 };

src/components/Calendar/Calendar.module.css

@@ -19,7 +19,7 @@
   .calendar__title {
     font-size: 5em;
     text-align: center;
-    margin: 40px 0;
+    margin: 60px 0 40px 0;
   }
 }
 
@@ -293,3 +293,7 @@
   letter-spacing: normal;
   line-height: normal;
 }
+
+.calendar footer {
+  margin-top: 2rem !important;
+}

src/components/Candidate/Candidate.js

@@ -10,6 +10,7 @@ import front from '../../images/front_end.png';
 import back from '../../images/back_end.png';
 import design from '../../images/design.png';
 import { fetchItemsForId } from '../../server/server';
+import { Footer } from '../Footer/Footer';
 
 import './candidate.css';
 
@@ -119,16 +120,17 @@ const Candidate = () => {
                     {currentCandidateObj.vc_text ? currentCandidateObj.vc_text : 'Описание отсутствует...' }
                   </p>
                 )}
-                <Link to={`/candidate/${currentCandidateObj.id}/form`}>
+                {/* <Link to={`/candidate/${currentCandidateObj.id}/form`}>
                   <button type="submit" className='candidate__btn'>
                     Выбрать к собеседованию
                   </button>
-                </Link>
+                </Link> */}
                 <SectionSkills skillsArr={skillValues} />
               </div>
             </div>
           </div>
         </div>
+        <Footer />
     </div>
   );
 };

src/components/Candidate/candidate.css

@@ -41,6 +41,17 @@
   margin-left: 60px;
 }
 
+@media (max-width: 768px) {
+  .candidate__header {
+    flex-direction: column;
+  }
+
+  .candidate__header .arrow {
+    margin-left: 60px;
+    margin-bottom: 40px;
+  }
+}
+
 @media (max-width: 575.98px) {
   .candidate__header {
     display: flex;
@@ -48,6 +59,10 @@
     margin-left: 0;
     margin-top: 40px;
   }
+
+  .candidate__header .arrow {
+    margin-left: 0;
+  }
 }
 
 .arrow {
@@ -280,4 +295,14 @@
 
 .candidate + .logout-button{
   top: 80px !important;
+}
+
+.candidate footer {
+  margin-top: 2.5rem !important;
+}
+
+@media (max-width: 1199px) {
+  .candidate + .logout-button {
+      top: 16px !important;
+  }
 }

src/components/Description/Description.module.css

@@ -6,12 +6,11 @@
 .description__wrapper {
   border: 1px solid #efefef;
   background-color: #fdfdfd;
-  padding-top: 60px;
+  padding: 60px 40px 0 40px;
   border-bottom: none;
   position: relative;
 }
 .description__img {
-  margin-left: 40px;
   margin-top: 16px;
   width: 118px;
   height: 118px;
@@ -21,24 +20,8 @@
 @media (max-width: 575.98px) {
   .description__img {
     position: absolute;
-    top: 90px;
+    top: 80px;
-    left: 90px;
+    left: 0;
-  }
-}
-
-@media (max-width: 375.98px) {
-  .description__img {
-    position: absolute;
-    top: 90px;
-    left: 90px;
-  }
-}
-
-@media (max-width: 340.98px) {
-  .description__img {
-    position: absolute;
-    top: 90px;
-    left: 60px;
   }
 }
 
@@ -60,7 +43,7 @@
 @media (max-width: 575.98px) {
   .description__title {
     text-align: center;
-    margin-bottom: 190px;
+    margin-bottom: 170px;
     font-size: 3em;
   }
 }
@@ -176,7 +159,7 @@
   .description__list__item {
     font-size: 1.5em;
     text-align: center;
-    margin-bottom: 120px;
+    margin-bottom: 0;
   }
 }
 
@@ -188,6 +171,7 @@
 @media (max-width: 575.98px) {
   .description__rectangle {
     width: 80%;
+    margin: 50px auto 80px auto;
   }
 }
 
@@ -215,6 +199,14 @@
 }
 
 @media (max-width: 575.98px) {
+  .description {
+    margin-bottom: 16px;
+  }
+
+  .description__footer {
+    margin-top: 0;
+  }
+
   .description__footer__btn > button {
     width: 160px;
     margin-right: 10px;
@@ -237,3 +229,9 @@
   text-align: center;
   margin: 0 10px;
 }
+
+@media (max-width: 1199px) {
+  .description__button {
+    margin: 1.5rem 0;
+  }
+}

src/components/Footer/Footer.js

@@ -1,10 +1,46 @@
 import React from 'react';
 import './footer.css';
+import align from '../../images/align-left.png'
+import phone from '../../images/phone.png'
+import telegram from '../../images/telegram.png'
 
 export const Footer = () => {
     return (
+        <div className='container'>
         <footer>
-            <div>2021 © Outstaffing</div>
+            
+        <div className='footer row'>
+            <div className='col-12 col-xl-7'>
+                <div className='footer__left'>
+                    <div className='footer__img'>
+                    <img src={align} alt='' />
+                    </div>
+                    <div className='footer__description'>
+                    <span>
+                        Подберем и документально оформим IT-специалистов, после чего передадим исполнителей под ваше руководство. 
+                        Вы получаете полное управление над сотрудниками, имея возможность контролировать и заменять IT штат.{' '}
+                    </span>
+                    </div>
+                </div>
+                </div>
+
+                <div className='col-4 col-xl-2'>
+                <div className='footer__icon'>
+                    <img src={phone} alt='' />
+                    <img src={telegram} alt='' />
+                </div>
+                </div>
+
+                <div className='col-8 col-xl-3'>
+                <div className='footer__right'>
+                    <p className='footer__phone'>+7 495 156 78 98</p>
+                    <p className='footer__hours'>Будни с 9:00 до 21:00</p>
+                </div>
+            </div>
+        </div>
+        <div className='copyright'>2021 © Outstaffing</div>
+
         </footer>
+        </div>
     )
 }

src/components/Footer/footer.css

@@ -1,11 +1,101 @@
 footer {
-    padding: 2rem 5rem;
+  margin-top: -3rem;
-  }
+}
   
-footer>div {
+footer .copyright {
-    border-top: 2px solid #73c141;
+    padding: 1rem 1rem 1rem 5.6rem;
-    padding: 1rem;
     font-family: 'Muller';
     font-weight: 300;
     font-size: 1.2em;
+}
+
+.footer__left {
+  display: flex;
+  align-items: center;
+}
+
+@media (max-width: 575.98px) {
+  .footer__left {
+    margin-top: 80px;
+  }
+}
+
+.footer__description {
+  padding: 0 100px 0 34px;
+}
+
+@media (max-width: 575.98px) {
+  .footer__description {
+    padding: 0;
+    margin-left: 10px;
+  }
+}
+
+.footer__left > div > span {
+  color: #18586e;
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.6em;
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 16.81px;
+  text-align: left;
+}
+
+@media (max-width: 575.98px) {
+  .footer__left > div > span {
+    font-size: 1.2em;
+  }
+}
+
+.footer__icon {
+  text-align: end;
+}
+
+.footer__icon > img {
+  margin-left: 20px;
+}
+
+@media (max-width: 575.98px) {
+  .footer__icon > img {
+    margin-left: 10px;
+  }
+}
+
+.footer__right {
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+}
+
+@media (max-width: 575.98px) {
+  .footer__right {
+    margin-bottom: 20px;
+  }
+}
+
+.footer__phone {
+  color: #003b65;
+  font-family: 'CeraPro';
+  font-size: 2.1em;
+  letter-spacing: normal;
+  line-height: 25px;
+  text-align: left;
+}
+
+.footer__working-hours {
+  color: #003b65;
+  font-family: 'CeraPro';
+  font-size: 1.2em;
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: normal;
+  margin-left: 24px;
+}
+
+@media (max-width: 1199px) {
+  .footer__left {
+    margin-bottom: 20px;
+  }
 }

src/components/Home/Home.js

@@ -4,6 +4,7 @@ import Outstaffing from '../Outstaffing/Outstaffing';
 import Description from '../Description/Description';
 import { fetchProfile, fetchSkills } from '../../server/server';
 import { profiles, tags } from '../../redux/outstaffingSlice';
+import { Footer } from '../Footer/Footer';
 
 const Home = () => {
   const [isLoadingMore, setIsLoadingMore] = useState(false);
@@ -39,6 +40,7 @@ const Home = () => {
     <>
       <Outstaffing />
       <Description onLoadMore={loadMore} isLoadingMore={isLoadingMore} />
+      <Footer />
     </>
   );
 };

src/components/LogoutButton/logoutButton.css

@@ -31,9 +31,9 @@
     transition: .3s;
 }
 
-@media (max-width: 1198px) {
+@media (max-width: 1199px) {
     .logout-button {
-        top: 16px;
+        top: 16px !important;
     }
-  }
+}
   

src/components/Outstaffing/Outstaffing.module.css

@@ -162,3 +162,13 @@
   list-style: none;
   cursor: pointer;
 }
+
+@media (max-width: 1199px) {
+  .outstaffing__box {
+      margin-top: 0;
+  }
+
+  .outstaffing__box>div {
+    margin-top: 32px;
+  }
+}

src/components/Select/TagSelect.module.css

@@ -45,7 +45,7 @@
 
 @media (max-width: 575.98px) {
   .search__box > button {
-    margin-top: 40px;
+    margin-top: 20px;
   }
 }
 
@@ -77,4 +77,10 @@
 
 .search__submit:hover .loader path {
     fill: #6aaf5c;
+}
+
+@media (max-width: 990px) {
+  .select {
+    margin-right: 1rem;
+  }
 }

src/components/Sidebar/Sidebar.module.css

@@ -131,3 +131,15 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+@media (max-width: 1199px) {
+  .candidateSidebar {
+    flex-direction: row;
+    padding-left: 16px;
+  }
+
+  .candidateSidebar__info {
+    display: flex;
+    flex-direction: column;
+  }
+}

src/index.js

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
 import { store } from './store/store';
 import { Provider } from 'react-redux';
 import App from './App';
-import { Footer } from './components/Footer/Footer';
 
 import './index.css';
 
@@ -11,7 +10,6 @@ ReactDOM.render(
   <Provider store={store}>
     <>
     <App />
-    <Footer />
     </>
   </Provider>,
   document.getElementById('root')

src/pages/FormPage.js

@@ -7,6 +7,7 @@ import { WithLogout } from '../hoc/withLogout';
 import Form from '../components/Form/Form';
 import { LEVELS, SKILLS } from '../components/constants/constants';
 import { fetchItemsForId } from '../server/server';
+import { Footer } from '../components/Footer/Footer';
 
 import arrow from '../images/right-arrow.png';
 import rectangle from '../images/rectangle_secondPage.png';
@@ -70,6 +71,7 @@ const FormPage = () => {
                     </div>
                 </div>
             </div>
+            <Footer />
         </div>
         </WithLogout>
     )

src/pages/formPage.scss

@@ -5,6 +5,7 @@
         align-items: center;
         margin-top: 80px;
         margin-left: -32px;
+        cursor: pointer;
 
         &-img {
             cursor: pointer;
@@ -97,7 +98,7 @@
     }
     
     &__telegram {
-        width: 45%;
+        width: 35%;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -123,4 +124,53 @@
 .form-page + .logout-button{
     top: 0px !important;
     right: 2.5rem;
+}
+
+.form-page footer {
+    margin-top: 2.5rem !important;
+}
+
+@media (max-width: 991px) {
+    .form-page {
+        &__separator {
+            width: 20%
+        }
+
+        &__telegram {
+            width: 25%;
+        }
+    }
+}
+
+@media (max-width: 767px) {
+    .form-page {
+        &__interview {
+            flex-direction: column;
+
+            form {
+                margin-top: 48px;
+            }
+        }
+
+        &__separator {
+            display: none;
+        }
+
+        &__telegram {
+            margin-top: 5rem;
+            margin-bottom: 2rem;
+        }
+
+        &__arrow-img {
+            display: none;
+        }
+
+        form label {
+            line-height: initial;
+        }
+
+        &__selected img {
+            width: 100px;
+        }
+    }
 }