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

registration

Browse Source
This commit is contained in:
Mikola 2023-11-08 18:27:42 +03:00
parent d342482c4d
commit b9cea4e7f7
8 changed files with 253 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/request.js
View File

@ -35,7 +35,7 @@ export const apiRequest = (
.then(
(response) =>
new Promise((resolve) => {
if (response.data.redirect || response.status === 401) {
if (response.data?.redirect || response.status === 401) {
window.location.replace("/auth");
localStorage.clear();
// dispatch(auth(false));

2
src/components/AuthBlock/AuthBlock.js
View File

@ -31,7 +31,7 @@ export const AuthBlock = ({ title, description, img, resetModal }) => {
>
Войти
</button>
<span onClick={() => resetModal(true)}>Вспомнить пароль</span>
<span onClick={() => resetModal(true)}>Восстановить пароль</span>
</div>
</form>
{img && <img src={img} alt="authImg" className="auth__img" />}

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

@ -11,6 +11,7 @@ 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";
import eyePassword from "assets/icons/passwordIcon.svg";
@ -27,6 +28,7 @@ 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);
@ -120,8 +122,8 @@ export const AuthBox = ({ title }) => {
>
{isLoading ? <Loader /> : "Войти"}
</button>
<span className="auth-box__reset">Вспомнить пароль</span>
<span className="auth-box__reset" onClick={() => setModalReset(true)}>Восстановить пароль</span>
<ModalResetPassword active={modalReset} setActive={setModalReset} />
<ModalRegistration active={modalReg} setActive={setModalReg} />
</div>
<p className="auth-box__registration">

32
src/components/Modal/ModalRegistration/ModalRegistration.jsx
View File

@ -38,6 +38,20 @@ export const ModalRegistration = ({ active, setActive }) => {
const { showNotification } = useNotification();
const submitHandler = () => {
if (!inputsValue.password || !inputsValue.userName || !inputsValue.email) {
return showNotification({
show: true,
text: "Введите коректные данные",
type: "error",
});
}
if (!validateEmail(inputsValue.email)) {
return showNotification({
show: true,
text: "Введите коректный email",
type: "error",
});
}
apiRequest("/register/sign-up", {
method: "POST",
data: {
@ -45,7 +59,14 @@ export const ModalRegistration = ({ active, setActive }) => {
email: inputsValue.email,
password: inputsValue.password,
},
}).then(() => {
}).then((data) => {
if (!data) {
showNotification({
show: true,
text: "Аккаунт с таким логином или email уже существует",
type: "error",
});
} else {
setActive(false);
resetInputsValue();
showNotification({
@ -53,6 +74,7 @@ export const ModalRegistration = ({ active, setActive }) => {
text: "Аккаунт успешно создан",
type: "success",
});
}
});
};
return (
@ -113,13 +135,7 @@ export const ModalRegistration = ({ active, setActive }) => {
e.preventDefault();
submitHandler();
}}
styles={
inputsValue.userName &&
validateEmail(inputsValue.email) &&
inputsValue.password
? "button-box__submit"
: "button-box__submit disable"
}
styles="button-box__submit"
>
Отправить
</BaseButton>

150
src/components/Modal/ModalResetPassword/ModalResetPassword.jsx Normal file
View File

@ -0,0 +1,150 @@
import React, { useState } from "react";
import { apiRequest } from "@api/request";
import { useNotification } from "@hooks/useNotification";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import arrow from "assets/icons/arrows/arrowCalendar.png";
import close from "assets/icons/close.png";
import "./modalResetPassword.scss";
export const ModalResetPassword = ({ active, setActive }) => {
const [step, setStep] = useState(false)
const [inputsValue, setInputsValue] = useState({
email: "",
token: "",
password: ""
});
const validateEmail = (email) => {
// регулярное выражение для проверки email
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
// возвращаем true, если email проходит проверку, и false, если нет
return re.test(email);
};
const resetInputsValue = () => {
setInputsValue({
email: "",
token: "",
password: "",
});
};
const { showNotification } = useNotification();
const submitHandler = () => {
if (!validateEmail(inputsValue.email)) {
return showNotification({
show: true,
text: "Введите коректный email",
type: "error",
});
}
apiRequest("/register/request-password-reset", {
method: "POST",
data: {
email: inputsValue.email,
},
}).then((data) => {
if (data) {
showNotification({
show: true,
text: "Письмо отправлено Вам на почту",
type: "success",
});
setStep(true)
}
});
};
const resetPassword = () => {
if (!inputsValue.password || !inputsValue.token) {
return showNotification({
show: true,
text: "Введите данные",
type: "error",
});
}
apiRequest("/register/reset-password", {
method: "POST",
data: {
token : inputsValue.token,
password: inputsValue.password
},
}).then(() => {
setActive(false)
resetInputsValue()
showNotification({
show: true,
text: "Пароль изменён",
type: "success",
});
});
};
return (
<ModalLayout active={active} setActive={setActive}>
<div className='resetPassword'>
<img
className='resetPassword__close'
src={close}
alt="close"
onClick={() => setActive(false)}
/>
<h3 className='resetPassword__title'>Восстановление пароля</h3>
{!step ?
<div className='resetPassword__email'>
<h5>Введите email:</h5>
<input
type="email"
onChange={(e) =>
setInputsValue((prevValue) => ({
...prevValue,
email: e.target.value,
}))
}
placeholder="Email"
/>
<button className='resetPassword__btn' onClick={(e) => {
e.preventDefault()
submitHandler()
}}>Отправить</button>
</div>
:
<div className='resetPassword__email'>
<img src={arrow} onClick={() => setStep(false)} className='resetPassword__email__arrow' />
<h5>Введите код подтверждения:</h5>
<input
type="text"
onChange={(e) =>
setInputsValue((prevValue) => ({
...prevValue,
token: e.target.value,
}))
}
placeholder="token"
/>
<h5>Введите новый пароль:</h5>
<input
type="password"
onChange={(e) =>
setInputsValue((prevValue) => ({
...prevValue,
password: e.target.value,
}))
}
placeholder="password"
/>
<button className='resetPassword__btn' onClick={(e) => {
e.preventDefault()
resetPassword()
}}>Отправить</button>
</div>
}
</div>
</ModalLayout>
);
};
export default ModalResetPassword;

63
src/components/Modal/ModalResetPassword/modalResetPassword.scss Normal file
View File

@ -0,0 +1,63 @@
.resetPassword {
width: 370px;
position: relative;
&__close {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: -10px;
right: -10px;
}
&__title {
font-size: 20px;
text-align: center;
margin-bottom: 15px;
}
&__email {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
h5 {
font-size: 16px;
margin-bottom: 10px;
}
input {
padding: 10px !important;
height: 40px !important;
margin-bottom: 15px !important;
}
&__arrow {
position: absolute;
width: 20px;
transform: rotate(180deg);
left: -10px;
top: -55px;
cursor: pointer;
}
}
&__btn {
width: 100px;
height: 35px;
border-radius: 44px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%), linear-gradient(36deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 47%, rgba(255, 255, 255, 0.17) 50%, rgba(255, 255, 255, 0) 100%);
color: #ffffff;
font-weight: 500;
font-size: 15px;
letter-spacing: normal;
line-height: 32px;
text-align: center;
border: 2px solid #6aaf5c;
transition: 0.3s;
}
}

4
src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
View File

@ -729,9 +729,9 @@ export const TicketFullScreen = () => {
</div>
)}
</div>
<Link to={`/profile/tracker`} className="link">
<Link to={`/tracker/project/${taskInfo.project_id}`} className="link">
<div className="tasks__head__back">
<p>Вернуться на проекты</p>
<p>Вернуться на проект</p>
<img src={arrow} alt="arrow" />
</div>
</Link>

2
src/components/Modal/Tracker/TrackerModal/trackerModal.scss
View File

@ -498,7 +498,7 @@
font-weight: 300;
line-height: 18px;
font-size: 15px;
margin-bottom: 17.5px;
margin-bottom: 27px;
z-index: 100;
}