Merge branch 'main' of https://github.com/apuc/outstaffing-react into fixed-pages

This commit is contained in:
MaxOvs19 2023-11-24 17:25:58 +03:00
commit 40f64371f6
4 changed files with 161 additions and 60 deletions

View File

@ -5,6 +5,7 @@ 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 { Loader } from "@components/Common/Loader/Loader";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout"; import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import anyMoment from "assets/icons/anyMoment.svg"; import anyMoment from "assets/icons/anyMoment.svg";
@ -26,6 +27,8 @@ export const ModalRegistration = ({ active, setActive }) => {
password: false, password: false,
}); });
const [loader, setLoader] = useState(false);
const validateEmail = (email) => { const validateEmail = (email) => {
// регулярное выражение для проверки email // регулярное выражение для проверки email
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@ -34,14 +37,6 @@ export const ModalRegistration = ({ active, setActive }) => {
return re.test(email); return re.test(email);
}; };
const resetInputsValue = () => {
setInputsValue({
userName: "",
email: "",
password: "",
});
};
const { showNotification } = useNotification(); const { showNotification } = useNotification();
const validateForm = () => { const validateForm = () => {
@ -67,6 +62,7 @@ export const ModalRegistration = ({ active, setActive }) => {
if (validateForm()) { if (validateForm()) {
return; return;
} }
setLoader(true);
apiRequest("/register/sign-up", { apiRequest("/register/sign-up", {
method: "POST", method: "POST",
data: { data: {
@ -75,6 +71,7 @@ export const ModalRegistration = ({ active, setActive }) => {
password: inputsValue.password, password: inputsValue.password,
}, },
}).then((data) => { }).then((data) => {
setLoader(false);
if (!data) { if (!data) {
showNotification({ showNotification({
show: true, show: true,
@ -82,8 +79,7 @@ export const ModalRegistration = ({ active, setActive }) => {
type: "error", type: "error",
}); });
} else { } else {
setActive(false); closeModal();
resetInputsValue();
showNotification({ showNotification({
show: true, show: true,
text: "Аккаунт успешно создан", 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 ( return (
<ModalLayout active={active} setActive={setActive} styles={"registration"}> <ModalLayout active={active} setActive={closeModal} styles={"registration"}>
<div className="registration-body__left"> <div className="registration-body__left">
<h2> <h2>
Подключайтесь к <p>itguild.</p> Подключайтесь к <p>itguild.</p>
@ -119,6 +129,7 @@ export const ModalRegistration = ({ active, setActive }) => {
userName: e.target.value, userName: e.target.value,
})); }));
}} }}
value={inputsValue.userName}
placeholder="Имя" placeholder="Имя"
/> />
{inputsError.name && <span>Минимум 2 символов</span>} {inputsError.name && <span>Минимум 2 символов</span>}
@ -139,6 +150,7 @@ export const ModalRegistration = ({ active, setActive }) => {
email: e.target.value, email: e.target.value,
})); }));
}} }}
value={inputsValue.email}
placeholder="Почта" placeholder="Почта"
/> />
{inputsError.email && <span>Введите коректный email</span>} {inputsError.email && <span>Введите коректный email</span>}
@ -164,6 +176,7 @@ export const ModalRegistration = ({ active, setActive }) => {
password: e.target.value, password: e.target.value,
})); }));
}} }}
value={inputsValue.password}
placeholder="Пароль" placeholder="Пароль"
/> />
{inputsError.password && <span>Минимум 6 символов</span>} {inputsError.password && <span>Минимум 6 символов</span>}
@ -171,15 +184,19 @@ export const ModalRegistration = ({ active, setActive }) => {
</div> </div>
</div> </div>
<div className="button-box"> <div className="button-box">
<BaseButton {loader ? (
onClick={(e) => { <Loader style={"green"} />
e.preventDefault(); ) : (
submitHandler(); <BaseButton
}} onClick={(e) => {
styles="button-box__submit" e.preventDefault();
> submitHandler();
Отправить }}
</BaseButton> styles="button-box__submit"
>
Отправить
</BaseButton>
)}
{/*<h5>*/} {/*<h5>*/}
{/* У вас уже есть аккаунт? <p>Войти</p>*/} {/* У вас уже есть аккаунт? <p>Войти</p>*/}
{/*</h5>*/} {/*</h5>*/}
@ -208,7 +225,7 @@ export const ModalRegistration = ({ active, setActive }) => {
<p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p> <p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p>
</div> </div>
</div> </div>
<span onClick={() => setActive(false)} className="exit"></span> <span onClick={() => closeModal()} className="exit"></span>
</ModalLayout> </ModalLayout>
); );
}; };

View File

@ -87,7 +87,7 @@
&__submit { &__submit {
width: 174px; width: 174px;
height: 46px; height: 50px;
font-size: 18px; font-size: 18px;
margin-right: 55px; margin-right: 55px;
} }
@ -145,4 +145,9 @@
} }
} }
} }
.loader {
justify-content: start;
left: 80px;
}
} }

View File

