diff --git a/packages/web/src/components/ForgotPasswordForm/index.ee.jsx b/packages/web/src/components/ForgotPasswordForm/index.ee.jsx index aca44330..f4ac6193 100644 --- a/packages/web/src/components/ForgotPasswordForm/index.ee.jsx +++ b/packages/web/src/components/ForgotPasswordForm/index.ee.jsx @@ -1,8 +1,8 @@ import * as React from 'react'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; +import Alert from '@mui/material/Alert'; import LoadingButton from '@mui/lab/LoadingButton'; -import { enqueueSnackbar } from 'notistack'; import useForgotPassword from 'hooks/useForgotPassword'; import Form from 'components/Form'; @@ -15,6 +15,8 @@ export default function ForgotPasswordForm() { mutateAsync: forgotPassword, isPending: loading, isSuccess, + isError, + error, } = useForgotPassword(); const handleSubmit = async (values) => { @@ -23,14 +25,7 @@ export default function ForgotPasswordForm() { await forgotPassword({ email, }); - } catch (error) { - enqueueSnackbar( - error?.message || formatMessage('forgotPasswordForm.error'), - { - variant: 'error', - }, - ); - } + } catch {} }; return ( @@ -57,6 +52,16 @@ export default function ForgotPasswordForm() { margin="dense" autoComplete="username" /> + {isError && ( + + {error?.message || formatMessage('forgotPasswordForm.error')} + + )} + {isSuccess && ( + + {formatMessage('forgotPasswordForm.instructionsSent')} + + )} {formatMessage('forgotPasswordForm.submit')} - {isSuccess && ( - theme.palette.success.main }} - > - {formatMessage('forgotPasswordForm.instructionsSent')} - - )} ); diff --git a/packages/web/src/components/LoginForm/index.jsx b/packages/web/src/components/LoginForm/index.jsx index 0924b1f3..fafa0fda 100644 --- a/packages/web/src/components/LoginForm/index.jsx +++ b/packages/web/src/components/LoginForm/index.jsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { useNavigate, Link as RouterLink } from 'react-router-dom'; import Paper from '@mui/material/Paper'; import Link from '@mui/material/Link'; +import Alert from '@mui/material/Alert'; import Typography from '@mui/material/Typography'; import LoadingButton from '@mui/lab/LoadingButton'; import useAuthentication from 'hooks/useAuthentication'; @@ -11,7 +12,6 @@ import Form from 'components/Form'; import TextField from 'components/TextField'; import useFormatMessage from 'hooks/useFormatMessage'; import useCreateAccessToken from 'hooks/useCreateAccessToken'; -import { Alert } from '@mui/material'; function LoginForm() { const isCloud = useCloud(); @@ -45,7 +45,7 @@ function LoginForm() { const renderError = () => { const errors = error?.response?.data?.errors?.general || [ - formatMessage('loginForm.error'), + error?.message || formatMessage('loginForm.error'), ]; return errors.map((error) => ( diff --git a/packages/web/src/components/ResetPasswordForm/index.ee.jsx b/packages/web/src/components/ResetPasswordForm/index.ee.jsx index 4d4cdaaf..12f77efe 100644 --- a/packages/web/src/components/ResetPasswordForm/index.ee.jsx +++ b/packages/web/src/components/ResetPasswordForm/index.ee.jsx @@ -2,6 +2,7 @@ import { yupResolver } from '@hookform/resolvers/yup'; import LoadingButton from '@mui/lab/LoadingButton'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; +import Alert from '@mui/material/Alert'; import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar'; import * as React from 'react'; import { useNavigate, useSearchParams } from 'react-router-dom'; @@ -30,6 +31,8 @@ export default function ResetPasswordForm() { mutateAsync: resetPassword, isPending, isSuccess, + error, + isError, } = useResetPassword(); const token = searchParams.get('token'); @@ -47,14 +50,23 @@ export default function ResetPasswordForm() { }, }); navigate(URLS.LOGIN); - } catch (error) { - enqueueSnackbar( - error?.message || formatMessage('resetPasswordForm.error'), - { - variant: 'error', - }, - ); + } catch {} + }; + + const renderError = () => { + if (!isError) { + return null; } + + const errors = error?.response?.data?.errors?.general || [ + error?.message || formatMessage('resetPasswordForm.error'), + ]; + + return errors.map((error) => ( + + {error} + + )); }; return ( @@ -96,7 +108,6 @@ export default function ResetPasswordForm() { : '' } /> - - + {renderError()}