Added buttons change

src/components/AuthBox/AuthBox.js

@@ -1,29 +1,27 @@
-import React, {useEffect, useRef, useState} from 'react'
+import React, { useEffect, useRef, useState } from "react";
-import {Link, useNavigate} from 'react-router-dom'
+import { Link, useNavigate } from "react-router-dom";
-import {useDispatch, useSelector} from 'react-redux'
+import { useDispatch, useSelector } from "react-redux";
 
-import {Loader} from '../Loader/Loader'
+import { Loader } from "../Loader/Loader";
 import ErrorBoundary from "../../hoc/ErrorBoundary";
 
-import {auth, selectAuth, setUserInfo} from '../../redux/outstaffingSlice'
+import { auth, selectAuth, setUserInfo } from "../../redux/outstaffingSlice";
-import {loading} from '../../redux/loaderSlice'
+import { loading } from "../../redux/loaderSlice";
-import {setRole} from '../../redux/roleSlice'
+import { setRole } from "../../redux/roleSlice";
-import {selectIsLoading} from '../../redux/loaderSlice'
+import { selectIsLoading } from "../../redux/loaderSlice";
 
-import {apiRequest} from "../../api/request";
+import { apiRequest } from "../../api/request";
 
-import ellipse from '../../images/ellipse.png'
+import ellipse from "../../images/ellipse.png";
 
-import './authBox.scss'
+import "./authBox.scss";
 
-import Swal from 'sweetalert2'
+import Swal from "sweetalert2";
-import withReactContent from 'sweetalert2-react-content'
+import withReactContent from "sweetalert2-react-content";
 
 const SweetAlert = withReactContent(Swal);
 
