Tracker Auth

src/App.js

@@ -9,6 +9,7 @@ import {
 import AuthForPartners from "./pages/AuthForPartners/AuthForPartners";
 import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers";
 import { TrackerIntro } from "./pages/TrackerIntro/TrackerIntro"
+import { TrackerAuth } from "@pages/TrackerAuth/TrackerAuth";
 import Home from "./pages/Home/Home";
 import Candidate from "./components/Candidate/Candidate";
 import Calendar from "./components/Calendar/Calendar";
@@ -54,6 +55,7 @@ const App = () => {
           <Route exact path="/authdev" element={<AuthForDevelopers />} />
           <Route exact path="/auth" element={<AuthForPartners />} />
           <Route exact path="/tracker-intro" element={<TrackerIntro />} />
+          <Route exact path="/tracker-auth" element={<TrackerAuth />} />
 
           <Route exact path="/worker/:id" element={<FreeDevelopers />} />
           <Route

src/components/AuthBlock/AuthBlock.js

@@ -0,0 +1,45 @@
+import React from "react";
+import authImg from "assets/images/partnerProfile/authCandidateFormImg.png";
+
+import './authBlock.scss'
+
+export const AuthBlock = ({ title, description, img }) => {
+    return (
+        <div className="auth__wrapper">
+            <div className="auth__info">
+                {title && <h3>{title}</h3>}
+                <img src={authImg} alt="img" />
+                <p>
+                    {description}
+                </p>
+            </div>
+            <form className="auth__form">
+                <label htmlFor="login">Ваш email *</label>
+                <input id="login" type="text" name="username" placeholder="Email" />
+
+                <label htmlFor="password">Ваш пароль*</label>
+                <input
+                    id="password"
+                    type="password"
+                    name="password"
+                    placeholder="Пароль"
+                />
+                <div className='auth__form__buttons'>
+                    <button
+                        onClick={(e) => {
+                            e.preventDefault();
+                        }}
+                    >
+                            Войти
+                    </button>
+                    <span>
+                        Вспомнить пароль
+                    </span>
+                </div>
+            </form>
+            {img && <img src={img} alt='authImg' className='auth__img' />}
+        </div>
+    );
+};
+
+export default AuthBlock;

src/components/AuthBlock/authBlock.scss

@@ -0,0 +1,109 @@
+.auth {
+  &__wrapper {
+    background: #ffffff;
+    border-radius: 12px;
+    padding: 50px 0 35px 56px;
+    margin-top: 40px;
+    display: flex;
+    position: relative;
+
+    @media (max-width: 1024px) {
+      margin-top: 100px;
+    }
+
+    @media (max-width: 870px) {
+      flex-direction: column;
+      padding: 25px;
+    }
+  }
+
+  &__info {
+    margin-right: 115px;
+    h3 {
+      font-weight: 500;
+      font-size: 30px;
+      line-height: 32px;
+      margin-bottom: 20px;
+    }
+
+    p {
+      max-width: 310px;
+      margin-top: 17px;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 30px;
+
+      @media (max-width: 870px) {
+        max-width: none;
+        margin-bottom: 15px;
+      }
+    }
+
+    @media (max-width: 870px) {
+      margin-right: 0;
+    }
+  }
+
+  &__form {
+    display: flex;
+    flex-direction: column;
+
+    input {
+      margin-bottom: 30px;
+      background: #eff2f7;
+      border-radius: 8px;
+      min-width: 300px;
+      width: 100%;
+      padding: 8px 12px;
+      border: none;
+      outline: none;
+      font-weight: 400;
+      font-size: 15px;
+      line-height: 18px;
+
+      @media (max-width: 870px) {
+        max-width: 350px;
+      }
+    }
+
+    label {
+      margin-bottom: 15px;
+      font-weight: 400;
+      font-size: 15px;
+      line-height: 18px;
+      color: #000000;
+    }
+
+    button {
+      background: #52b709;
+      border-radius: 44px;
+      max-width: 130px;
+      width: 100%;
+      border: none;
+      font-weight: 500;
+      font-size: 18px;
+      line-height: 32px;
+      color: white;
+      height: 45px;
+    }
+
+    &__buttons {
+      display: flex;
+      column-gap: 20px;
+      align-items: center;
+
+      span {
+        cursor: pointer;
+        text-decoration-line: underline;
+        font-size: 13px;
+        font-weight: 500;
+      }
+    }
+  }
+
+  &__img {
+    position: absolute;
+    right: 10px;
+    top: -90px;
+  }
+}

src/pages/AuthForCandidate/AuthForCandidate.jsx

@@ -13,6 +13,7 @@ import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
 import { Footer } from "@components/Common/Footer/Footer";
 import SideBar from "@components/SideBar/SideBar";
 import StepsForCandidate from "@components/StepsForCandidate/StepsForCandidate";
+import AuthBlock from "@components/AuthBlock/AuthBlock";
 
 import arrowBtn from "assets/icons/arrows/arrowRight.svg";
 import AdminImg from "assets/images/partnerProfile/PersonalAdmin.svg";
@@ -112,68 +113,42 @@ export const AuthForCandidate = () => {
     }
   }, [getToken]);
 
