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 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 (
<ModalLayout active={active} setActive={setActive} styles={"registration"}>
<ModalLayout active={active} setActive={closeModal} styles={"registration"}>
<div className="registration-body__left">
<h2>
Подключайтесь к <p>itguild.</p>
@ -119,6 +129,7 @@ export const ModalRegistration = ({ active, setActive }) => {
userName: e.target.value,
}));
}}
value={inputsValue.userName}
placeholder="Имя"
/>
{inputsError.name && <span>Минимум 2 символов</span>}
@ -139,6 +150,7 @@ export const ModalRegistration = ({ active, setActive }) => {
email: e.target.value,
}));
}}
value={inputsValue.email}
placeholder="Почта"
/>
{inputsError.email && <span>Введите коректный email</span>}
@ -164,6 +176,7 @@ export const ModalRegistration = ({ active, setActive }) => {
password: e.target.value,
}));
}}
value={inputsValue.password}
placeholder="Пароль"
/>
{inputsError.password && <span>Минимум 6 символов</span>}
@ -171,15 +184,19 @@ export const ModalRegistration = ({ active, setActive }) => {
</div>
</div>
<div className="button-box">
<BaseButton
onClick={(e) => {
e.preventDefault();
submitHandler();
}}
styles="button-box__submit"
>
Отправить
</BaseButton>
{loader ? (
<Loader style={"green"} />
) : (
<BaseButton
onClick={(e) => {
e.preventDefault();
submitHandler();
}}
styles="button-box__submit"
>
Отправить
</BaseButton>
)}
{/*<h5>*/}
{/* У вас уже есть аккаунт? <p>Войти</p>*/}
{/*</h5>*/}
@ -208,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>
);
};

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

View File

@ -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 }) => {
<h5>Введите email:</h5>
<input
type="email"
onChange={(e) =>
onChange={(e) => {
setInputsValue((prevValue) => ({
...prevValue,
email: e.target.value,
}))
}
placeholder="Email"
/>
<button
className="resetPassword__btn"
onClick={(e) => {
e.preventDefault();
submitHandler();
}));
setInputsError({
email: false,
password: false,
token: false,
});
}}
>
Отправить
</button>
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) => {
e.preventDefault();
submitHandler();
}}
>
Отправить
</button>
)}
</div>
) : (
<div className="resetPassword__email">
@ -127,34 +172,58 @@ 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,
}))
}
placeholder="password"
/>
<button
className="resetPassword__btn"
onClick={(e) => {
e.preventDefault();
resetPassword();
}));
setInputsError({
email: false,
password: false,
token: false,
});
}}
>
Отправить
</button>
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) => {
e.preventDefault();
resetPassword();
}}
>
Отправить
</button>
)}
</div>
)}
</div>

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