added server auth and protected routes
This commit is contained in:
kurpfish
@ -1,56 +1,83 @@
|
||||
import React from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { auth } from '../../redux/outstaffingSlice';
|
||||
import style from './AuthForDevelopers.module.css';
|
||||
import ellipse from '../../images/ellipse.png';
|
||||
import arrow from '../../images/arrow__login_page.png';
|
||||
import authImg from '../../images/auth_img.png';
|
||||
import cross from '../../images/cross.png';
|
||||
import text from '../../images/Body_Text.png';
|
||||
import align from '../../images/align-left.png';
|
||||
import phone from '../../images/phone.png';
|
||||
import telegram from '../../images/telegram.png';
|
||||
import vector from '../../images/Vector_Smart_Object.png';
|
||||
import vectorBlack from '../../images/Vector_Smart_Object_black.png';
|
||||
import React, { useState } from 'react'
|
||||
import { useDispatch } from 'react-redux'
|
||||
import { auth } from '../../redux/outstaffingSlice'
|
||||
import style from './AuthForDevelopers.module.css'
|
||||
import ellipse from '../../images/ellipse.png'
|
||||
import arrow from '../../images/arrow__login_page.png'
|
||||
import authImg from '../../images/auth_img.png'
|
||||
import cross from '../../images/cross.png'
|
||||
import text from '../../images/Body_Text.png'
|
||||
import align from '../../images/align-left.png'
|
||||
import phone from '../../images/phone.png'
|
||||
import telegram from '../../images/telegram.png'
|
||||
import vector from '../../images/Vector_Smart_Object.png'
|
||||
import vectorBlack from '../../images/Vector_Smart_Object_black.png'
|
||||
import { fetchAuth } from '../../server/server'
|
||||
|
||||
const AuthForDevelopers = () => {
|
||||
const dispatch = useDispatch();
|
||||
const dispatch = useDispatch()
|
||||
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
|
||||
return (
|
||||
<section className={style.developers}>
|
||||
<div className={style.developers__background}>
|
||||
<img className={style.vector} src={vector} alt="" />
|
||||
<img className={style.vectorBlack} src={vectorBlack} alt="" />
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12 col-xl-6">
|
||||
<img className={style.vector} src={vector} alt='' />
|
||||
<img className={style.vectorBlack} src={vectorBlack} alt='' />
|
||||
<div className='container'>
|
||||
<div className='row'>
|
||||
<div className='col-12 col-xl-6'>
|
||||
<div className={style.developers__box}>
|
||||
<h2 className={style.developers__title}>
|
||||
Войти в <span>систему</span>
|
||||
</h2>
|
||||
<div className={style.developers__partners}>
|
||||
<img src={ellipse} alt="" />
|
||||
<img src={ellipse} alt='' />
|
||||
<span>Для разработчиков</span>
|
||||
</div>
|
||||
<form className={style.developers__form}>
|
||||
<label htmlFor="login">Ваш логин:</label>
|
||||
<input id="login" type="text" placeholder="Логин" />
|
||||
<label htmlFor='login'>Ваш логин:</label>
|
||||
<input
|
||||
id='login'
|
||||
type='text'
|
||||
placeholder='Логин'
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
/>
|
||||
|
||||
<label htmlFor="password">Пароль:</label>
|
||||
<input id="password" type="password" placeholder="Пароль" />
|
||||
<label htmlFor='password'>Пароль:</label>
|
||||
<input
|
||||
id='password'
|
||||
type='password'
|
||||
placeholder='Пароль'
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
|
||||
<button className={style.form__btn} type="submit" onClick={() => dispatch(auth(true))}>
|
||||
<button
|
||||
className={style.form__btn}
|
||||
type='submit'
|
||||
onClick={() =>
|
||||
fetchAuth({
|
||||
username,
|
||||
password,
|
||||
dispatch: ()=> dispatch(auth(true))
|
||||
})
|
||||
}
|
||||
>
|
||||
Войти
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-2">
|
||||
<img className={style.developers__arrow} src={arrow} alt="" />
|
||||
<div className='col-xl-2'>
|
||||
<img className={style.developers__arrow} src={arrow} alt='' />
|
||||
</div>
|
||||
<div className="col-12 col-xl-4">
|
||||
<div className='col-12 col-xl-4'>
|
||||
<div className={style.developers__info}>
|
||||
<div className={style.developers__info__box}>
|
||||
<img src={authImg} alt="" />
|
||||
<img src={authImg} alt='' />
|
||||
<h3>
|
||||
Управление
|
||||
<br /> командой
|
||||
@ -60,7 +87,7 @@ const AuthForDevelopers = () => {
|
||||
<div className={style.developers__info__container}>
|
||||
<div className={style.developers__info__img}>
|
||||
<div>
|
||||
<img className="cross" src={cross} alt="" />
|
||||
<img className='cross' src={cross} alt='' />
|
||||
</div>
|
||||
<div>
|
||||
{/* <img className={style.specialists} src={specialists} alt="" /> */}
|
||||
@ -69,39 +96,44 @@ const AuthForDevelopers = () => {
|
||||
</div>
|
||||
|
||||
<ul className={style.info__list}>
|
||||
<li className={style.info__list__item}>Рабочее пространство</li>
|
||||
<li className={style.info__list__item}>Управление задачами</li>
|
||||
<li className={style.info__list__item}>
|
||||
Рабочее пространство
|
||||
</li>
|
||||
<li className={style.info__list__item}>
|
||||
Управление задачами
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<img className={style.img__text} src={text} alt="" />
|
||||
<img className={style.img__text} src={text} alt='' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-12 col-xl-7">
|
||||
<div className='row'>
|
||||
<div className='col-12 col-xl-7'>
|
||||
<div className={style.developers__footer__left}>
|
||||
<div className={style.footer__left__img}>
|
||||
<img src={align} alt="" />
|
||||
<img src={align} alt='' />
|
||||
</div>
|
||||
<div className={style.footer__left__sp}>
|
||||
<span>
|
||||
© Адвего — биржа контента №1. Копирайтинг, рерайтинг, переводы, работа на дому: поставщик
|
||||
уникального контента. 2021{' '}
|
||||
© Адвего — биржа контента №1. Копирайтинг, рерайтинг,
|
||||
переводы, работа на дому: поставщик уникального контента.
|
||||
2021{' '}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-4 col-xl-2">
|
||||
<div className='col-4 col-xl-2'>
|
||||
<div className={style.developers__footer__icon}>
|
||||
<img src={phone} alt="" />
|
||||
<img src={telegram} alt="" />
|
||||
<img src={phone} alt='' />
|
||||
<img src={telegram} alt='' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-8 col-xl-3">
|
||||
<div className='col-8 col-xl-3'>
|
||||
<div className={style.developers__footer__right}>
|
||||
<p className={style.phone}>+7 495 156 78 98</p>
|
||||
<p className={style.workingHours}>Будни с 9:00 до 21:00</p>
|
||||
@ -111,7 +143,7 @@ const AuthForDevelopers = () => {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default AuthForDevelopers;
|
||||
export default AuthForDevelopers
|
||||
|
||||
@ -19,7 +19,7 @@ const Calendar = () => {
|
||||
|
||||
const { name, skillsName } = candidateForCalendar;
|
||||
|
||||
const abbreviatedName = name.substring(0, name.lastIndexOf(' '));
|
||||
const abbreviatedName = name && name.substring(0, name.lastIndexOf(' '));
|
||||
|
||||
return (
|
||||
<section className={style.calendar}>
|
||||
|
||||
23
src/components/ProtectedRoute/ProtectedRoute.js
Normal file
23
src/components/ProtectedRoute/ProtectedRoute.js
Normal file
@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux'
|
||||
import { Route, Redirect } from 'react-router-dom';
|
||||
import { selectAuth } from '../../redux/outstaffingSlice';
|
||||
|
||||
export const ProtectedRoute = ({ component: Component, ...rest }) => {
|
||||
const isAuth = useSelector(selectAuth)
|
||||
const existingToken = localStorage.getItem('auth_token')
|
||||
const expiresAt = localStorage.getItem('access_token_expired_at')
|
||||
|
||||
const isTokenAlive = (existingToken && expiresAt && new Date(expiresAt).getTime() > (new Date()).getTime());
|
||||
|
||||
return (
|
||||
<Route
|
||||
{...rest}
|
||||
render={props =>
|
||||
( isAuth || isTokenAlive) ? (
|
||||
<Component {...props} />
|
||||
) : <Redirect to='/auth' />
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user