Added buttons change

2023-03-13 18:35:26 +03:00 · 2023-03-13 18:35:26 +03:00 · 93ebf0ed83
commit 93ebf0ed83
parent b17386ba48
7 changed files with 189 additions and 110 deletions
--- a/src/components/AuthBox/AuthBox.js
+++ b/src/components/AuthBox/AuthBox.js
@ -1,29 +1,27 @@
-import React, {useEffect, useRef, useState} from 'react'
-import {Link, useNavigate} from 'react-router-dom'
-import {useDispatch, useSelector} from 'react-redux'
+import React, { useEffect, useRef, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+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 {loading} from '../../redux/loaderSlice'
-import {setRole} from '../../redux/roleSlice'
-import {selectIsLoading} from '../../redux/loaderSlice'
+import { auth, selectAuth, setUserInfo } from "../../redux/outstaffingSlice";
+import { loading } from "../../redux/loaderSlice";
+import { setRole } from "../../redux/roleSlice";
+import { selectIsLoading } from "../../redux/loaderSlice";

 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 withReactContent from 'sweetalert2-react-content'
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";

 const SweetAlert = withReactContent(Swal);

-
 export const AuthBox = ({ title, altTitle, roleChangeLink }) => {
-
  const dispatch = useDispatch();
  const ref = useRef();
  const navigate = useNavigate();
@ -35,96 +33,79 @@ export const AuthBox = ({title, altTitle, roleChangeLink}) => {

  const handleModalError = (error) => {
    SweetAlert.fire({
-      title: 'Ошибка',
-      text: error
+      title: "Ошибка",
+      text: error,
    });

-    setError(null)
-
+    setError(null);
  };

  useEffect(() => {
-    if (!localStorage.getItem('auth_token')) {
-      dispatch(auth(false))
+    if (!localStorage.getItem("auth_token")) {
+      dispatch(auth(false));
    }
  }, []);

  useEffect(() => {
    if (isAuth) {
-      navigate('/')
+      navigate("/");
    }
  });

-
  const submitHandler = () => {
-
    let formData = new FormData(ref.current);
    if (!isLoading) {
      dispatch(loading(true));
-      apiRequest('/user/login',
-          {
-            method: 'POST',
-            data: formData
+      apiRequest("/user/login", {
+        method: "POST",
+        data: formData,
      }).then((res) => {
-
        if (!res.access_token) {
-
-          setError('Некорректные данные для входа');
-          dispatch(loading(false))
-
+          setError("Некорректные данные для входа");
+          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("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',
+            "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'>
-        <h2 className='auth-box__header'>
+    <div className="auth-box">
+      <h2 className="auth-box__header">
        Войти в <span>систему</span>
      </h2>
-        <div className='auth-box__title'>
-          <img src={ellipse} alt=''/>
+      <div className="auth-box__title">
+        <img src={ellipse} alt="" />
        <span>{title}</span>
      </div>
-        <form ref={ref} className='auth-box__form'>
-          <label htmlFor='login'>Ваш логин:</label>
-          <input
-              id='login'
-              type='text'
-              name='username'
-              placeholder='Логин'
-          />
+      <form ref={ref} className="auth-box__form">
+        <label htmlFor="login">Ваш логин:</label>
+        <input id="login" type="text" name="username" placeholder="Логин" />

-          <label htmlFor='password'>Пароль:</label>
+        <label htmlFor="password">Пароль:</label>
        <input
-              id='password'
-              type='password'
-              name='password'
-              placeholder='Пароль'
+          id="password"
+          type="password"
+          name="password"
+          placeholder="Пароль"
        />

        {error && (
-              <div className='auth-box__form-error'>
+          <div className="auth-box__form-error">
            <ErrorBoundary>
-
-
-                  {
-                    handleModalError(error)
-                  }
+              {handleModalError(error)}
              {/*<SweetAlert*/}
              {/*    show={!!error}*/}
              {/*    title='Ошибка'*/}
@ -135,25 +116,24 @@ export const AuthBox = ({title, altTitle, roleChangeLink}) => {
          </div>
        )}

-          <div className='auth-box__form-buttons'>
+        <div className="auth-box__form-buttons">
          <button
-                className='auth-box__form-btn'
+            className="auth-box__form-btn"
            onClick={(e) => {
              e.preventDefault();
-                  submitHandler()
+              submitHandler();
            }}
          >
-              {isLoading ? <Loader/> : 'Войти'}
+            {isLoading ? <Loader /> : "Войти"}
          </button>

          <Link to={roleChangeLink}>
-              <button className='auth-box__form-btn--role auth-box__auth-link'>
+            <button className="auth-box__form-btn--role auth-box__auth-link">
              {altTitle}
            </button>
          </Link>
        </div>
      </form>
-
    </div>
-  )
+  );
 };
--- a/src/components/SliderWorkers/SliderWorkers.js
+++ b/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>
--- a/src/components/SliderWorkers/sliderWorkers.scss
+++ b/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;
+      }
+    }
  }
 }
--- a/src/pages/AuthForDevelopers/AuthForDevelopers.js
+++ b/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">
--- a/src/pages/AuthForDevelopers/authForDevelopers.scss
+++ b/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 {
--- a/src/pages/AuthForPartners/AuthForPartners.js
+++ b/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">
--- a/src/pages/AuthForPartners/authForPartners.scss
+++ b/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;