From b9cea4e7f781acf027325800b930e5199c0e5406 Mon Sep 17 00:00:00 2001 From: Mikola Date: Wed, 8 Nov 2023 18:27:42 +0300 Subject: [PATCH 1/3] registration --- src/api/request.js | 2 +- src/components/AuthBlock/AuthBlock.js | 2 +- src/components/AuthBox/AuthBox.jsx | 6 +- .../ModalRegistration/ModalRegistration.jsx | 46 ++++-- .../ModalResetPassword/ModalResetPassword.jsx | 150 ++++++++++++++++++ .../modalResetPassword.scss | 63 ++++++++ .../TicketFullScreen/TicketFullScreen.jsx | 4 +- .../Tracker/TrackerModal/trackerModal.scss | 2 +- 8 files changed, 253 insertions(+), 22 deletions(-) create mode 100644 src/components/Modal/ModalResetPassword/ModalResetPassword.jsx create mode 100644 src/components/Modal/ModalResetPassword/modalResetPassword.scss diff --git a/src/api/request.js b/src/api/request.js index 28ceaa74..aefaf36f 100644 --- a/src/api/request.js +++ b/src/api/request.js @@ -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)); diff --git a/src/components/AuthBlock/AuthBlock.js b/src/components/AuthBlock/AuthBlock.js index 81f12a6e..b3c0f862 100644 --- a/src/components/AuthBlock/AuthBlock.js +++ b/src/components/AuthBlock/AuthBlock.js @@ -31,7 +31,7 @@ export const AuthBlock = ({ title, description, img, resetModal }) => { > Войти - resetModal(true)}>Вспомнить пароль + resetModal(true)}>Восстановить пароль {img && authImg} diff --git a/src/components/AuthBox/AuthBox.jsx b/src/components/AuthBox/AuthBox.jsx index 1924dd00..ed5ca460 100644 --- a/src/components/AuthBox/AuthBox.jsx +++ b/src/components/AuthBox/AuthBox.jsx @@ -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 ? : "Войти"} - Вспомнить пароль - + setModalReset(true)}>Восстановить пароль +

diff --git a/src/components/Modal/ModalRegistration/ModalRegistration.jsx b/src/components/Modal/ModalRegistration/ModalRegistration.jsx index bbe925d3..4e03bb42 100644 --- a/src/components/Modal/ModalRegistration/ModalRegistration.jsx +++ b/src/components/Modal/ModalRegistration/ModalRegistration.jsx @@ -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,14 +59,22 @@ export const ModalRegistration = ({ active, setActive }) => { email: inputsValue.email, password: inputsValue.password, }, - }).then(() => { - setActive(false); - resetInputsValue(); - showNotification({ - show: true, - text: "Аккаунт успешно создан", - type: "success", - }); + }).then((data) => { + if (!data) { + showNotification({ + show: true, + text: "Аккаунт с таким логином или email уже существует", + type: "error", + }); + } else { + setActive(false); + resetInputsValue(); + showNotification({ + show: true, + 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" > Отправить diff --git a/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx b/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx new file mode 100644 index 00000000..1dfd8a75 --- /dev/null +++ b/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx @@ -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 ( + +

+ close setActive(false)} + /> +

Восстановление пароля

+ {!step ? +
+
Введите email:
+ + setInputsValue((prevValue) => ({ + ...prevValue, + email: e.target.value, + })) + } + placeholder="Email" + /> + +
+ : +
+ setStep(false)} className='resetPassword__email__arrow' /> +
Введите код подтверждения:
+ + setInputsValue((prevValue) => ({ + ...prevValue, + token: e.target.value, + })) + } + placeholder="token" + /> +
Введите новый пароль:
+ + setInputsValue((prevValue) => ({ + ...prevValue, + password: e.target.value, + })) + } + placeholder="password" + /> + +
+ } +
+ + ); +}; + +export default ModalResetPassword; diff --git a/src/components/Modal/ModalResetPassword/modalResetPassword.scss b/src/components/Modal/ModalResetPassword/modalResetPassword.scss new file mode 100644 index 00000000..ba0114db --- /dev/null +++ b/src/components/Modal/ModalResetPassword/modalResetPassword.scss @@ -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; + } +} diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx index b41f2df3..5a8bb530 100644 --- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx +++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx @@ -729,9 +729,9 @@ export const TicketFullScreen = () => { )} - +
-

Вернуться на проекты

+

Вернуться на проект

