add ModalAuth

src/components/AuthBox/AuthBox.jsx

@@ -10,7 +10,6 @@ import { apiRequest } from "@api/request";
 
 import { Loader } from "@components/Common/Loader/Loader";
 import ModalErrorLogin from "@components/Modal/ModalErrorLogin/ModalErrorLogin";
-import ModalRegistration from "@components/Modal/ModalRegistration/ModalRegistration";
 import ModalResetPassword from "@components/Modal/ModalResetPassword/ModalResetPassword";
 
 import authHead from "assets/icons/authHead.svg";
@@ -30,7 +29,6 @@ export const AuthBox = ({ title }) => {
   const [error, setError] = useState(null);
   const [modalError, setModalError] = useState(false);
   const [modalReset, setModalReset] = useState(false);
-  const [modalReg, setModalReg] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
 
   useEffect(() => {
@@ -128,19 +126,7 @@ export const AuthBox = ({ title }) => {
             Восстановить пароль
           </span>
           <ModalResetPassword active={modalReset} setActive={setModalReset} />
-          <ModalRegistration active={modalReg} setActive={setModalReg} />
         </div>
-        <p className="auth-box__registration">
-          У вас ещё нет аккаунта? &nbsp;
-          <span
-            onClick={(e) => {
-              e.preventDefault();
-              setModalReg(true);
-            }}
-          >
-            Зарегистрироваться
-          </span>
-        </p>
       </form>
     </div>
   );

src/components/Common/AuthHeader/AuthHeader.jsx

@@ -4,6 +4,7 @@ import { Link, NavLink } from "react-router-dom";
 
 import { BurgerButton } from "@components/BurgerMenu/burgerButton";
 import { BurgerMenu } from "@components/BurgerMenu/burgerMenu";
+import ModalAuth from "@components/Modal/ModalAuth/ModalAuth";
 import ModalRegistration from "@components/Modal/ModalRegistration/ModalRegistration";
 
 import authIcon from "assets/icons/authIcon.svg";
@@ -13,11 +14,13 @@ import "./authHeader.scss";
 export const AuthHeader = () => {
   const [actionMenu, setActionMenu] = useState(false);
   const [modalReg, setModalReg] = useState(false);
+  const [modalAuth, setModalAuth] = useState(false);
 
   return (
     <div className="auth-header">
       <BurgerMenu active={actionMenu} />
       <ModalRegistration active={modalReg} setActive={setModalReg} />
+      <ModalAuth active={modalAuth} setActive={setModalAuth} />
       <div className="auth-header__navigation">
         <div className="auth__logo">
           <div>
@@ -47,8 +50,14 @@ export const AuthHeader = () => {
           </ul>
         </div>
         <div className="auth__buttons">
-          <button className="signIn">
+          <button
-            <Link to="/auth">войти</Link>
+            className="signIn"
+            onClick={(e) => {
+              e.preventDefault();
+              setModalAuth(true);
+            }}
+          >
+            войти
           </button>
           <button
             className="signUp"

src/components/Modal/ModalAuth/ModalAuth.jsx

@@ -0,0 +1,124 @@
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+
+import { loading, selectIsLoading } from "@redux/loaderSlice";
+import { auth, setUserInfo } from "@redux/outstaffingSlice";
+import { setRole } from "@redux/roleSlice";
+
+import { apiRequest } from "@api/request";
+
+// import { useNotification } from "@hooks/useNotification";
+import BaseButton from "@components/Common/BaseButton/BaseButton";
+import { Loader } from "@components/Common/Loader/Loader";
+import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
+
+import "./modalAuth.scss";
+
+export const ModalAuth = ({ active, setActive }) => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const isLoading = useSelector(selectIsLoading);
+  const [error, setError] = useState(null);
+  const [modalError, setModalError] = useState(false);
+  const [formData, setFormData] = useState({
+    email: "",
+    password: ""
+  });
+
+  const closeModal = () => {
+    setActive(false);
+  };
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value
+    });
+  };
+
+  const submitHandler = () => {
+    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"));
+          navigate("/profile");
+        }
+      });
+    }
+  };
+
+  return (
+    <ModalLayout active={active} setActive={closeModal} styles={"auth"}>
+      <div className="auth-body__main">
+        <h2 className="auth-body__main-title">
+          Войти к <span>ITguild</span>
+        </h2>
+        <div className="input-body">
+          <div className="input-body__box">
+            <div className="input-container">
+              <h5>E-mail</h5>
+              <input
+                type="email"
+                name="email"
+                onChange={handleChange}
+                value={formData.email}
+                placeholder="Почта"
+                id="authEmail"
+              />
+            </div>
+          </div>
+
+          <div className="input-body__box">
+            <div className="input-container">
+              <h5>Пароль</h5>
+              <input
+                type="password"
+                name="password"
+                onChange={handleChange}
+                value={formData.password}
+                placeholder="Пароль"
+                id="authPassword"
+              />
+            </div>
+          </div>
+        </div>
+        <span className="error">{modalError ? error : ""}</span>
+        <div className="button-box">
+          <BaseButton
+            onClick={async (e) => {
+              e.preventDefault();
+              submitHandler(e);
+            }}
+            styles="button-box__submit"
+          >
+            {isLoading ? <Loader /> : "Войти"}
+          </BaseButton>
+        </div>
+      </div>
+      <span onClick={() => closeModal()} className="exit"></span>
+    </ModalLayout>
+  );
+};
+
+export default ModalAuth;

