diff --git a/src/components/Modal/ModalRegistration/ModalRegistration.jsx b/src/components/Modal/ModalRegistration/ModalRegistration.jsx index e1f77724..1b426d1f 100644 --- a/src/components/Modal/ModalRegistration/ModalRegistration.jsx +++ b/src/components/Modal/ModalRegistration/ModalRegistration.jsx @@ -5,6 +5,7 @@ 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 anyMoment from "assets/icons/anyMoment.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,19 @@ export const ModalRegistration = ({ active, setActive }) => {

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

Войти

*/} {/*
*/} @@ -209,7 +226,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..1d4e16af 100644 --- a/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx +++ b/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx @@ -4,6 +4,7 @@ import { apiRequest } from "@api/request"; import { useNotification } from "@hooks/useNotification"; +import { Loader } from "@components/Common/Loader/Loader"; import ModalLayout from "@components/Common/ModalLayout/ModalLayout"; import arrow from "assets/icons/arrows/arrowCalendar.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,45 @@ 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 +130,37 @@ export const ModalResetPassword = ({ active, setActive }) => {
Введите email:
+ onChange={(e) => { setInputsValue((prevValue) => ({ ...prevValue, email: e.target.value, - })) - } - placeholder="Email" - /> - + placeholder="Email" + value={inputsValue.email} + className={inputsError.email ? "error" : ""} + /> + {inputsError.email && ( + Введите коректный email + )} + {loader ? ( + + ) : ( + + )} ) : (
@@ -127,34 +172,58 @@ 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; + } }