Merge pull request #2223 from automatisch/AUT-1365

feat: introduce inline error messages for ForgotPassword and ResetPasswordForm

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';
@@ -12,25 +12,17 @@ import useFormatMessage from 'hooks/useFormatMessage';
 export default function ForgotPasswordForm() {
   const formatMessage = useFormatMessage();
   const {
-    mutateAsync: forgotPassword,
+    mutate: forgotPassword,
     isPending: loading,
     isSuccess,
+    isError,
+    error,
   } = useForgotPassword();
 
-  const handleSubmit = async (values) => {
-    const { email } = values;
-    try {
-      await forgotPassword({
-        email,
-      });
-    } catch (error) {
-      enqueueSnackbar(
-        error?.message || formatMessage('forgotPasswordForm.error'),
-        {
-          variant: 'error',
-        },
-      );
-    }
+  const handleSubmit = ({ email }) => {
+    forgotPassword({
+      email,
+    });
   };
 
   return (
@@ -57,6 +49,16 @@ export default function ForgotPasswordForm() {
           margin="dense"
           autoComplete="username"
         />
+        {isError && (
+          <Alert severity="error" sx={{ mt: 2 }}>
+            {error?.message || formatMessage('forgotPasswordForm.error')}
+          </Alert>
+        )}
+        {isSuccess && (
+          <Alert severity="success" sx={{ mt: 2 }}>
+            {formatMessage('forgotPasswordForm.instructionsSent')}
+          </Alert>
+        )}
         <LoadingButton
           type="submit"
           variant="contained"
@@ -68,14 +70,6 @@ export default function ForgotPasswordForm() {
         >
           {formatMessage('forgotPasswordForm.submit')}
         </LoadingButton>
-        {isSuccess && (
-          <Typography
-            variant="body1"
-            sx={{ color: (theme) => theme.palette.success.main }}
-          >
-            {formatMessage('forgotPasswordForm.instructionsSent')}
-          </Typography>
-        )}
       </Form>
     </Paper>
   );

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) => (

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) => (
+      <Alert severity="error" sx={{ mt: 2 }}>
+        {error}
+      </Alert>
+    ));
   };
 
   return (
@@ -96,7 +108,6 @@ export default function ResetPasswordForm() {
                   : ''
               }
             />
-
             <TextField
               label={formatMessage(
                 'resetPasswordForm.confirmPasswordFieldLabel',
@@ -117,7 +128,7 @@ export default function ResetPasswordForm() {
                   : ''
               }
             />
-
+            {renderError()}
             <LoadingButton
               type="submit"
               variant="contained"