From 185572cbf31441aa4973730c726101bf009b371a Mon Sep 17 00:00:00 2001 From: Mikola Date: Thu, 23 Nov 2023 16:48:45 +0300 Subject: [PATCH 1/2] registration and reset warning text --- .../ModalRegistration/ModalRegistration.jsx | 58 +++++---- .../ModalRegistration/modalRegistration.scss | 7 +- .../ModalResetPassword/ModalResetPassword.jsx | 116 +++++++++++++----- .../modalResetPassword.scss | 12 +- 4 files changed, 140 insertions(+), 53 deletions(-) diff --git a/src/components/Modal/ModalRegistration/ModalRegistration.jsx b/src/components/Modal/ModalRegistration/ModalRegistration.jsx index e1f77724..41907352 100644 --- a/src/components/Modal/ModalRegistration/ModalRegistration.jsx +++ b/src/components/Modal/ModalRegistration/ModalRegistration.jsx @@ -6,6 +6,7 @@ import { useNotification } from "@hooks/useNotification"; import BaseButton from "@components/Common/BaseButton/BaseButton"; import ModalLayout from "@components/Common/ModalLayout/ModalLayout"; +import { Loader } from "@components/Common/Loader/Loader"; import anyMoment from "assets/icons/anyMoment.svg"; import doc from "assets/icons/doc.svg"; @@ -26,6 +27,8 @@ export const ModalRegistration = ({ active, setActive }) => { password: false, }); + const [loader, setLoader] = useState(false) + const validateEmail = (email) => { // регулярное выражение для проверки email const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; @@ -34,14 +37,6 @@ export const ModalRegistration = ({ active, setActive }) => { return re.test(email); }; - const resetInputsValue = () => { - setInputsValue({ - userName: "", - email: "", - password: "", - }); - }; - const { showNotification } = useNotification(); const validateForm = () => { @@ -67,6 +62,7 @@ export const ModalRegistration = ({ active, setActive }) => { if (validateForm()) { return; } + setLoader(true) apiRequest("/register/sign-up", { method: "POST", data: { @@ -75,6 +71,7 @@ export const ModalRegistration = ({ active, setActive }) => { password: inputsValue.password, }, }).then((data) => { + setLoader(false) if (!data) { showNotification({ show: true, @@ -82,8 +79,7 @@ export const ModalRegistration = ({ active, setActive }) => { type: "error", }); } else { - setActive(false); - resetInputsValue(); + closeModal() showNotification({ show: true, text: "Аккаунт успешно создан", @@ -92,8 +88,22 @@ export const ModalRegistration = ({ active, setActive }) => { } }); }; + + const closeModal = () => { + setInputsValue({ + userName: "", + email: "", + password: "", + }); + setInputsError({ + name: false, + email: false, + password: false, + }); + setActive(false); + } return ( - +

Подключайтесь к

itguild.

@@ -120,6 +130,7 @@ export const ModalRegistration = ({ active, setActive }) => { userName: e.target.value, })); }} + value={inputsValue.userName} placeholder="Имя" /> {inputsError.name && Минимум 2 символов} @@ -140,6 +151,7 @@ export const ModalRegistration = ({ active, setActive }) => { email: e.target.value, })); }} + value={inputsValue.email} placeholder="Почта" /> {inputsError.email && Введите коректный email} @@ -165,6 +177,7 @@ export const ModalRegistration = ({ active, setActive }) => { password: e.target.value, })); }} + value={inputsValue.password} placeholder="Пароль" /> {inputsError.password && Минимум 6 символов} @@ -172,15 +185,18 @@ export const ModalRegistration = ({ active, setActive }) => {

- { - e.preventDefault(); - submitHandler(); - }} - styles="button-box__submit" - > - Отправить - + {loader ? + : + { + e.preventDefault(); + submitHandler(); + }} + styles="button-box__submit" + > + Отправить + + } {/*
*/} {/* У вас уже есть аккаунт?

Войти

*/} {/*
*/} @@ -209,7 +225,7 @@ export const ModalRegistration = ({ active, setActive }) => {

Напишите нам в Телеграм. Мы с удовольствием ответим!

- setActive(false)} className="exit"> + closeModal()} className="exit"> ); }; diff --git a/src/components/Modal/ModalRegistration/modalRegistration.scss b/src/components/Modal/ModalRegistration/modalRegistration.scss index e8621e9d..a86d4eea 100644 --- a/src/components/Modal/ModalRegistration/modalRegistration.scss +++ b/src/components/Modal/ModalRegistration/modalRegistration.scss @@ -87,7 +87,7 @@ &__submit { width: 174px; - height: 46px; + height: 50px; font-size: 18px; margin-right: 55px; } @@ -145,4 +145,9 @@ } } } + + .loader { + justify-content: start; + left: 80px; + } } diff --git a/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx b/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx index baed044a..f373c66f 100644 --- a/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx +++ b/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx @@ -5,6 +5,7 @@ import { apiRequest } from "@api/request"; import { useNotification } from "@hooks/useNotification"; import ModalLayout from "@components/Common/ModalLayout/ModalLayout"; +import { Loader } from "@components/Common/Loader/Loader"; import arrow from "assets/icons/arrows/arrowCalendar.png"; import close from "assets/icons/close.png"; @@ -19,6 +20,12 @@ export const ModalResetPassword = ({ active, setActive }) => { password: "", }); + const [inputsError, setInputsError] = useState({ + email: false, + password: false, + token: false + }); + const validateEmail = (email) => { // регулярное выражение для проверки email const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; @@ -27,6 +34,8 @@ export const ModalResetPassword = ({ active, setActive }) => { return re.test(email); }; + const [loader, setLoader] = useState(false) + const resetInputsValue = () => { setInputsValue({ email: "", @@ -38,18 +47,21 @@ export const ModalResetPassword = ({ active, setActive }) => { const { showNotification } = useNotification(); const submitHandler = () => { if (!validateEmail(inputsValue.email)) { + setInputsError((prevValue) => ({ ...prevValue, email: true })); return showNotification({ show: true, text: "Введите коректный email", type: "error", }); } + setLoader(true) apiRequest("/register/request-password-reset", { method: "POST", data: { email: inputsValue.email, }, }).then((data) => { + setLoader(false) if (data) { showNotification({ show: true, @@ -62,26 +74,41 @@ export const ModalResetPassword = ({ active, setActive }) => { }; const resetPassword = () => { if (!inputsValue.password || !inputsValue.token) { + setInputsError((prevValue) => ({ ...prevValue, password: true, token: true })); return showNotification({ show: true, text: "Введите данные", type: "error", }); } + if (inputsValue.password.length < 6) { + setInputsError((prevValue) => ({ ...prevValue, password: true })); + return + } + setLoader(true) apiRequest("/register/reset-password", { method: "POST", data: { token: inputsValue.token, password: inputsValue.password, }, - }).then(() => { - setActive(false); - resetInputsValue(); - showNotification({ - show: true, - text: "Пароль изменён", - type: "success", - }); + }).then((data) => { + setLoader(false) + if (data.code === 0) { + showNotification({ + show: true, + text: "Введите коректные данные", + type: "error", + }); + } else { + setActive(false); + resetInputsValue(); + showNotification({ + show: true, + text: "Пароль изменён", + type: "success", + }); + } }); }; return ( @@ -99,23 +126,34 @@ export const ModalResetPassword = ({ active, setActive }) => {
Введите email:
+ onChange={(e) => { setInputsValue((prevValue) => ({ ...prevValue, email: e.target.value, })) - } + setInputsError({ + email: false, + password: false, + token: false + }); + }} placeholder="Email" + value={inputsValue.email} + className={inputsError.email ? "error" : ""} /> - + > + Отправить + + } ) : (
@@ -127,34 +165,52 @@ export const ModalResetPassword = ({ active, setActive }) => {
Введите код подтверждения:
+ onChange={(e) => { + setInputsError({ + email: false, + password: false, + token: false + }); setInputsValue((prevValue) => ({ ...prevValue, token: e.target.value, })) - } + }} + value={inputsValue.token} + className={inputsError.token ? "error" : ""} placeholder="token" /> + {inputsError.token && Введите данные}
Введите новый пароль:
+ onChange={(e) => { setInputsValue((prevValue) => ({ ...prevValue, password: e.target.value, })) - } - placeholder="password" - /> - + placeholder="password" + value={inputsValue.password} + className={inputsError.password ? "error" : ""} + /> + {inputsError.password && Минимум 6 символов} + {loader ? : + + }
)} diff --git a/src/components/Modal/ModalResetPassword/modalResetPassword.scss b/src/components/Modal/ModalResetPassword/modalResetPassword.scss index ba0114db..acd2349f 100644 --- a/src/components/Modal/ModalResetPassword/modalResetPassword.scss +++ b/src/components/Modal/ModalResetPassword/modalResetPassword.scss @@ -29,7 +29,7 @@ input { padding: 10px !important; height: 40px !important; - margin-bottom: 15px !important; + margin-bottom: 5px !important; } &__arrow { @@ -60,4 +60,14 @@ border: 2px solid #6aaf5c; transition: 0.3s; } + + .error { + border: 1px solid red; + } + + .warningText { + color: red; + font-size: 12px; + margin-bottom: 10px; + } } From 3696ccb02c01296ae85b91b6793c4cfc7035a8b4 Mon Sep 17 00:00:00 2001 From: Mikola Date: Thu, 23 Nov 2023 16:48:56 +0300 Subject: [PATCH 2/2] registration and reset warning text --- .../ModalRegistration/ModalRegistration.jsx | 29 +++--- .../ModalResetPassword/ModalResetPassword.jsx | 89 +++++++++++-------- 2 files changed, 66 insertions(+), 52 deletions(-) diff --git a/src/components/Modal/ModalRegistration/ModalRegistration.jsx b/src/components/Modal/ModalRegistration/ModalRegistration.jsx index 41907352..1b426d1f 100644 --- a/src/components/Modal/ModalRegistration/ModalRegistration.jsx +++ b/src/components/Modal/ModalRegistration/ModalRegistration.jsx @@ -5,8 +5,8 @@ import { apiRequest } from "@api/request"; import { useNotification } from "@hooks/useNotification"; import BaseButton from "@components/Common/BaseButton/BaseButton"; -import ModalLayout from "@components/Common/ModalLayout/ModalLayout"; import { Loader } from "@components/Common/Loader/Loader"; +import ModalLayout from "@components/Common/ModalLayout/ModalLayout"; import anyMoment from "assets/icons/anyMoment.svg"; import doc from "assets/icons/doc.svg"; @@ -27,7 +27,7 @@ export const ModalRegistration = ({ active, setActive }) => { password: false, }); - const [loader, setLoader] = useState(false) + const [loader, setLoader] = useState(false); const validateEmail = (email) => { // регулярное выражение для проверки email @@ -62,7 +62,7 @@ export const ModalRegistration = ({ active, setActive }) => { if (validateForm()) { return; } - setLoader(true) + setLoader(true); apiRequest("/register/sign-up", { method: "POST", data: { @@ -71,7 +71,7 @@ export const ModalRegistration = ({ active, setActive }) => { password: inputsValue.password, }, }).then((data) => { - setLoader(false) + setLoader(false); if (!data) { showNotification({ show: true, @@ -79,7 +79,7 @@ export const ModalRegistration = ({ active, setActive }) => { type: "error", }); } else { - closeModal() + closeModal(); showNotification({ show: true, text: "Аккаунт успешно создан", @@ -101,7 +101,7 @@ export const ModalRegistration = ({ active, setActive }) => { password: false, }); setActive(false); - } + }; return (
@@ -185,18 +185,19 @@ export const ModalRegistration = ({ active, setActive }) => {
- {loader ? - : + {loader ? ( + + ) : ( { - e.preventDefault(); - submitHandler(); - }} - styles="button-box__submit" + onClick={(e) => { + e.preventDefault(); + submitHandler(); + }} + styles="button-box__submit" > Отправить - } + )} {/*
*/} {/* У вас уже есть аккаунт?

Войти

*/} {/*
*/} diff --git a/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx b/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx index f373c66f..1d4e16af 100644 --- a/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx +++ b/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx @@ -4,8 +4,8 @@ import { apiRequest } from "@api/request"; import { useNotification } from "@hooks/useNotification"; -import ModalLayout from "@components/Common/ModalLayout/ModalLayout"; import { Loader } from "@components/Common/Loader/Loader"; +import ModalLayout from "@components/Common/ModalLayout/ModalLayout"; import arrow from "assets/icons/arrows/arrowCalendar.png"; import close from "assets/icons/close.png"; @@ -23,7 +23,7 @@ export const ModalResetPassword = ({ active, setActive }) => { const [inputsError, setInputsError] = useState({ email: false, password: false, - token: false + token: false, }); const validateEmail = (email) => { @@ -34,7 +34,7 @@ export const ModalResetPassword = ({ active, setActive }) => { return re.test(email); }; - const [loader, setLoader] = useState(false) + const [loader, setLoader] = useState(false); const resetInputsValue = () => { setInputsValue({ @@ -54,14 +54,14 @@ export const ModalResetPassword = ({ active, setActive }) => { type: "error", }); } - setLoader(true) + setLoader(true); apiRequest("/register/request-password-reset", { method: "POST", data: { email: inputsValue.email, }, }).then((data) => { - setLoader(false) + setLoader(false); if (data) { showNotification({ show: true, @@ -74,7 +74,11 @@ export const ModalResetPassword = ({ active, setActive }) => { }; const resetPassword = () => { if (!inputsValue.password || !inputsValue.token) { - setInputsError((prevValue) => ({ ...prevValue, password: true, token: true })); + setInputsError((prevValue) => ({ + ...prevValue, + password: true, + token: true, + })); return showNotification({ show: true, text: "Введите данные", @@ -83,9 +87,9 @@ export const ModalResetPassword = ({ active, setActive }) => { } if (inputsValue.password.length < 6) { setInputsError((prevValue) => ({ ...prevValue, password: true })); - return + return; } - setLoader(true) + setLoader(true); apiRequest("/register/reset-password", { method: "POST", data: { @@ -93,7 +97,7 @@ export const ModalResetPassword = ({ active, setActive }) => { password: inputsValue.password, }, }).then((data) => { - setLoader(false) + setLoader(false); if (data.code === 0) { showNotification({ show: true, @@ -130,30 +134,33 @@ export const ModalResetPassword = ({ active, setActive }) => { setInputsValue((prevValue) => ({ ...prevValue, email: e.target.value, - })) + })); setInputsError({ email: false, password: false, - token: false + token: false, }); }} placeholder="Email" value={inputsValue.email} className={inputsError.email ? "error" : ""} /> - {inputsError.email && Введите коректный email} - {loader ? - : - - } + + )}
) : (
@@ -169,18 +176,20 @@ export const ModalResetPassword = ({ active, setActive }) => { setInputsError({ email: false, password: false, - token: false + token: false, }); setInputsValue((prevValue) => ({ ...prevValue, token: e.target.value, - })) + })); }} value={inputsValue.token} className={inputsError.token ? "error" : ""} placeholder="token" /> - {inputsError.token && Введите данные} + {inputsError.token && ( + Введите данные + )}
Введите новый пароль:
{ setInputsValue((prevValue) => ({ ...prevValue, password: e.target.value, - })) + })); setInputsError({ email: false, password: false, - token: false + token: false, }); }} placeholder="password" value={inputsValue.password} className={inputsError.password ? "error" : ""} /> - {inputsError.password && Минимум 6 символов} - {loader ? : - - } + {inputsError.password && ( + Минимум 6 символов + )} + {loader ? ( + + ) : ( + + )}
)}