81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
|
'use client';
|
|||
|
|
|
|||
|
|
import axios from 'axios';
|
|||
|
|
import clsx from 'clsx';
|
|||
|
|
import { useEffect, useState } from 'react';
|
|||
|
|
|
|||
|
|
import InfoError, { ErrorData } from '@/components/info/InfoError';
|
|||
|
|
import SubmitButton from '@/components/ui/SubmitButton';
|
|||
|
|
import TextInput from '@/components/ui/TextInput';
|
|||
|
|
import TextURL from '@/components/ui/TextURL';
|
|||
|
|
import AnimateFade from '@/components/wrap/AnimateFade';
|
|||
|
|
import { useAuth } from '@/context/AuthContext';
|
|||
|
|
import { IRequestPasswordData } from '@/models/user';
|
|||
|
|
|
|||
|
|
function RestorePasswordPage() {
|
|||
|
|
const { requestPasswordReset, loading, error, setError } = useAuth();
|
|||
|
|
|
|||
|
|
const [isCompleted, setIsCompleted] = useState(false);
|
|||
|
|
const [email, setEmail] = useState('');
|
|||
|
|
|
|||
|
|
function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
if (!loading) {
|
|||
|
|
const data: IRequestPasswordData = {
|
|||
|
|
email: email
|
|||
|
|
};
|
|||
|
|
requestPasswordReset(data, () => setIsCompleted(true));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
setError(undefined);
|
|||
|
|
}, [email, setError]);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<AnimateFade>
|
|||
|
|
{!isCompleted ? (
|
|||
|
|
<form className={clsx('cc-column', 'w-[24rem] mx-auto', 'px-6 mt-3')} onSubmit={handleSubmit}>
|
|||
|
|
<TextInput
|
|||
|
|
id='email'
|
|||
|
|
autoComplete='email'
|
|||
|
|
required
|
|||
|
|
allowEnter
|
|||
|
|
label='Электронная почта'
|
|||
|
|
value={email}
|
|||
|
|
onChange={event => setEmail(event.target.value)}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<SubmitButton
|
|||
|
|
text='Запросить пароль'
|
|||
|
|
className='self-center w-[12rem] mt-3'
|
|||
|
|
loading={loading}
|
|||
|
|
disabled={!email}
|
|||
|
|
/>
|
|||
|
|
{error ? <ProcessError error={error} /> : null}
|
|||
|
|
</form>
|
|||
|
|
) : null}
|
|||
|
|
{isCompleted ? (
|
|||
|
|
<div className='flex flex-col items-center gap-1 mt-3'>
|
|||
|
|
<p>На указанную почту отправлены инструкции по восстановлению пароля.</p>
|
|||
|
|
<TextURL text='Войти в Портал' href='/login' />
|
|||
|
|
<TextURL text='Начальная страница' href='/' />
|
|||
|
|
</div>
|
|||
|
|
) : null}
|
|||
|
|
</AnimateFade>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default RestorePasswordPage;
|
|||
|
|
|
|||
|
|
// ====== Internals =========
|
|||
|
|
function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
|
|||
|
|
if (axios.isAxiosError(error) && error.response && error.response.status === 400) {
|
|||
|
|
return (
|
|||
|
|
<div className='mx-auto mt-6 text-sm select-text clr-text-red'>Данный email не используется на Портале.</div>
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
return <InfoError error={error} />;
|
|||
|
|
}
|
|||
|
|
}
|