-  const submitHandler = () => {
+  // const submitHandler = () => {
-    let formData = new FormData(ref.current);
+  //   let formData = new FormData(ref.current);
-    if (!isLoading) {
+  //   if (!isLoading) {
-      dispatch(loading(true));
+  //     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) {
+  //       if (!res.access_token) {
-          dispatch(loading(false));
+  //         dispatch(loading(false));
-        } else {
+  //       } 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(
+  //         localStorage.setItem(
-            "access_token_expired_at",
+  //           "access_token_expired_at",
-            res.access_token_expired_at
+  //           res.access_token_expired_at
-          );
+  //         );
-          dispatch(auth(true));
+  //         dispatch(auth(true));
-          dispatch(setUserInfo(res));
+  //         dispatch(setUserInfo(res));
-          dispatch(loading(false));
+  //         dispatch(loading(false));
-          dispatch(setRole("ROLE_PARTNER"));
+  //         dispatch(setRole("ROLE_PARTNER"));
-        }
+  //       }
-      });
+  //     });
-    }
+  //   }
-  };
+  // };
 
   return (
     <div className="auth-candidate">
       <AuthHeader />
       <div className="container">
-        <div className="auth__wrapper">
+        <AuthBlock title="Войти, уже есть доступ"
-          <div className="auth__info">
+                   description="если вы получили доступ пройдя
-            <h3>Войти, уже есть доступ</h3>
+                   2 шага для входа или хотите узнать
-            <img src={authImg} alt="img" />
+                  свои результаты в кабинете" />
-            <p>
-              если вы получили доступ пройдя 2 шага для входа или хотите узнать
-              свои результаты в кабинете
-            </p>
-          </div>
-          <form ref={ref} className="auth__form">
-            <label htmlFor="login">Ваш email *</label>
-            <input id="login" type="text" name="username" placeholder="Email" />
-
-            <label htmlFor="password">Ваш пароль*</label>
-            <input
-              id="password"
-              type="password"
-              name="password"
-              placeholder="Пароль"
-            />
-            <button
-              onClick={(e) => {
-                e.preventDefault();
-                submitHandler();
-              }}
-            >
-              Войти
-            </button>
-          </form>
-        </div>
         <div className="auth-candidate__start">
           <h2 className="auth-candidate__start__title">
             Хочу в команду <span>Айти специалистов</span>

src/pages/AuthForCandidate/authForCandidate.scss

@@ -4,95 +4,6 @@
   position: relative;
   background-color: #f1f1f1;
 
-  .auth {
-    &__wrapper {
-      background: #ffffff;
-      border-radius: 12px;
-      padding: 50px 0 35px 56px;
-      margin-top: 40px;
-      display: flex;
-
-      @media (max-width: 1024px) {
-        margin-top: 100px;
-      }
-
-      @media (max-width: 870px) {
-        flex-direction: column;
-        padding: 25px;
-      }
-    }
-
-    &__info {
-      margin-right: 115px;
-      h3 {
-        font-weight: 500;
-        font-size: 30px;
-        line-height: 32px;
-        margin-bottom: 20px;
-      }
-
-      p {
-        max-width: 310px;
-        margin-top: 17px;
-        font-weight: 400;
-        font-size: 16px;
-        line-height: 30px;
-
-        @media (max-width: 870px) {
-          max-width: none;
-          margin-bottom: 15px;
-        }
-      }
-
-      @media (max-width: 870px) {
-        margin-right: 0;
-      }
-    }
-
-    &__form {
-      display: flex;
-      flex-direction: column;
-
-      input {
-        margin-bottom: 30px;
-        background: #eff2f7;
-        border-radius: 8px;
-        min-width: 300px;
-        width: 100%;
-        padding: 8px 12px;
-        border: none;
-        outline: none;
-        font-weight: 400;
-        font-size: 15px;
-        line-height: 18px;
-
-        @media (max-width: 870px) {
-          max-width: 350px;
-        }
-      }
-
-      label {
-        margin-bottom: 15px;
-        font-weight: 400;
-        font-size: 15px;
-        line-height: 18px;
-        color: #000000;
-      }
-
-      button {
-        background: #52b709;
-        border-radius: 44px;
-        max-width: 130px;
-        border: none;
-        font-weight: 500;
-        font-size: 18px;
-        line-height: 32px;
-        color: white;
-        height: 45px;
-      }
-    }
-  }
-
   &__start {
     margin-top: 60px;
     display: flex;

src/pages/TrackerAuth/TrackerAuth.js

@@ -0,0 +1,27 @@
+import React from "react";
+
+import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
+import { Footer } from "@components/Common/Footer/Footer";
+import SideBar from "@components/SideBar/SideBar";
+import AuthBlock from "@components/AuthBlock/AuthBlock";
+
+import arrowInfo from "assets/icons/trackerIntroInfo.svg";
+import trackerAuthImg from "assets/images/trackerAuthImg.png"
+
+import "./trackerAuth.scss";
+
+export const TrackerAuth = () => {
+    return (
+        <div className="trackerAuth">
+            <AuthHeader />
+            <SideBar />
+            <div className="trackerAuth__content">
+                <div className="container">
+                    <h1 className="trackerAuth__title">Войдите в свое <span>рабочее пространство<img src={arrowInfo} alt='arrow' /></span></h1>
+                    <AuthBlock description="Создавайте и редактируйте задачи и проекты вместе с другими участниками команды." img={trackerAuthImg} />
+                </div>
+                <Footer />
+            </div>
+        </div>
+    );
+};

src/pages/TrackerAuth/trackerAuth.scss

@@ -0,0 +1,35 @@
+.trackerAuth {
+  &__content {
+    font-family: "LabGrotesque", sans-serif;
+    background-color: #f1f1f1;
+    color: #000000;
+    padding: 50px 0 0;
+    min-height: 100vh;
+
+    @media (max-width: 1375px) {
+      padding-top: 100px;
+    }
+
+    .container {
+      padding-bottom: 30px;
+    }
+  }
+
+  &__title {
+    font-size: 30px;
+    font-weight: 500;
+    margin-bottom: 46px;
+    color: #000000;
+    span {
+      color: #52B709;
+      position: relative;
+      img {
+        position: absolute;
+        bottom: -15px;
+        right: 10px;
+        max-width: 300px;
+
+      }
+    }
+  }
+}