@ -4,6 +4,7 @@ import { apiRequest } from "@api/request";
import { useNotification } from "@hooks/useNotification"; import { useNotification } from "@hooks/useNotification";
import { Loader } from "@components/Common/Loader/Loader";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout"; import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import arrow from "assets/icons/arrows/arrowCalendar.png"; import arrow from "assets/icons/arrows/arrowCalendar.png";
@ -19,6 +20,12 @@ export const ModalResetPassword = ({ active, setActive }) => {
password: "", password: "",
}); });
const [inputsError, setInputsError] = useState({
email: false,
password: false,
token: false,
});
const validateEmail = (email) => { const validateEmail = (email) => {
// регулярное выражение для проверки email // регулярное выражение для проверки email
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@ -27,6 +34,8 @@ export const ModalResetPassword = ({ active, setActive }) => {
return re.test(email); return re.test(email);
}; };
const [loader, setLoader] = useState(false);
const resetInputsValue = () => { const resetInputsValue = () => {
setInputsValue({ setInputsValue({
email: "", email: "",
@ -38,18 +47,21 @@ export const ModalResetPassword = ({ active, setActive }) => {
const { showNotification } = useNotification(); const { showNotification } = useNotification();
const submitHandler = () => { const submitHandler = () => {
if (!validateEmail(inputsValue.email)) { if (!validateEmail(inputsValue.email)) {
setInputsError((prevValue) => ({ ...prevValue, email: true }));
return showNotification({ return showNotification({
show: true, show: true,
text: "Введите коректный email", text: "Введите коректный email",
type: "error", type: "error",
}); });
} }
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);
if (data) { if (data) {
showNotification({ showNotification({
show: true, show: true,
@ -62,26 +74,45 @@ 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,
}));
return showNotification({ return showNotification({
show: true, show: true,
text: "Введите данные", text: "Введите данные",
type: "error", type: "error",
}); });
} }
if (inputsValue.password.length < 6) {
setInputsError((prevValue) => ({ ...prevValue, password: true }));
return;
}
setLoader(true);
apiRequest("/register/reset-password", { apiRequest("/register/reset-password", {
method: "POST", method: "POST",
data: { data: {
token: inputsValue.token, token: inputsValue.token,
password: inputsValue.password, password: inputsValue.password,
}, },
}).then(() => { }).then((data) => {
setActive(false); setLoader(false);
resetInputsValue(); if (data.code === 0) {
showNotification({ showNotification({
show: true, show: true,
text: "Пароль изменён", text: "Введите коректные данные",
type: "success", type: "error",
}); });
} else {
setActive(false);
resetInputsValue();
showNotification({
show: true,
text: "Пароль изменён",
type: "success",
});
}
}); });
}; };
return ( return (
@ -99,23 +130,37 @@ export const ModalResetPassword = ({ active, setActive }) => {
<h5>Введите email:</h5> <h5>Введите email:</h5>
<input <input
type="email" type="email"
onChange={(e) => onChange={(e) => {
setInputsValue((prevValue) => ({ setInputsValue((prevValue) => ({
...prevValue, ...prevValue,
email: e.target.value, email: e.target.value,
})) }));
} setInputsError({
placeholder="Email" email: false,
/> password: false,
<button token: false,
className="resetPassword__btn" });
onClick={(e) => {
e.preventDefault();
submitHandler();
}} }}
> placeholder="Email"
Отправить value={inputsValue.email}
</button> className={inputsError.email ? "error" : ""}
/>
{inputsError.email && (
<span className="warningText">Введите коректный email</span>
)}
{loader ? (
<Loader style={"green"} />
) : (
<button
className="resetPassword__btn"
onClick={(e) => {
e.preventDefault();
submitHandler();
}}
>
Отправить
</button>
)}
</div> </div>
) : ( ) : (
<div className="resetPassword__email"> <div className="resetPassword__email">
@ -127,34 +172,58 @@ export const ModalResetPassword = ({ active, setActive }) => {
<h5>Введите код подтверждения:</h5> <h5>Введите код подтверждения:</h5>
<input <input
type="text" type="text"
onChange={(e) => onChange={(e) => {
setInputsError({
email: false,
password: false,
token: false,
});
setInputsValue((prevValue) => ({ setInputsValue((prevValue) => ({
...prevValue, ...prevValue,
token: e.target.value, token: e.target.value,
})) }));
} }}
value={inputsValue.token}
className={inputsError.token ? "error" : ""}
placeholder="token" placeholder="token"
/> />
{inputsError.token && (
<span className="warningText">Введите данные</span>
)}
<h5>Введите новый пароль:</h5> <h5>Введите новый пароль:</h5>
<input <input
type="password" type="password"
onChange={(e) => onChange={(e) => {
setInputsValue((prevValue) => ({ setInputsValue((prevValue) => ({
...prevValue, ...prevValue,
password: e.target.value, password: e.target.value,
})) }));
} setInputsError({
placeholder="password" email: false,
/> password: false,
<button token: false,
className="resetPassword__btn" });
onClick={(e) => {
e.preventDefault();
resetPassword();
}} }}
> placeholder="password"
Отправить value={inputsValue.password}
</button> className={inputsError.password ? "error" : ""}
/>
{inputsError.password && (
<span className="warningText">Минимум 6 символов</span>
)}
{loader ? (
<Loader style={"green"} />
) : (
<button
className="resetPassword__btn"
onClick={(e) => {
e.preventDefault();
resetPassword();
}}
>
Отправить
</button>
)}
</div> </div>
)} )}
</div> </div>

View File

@ -29,7 +29,7 @@
input { input {
padding: 10px !important; padding: 10px !important;
height: 40px !important; height: 40px !important;
margin-bottom: 15px !important; margin-bottom: 5px !important;
} }
&__arrow { &__arrow {
@ -60,4 +60,14 @@
border: 2px solid #6aaf5c; border: 2px solid #6aaf5c;
transition: 0.3s; transition: 0.3s;
} }
.error {
border: 1px solid red;
}
.warningText {
color: red;
font-size: 12px;
margin-bottom: 10px;
}
} }