-
+export const AuthBox = ({ title, altTitle, roleChangeLink }) => {
-export const AuthBox = ({title, altTitle, roleChangeLink}) => {
-
   const dispatch = useDispatch();
   const ref = useRef();
   const navigate = useNavigate();
@@ -35,125 +33,107 @@ export const AuthBox = ({title, altTitle, roleChangeLink}) => {
 
   const handleModalError = (error) => {
     SweetAlert.fire({
-      title: 'Ошибка',
+      title: "Ошибка",
-      text: error
+      text: error,
     });
 
-    setError(null)
+    setError(null);
-
   };
 
   useEffect(() => {
-    if (!localStorage.getItem('auth_token')) {
+    if (!localStorage.getItem("auth_token")) {
-      dispatch(auth(false))
+      dispatch(auth(false));
     }
   }, []);
 
   useEffect(() => {
     if (isAuth) {
-      navigate('/')
+      navigate("/");
     }
   });
 
-
   const submitHandler = () => {
-
     let formData = new FormData(ref.current);
     if (!isLoading) {
       dispatch(loading(true));
-      apiRequest('/user/login',
+      apiRequest("/user/login", {
-          {
+        method: "POST",
-            method: 'POST',
+        data: formData,
-            data: formData
+      }).then((res) => {
-          }).then((res) => {
-
         if (!res.access_token) {
-
+          setError("Некорректные данные для входа");
-          setError('Некорректные данные для входа');
+          dispatch(loading(false));
-          dispatch(loading(false))
-
         } else {
-
+          localStorage.setItem("auth_token", res.access_token);
-          localStorage.setItem('auth_token', res.access_token);
+          localStorage.setItem("id", res.id);
-          localStorage.setItem('id', res.id);
+          localStorage.setItem("cardId", res.card_id);
-          localStorage.setItem('cardId', res.card_id);
+          localStorage.setItem("role_status", res.status);
-          localStorage.setItem('role_status', res.status);
           localStorage.setItem(
-              'access_token_expired_at',
+            "access_token_expired_at",
-              res.access_token_expired_at
+            res.access_token_expired_at
           );
           dispatch(auth(true));
           dispatch(setUserInfo(res));
           dispatch(loading(false));
-          dispatch(setRole('ROLE_PARTNER'))
+          dispatch(setRole("ROLE_PARTNER"));
         }
-      })
+      });
     }
   };
 
   return (
-      <div className='auth-box'>
+    <div className="auth-box">
-        <h2 className='auth-box__header'>
+      <h2 className="auth-box__header">
-          Войти в <span>систему</span>
+        Войти в <span>систему</span>
-        </h2>
+      </h2>
-        <div className='auth-box__title'>
+      <div className="auth-box__title">
-          <img src={ellipse} alt=''/>
+        <img src={ellipse} alt="" />
-          <span>{title}</span>
+        <span>{title}</span>
-        </div>
-        <form ref={ref} className='auth-box__form'>
-          <label htmlFor='login'>Ваш логин:</label>
-          <input
-              id='login'
-              type='text'
-              name='username'
-              placeholder='Логин'
-          />
-
-          <label htmlFor='password'>Пароль:</label>
-          <input
-              id='password'
-              type='password'
-              name='password'
-              placeholder='Пароль'
-          />
-
-          {error && (
-              <div className='auth-box__form-error'>
-                <ErrorBoundary>
-
-
-                  {
-                    handleModalError(error)
-                  }
-                  {/*<SweetAlert*/}
-                  {/*    show={!!error}*/}
-                  {/*    title='Ошибка'*/}
-                  {/*    text={error}*/}
-                  {/*    onConfirm={() => setError(null)}*/}
-                  {/*/>*/}
-                </ErrorBoundary>
-              </div>
-          )}
-
-          <div className='auth-box__form-buttons'>
-            <button
-                className='auth-box__form-btn'
-                onClick={(e) => {
-                  e.preventDefault();
-                  submitHandler()
-                }}
-            >
-              {isLoading ? <Loader/> : 'Войти'}
-            </button>
-
-            <Link to={roleChangeLink}>
-              <button className='auth-box__form-btn--role auth-box__auth-link'>
-                {altTitle}
-              </button>
-            </Link>
-          </div>
-        </form>
-
       </div>
-  )
+      <form ref={ref} className="auth-box__form">
+        <label htmlFor="login">Ваш логин:</label>
+        <input id="login" type="text" name="username" placeholder="Логин" />
+
+        <label htmlFor="password">Пароль:</label>
+        <input
+          id="password"
+          type="password"
+          name="password"
+          placeholder="Пароль"
+        />
+
+        {error && (
+          <div className="auth-box__form-error">
+            <ErrorBoundary>
+              {handleModalError(error)}
+              {/*<SweetAlert*/}
+              {/*    show={!!error}*/}
+              {/*    title='Ошибка'*/}
+              {/*    text={error}*/}
+              {/*    onConfirm={() => setError(null)}*/}
+              {/*/>*/}
+            </ErrorBoundary>
+          </div>
+        )}
+
+        <div className="auth-box__form-buttons">
+          <button
+            className="auth-box__form-btn"
+            onClick={(e) => {
+              e.preventDefault();
+              submitHandler();
+            }}
+          >
+            {isLoading ? <Loader /> : "Войти"}
+          </button>
+
+          <Link to={roleChangeLink}>
+            <button className="auth-box__form-btn--role auth-box__auth-link">
+              {altTitle}
+            </button>
+          </Link>
+        </div>
+      </form>
+    </div>
+  );
 };

src/components/SliderWorkers/SliderWorkers.js

@@ -54,7 +54,7 @@ export const SliderWorkers = ({}) => {
             return (
               <div className="worker">
                 <img src={worker.avatar}></img>
-                <div>
+                <div className="worker-description">
                   <p>{worker.skils}</p>
                   <button className="worker__resume">Подробное резюме</button>
                 </div>

src/components/SliderWorkers/sliderWorkers.scss

@@ -115,5 +115,32 @@
         margin: 0;
       }
     }
+
+    .slick-next,
+    .slick-prev {
+      display: none !important;
+    }
+
+    .worker {
+      flex-direction: column;
+      margin: 0;
+      align-items: center;
+
+      img {
+        margin: 0;
+        width: 50%;
+      }
+
+      p {
+        margin-top: 10px;
+        text-align: center;
+      }
+
+      .worker-description {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+    }
   }
 }

src/pages/AuthForDevelopers/AuthForDevelopers.js

@@ -11,7 +11,7 @@ import vector from "../../images/Vector_Smart_Object.png";
 import vectorBlack from "../../images/Vector_Smart_Object_black.png";
 
 import { selectAuth } from "../../redux/outstaffingSlice";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { Footer } from "../../components/Footer/Footer";
 import SideBar from "../../components/SideBar/SideBar";
 import AuthHeader from "../../components/AuthHeader/AuthHeader";
@@ -42,6 +42,16 @@ const AuthForDevelopers = () => {
           alt=""
         />
         <div className="container">
+          <div className="change-mode">
+            <Link to={"/authdev"}>
+              <button className="change-mode__developers">
+                !Для разработчика
+              </button>
+            </Link>
+            <Link to={"/auth"}>
+              <button className="change-mode__partners">Для партнёров</button>
+            </Link>
+          </div>
           <div className="row">
             <div className="col-12 col-xl-6">
               <div className="auth-developers__box">

src/pages/AuthForDevelopers/authForDevelopers.scss

@@ -23,6 +23,32 @@
   right: -224px;
 }
 
+.change-mode {
+  display: flex;
+  justify-content: center;
+
+  &__partners {
+    width: 220px;
+    height: 50px;
+    background: #406128;
+    border-radius: 44px;
+    color: white;
+    font-size: 16px;
+    border: none;
+    margin-left: -40px;
+  }
+
+  &__developers {
+    width: 220px;
+    height: 50px;
+    background-color: #52b709;
+    border-radius: 44px;
+    color: white;
+    font-size: 16px;
+    border: none;
+  }
+}
+
 @media (max-width: 575.98px) {
   .auth-developers__vector,
   .auth-developers__vector-black {

src/pages/AuthForPartners/AuthForPartners.js

@@ -7,7 +7,7 @@ import vector from "../../images/Vector_Smart_Object.png";
 import vectorBlack from "../../images/Vector_Smart_Object_black.png";
 import { useSelector } from "react-redux";
 import { selectAuth } from "../../redux/outstaffingSlice";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 import { Footer } from "../../components/Footer/Footer";
 import { AuthBox } from "../../components/AuthBox/AuthBox";
@@ -37,6 +37,16 @@ const AuthForPartners = () => {
         <img className="auth-partners__vector" src={vector} alt="" />
         <img className="auth-partners__vector-black" src={vectorBlack} alt="" />
         <div className="container">
+          <div className="change-mode">
+            <Link to={"/authdev"}>
+              <button className="change-mode__developers">
+                Для разработчика
+              </button>
+            </Link>
+            <Link to={"/auth"}>
+              <button className="change-mode__partners">Для партнёров!</button>
+            </Link>
+          </div>
           <div className="row">
             <div className="col-12 col-xl-6">
               <div className="auth-partners__box">

src/pages/AuthForPartners/authForPartners.scss

@@ -49,6 +49,32 @@
   padding-bottom: 310px;
 }
 
+.change-mode {
+  display: flex;
+  justify-content: center;
+
+  &__partners {
+    width: 220px;
+    height: 50px;
+    background: #406128;
+    border-radius: 44px;
+    color: white;
+    font-size: 16px;
+    border: none;
+    margin-left: -40px;
+  }
+
+  &__developers {
+    width: 220px;
+    height: 50px;
+    background-color: #52b709;
+    border-radius: 44px;
+    color: white;
+    font-size: 16px;
+    border: none;
+  }
+}
+
 @media (max-width: 575.98px) {
   .auth-partners__info {
     max-width: 380px;