feat: add forgot password page

packages/backend/src/graphql/mutations/forgot-password.ee.ts

@@ -42,7 +42,7 @@ const forgotPassword = async (_parent: unknown, params: Params) => {
 
   await emailQueue.add(jobName, jobPayload, jobOptions);
 
-  return;
+  return true;
 };
 
 export default forgotPassword;

packages/web/src/components/DeleteAccountDialog/index.ee.tsx

@@ -15,11 +15,11 @@ import useAuthentication from 'hooks/useAuthentication';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCurrentUser from 'hooks/useCurrentUser';
 
-type TDeleteAccountDialogProps = {
+type DeleteAccountDialogProps = {
   onClose: () => void;
 }
 
-export default function DeleteAccountDialog(props: TDeleteAccountDialogProps) {
+export default function DeleteAccountDialog(props: DeleteAccountDialogProps) {
   const [deleteUser] = useMutation(DELETE_USER);
   const formatMessage = useFormatMessage();
   const currentUser = useCurrentUser();

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

@@ -0,0 +1,68 @@
+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 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 handleSubmit = async (values: any) => {
+    await forgotPassword({
+      variables: {
+        input: values,
+      },
+    });
+  };
+
+  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('forgotPassword.title')}
+      </Typography>
+
+      <Form onSubmit={handleSubmit}>
+        <TextField
+          label={formatMessage('forgotPassword.emailFieldLabel')}
+          name="email"
+          required
+          fullWidth
+          margin="dense"
+          autoComplete="username"
+        />
+
+        <LoadingButton
+          type="submit"
+          variant="contained"
+          color="primary"
+          sx={{ boxShadow: 2, my: 3 }}
+          loading={loading}
+          disabled={data}
+          fullWidth
+        >
+          {formatMessage('forgotPassword.submit')}
+        </LoadingButton>
+
+        {data && <Typography variant="body1" sx={{ color: (theme) => theme.palette.success.main }}>
+          {formatMessage('forgotPassword.instructionsSent')}
+        </Typography>}
+      </Form>
+    </Paper>
+  );
+}

packages/web/src/components/LoginForm/index.tsx

@@ -11,6 +11,7 @@ import * as URLS from 'config/urls';
 import { LOGIN } from 'graphql/mutations/login';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
+import useFormatMessage from 'hooks/useFormatMessage';
 
 function renderFields(props: { loading: boolean }) {
   const { loading = false } = props;
@@ -37,8 +38,17 @@ function renderFields(props: { loading: boolean }) {
           margin="dense"
           autoComplete="current-password"
           data-test="password-text-field"
+          sx={{ mb: 1 }}
         />
 
+        <Link
+          component={RouterLink}
+          to={URLS.FORGOT_PASSWORD}
+          underline="none"
+        >
+          Forgot password?
+        </Link>
+
         <LoadingButton
           type="submit"
           variant="contained"
@@ -64,6 +74,7 @@ function renderFields(props: { loading: boolean }) {
 
 function LoginForm() {
   const navigate = useNavigate();
+  const formatMessage = useFormatMessage();
   const authentication = useAuthentication();
   const [login, { loading }] = useMutation(LOGIN);
 
@@ -100,7 +111,7 @@ function LoginForm() {
         }}
         gutterBottom
       >
-        Login
+        {formatMessage('loginForm.title')}
       </Typography>
 
       <Form onSubmit={handleSubmit} render={render} />

packages/web/src/config/urls.ts

@@ -6,6 +6,7 @@ export const EXECUTION = (executionId: string): string =>
 
 export const LOGIN = '/login';
 export const SIGNUP = '/sign-up';
+export const FORGOT_PASSWORD = '/forgot-password';
 
 export const APPS = '/apps';
 export const NEW_APP_CONNECTION = '/apps/new';

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

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

packages/web/src/locales/en.json

@@ -113,5 +113,10 @@
   "signupForm.confirmPasswordFieldLabel": "Confirm password",
   "signupForm.submit": "Sign up",
   "signupForm.passwordMustMatch": "Passwords must match.",
-  "signupForm.mandatoryInput": "{inputName} is required."
-}
+  "signupForm.mandatoryInput": "{inputName} is required.",
+  "loginForm.title": "Login",
+  "forgotPassword.title": "Forgot password",
+  "forgotPassword.submit": "Send reset instructions",
+  "forgotPassword.instructionsSent": "The instructions have been sent!",
+  "forgotPassword.emailFieldLabel": "Email"
+}

packages/web/src/pages/ForgotPassword/index.ee.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Container from 'components/Container';
+import ForgotPasswordForm from 'components/ForgotPasswordForm/index.ee';
+
+export default function Login(): React.ReactElement {
+  return (
+    <Box sx={{ display: 'flex', flex: 1, alignItems: 'center' }}>
+      <Container maxWidth="sm">
+        <ForgotPasswordForm />
+      </Container>
+    </Box>
+  );
+}

packages/web/src/routes.tsx

@@ -9,6 +9,7 @@ import Flows from 'pages/Flows';
 import Flow from 'pages/Flow';
 import Login from 'pages/Login';
 import SignUp from 'pages/SignUp/index.ee';
+import ForgotPassword from 'pages/ForgotPassword/index.ee';
 import EditorRoutes from 'pages/Editor/routes';
 import * as URLS from 'config/urls';
 import settingsRoutes from './settingsRoutes';
@@ -90,6 +91,15 @@ export default (
       }
     />
 
+    <Route
+      path={URLS.FORGOT_PASSWORD}
+      element={
+        <PublicLayout>
+          <ForgotPassword />
+        </PublicLayout>
+      }
+    />
+
     <Route
       path={URLS.UPDATES}
       element={