114 lines
4.4 KiB
TypeScript
114 lines
4.4 KiB
TypeScript
import React from 'react';
|
|
import {toast, ToastContainer} from 'react-toastify';
|
|
|
|
import Head from 'next/head';
|
|
import CardBox from '../components/CardBox';
|
|
import SectionFullScreen from '../components/SectionFullScreen';
|
|
import {useRouter} from 'next/router';
|
|
import {getPageTitle} from '../config';
|
|
|
|
import {Field, Form, Formik} from 'formik';
|
|
import FormField from '../components/FormField';
|
|
import BaseButtons from '../components/BaseButtons';
|
|
import BaseButton from '../components/BaseButton';
|
|
import { passwordReset } from '../stores/authSlice';
|
|
import {useAppDispatch} from '../stores/hooks';
|
|
|
|
export default function PasswordSetOrReset() {
|
|
const [loading, setLoading] = React.useState(false);
|
|
const [isInvitation, setIsInvitation] = React.useState(false);
|
|
const router = useRouter();
|
|
const {token, invitation} = router.query;
|
|
|
|
const notify = (type, msg) => toast(msg, {type});
|
|
|
|
const dispatch = useAppDispatch();
|
|
|
|
React.useEffect(() => {
|
|
if (invitation) {
|
|
setIsInvitation(true);
|
|
}
|
|
}, [invitation]);
|
|
|
|
const handleSubmit = async (value) => {
|
|
setLoading(true);
|
|
if (typeof token === 'string') {
|
|
await dispatch(
|
|
passwordReset({
|
|
token,
|
|
password: value.password,
|
|
type: isInvitation && 'invitation',
|
|
}),
|
|
);
|
|
await router.push('/login');
|
|
}
|
|
|
|
setLoading(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
{isInvitation && <title>{getPageTitle('Set Password')}</title>}
|
|
{!isInvitation && <title>{getPageTitle('Reset Password')}</title>}
|
|
</Head>
|
|
|
|
<SectionFullScreen bg='violet'>
|
|
<div className='w-full flex flex-col items-center justify-center'>
|
|
<CardBox className='w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12'>
|
|
{isInvitation && <p className='text-xl mb-2'>Set Password</p>}
|
|
{!isInvitation && <p className='text-xl mb-2'>Reset Password</p>}
|
|
<p className='text-base mb-4'>Enter your new password</p>
|
|
|
|
<Formik
|
|
initialValues={{
|
|
password: '',
|
|
confirm: '',
|
|
}}
|
|
onSubmit={(values) => handleSubmit(values)}
|
|
>
|
|
{({errors, touched}) => (
|
|
<Form>
|
|
<FormField
|
|
>
|
|
<Field
|
|
type='password'
|
|
name='password'
|
|
placeholder='Password'
|
|
/>
|
|
</FormField>
|
|
<FormField
|
|
>
|
|
<Field
|
|
type='password'
|
|
name='confirm'
|
|
placeholder='Confirm Password'
|
|
/>
|
|
</FormField>
|
|
|
|
<BaseButtons>
|
|
<BaseButton
|
|
className='w-full mt-3'
|
|
type='submit'
|
|
disabled={loading}
|
|
label={
|
|
loading
|
|
? 'Loading...'
|
|
: isInvitation
|
|
? 'Set Password'
|
|
: 'Reset Password'
|
|
}
|
|
color='info'
|
|
/>
|
|
</BaseButtons>
|
|
</Form>
|
|
)}
|
|
</Formik>
|
|
</CardBox>
|
|
</div>
|
|
</SectionFullScreen>
|
|
<ToastContainer/>
|
|
</>
|
|
);
|
|
}
|