apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tracker Auth

Browse Source
This commit is contained in:
Николай Полтщук
2023-07-07 01:20:57 +03:00
parent c3ef01ee35
commit 49729ddd6b
8 changed files with 250 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@@ -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

BIN
src/assets/images/trackerAuthImg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

45
src/components/AuthBlock/AuthBlock.js Normal file
View File

@@ -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;

109
src/components/AuthBlock/authBlock.scss Normal file
View File

@@ -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;
}
}

89
src/pages/AuthForCandidate/AuthForCandidate.jsx
View File

@@ -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 = () => {
let formData = new FormData(ref.current);
if (!isLoading) {
dispatch(loading(true));
apiRequest("/user/login", {
method: "POST",
data: formData,
}).then((res) => {
if (!res.access_token) {
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"));
}
});
}
};
// 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) {
// 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-candidate">
<AuthHeader />
<div className="container">
<div className="auth__wrapper">
<div className="auth__info">
<h3>Войти, уже есть доступ</h3>
<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>
<AuthBlock title="Войти, уже есть доступ"
description="если вы получили доступ пройдя
2 шага для входа или хотите узнать
свои результаты в кабинете" />
<div className="auth-candidate__start">
<h2 className="auth-candidate__start__title">
Хочу в команду <span>Айти специалистов</span>

89
src/pages/AuthForCandidate/authForCandidate.scss
View File

@@ -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;

27
src/pages/TrackerAuth/TrackerAuth.js Normal file
View File

@@ -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>
);
};

35
src/pages/TrackerAuth/trackerAuth.scss Normal file
View File

@@ -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;
}
}
}
}