83 lines
2.1 KiB
JavaScript
83 lines
2.1 KiB
JavaScript
import * as React from 'react';
|
|
import Paper from '@mui/material/Paper';
|
|
import Typography from '@mui/material/Typography';
|
|
import LoadingButton from '@mui/lab/LoadingButton';
|
|
import { enqueueSnackbar } from 'notistack';
|
|
|
|
import useForgotPassword from 'hooks/useForgotPassword';
|
|
import Form from 'components/Form';
|
|
import TextField from 'components/TextField';
|
|
import useFormatMessage from 'hooks/useFormatMessage';
|
|
|
|
export default function ForgotPasswordForm() {
|
|
const formatMessage = useFormatMessage();
|
|
const {
|
|
mutateAsync: forgotPassword,
|
|
isPending: loading,
|
|
isSuccess,
|
|
} = useForgotPassword();
|
|
|
|
const handleSubmit = async (values) => {
|
|
const { email } = values;
|
|
try {
|
|
await forgotPassword({
|
|
email,
|
|
});
|
|
} catch (error) {
|
|
enqueueSnackbar(
|
|
error?.message || formatMessage('forgotPasswordForm.error'),
|
|
{
|
|
variant: 'error',
|
|
},
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Paper sx={{ px: 2, py: 4 }}>
|
|
<Typography
|
|
variant="h3"
|
|
align="center"
|
|
sx={{
|
|
borderBottom: '1px solid',
|
|
borderColor: (theme) => theme.palette.text.disabled,
|
|
pb: 2,
|
|
mb: 2,
|
|
}}
|
|
gutterBottom
|
|
>
|
|
{formatMessage('forgotPasswordForm.title')}
|
|
</Typography>
|
|
<Form onSubmit={handleSubmit}>
|
|
<TextField
|
|
label={formatMessage('forgotPasswordForm.emailFieldLabel')}
|
|
name="email"
|
|
required
|
|
fullWidth
|
|
margin="dense"
|
|
autoComplete="username"
|
|
/>
|
|
<LoadingButton
|
|
type="submit"
|
|
variant="contained"
|
|
color="primary"
|
|
sx={{ boxShadow: 2, my: 3 }}
|
|
loading={loading}
|
|
disabled={isSuccess}
|
|
fullWidth
|
|
>
|
|
{formatMessage('forgotPasswordForm.submit')}
|
|
</LoadingButton>
|
|
{isSuccess && (
|
|
<Typography
|
|
variant="body1"
|
|
sx={{ color: (theme) => theme.palette.success.main }}
|
|
>
|
|
{formatMessage('forgotPasswordForm.instructionsSent')}
|
|
</Typography>
|
|
)}
|
|
</Form>
|
|
</Paper>
|
|
);
|
|
}
|