Fixed sidebar, AuthBox, and modalError

src/components/AuthBox/AuthBox.js

@@ -3,24 +3,20 @@ import { Link, useNavigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 
 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 ModalErrorLogin from "../../components/UI/ModalErrorLogin/ModalErrorLogin";
+
 import { apiRequest } from "../../api/request";
 
 import ellipse from "../../images/ellipse.png";
 
 import "./authBox.scss";
 
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-
-const SweetAlert = withReactContent(Swal);
-
 export const AuthBox = ({ title }) => {
   const dispatch = useDispatch();
   const ref = useRef();
@@ -30,15 +26,7 @@ export const AuthBox = ({ title }) => {
   const isLoading = useSelector(selectIsLoading);
 
   const [error, setError] = useState(null);
-
-  const handleModalError = (error) => {
-    SweetAlert.fire({
-      title: "Ошибка",
-      text: error,
-    });
-
-    setError(null);
-  };
+  const [modalError, setModalError] = useState(false);
 
   useEffect(() => {
     if (!localStorage.getItem("auth_token")) {
@@ -62,6 +50,7 @@ export const AuthBox = ({ title }) => {
       }).then((res) => {
         if (!res.access_token) {
           setError("Некорректные данные для входа");
+          setModalError(true);
           dispatch(loading(false));
         } else {
           localStorage.setItem("auth_token", res.access_token);
@@ -104,15 +93,11 @@ export const AuthBox = ({ title }) => {
 
         {error && (
           <div className="auth-box__form-error">
-            <ErrorBoundary>
-              {handleModalError(error)}
-              {/*<SweetAlert*/}
-              {/*    show={!!error}*/}
-              {/*    title='Ошибка'*/}
-              {/*    text={error}*/}
-              {/*    onConfirm={() => setError(null)}*/}
-              {/*/>*/}
-            </ErrorBoundary>
+            <ModalErrorLogin
+              active={modalError}
+              setActive={setModalError}
+              title={error}
+            />
           </div>
         )}
 
@@ -130,7 +115,9 @@ export const AuthBox = ({ title }) => {
           {/* TODO: при клике отправлять на форму/модалку/страницу регистрации */}
           <button
             className="auth-box__form-btn--role auth-box__auth-link"
-            onClick={(e) => e.preventDefault()}
+            onClick={(e) => {
+              e.preventDefault();
+            }}
           >
             Регистрация
           </button>

src/components/SideBar/sidebar.scss

@@ -1,6 +1,6 @@
 .auth-menu {
   z-index: 99;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 141px;

src/components/SliderWorkers/sliderWorkers.scss

@@ -144,7 +144,6 @@
 
       img {
         margin: 0;
-        width: 50%;
       }
 
       p {

src/components/UI/ModalErrorLogin/ModalErrorLogin.js

@@ -2,7 +2,7 @@ import React from "react";
 
 import "./modalErrorLogin.scss";
 
-export const ModalErrorLogin = ({ active, setActive }) => {
+export const ModalErrorLogin = ({ active, setActive, title }) => {
   return (
     <div
       className={active ? "modal-error active" : "modal-error"}
@@ -13,8 +13,14 @@ export const ModalErrorLogin = ({ active, setActive }) => {
         onClick={(e) => e.stopPropagation()}
       >
         <h2>Ошибка входа</h2>
-        <p>Введены некоректные данные для входа</p>
-        <button className="modal-error__content-button">
+        <p>{title}</p>
+        <button
+          className="modal-error__content-button"
+          onClick={(e) => {
+            e.preventDefault();
+            setActive(false);
+          }}
+        >
           Попробовать еще раз
         </button>
         <span onClick={() => setActive(false)}></span>

src/pages/AuthForDevelopers/AuthForDevelopers.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 
 import { AuthBox } from "../../components/AuthBox/AuthBox";