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

registration and reset warning text

Browse Source
This commit is contained in:
Mikola 2023-11-23 16:48:56 +03:00
parent 185572cbf3
commit 3696ccb02c
2 changed files with 66 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,8 +5,8 @@ import { apiRequest } from "@api/request";
import { useNotification } from "@hooks/useNotification"; import { useNotification } from "@hooks/useNotification";
import BaseButton from "@components/Common/BaseButton/BaseButton"; import BaseButton from "@components/Common/BaseButton/BaseButton";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import { Loader } from "@components/Common/Loader/Loader"; import { Loader } from "@components/Common/Loader/Loader";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import anyMoment from "assets/icons/anyMoment.svg"; import anyMoment from "assets/icons/anyMoment.svg";
import doc from "assets/icons/doc.svg"; import doc from "assets/icons/doc.svg";
@ -27,7 +27,7 @@ export const ModalRegistration = ({ active, setActive }) => {
password: false, password: false,
}); });
const [loader, setLoader] = useState(false) const [loader, setLoader] = useState(false);
const validateEmail = (email) => { const validateEmail = (email) => {
// регулярное выражение для проверки email // регулярное выражение для проверки email
@ -62,7 +62,7 @@ export const ModalRegistration = ({ active, setActive }) => {
if (validateForm()) { if (validateForm()) {
return; return;
} }
setLoader(true) setLoader(true);
apiRequest("/register/sign-up", { apiRequest("/register/sign-up", {
method: "POST", method: "POST",
data: { data: {
@ -71,7 +71,7 @@ export const ModalRegistration = ({ active, setActive }) => {
password: inputsValue.password, password: inputsValue.password,
}, },
}).then((data) => { }).then((data) => {
setLoader(false) setLoader(false);
if (!data) { if (!data) {
showNotification({ showNotification({
show: true, show: true,
@ -79,7 +79,7 @@ export const ModalRegistration = ({ active, setActive }) => {
type: "error", type: "error",
}); });
} else { } else {
closeModal() closeModal();
showNotification({ showNotification({
show: true, show: true,
text: "Аккаунт успешно создан", text: "Аккаунт успешно создан",
@ -101,7 +101,7 @@ export const ModalRegistration = ({ active, setActive }) => {
password: false, password: false,
}); });
setActive(false); setActive(false);
} };
return ( return (
<ModalLayout active={active} setActive={closeModal} styles={"registration"}> <ModalLayout active={active} setActive={closeModal} styles={"registration"}>
<div className="registration-body__left"> <div className="registration-body__left">
@ -185,18 +185,19 @@ export const ModalRegistration = ({ active, setActive }) => {
</div> </div>
</div> </div>
<div className="button-box"> <div className="button-box">
{loader ? {loader ? (
<Loader style={'green'} /> : <Loader style={"green"} />
) : (
<BaseButton <BaseButton
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
submitHandler(); submitHandler();
}} }}
styles="button-box__submit" styles="button-box__submit"
> >
Отправить Отправить
</BaseButton> </BaseButton>
} )}
{/*<h5>*/} {/*<h5>*/}
{/* У вас уже есть аккаунт? <p>Войти</p>*/} {/* У вас уже есть аккаунт? <p>Войти</p>*/}
{/*</h5>*/} {/*</h5>*/}

89
src/components/Modal/ModalResetPassword/ModalResetPassword.jsx
View File

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