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:45 +03:00
parent 4301732c26
commit 185572cbf3
4 changed files with 140 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 (
<ModalLayout active={active} setActive={setActive} styles={"registration"}>
<ModalLayout active={active} setActive={closeModal} styles={"registration"}>
<div className="registration-body__left">
<h2>
Подключайтесь к <p>itguild.</p>
@ -120,6 +130,7 @@ export const ModalRegistration = ({ active, setActive }) => {
userName: e.target.value,
}));
}}
value={inputsValue.userName}
placeholder="Имя"
/>
{inputsError.name && <span>Минимум 2 символов</span>}
@ -140,6 +151,7 @@ export const ModalRegistration = ({ active, setActive }) => {
email: e.target.value,
}));
}}
value={inputsValue.email}
placeholder="Почта"
/>
{inputsError.email && <span>Введите коректный email</span>}
@ -165,6 +177,7 @@ export const ModalRegistration = ({ active, setActive }) => {
password: e.target.value,
}));
}}
value={inputsValue.password}
placeholder="Пароль"
/>
{inputsError.password && <span>Минимум 6 символов</span>}
@ -172,6 +185,8 @@ export const ModalRegistration = ({ active, setActive }) => {
</div>
</div>
<div className="button-box">
{loader ?
<Loader style={'green'} /> :
<BaseButton
onClick={(e) => {
e.preventDefault();
@ -181,6 +196,7 @@ export const ModalRegistration = ({ active, setActive }) => {
>
Отправить
</BaseButton>
}
{/*<h5>*/}
{/* У вас уже есть аккаунт? <p>Войти</p>*/}
{/*</h5>*/}
@ -209,7 +225,7 @@ export const ModalRegistration = ({ active, setActive }) => {
<p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p>
</div>
</div>
<span onClick={() => setActive(false)} className="exit"></span>
<span onClick={() => closeModal()} className="exit"></span>
</ModalLayout>
);
};

7
src/components/Modal/ModalRegistration/modalRegistration.scss
View File

@ -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;
}
}

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

@ -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,19 +74,33 @@ 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(() => {
}).then((data) => {
setLoader(false)
if (data.code === 0) {
showNotification({
show: true,
text: "Введите коректные данные",
type: "error",
});
} else {
setActive(false);
resetInputsValue();
showNotification({
@ -82,6 +108,7 @@ export const ModalResetPassword = ({ active, setActive }) => {
text: "Пароль изменён",
type: "success",
});
}
});
};
return (
@ -99,14 +126,24 @@ export const ModalResetPassword = ({ active, setActive }) => {
<h5>Введите email:</h5>
<input
type="email"
onChange={(e) =>
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" : ""}
/>
{inputsError.email && <span className='warningText'>Введите коректный email</span>}
{loader ?
<Loader style={'green'} /> :
<button
className="resetPassword__btn"
onClick={(e) => {
@ -116,6 +153,7 @@ export const ModalResetPassword = ({ active, setActive }) => {
>
Отправить
</button>
}
</div>
) : (
<div className="resetPassword__email">
@ -127,25 +165,42 @@ export const ModalResetPassword = ({ active, setActive }) => {
<h5>Введите код подтверждения:</h5>
<input
type="text"
onChange={(e) =>
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 && <span className='warningText'>Введите данные</span>}
<h5>Введите новый пароль:</h5>
<input
type="password"
onChange={(e) =>
onChange={(e) => {
setInputsValue((prevValue) => ({
...prevValue,
password: e.target.value,
}))
}
setInputsError({
email: false,
password: false,
token: false
});
}}
placeholder="password"
value={inputsValue.password}
className={inputsError.password ? "error" : ""}
/>
{inputsError.password && <span className='warningText'>Минимум 6 символов</span>}
{loader ? <Loader style={'green'} /> :
<button
className="resetPassword__btn"
onClick={(e) => {
@ -155,6 +210,7 @@ export const ModalResetPassword = ({ active, setActive }) => {
>
Отправить
</button>
}
</div>
)}
</div>

12
src/components/Modal/ModalResetPassword/modalResetPassword.scss
View File

@ -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;
}
}