feat: refactor forgot password mutation with the REST API endpoint

packages/web/src/components/ForgotPasswordForm/index.ee.jsx

@@ -1,23 +1,36 @@
 import * as React from 'react';
-import { useMutation } from '@apollo/client';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import LoadingButton from '@mui/lab/LoadingButton';
-import { FORGOT_PASSWORD } from 'graphql/mutations/forgot-password.ee';
+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 [forgotPassword, { data, loading }] = useMutation(FORGOT_PASSWORD);
+  const {
+    mutateAsync: forgotPassword,
+    isPending: loading,
+    isSuccess,
+  } = useForgotPassword();
 
   const handleSubmit = async (values) => {
-    await forgotPassword({
-      variables: {
-        input: values,
-      },
-    });
+    const { email } = values;
+    try {
+      await forgotPassword({
+        email,
+      });
+    } catch (error) {
+      enqueueSnackbar(
+        error?.message || formatMessage('forgotPasswordForm.error'),
+        {
+          variant: 'error',
+        },
+      );
+    }
   };
 
   return (
@@ -35,7 +48,6 @@ export default function ForgotPasswordForm() {
       >
         {formatMessage('forgotPasswordForm.title')}
       </Typography>
-
       <Form onSubmit={handleSubmit}>
         <TextField
           label={formatMessage('forgotPasswordForm.emailFieldLabel')}
@@ -45,20 +57,18 @@ export default function ForgotPasswordForm() {
           margin="dense"
           autoComplete="username"
         />
-
         <LoadingButton
           type="submit"
           variant="contained"
           color="primary"
           sx={{ boxShadow: 2, my: 3 }}
           loading={loading}
-          disabled={data}
+          disabled={isSuccess}
           fullWidth
         >
           {formatMessage('forgotPasswordForm.submit')}
         </LoadingButton>
-
-        {data && (
+        {isSuccess && (
           <Typography
             variant="body1"
             sx={{ color: (theme) => theme.palette.success.main }}

packages/web/src/graphql/mutations/forgot-password.ee.js

@@ -1,6 +0,0 @@
-import { gql } from '@apollo/client';
-export const FORGOT_PASSWORD = gql`
-  mutation ForgotPassword($input: ForgotPasswordInput) {
-    forgotPassword(input: $input)
-  }
-`;

packages/web/src/hooks/useForgotPassword.js

@@ -0,0 +1,15 @@
+import { useMutation } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useForgotPassword() {
+  const mutation = useMutation({
+    mutationFn: async (payload) => {
+      const { data } = await api.post('/v1/users/forgot-password', payload);
+
+      return data;
+    },
+  });
+
+  return mutation;
+}

packages/web/src/locales/en.json

@@ -157,6 +157,7 @@
   "forgotPasswordForm.submit": "Send reset instructions",
   "forgotPasswordForm.instructionsSent": "The instructions have been sent!",
   "forgotPasswordForm.emailFieldLabel": "Email",
+  "forgotPasswordForm.error": "Something went wrong. Please try again.",
   "resetPasswordForm.passwordsMustMatch": "Passwords must match.",
   "resetPasswordForm.mandatoryInput": "{inputName} is required.",
   "resetPasswordForm.title": "Reset password",