arrow
diff --git a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss index 2f7bd14e..d4c448f3 100644 --- a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss +++ b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss @@ -498,7 +498,7 @@ font-weight: 300; line-height: 18px; font-size: 15px; - margin-bottom: 17.5px; + margin-bottom: 27px; z-index: 100; } From b3a2851329234791f42cd2b6041da7627077db5c Mon Sep 17 00:00:00 2001 From: Mikola Date: Wed, 8 Nov 2023 18:27:58 +0300 Subject: [PATCH 2/3] registration --- src/components/AuthBox/AuthBox.jsx | 6 +- .../ModalResetPassword/ModalResetPassword.jsx | 277 +++++++++--------- .../TicketFullScreen/TicketFullScreen.jsx | 5 +- 3 files changed, 154 insertions(+), 134 deletions(-) diff --git a/src/components/AuthBox/AuthBox.jsx b/src/components/AuthBox/AuthBox.jsx index ed5ca460..f1e0cf67 100644 --- a/src/components/AuthBox/AuthBox.jsx +++ b/src/components/AuthBox/AuthBox.jsx @@ -28,7 +28,7 @@ export const AuthBox = ({ title }) => { const [error, setError] = useState(null); const [modalError, setModalError] = useState(false); - const [modalReset, setModalReset] = useState(false) + const [modalReset, setModalReset] = useState(false); const [modalReg, setModalReg] = useState(false); const [showPassword, setShowPassword] = useState(false); @@ -122,7 +122,9 @@ export const AuthBox = ({ title }) => { > {isLoading ? : "Войти"} - setModalReset(true)}>Восстановить пароль + setModalReset(true)}> + Восстановить пароль + diff --git a/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx b/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx index 1dfd8a75..baed044a 100644 --- a/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx +++ b/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx @@ -5,146 +5,161 @@ 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 [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 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", }); - }; - - 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 ( - -
- close setActive(false)} - /> -

Восстановление пароля

- {!step ? -
-
Введите email:
- - setInputsValue((prevValue) => ({ - ...prevValue, - email: e.target.value, - })) - } - placeholder="Email" - /> - -
- : -
- setStep(false)} className='resetPassword__email__arrow' /> -
Введите код подтверждения:
- - setInputsValue((prevValue) => ({ - ...prevValue, - token: e.target.value, - })) - } - placeholder="token" - /> -
Введите новый пароль:
- - setInputsValue((prevValue) => ({ - ...prevValue, - password: e.target.value, - })) - } - placeholder="password" - /> - -
- } -
- - ); + 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 ( + +
+ close setActive(false)} + /> +

Восстановление пароля

+ {!step ? ( +
+
Введите email:
+ + setInputsValue((prevValue) => ({ + ...prevValue, + email: e.target.value, + })) + } + placeholder="Email" + /> + +
+ ) : ( +
+ setStep(false)} + className="resetPassword__email__arrow" + /> +
Введите код подтверждения:
+ + setInputsValue((prevValue) => ({ + ...prevValue, + token: e.target.value, + })) + } + placeholder="token" + /> +
Введите новый пароль:
+ + setInputsValue((prevValue) => ({ + ...prevValue, + password: e.target.value, + })) + } + placeholder="password" + /> + +
+ )} +
+ + ); }; export default ModalResetPassword; diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx index 5a8bb530..a7b6813b 100644 --- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx +++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx @@ -729,7 +729,10 @@ export const TicketFullScreen = () => { )} - +

Вернуться на проект

arrow From bc00c72e7dcde79ad09df41f5db00a3e072d204a Mon Sep 17 00:00:00 2001 From: Mikola Date: Wed, 8 Nov 2023 22:04:18 +0300 Subject: [PATCH 3/3] registration --- .../Tracker/ModalTicket/modalTicket.scss | 47 +++++++++---------- 1 file changed, 23 insertions(+), 24 deletions(-) diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss index 810b9e16..a5a35a20 100644 --- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss +++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss @@ -20,7 +20,29 @@ border-radius: 8px; display: flex; flex-direction: row; - max-height: 750px; + max-height: 650px; + overflow-y: auto; + + + @media (max-width: 880px) { + max-height: none; + overflow-y: inherit; + } + + &::-webkit-scrollbar { + width: 3px; + border-radius: 10px; + } + + &::-webkit-scrollbar-thumb { + background: #cbd9f9; + border-radius: 20px; + } + + &::-webkit-scrollbar-track { + background: #c5c0c6; + border-radius: 20px; + } .content { position: relative; @@ -125,27 +147,6 @@ -webkit-box-orient: vertical; } - .taskDescription { - max-height: 150px; - overflow-y: auto; - padding-right: 10px; - - &::-webkit-scrollbar { - width: 4px; - border-radius: 10px; - } - - &::-webkit-scrollbar-thumb { - background: #cbd9f9; - border-radius: 10px; - } - - &::-webkit-scrollbar-track { - background: #c5c0c6; - border-radius: 10px; - } - } - .fullName { max-width: 800px; } @@ -157,8 +158,6 @@ .comments__list { display: flex; flex-direction: column; - max-height: 215px; - overflow: auto; &::-webkit-scrollbar { width: 4px;