registration

This commit is contained in:
Mikola 2023-11-08 18:27:58 +03:00
parent b9cea4e7f7
commit b3a2851329
3 changed files with 154 additions and 134 deletions

View File

@ -28,7 +28,7 @@ export const AuthBox = ({ title }) => {
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [modalError, setModalError] = useState(false); const [modalError, setModalError] = useState(false);
const [modalReset, setModalReset] = useState(false) const [modalReset, setModalReset] = useState(false);
const [modalReg, setModalReg] = useState(false); const [modalReg, setModalReg] = useState(false);
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
@ -122,7 +122,9 @@ export const AuthBox = ({ title }) => {
> >
{isLoading ? <Loader /> : "Войти"} {isLoading ? <Loader /> : "Войти"}
</button> </button>
<span className="auth-box__reset" onClick={() => setModalReset(true)}>Восстановить пароль</span> <span className="auth-box__reset" onClick={() => setModalReset(true)}>
Восстановить пароль
</span>
<ModalResetPassword active={modalReset} setActive={setModalReset} /> <ModalResetPassword active={modalReset} setActive={setModalReset} />
<ModalRegistration active={modalReg} setActive={setModalReg} /> <ModalRegistration active={modalReg} setActive={setModalReg} />
</div> </div>

View File

@ -5,17 +5,18 @@ import { apiRequest } from "@api/request";
import { useNotification } from "@hooks/useNotification"; import { useNotification } from "@hooks/useNotification";
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";
import close from "assets/icons/close.png"; import close from "assets/icons/close.png";
import "./modalResetPassword.scss"; import "./modalResetPassword.scss";
export const ModalResetPassword = ({ active, setActive }) => { export const ModalResetPassword = ({ active, setActive }) => {
const [step, setStep] = useState(false) const [step, setStep] = useState(false);
const [inputsValue, setInputsValue] = useState({ const [inputsValue, setInputsValue] = useState({
email: "", email: "",
token: "", token: "",
password: "" password: "",
}); });
const validateEmail = (email) => { const validateEmail = (email) => {
@ -55,7 +56,7 @@ export const ModalResetPassword = ({ active, setActive }) => {
text: "Письмо отправлено Вам на почту", text: "Письмо отправлено Вам на почту",
type: "success", type: "success",
}); });
setStep(true) setStep(true);
} }
}); });
}; };
@ -70,12 +71,12 @@ export const ModalResetPassword = ({ active, setActive }) => {
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(() => {
setActive(false) setActive(false);
resetInputsValue() resetInputsValue();
showNotification({ showNotification({
show: true, show: true,
text: "Пароль изменён", text: "Пароль изменён",
@ -85,16 +86,16 @@ export const ModalResetPassword = ({ active, setActive }) => {
}; };
return ( return (
<ModalLayout active={active} setActive={setActive}> <ModalLayout active={active} setActive={setActive}>
<div className='resetPassword'> <div className="resetPassword">
<img <img
className='resetPassword__close' className="resetPassword__close"
src={close} src={close}
alt="close" alt="close"
onClick={() => setActive(false)} onClick={() => setActive(false)}
/> />
<h3 className='resetPassword__title'>Восстановление пароля</h3> <h3 className="resetPassword__title">Восстановление пароля</h3>
{!step ? {!step ? (
<div className='resetPassword__email'> <div className="resetPassword__email">
<h5>Введите email:</h5> <h5>Введите email:</h5>
<input <input
type="email" type="email"
@ -106,14 +107,23 @@ export const ModalResetPassword = ({ active, setActive }) => {
} }
placeholder="Email" placeholder="Email"
/> />
<button className='resetPassword__btn' onClick={(e) => { <button
e.preventDefault() className="resetPassword__btn"
submitHandler() onClick={(e) => {
}}>Отправить</button> e.preventDefault();
submitHandler();
}}
>
Отправить
</button>
</div> </div>
: ) : (
<div className='resetPassword__email'> <div className="resetPassword__email">
<img src={arrow} onClick={() => setStep(false)} className='resetPassword__email__arrow' /> <img
src={arrow}
onClick={() => setStep(false)}
className="resetPassword__email__arrow"
/>
<h5>Введите код подтверждения:</h5> <h5>Введите код подтверждения:</h5>
<input <input
type="text" type="text"
@ -136,12 +146,17 @@ export const ModalResetPassword = ({ active, setActive }) => {
} }
placeholder="password" placeholder="password"
/> />
<button className='resetPassword__btn' onClick={(e) => { <button
e.preventDefault() className="resetPassword__btn"
resetPassword() onClick={(e) => {
}}>Отправить</button> e.preventDefault();
resetPassword();
}}
>
Отправить
</button>
</div> </div>
} )}
</div> </div>
</ModalLayout> </ModalLayout>
); );

View File

@ -729,7 +729,10 @@ export const TicketFullScreen = () => {
</div> </div>
)} )}
</div> </div>
<Link to={`/tracker/project/${taskInfo.project_id}`} className="link"> <Link
to={`/tracker/project/${taskInfo.project_id}`}
className="link"
>
<div className="tasks__head__back"> <div className="tasks__head__back">
<p>Вернуться на проект</p> <p>Вернуться на проект</p>
<img src={arrow} alt="arrow" /> <img src={arrow} alt="arrow" />