add ModalAuth
This commit is contained in:
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user