add ModalAuth
This commit is contained in:
parent
0a8ed604a0
commit
9771d2a602
@ -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">
|
||||
У вас ещё нет аккаунта?
|
||||
<span
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setModalReg(true);
|
||||
}}
|
||||
>
|
||||
Зарегистрироваться
|
||||
</span>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -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">
|
||||
<Link to="/auth">войти</Link>
|
||||
<button
|
||||
className="signIn"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setModalAuth(true);
|
||||
}}
|
||||
>
|
||||
войти
|
||||
</button>
|
||||
<button
|
||||
className="signUp"
|
||||
|
||||
124
src/components/Modal/ModalAuth/ModalAuth.jsx
Normal file
124
src/components/Modal/ModalAuth/ModalAuth.jsx
Normal file
@ -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;
|
||||
136
src/components/Modal/ModalAuth/modalAuth.scss
Normal file
136
src/components/Modal/ModalAuth/modalAuth.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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) => {
|
||||
|
||||
@ -59,6 +59,7 @@
|
||||
font-weight: 400;
|
||||
border-radius: 32px;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
display: none;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user