import {useCallback, useState, useEffect} from 'react';
import { styled } from '@mui/material/styles';
import {useTranslation} from 'react-i18next';
import router from 'next/router';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import CardContent from '@mui/material/CardContent';
import Card from '@mui/material/Card';
import CircularProgress from '@mui/material/CircularProgress';
import CardActions from '@mui/material/CardActions';
import Link from '@mui/material/Link';
import LostPasswordSuccess from './Success';
import useToastStore from '../../stores/useToastStore';
import useProfile from '../../hooks/useProfile';
import {useForgotPasswordMutation} from '../../generated/graphql';
const PREFIX = 'LostPassword';
const classes = {
loader: `${PREFIX}-loader`,
actions: `${PREFIX}-actions`
};
const Root = styled('form')((
{
theme
}
) => ({
[`& .${classes.loader}`]: {
marginLeft: theme.spacing(4),
},
[`& .${classes.actions}`]: {
marginTop: theme.spacing(2),
justifyContent: 'flex-end',
}
}));
const LostPassword = () => {
const {t} = useTranslation();
const addToast = useToastStore(s => s.addToast);
const {profile} = useProfile();
const [sendForgotPassword, {loading}] = useForgotPasswordMutation();
const [isSent, setIsSent] = useState(false);
const [error, setError] = useState('');
const [email, setEmail] = useState('');
const canSubmit = email.length > 4;
useEffect(() => {
if (profile?.confirmed) router.replace('/confirm');
else if (profile) router.replace('/dashboard');
}, [profile]);
const onSubmit = useCallback(
async e => {
if (e.preventDefault) e.preventDefault();
try {
await sendForgotPassword({variables: {email}});
setIsSent(true);
} catch (error) {
if (error.message === 'Bad Request') {
addToast(t('lost_password.error'));
setError(t('lost_password.error'));
} else {
addToast(t('generic.errors.unknown'));
}
}
return false;
},
[sendForgotPassword, email, addToast, t]
);
if (!loading && isSent) return ;
return (
setEmail(value)}
id="LostPasswordEmail"
name="email"
type="email"
error={!!error}
helperText={
error && (
<>
{error}
{t('lost_password.actions.register')}
>
)
}
/>
);
};
export default LostPassword;