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

remove auth for dev

Browse Source
This commit is contained in:
Victor Batischev 2023-12-04 18:36:02 +03:00
parent 5bfc953ecc
commit d4eba820e0
11 changed files with 28 additions and 420 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.js
View File

@ -8,8 +8,7 @@ import {
import { getNotification } from "@redux/outstaffingSlice";
import AuthForPartners from "./pages/AuthForPartners/AuthForPartners";
import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers";
import Auth from "./pages/Auth/Auth";
import { TrackerIntro } from "./pages/TrackerIntro/TrackerIntro"
import { CompanyInfo } from "@pages/CompanyInfo/CompanyInfo";
import { TrackerAuth } from "@pages/TrackerAuth/TrackerAuth";
@ -54,16 +53,13 @@ import "./assets/global.scss";
import "./assets/fonts/stylesheet.css";
import "bootstrap/dist/css/bootstrap.min.css";
const App = () => {
const notification = useSelector(getNotification)
return (
<>
<Router>
<Routes>
<Route exact path="/authdev" element={<AuthForDevelopers />} />
<Route exact path="/auth" element={<AuthForPartners />} />
<Route exact path="/auth" element={<Auth />} />
<Route exact path="/tracker-intro" element={<TrackerIntro />} />
<Route exact path="/tracker-auth" element={<TrackerAuth />} />
<Route exact path="/tracker-registration" element={<TrackerRegistration />} />

4
src/components/AuthBox/AuthBox.jsx
View File

@ -63,7 +63,7 @@ export const AuthBox = ({ title }) => {
localStorage.setItem("role_status", res.status);
localStorage.setItem(
"access_token_expired_at",
res.access_token_expired_at,
res.access_token_expired_at
);
dispatch(auth(true));
dispatch(setUserInfo(res));
@ -79,9 +79,11 @@ export const AuthBox = ({ title }) => {
<h2 className="auth-box__header">
Вход <img src={authHead} alt="authImg" />
</h2>
{title && (
<div className="auth-box__title">
<span>{title}</span>
</div>
)}
<form ref={ref} className="auth-box__form">
<label htmlFor="login">Ваш email *</label>
<input id="login" type="text" name="username" placeholder="Логин" />

13
src/components/AuthBox/authBox.scss
View File

@ -15,7 +15,8 @@
letter-spacing: normal;
line-height: 77.81px;
text-align: left;
margin-top: 164px;
margin-top: 150px;
margin-bottom: 30px;
span {
color: #52b709;
@ -88,12 +89,12 @@
letter-spacing: normal;
line-height: 19.2px;
text-align: left;
margin-bottom: 25px;
margin-bottom: 10px;
color: #000000;
}
.inputWrapper {
width: 366px;
width: 100%;
position: relative;
.eye {
@ -203,9 +204,13 @@
color: #000000;
font-size: 17px;
font-weight: 400;
margin-top: 45px;
margin-top: 35px;
line-height: 32px;
@media (max-width: 700px) {
text-align: center;
}
span {
cursor: pointer;
color: #52b709;

2
src/components/Common/Footer/footer.scss
View File

@ -79,7 +79,7 @@ footer {
&__mail {
display: flex;
align-items: center;
column-gap: 13px;
column-gap: 5px;
a {
font-weight: 400;

7
src/components/LogoutButton/LogoutButton.jsx
View File

@ -1,9 +1,6 @@
import React, { useState } from "react";
import { useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { getRole } from "@redux/roleSlice";
import { useLogout } from "@hooks/useLogout";
import { Loader } from "@components/Common/Loader/Loader";
@ -12,8 +9,6 @@ import "./logoutButton.scss";
export const LogoutButton = () => {
const [isLoggingOut, setIsLoggingOut] = useState(false);
const userRole = useSelector(getRole);
const navigate = useNavigate();
const { logout } = useLogout();
@ -24,7 +19,7 @@ export const LogoutButton = () => {
setIsLoggingOut(true);
logout();
setIsLoggingOut(false);
navigate(userRole === "ROLE_DEV" ? "/authdev" : "/auth");
navigate("/auth");
}}
>
{isLoggingOut ? <Loader /> : "Выйти"}

4
src/components/ProfileHeader/ProfileHeader.jsx
View File

@ -3,7 +3,6 @@ import { useDispatch, useSelector } from "react-redux";
import { NavLink, useNavigate } from "react-router-dom";
import { auth, getProfileInfo, setProfileInfo } from "@redux/outstaffingSlice";
import { getRole } from "@redux/roleSlice";
import { apiRequest } from "@api/request";
@ -15,7 +14,6 @@ export const ProfileHeader = () => {
const navigate = useNavigate();
const dispatch = useDispatch();
const profileInfo = useSelector(getProfileInfo);
const userRole = useSelector(getRole);
const [user] = useState(
localStorage.getItem("role_status") === "18" ? "partner" : "developer",
);
@ -43,7 +41,7 @@ export const ProfileHeader = () => {
localStorage.clear();
dispatch(auth(false));
setIsLoggingOut(false);
navigate(userRole === "ROLE_DEV" ? "/authdev" : "/auth");
navigate("/auth");
};
return (

6
src/hooks/useLogout.js
View File

@ -1,18 +1,16 @@
import { useDispatch, useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { auth } from "../redux/outstaffingSlice";
import { getRole } from "../redux/roleSlice";
export const useLogout = () => {
const dispatch = useDispatch();
const userRole = useSelector(getRole);
const navigate = useNavigate();
const logout = () => {
localStorage.clear();
dispatch(auth(false));
navigate(userRole === "ROLE_DEV" ? "/authdev" : "/auth");
navigate("/auth");
};
return { logout };

32
src/pages/AuthForPartners/AuthForPartners.jsx → src/pages/Auth/Auth.jsx
View File

@ -1,18 +1,15 @@
import React, { useEffect } from "react";
import { useSelector } from "react-redux";
import { Link, useNavigate } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { selectAuth } from "@redux/outstaffingSlice";
import { scrollToForm } from "@utils/helper";
import { AuthBox } from "@components/AuthBox/AuthBox";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import SideBar from "@components/SideBar/SideBar";
import SliderWorkers from "@components/SliderWorkers/SliderWorkers";
import arrowBtn from "assets/icons/arrows/arrowRight.svg";
import arrow from "assets/icons/arrows/arrow__login_page.png";
import text from "assets/images/Body_Text.png";
import vector from "assets/images/Vector_Smart_Object.png";
@ -20,9 +17,9 @@ import vectorBlack from "assets/images/Vector_Smart_Object_black.png";
import authImg from "assets/images/auth_img.png";
import cross from "assets/images/cross.png";
import "./authForPartners.scss";
import "./auth.scss";
const AuthForPartners = () => {
const Auth = () => {
const isAuth = useSelector(selectAuth);
let navigate = useNavigate();
@ -46,28 +43,10 @@ const AuthForPartners = () => {
<img className="auth-partners__vector" src={vector} alt="" />
<img className="auth-partners__vector-black" src={vectorBlack} alt="" />
<div className="container">
<div className="change-mode">
<div className="change-mode__arrow" onClick={() => scrollToForm()}>
<img src={arrowBtn}></img>
</div>
<div className="buttons">
<Link to={"/authdev"}>
<button className="change-mode__developersForPart">
Для разработчиков
</button>
</Link>
<Link to={"/auth"}>
<button className="change-mode__partnersForPart">
Для партнёров
</button>
</Link>
</div>
</div>
<div className="row">
<div className="col-12 col-xl-6">
<div className="auth-partners__box">
<AuthBox title="для партнёров" />
<AuthBox />
</div>
</div>
<div className="col-xl-2">
@ -90,7 +69,6 @@ const AuthForPartners = () => {
<img className="cross" src={cross} alt="" />
</div>
<div>
{/* <img className='auth-specialists} src={specialists} alt="" /> */}
<p className="auth-partners__specialists">
300 Специалистов
</p>
@ -121,4 +99,4 @@ const AuthForPartners = () => {
);
};
export default AuthForPartners;
export default Auth;

2
src/pages/AuthForPartners/authForPartners.scss → src/pages/Auth/auth.scss
View File

@ -181,7 +181,7 @@
&__img-text {
position: absolute;
right: -68px;
bottom: -84px;
bottom: 0px;
}
@media (max-width: 575.98px) {

124
src/pages/AuthForDevelopers/AuthForDevelopers.jsx
View File

@ -1,124 +0,0 @@
import React, { useEffect } from "react";
import { useSelector } from "react-redux";
import { Link, useNavigate } from "react-router-dom";
import { selectAuth } from "@redux/outstaffingSlice";
import { scrollToForm } from "@utils/helper";
import { AuthBox } from "@components/AuthBox/AuthBox";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import SideBar from "@components/SideBar/SideBar";
import SliderWorkers from "@components/SliderWorkers/SliderWorkers";
import arrowBtn from "assets/icons/arrows/arrowRight.svg";
import arrow from "assets/icons/arrows/arrow__login_page.png";
import text from "assets/images/Body_Text.png";
import vector from "assets/images/Vector_Smart_Object.png";
import vectorBlack from "assets/images/Vector_Smart_Object_black.png";
import cross from "assets/images/cross.png";
import medium from "assets/images/medium_male_big.png";
import "./authForDevelopers.scss";
const AuthForDevelopers = () => {
const isAuth = useSelector(selectAuth);
let navigate = useNavigate();
const getToken = localStorage.getItem("auth_token");
useEffect(() => {
if (isAuth || getToken) {
navigate("/profile");
}
}, [getToken]);
return (
<section className="auth-developers">
<AuthHeader />
<SliderWorkers
title={"Свободные разработчики"}
titleInfo={"для Вашей команды"}
subTitle={true}
/>
<div className="auth-developers__background">
<img className="auth-developers__vector" src={vector} alt="" />
<img
className="auth-developers__vector-black"
src={vectorBlack}
alt="#"
/>
<div className="container">
{/* <div className="change-mode">
<div className="change-mode__arrow" onClick={() => scrollToForm()}>
<img src={arrowBtn}></img>
</div>
<div className="buttons">
<Link to={"/authdev"}>
<button className="change-mode__developersForDev">
Для разработчиков
</button>
</Link>
<Link to={"/auth"}>
<button className="change-mode__partnersForDev">
Для партнёров
</button>
</Link>
</div>
</div> */}
<div className="row">
<div className="col-12 col-xl-6">
<div className="auth-developers__box">
<AuthBox title="для разработчиков" />
</div>
</div>
<div className="col-xl-2">
<img className="auth-developers__arrow" src={arrow} alt="" />
</div>
<div className="col-12 col-xl-4">
<div className="auth-developers__info">
<div className="auth-developers__info-box">
<img src={medium} alt="" />
<h3>
Frontend разработчик,
<br /> Middle
</h3>
</div>
<div className="auth-developers__info-container">
<div className="auth-developers__info-img">
<div>
<img className="cross" src={cross} alt="" />
</div>
<div>
{/* <img className='auth-specialists} src={specialists} alt="" /> */}
<p className="auth-developers__specialists">
300 Специалистов
</p>
</div>
</div>
<ul className="auth-developers__info-list">
<li className="auth-developers__info-item">
Ruby on Rails
</li>
<li className="auth-developers__info-item">PHP</li>
<li className="auth-developers__info-item">Python</li>
<li className="auth-developers__info-item">Vue.js</li>
<li className="auth-developers__info-item">React. JS</li>
</ul>
</div>
<img className="auth-developers__img-text" src={text} alt="" />
</div>
</div>
</div>
<Footer />
</div>
</div>
<SideBar />
</section>
);
};
export default AuthForDevelopers;

240
src/pages/AuthForDevelopers/authForDevelopers.scss
View File

@ -1,240 +0,0 @@
.auth-developers {
font-family: "LabGrotesque", sans-serif;
overflow: hidden;
position: relative;
&__background {
background-color: #f1f1f1;
position: relative;
}
&__vector,
&__vector-black {
position: absolute;
}
&__vector {
top: -37px;
left: -285px;
}
&__vector-black {
top: 460px;
right: -224px;
@media (max-width: 1200px) {
top: 370px;
}
@media (max-width: 1024px) {
top: 180px;
}
}
&__arrow {
margin-top: 360px;
z-index: 99;
@media (max-width: 1200px) {
display: none;
}
}
@media (max-width: 575.98px) {
&__vector,
&__vector-black,
&__arrow {
display: none;
}
}
&__info {
background-color: #e1fccf;
margin-top: 70px;
max-width: 310px;
padding-top: 30px;
position: relative;
padding-bottom: 310px;
@media (max-width: 1200px) {
display: none;
}
}
&__info-box {
display: flex;
align-items: center;
}
@media (max-width: 575.98px) {
&__info {
max-width: 380px;
}
&__info-box {
flex-direction: column;
justify-content: center;
}
}
@media (max-width: 375.98px) {
&__info {
max-width: 340px;
}
}
&__info-box > img {
width: 165px;
height: 165px;
margin-left: -84px;
margin-right: 30px;
}
@media (max-width: 575.98px) {
&__info-box > img {
margin-left: 0px;
margin-right: 0px;
}
}
&__info-box > h3 {
font-family: "GT Eesti Pro Display";
font-size: 2em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
}
@media (max-width: 575.98px) {
&__info-box > h3 {
margin-top: 20px;
}
}
&__info-container {
display: flex;
position: relative;
}
&__info-img {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 28px;
margin-left: -40px;
}
&__info-img > div > img {
margin-bottom: 100px;
}
&__specialists {
font-family: "GT Eesti Pro Display";
font-size: 1.8em;
font-weight: 100;
font-style: normal;
letter-spacing: normal;
line-height: 26.12px;
text-align: left;
transform: rotate(-90deg);
text-transform: uppercase;
}
&__info-list {
list-style: none;
margin-top: 110px;
position: absolute;
right: -70px;
}
@media (max-width: 575.98px) {
&__info-list {
left: 34px;
}
}
&__info-item {
color: #1f1f1f;
font-family: "GT Eesti Pro Display";
font-size: 4em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 56.95px;
text-align: left;
text-decoration: underline;
text-transform: uppercase;
}
@media (max-width: 575.98px) {
&__info-item {
font-size: 2.6em;
}
}
&__img-text {
position: absolute;
right: -68px;
bottom: -84px;
}
@media (max-width: 575.98px) {
&__img-text {
right: 0px;
bottom: -40px;
}
}
////////////////////////////////////
&__auth-link {
display: block;
}
&__auth-link a {
display: block;
width: 100%;
height: 100%;
color: #fff;
}
@media (max-width: 766px) {
&__form-buttons {
flex-direction: column;
}
&__form-btn {
margin: 0;
margin-bottom: 1.5rem;
}
}
}
.change-mode {
&__partnersForDev {
background: #52b7098c;
color: #2d6505;
margin-left: -35px;
}
&__partnersForDev,
&__developersForDev {
width: 220px;
height: 50px;
border-radius: 44px;
font-size: 16px;
border: none;
}
&__developersForDev {
position: relative;
background: #406128;
color: white;
}
@media (max-width: 768px) {
&__partnersForDev {
margin: 15px 0 0 0;
}
}
}