add logout in AuthBlock and fix layout

src/components/AuthBlock/AuthBlock.js

@@ -1,10 +1,73 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router";
+
+import { loading, selectIsLoading } from "@redux/loaderSlice";
+import { auth, selectAuth, setUserInfo } from "@redux/outstaffingSlice";
+import { setRole } from "@redux/roleSlice";
+
+import { apiRequest } from "@api/request";
+
+import { Loader } from "@components/Common/Loader/Loader";
+import ModalErrorLogin from "@components/Modal/ModalErrorLogin/ModalErrorLogin";
 
 import authImg from "assets/images/partnerProfile/authCandidateFormImg.png";
 
 import "./authBlock.scss";
 
 export const AuthBlock = ({ title, description, img, resetModal }) => {
+  const dispatch = useDispatch();
+  const ref = useRef();
+  const navigate = useNavigate();
+
+  const isAuth = useSelector(selectAuth);
+  const isLoading = useSelector(selectIsLoading);
+
+  const [error, setError] = useState(null);
+  const [modalError, setModalError] = useState(false);
+
+  useEffect(() => {
+    if (!localStorage.getItem("auth_token")) {
+      dispatch(auth(false));
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isAuth) {
+      navigate("/");
+    }
+  });
+
+  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) {
+          setError("Введены некорректные данные для входа");
+          setModalError(true);
+          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__wrapper">
       <div className="auth__info">
@@ -12,9 +75,9 @@ export const AuthBlock = ({ title, description, img, resetModal }) => {
         <img src={authImg} alt="img" />
         <p>{description}</p>
       </div>
-      <form className="auth__form">
+      <form ref={ref} className="auth__form">
         <label htmlFor="login">Ваш e-mail</label>
-        <input id="login" type="text" name="username" placeholder="E-mail" />
+        <input id="login" type="email" name="email" placeholder="E-mail" />
 
         <label htmlFor="password">Ваш пароль</label>
         <input
@@ -23,8 +86,27 @@ export const AuthBlock = ({ title, description, img, resetModal }) => {
           name="password"
           placeholder="Пароль"
         />
+
+        {error && (
+          <div className="auth-box__form-error">
+            <ModalErrorLogin
+              active={modalError}
+              setActive={setModalError}
+              title={error}
+            />
+          </div>
+        )}
+
         <div className="auth__form__buttons">
-          <button onClick={(e) => e.preventDefault()}>Войти</button>
+          <button
+            className="auth-box__form-btn"
+            onClick={(e) => {
+              e.preventDefault();
+              submitHandler();
+            }}
+          >
+            {isLoading ? <Loader /> : "Войти"}
+          </button>
           <span onClick={() => resetModal(true)}>Восстановить пароль</span>
         </div>
       </form>

src/components/AuthBlock/authBlock.scss

@@ -89,6 +89,7 @@
       color: #000000;
     }
 
+    &__buttons {
       button {
         background: #52b709;
         border-radius: 44px;
@@ -101,6 +102,7 @@
         color: white;
         height: 45px;
       }
+    }
 
     &__buttons {
       display: flex;

src/components/AuthBox/AuthBox.jsx

@@ -104,7 +104,6 @@ export const AuthBox = ({ title }) => {
             alt="eye"
           />
         </div>
-
         {error && (
           <div className="auth-box__form-error">
             <ModalErrorLogin
@@ -114,7 +113,6 @@ export const AuthBox = ({ title }) => {
             />
           </div>
         )}
-
         <div className="auth-box__form-buttons">
           <button
             className="auth-box__form-btn"

src/pages/RegistrationForCandidate/registationForCandidate.scss

@@ -167,6 +167,9 @@
     &__submit {
       width: 100%;
       margin-top: 10px;
+      align-items: center;
+      display: flex;
+      justify-content: center;
 
       button {
         border: none;