src/components/Modal/ModalAuth/modalAuth.scss

@@ -0,0 +1,136 @@
+.auth {
+  background: white;
+  padding: 40px 20px 40px 20px;
+  border: 1px solid #dde2e4;
+  border-radius: 8px;
+  width: 70%;
+  max-width: 900px;
+  font-family: "LabGrotesque", sans-serif;
+
+  &-body {
+    &__main {
+      width: 80%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      row-gap: 20px;
+
+      &-title {
+        font-weight: 500;
+        font-size: 35px;
+        line-height: 32px;
+        display: flex;
+        justify-content: center;
+        margin: 0;
+
+        @media (max-width: 960px) {
+          font-size: 25px;
+        }
+
+        @media (max-width: 703px) {
+          align-items: center;
+          font-size: 20px;
+        }
+
+        span {
+          color: #52b709;
+          margin-left: 10px;
+
+          @media (max-width: 703px) {
+            margin-left: 5px;
+          }
+        }
+      }
+
+      .input-body {
+        margin-top: 44px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100%;
+
+        @media (max-width: 703px) {
+          flex-direction: column;
+          align-items: center;
+          margin-top: 10px;
+        }
+
+        &__box {
+          display: flex;
+          flex-direction: column;
+          width: 47%;
+
+          @media (max-width: 703px) {
+            width: 85%;
+          }
+
+          h5 {
+            font-weight: 400;
+            font-size: 15px;
+            line-height: 18px;
+            margin: 0 0 10px 10px;
+          }
+
+          input {
+            height: 43px;
+            background: #eff2f7;
+            border-radius: 8px;
+            border: none;
+            margin-bottom: 5px;
+            font-size: 15px;
+            font-weight: 400;
+            line-height: 18px;
+            font-style: normal;
+            letter-spacing: normal;
+            text-align: left;
+            padding: 16px 15px 16px 22px;
+            outline: none;
+          }
+
+          .input-container {
+            margin: 0 0 20px 0;
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+          }
+        }
+      }
+
+      .error {
+        color: red;
+        font-size: 11px;
+        font-weight: 400;
+      }
+
+      .button-box {
+        display: flex;
+        flex-direction: row;
+        margin-top: 10px;
+
+        &__submit {
+          width: 174px;
+          height: 50px;
+          font-size: 18px;
+        }
+
+        .disable {
+          opacity: 0.5;
+          pointer-events: none;
+        }
+
+        h5 {
+          display: flex;
+          align-items: flex-end;
+          font-size: 16px;
+          line-height: 28px;
+
+          p {
+            color: #406128;
+            text-decoration: underline;
+            margin: 0 0 0 5px;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/Landing/Landing.jsx

@@ -5,6 +5,7 @@ import { Link, NavLink } from "react-router-dom";
 import { BurgerButton } from "@components/BurgerMenu/burgerButton";
 import { BurgerMenu } from "@components/BurgerMenu/burgerMenu";
 import { Footer } from "@components/Common/Footer/Footer";
+import ModalAuth from "@components/Modal/ModalAuth/ModalAuth";
 import ModalRegistration from "@components/Modal/ModalRegistration/ModalRegistration";
 
 import arrow from "assets/icons/arrows/arrowLanding.svg";
@@ -22,6 +23,7 @@ import "./landing.scss";
 
 export const Landing = () => {
   const [modalReg, setModalReg] = useState(false);
+  const [modalAuth, setModalAuth] = useState(false);
   const [menuActive, setMenuActive] = useState(false);
 
   const opportunities = [
@@ -61,14 +63,20 @@ export const Landing = () => {
   return (
     <section className="landing">
       <ModalRegistration active={modalReg} setActive={setModalReg} />
+      <ModalAuth active={modalAuth} setActive={setModalAuth} />
       <BurgerMenu active={menuActive} />
       <div className="landing__container">
         <div className="landing__head">
           <h2 className="head__logo">ITGUILD</h2>
-          <Link className="head__signIn" to="/auth">
+          <div
+            className="head__signIn"
+            onClick={(e) => {
+              e.preventDefault();
+              setModalAuth(true);
+            }}
+          >
             войти в систему
-          </Link>
+          </div>
-
           <div
             className="head__signUp"
             onClick={(e) => {

src/pages/Landing/landing.scss

@@ -59,6 +59,7 @@
         font-weight: 400;
         border-radius: 32px;
         z-index: 1;
+        cursor: pointer;
 
         @media (max-width: 431px) {
           display: none;