146 lines
4.5 KiB
React
Raw Normal View History

2023-03-13 18:35:26 +03:00
import React, { useEffect, useRef, useState } from "react";
2023-05-24 13:49:09 +03:00
import { useDispatch, useSelector } from "react-redux";
2023-05-31 08:36:15 +03:00
import { useNavigate } from "react-router-dom";
2021-11-30 16:00:58 +02:00
2023-05-30 10:10:34 +03:00
import { loading, selectIsLoading } from "@redux/loaderSlice";
2023-05-31 08:36:15 +03:00
import { auth, selectAuth, setUserInfo } from "@redux/outstaffingSlice";
2023-05-30 10:10:34 +03:00
import { setRole } from "@redux/roleSlice";
import { apiRequest } from "@api/request";
2023-01-18 17:37:52 +03:00
2023-05-31 08:36:15 +03:00
import { Loader } from "@components/Common/Loader/Loader";
import ModalErrorLogin from "@components/Modal/ModalErrorLogin/ModalErrorLogin";
import ModalRegistration from "@components/Modal/ModalRegistration/ModalRegistration";
2023-11-08 18:27:42 +03:00
import ModalResetPassword from "@components/Modal/ModalResetPassword/ModalResetPassword";
2023-05-31 08:36:15 +03:00
2023-09-11 18:29:45 +03:00
import authHead from "assets/icons/authHead.svg";
import eyePassword from "assets/icons/passwordIcon.svg";
2021-11-30 16:00:58 +02:00
2023-03-13 18:35:26 +03:00
import "./authBox.scss";
2021-11-30 16:00:58 +02:00
2023-03-14 18:49:45 +03:00
export const AuthBox = ({ title }) => {
const dispatch = useDispatch();
const ref = useRef();
2023-01-18 17:37:52 +03:00
const navigate = useNavigate();
2023-01-18 17:37:52 +03:00
const isAuth = useSelector(selectAuth);
const isLoading = useSelector(selectIsLoading);
const [error, setError] = useState(null);
2023-03-22 15:33:12 +03:00
const [modalError, setModalError] = useState(false);
2023-11-08 18:27:58 +03:00
const [modalReset, setModalReset] = useState(false);
2023-03-28 20:42:18 +03:00
const [modalReg, setModalReg] = useState(false);
2023-09-11 18:29:45 +03:00
const [showPassword, setShowPassword] = useState(false);
2023-01-18 17:37:52 +03:00
useEffect(() => {
2023-03-13 18:35:26 +03:00
if (!localStorage.getItem("auth_token")) {
dispatch(auth(false));
}
}, []);
useEffect(() => {
if (isAuth) {
2023-03-13 18:35:26 +03:00
navigate("/");
}
});
const submitHandler = () => {
let formData = new FormData(ref.current);
if (!isLoading) {
dispatch(loading(true));
2023-03-13 18:35:26 +03:00
apiRequest("/user/login", {
method: "POST",
data: formData,
}).then((res) => {
if (!res.access_token) {
2023-12-04 18:00:12 +03:00
setError("Введены некорректные данные для входа");
2023-03-22 15:33:12 +03:00
setModalError(true);
2023-03-13 18:35:26 +03:00
dispatch(loading(false));
} else {
2023-03-13 18:35:26 +03:00
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(
2023-03-13 18:35:26 +03:00
"access_token_expired_at",
res.access_token_expired_at
);
dispatch(auth(true));
dispatch(setUserInfo(res));
dispatch(loading(false));
2023-03-13 18:35:26 +03:00
dispatch(setRole("ROLE_PARTNER"));
}
2023-03-13 18:35:26 +03:00
});
}
};
2022-06-01 19:59:54 +03:00
2021-11-30 16:00:58 +02:00
return (
2023-03-13 18:35:26 +03:00
<div className="auth-box">
<h2 className="auth-box__header">
2023-09-11 18:29:45 +03:00
Вход <img src={authHead} alt="authImg" />
2023-03-13 18:35:26 +03:00
</h2>
<div className="auth-box__title">
<span>{title}</span>
</div>
2023-03-13 18:35:26 +03:00
<form ref={ref} className="auth-box__form">
2023-09-11 18:28:56 +03:00
<label htmlFor="login">Ваш email *</label>
2023-03-13 18:35:26 +03:00
<input id="login" type="text" name="username" placeholder="Логин" />
2023-09-11 18:28:56 +03:00
<label htmlFor="password">Ваш пароль*</label>
2023-09-11 18:29:45 +03:00
<div className="inputWrapper">
2023-09-11 18:28:56 +03:00
<input
2023-09-11 18:29:45 +03:00
id="password"
type={showPassword ? "text" : "password"}
name="password"
placeholder="Пароль"
/>
<img
onClick={() => setShowPassword(!showPassword)}
className="eye"
src={eyePassword}
alt="eye"
2023-09-11 18:28:56 +03:00
/>
</div>
2023-03-13 18:35:26 +03:00
{error && (
<div className="auth-box__form-error">
2023-03-22 15:33:12 +03:00
<ModalErrorLogin
active={modalError}
setActive={setModalError}
title={error}
/>
2023-03-13 18:35:26 +03:00
</div>
)}
<div className="auth-box__form-buttons">
<button
className="auth-box__form-btn"
onClick={(e) => {
e.preventDefault();
submitHandler();
}}
>
{isLoading ? <Loader /> : "Войти"}
</button>
2023-11-08 18:27:58 +03:00
<span className="auth-box__reset" onClick={() => setModalReset(true)}>
Восстановить пароль
</span>
2023-11-08 18:27:42 +03:00
<ModalResetPassword active={modalReset} setActive={setModalReset} />
2023-03-28 20:42:18 +03:00
<ModalRegistration active={modalReg} setActive={setModalReg} />
2023-03-13 18:35:26 +03:00
</div>
2023-09-11 18:28:56 +03:00
<p className="auth-box__registration">
2023-12-04 18:00:12 +03:00
У вас ещё нет аккаунта? &nbsp;
2023-09-11 18:28:56 +03:00
<span
2023-09-11 18:29:45 +03:00
onClick={(e) => {
e.preventDefault();
setModalReg(true);
}}
2023-09-11 18:28:56 +03:00
>
Зарегистрироваться
</span>
</p>
2023-03-13 18:35:26 +03:00
</form>
</div>
);
};