93 lines
3.1 KiB
TypeScript
93 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import type { ReactElement } from 'react';
|
|
import { ToastContainer, toast } from 'react-toastify';
|
|
import Head from 'next/head';
|
|
import BaseButton from '../components/BaseButton';
|
|
import CardBox from '../components/CardBox';
|
|
import SectionFullScreen from '../components/SectionFullScreen';
|
|
import LayoutGuest from '../layouts/Guest';
|
|
import { Field, Form, Formik } from 'formik';
|
|
import FormField from '../components/FormField';
|
|
import BaseDivider from '../components/BaseDivider';
|
|
import BaseButtons from '../components/BaseButtons';
|
|
import { useRouter } from 'next/router';
|
|
import { getPageTitle } from '../config';
|
|
import axios from "axios";
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
export default function Forgot() {
|
|
const { t } = useTranslation('common');
|
|
const [isTranslationMounted, setIsTranslationMounted] = React.useState(false);
|
|
const translate = (key: string, fallback: string): string => (
|
|
isTranslationMounted ? String(t(key, { defaultValue: fallback })) : fallback
|
|
);
|
|
const [loading, setLoading] = React.useState(false)
|
|
const router = useRouter();
|
|
const notify = (type, msg) => toast( msg, {type});
|
|
|
|
React.useEffect(() => {
|
|
setIsTranslationMounted(true);
|
|
}, []);
|
|
|
|
const handleSubmit = async (value) => {
|
|
setLoading(true)
|
|
try {
|
|
const { data: response } = await axios.post('/auth/send-password-reset-email', value);
|
|
setLoading(false)
|
|
notify('success', translate('pages.auth.checkEmailVerification', 'Please check your email for verification link'));
|
|
setTimeout(async () => {
|
|
await router.push('/login')
|
|
}, 3000)
|
|
} catch (error) {
|
|
setLoading(false)
|
|
console.log('error: ', error)
|
|
notify('error', translate('pages.auth.genericError', 'Something was wrong. Try again'))
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{getPageTitle(translate('pages.forgot.pageTitle', 'Forgot password'))}</title>
|
|
</Head>
|
|
|
|
<SectionFullScreen bg='violet'>
|
|
<CardBox className='w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12'>
|
|
<Formik
|
|
initialValues={{
|
|
email: '',
|
|
}}
|
|
onSubmit={(values) => handleSubmit(values)}
|
|
>
|
|
<Form>
|
|
<FormField label={translate('pages.auth.emailLabel', 'Email')} help={translate('pages.auth.emailHelp', 'Please enter your email')}>
|
|
<Field name='email' />
|
|
</FormField>
|
|
|
|
<BaseDivider />
|
|
|
|
<BaseButtons>
|
|
<BaseButton
|
|
type='submit'
|
|
label={loading ? translate('pages.auth.loading', 'Loading...') : translate('pages.forgot.submit', 'Submit')}
|
|
color='info'
|
|
/>
|
|
<BaseButton
|
|
href={'/login'}
|
|
label={translate('pages.auth.login', 'Login')}
|
|
color='info'
|
|
/>
|
|
</BaseButtons>
|
|
</Form>
|
|
</Formik>
|
|
</CardBox>
|
|
</SectionFullScreen>
|
|
<ToastContainer />
|
|
</>
|
|
);
|
|
}
|
|
|
|
Forgot.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutGuest>{page}</LayoutGuest>;
|
|
};
|