feat: add reset password page

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

@@ -34,12 +34,12 @@ export default function ForgotPasswordForm() {
         }}
         gutterBottom
       >
-        {formatMessage('forgotPassword.title')}
+        {formatMessage('forgotPasswordForm.title')}
       </Typography>
 
       <Form onSubmit={handleSubmit}>
         <TextField
-          label={formatMessage('forgotPassword.emailFieldLabel')}
+          label={formatMessage('forgotPasswordForm.emailFieldLabel')}
           name="email"
           required
           fullWidth
@@ -56,11 +56,11 @@ export default function ForgotPasswordForm() {
           disabled={data}
           fullWidth
         >
-          {formatMessage('forgotPassword.submit')}
+          {formatMessage('forgotPasswordForm.submit')}
         </LoadingButton>
 
         {data && <Typography variant="body1" sx={{ color: (theme) => theme.palette.success.main }}>
-          {formatMessage('forgotPassword.instructionsSent')}
+          {formatMessage('forgotPasswordForm.instructionsSent')}
         </Typography>}
       </Form>
     </Paper>

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

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import { useMutation } from '@apollo/client';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import LoadingButton from '@mui/lab/LoadingButton';
+import { useSnackbar } from 'notistack';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+
+import * as URLS from 'config/urls';
+import Form from 'components/Form';
+import TextField from 'components/TextField';
+import useFormatMessage from 'hooks/useFormatMessage';
+import { RESET_PASSWORD } from 'graphql/mutations/reset-password.ee';
+
+const validationSchema = yup.object().shape({
+  password: yup.string().required('resetPasswordForm.mandatoryInput'),
+  confirmPassword: yup
+    .string()
+    .required('resetPasswordForm.mandatoryInput')
+    .oneOf([yup.ref('password')], 'resetPasswordForm.passwordsMustMatch'),
+});
+
+export default function ResetPasswordForm() {
+  const { enqueueSnackbar } = useSnackbar();
+  const formatMessage = useFormatMessage();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const [resetPassword, { data, loading }] = useMutation(RESET_PASSWORD);
+
+  const token = searchParams.get('token');
+
+  const handleSubmit = async (values: any) => {
+    await resetPassword({
+      variables: {
+        input: {
+          password: values.password,
+          token,
+        },
+      },
+    });
+
+    enqueueSnackbar(formatMessage('resetPasswordForm.passwordUpdated'), { variant: 'success' });
+
+    navigate(URLS.LOGIN);
+  };
+
+  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('resetPasswordForm.title')}
+      </Typography>
+
+      <Form
+        onSubmit={handleSubmit}
+        resolver={yupResolver(validationSchema)}
+        mode="onChange"
+        render={({ formState: { errors, touchedFields } }) => (
+          <>
+            <TextField
+              label={formatMessage('resetPasswordForm.passwordFieldLabel')}
+              name="password"
+              fullWidth
+              margin="dense"
+              type="password"
+              error={touchedFields.password && !!errors?.password}
+              helperText={
+                touchedFields.password && errors?.password?.message
+                  ? formatMessage(errors?.password?.message, {
+                      inputName: formatMessage('resetPasswordForm.passwordFieldLabel'),
+                    })
+                  : ''
+              }
+            />
+
+            <TextField
+              label={formatMessage('resetPasswordForm.confirmPasswordFieldLabel')}
+              name="confirmPassword"
+              fullWidth
+              margin="dense"
+              type="password"
+              error={touchedFields.confirmPassword && !!errors?.confirmPassword}
+              helperText={
+                touchedFields.confirmPassword &&
+                errors?.confirmPassword?.message
+                  ? formatMessage(errors?.confirmPassword?.message, {
+                      inputName: formatMessage(
+                        'resetPasswordForm.confirmPasswordFieldLabel'
+                      ),
+                    })
+                  : ''
+              }
+            />
+
+            <LoadingButton
+              type="submit"
+              variant="contained"
+              color="primary"
+              sx={{ boxShadow: 2, my: 3 }}
+              loading={loading}
+              disabled={data || !token}
+              fullWidth
+            >
+              {formatMessage('resetPasswordForm.submit')}
+            </LoadingButton>
+          </>
+        )}
+      />
+    </Paper>
+  );
+}

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

@@ -5,13 +5,13 @@ import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import LoadingButton from '@mui/lab/LoadingButton';
 import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
 
 import useAuthentication from 'hooks/useAuthentication';
 import * as URLS from 'config/urls';
 import { CREATE_USER } from 'graphql/mutations/create-user.ee';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
-import { yupResolver } from '@hookform/resolvers/yup';
 import { LOGIN } from 'graphql/mutations/login';
 import useFormatMessage from 'hooks/useFormatMessage';
 
@@ -22,7 +22,7 @@ const validationSchema = yup.object().shape({
   confirmPassword: yup
     .string()
     .required('signupForm.mandatoryInput')
-    .oneOf([yup.ref('password')], 'signupForm.passwordMustMatch'),
+    .oneOf([yup.ref('password')], 'signupForm.passwordsMustMatch'),
 });
 
 const initialValues = {

packages/web/src/config/urls.ts

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

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

@@ -0,0 +1,7 @@
+import { gql } from '@apollo/client';
+
+export const RESET_PASSWORD = gql`
+  mutation ResetPassword($input: ResetPasswordInput) {
+    resetPassword(input: $input)
+  }
+`;

packages/web/src/locales/en.json

@@ -112,7 +112,7 @@
   "signupForm.passwordFieldLabel": "Password",
   "signupForm.confirmPasswordFieldLabel": "Confirm password",
   "signupForm.submit": "Sign up",
-  "signupForm.passwordMustMatch": "Passwords must match.",
+  "signupForm.passwordsMustMatch": "Passwords must match.",
   "signupForm.mandatoryInput": "{inputName} is required.",
   "loginForm.title": "Login",
   "loginForm.emailFieldLabel": "Email",
@@ -121,8 +121,15 @@
   "loginForm.submit": "Login",
   "loginForm.noAccount": "Don't have an Automatisch account yet?",
   "loginForm.signUp": "Sign up",
-  "forgotPassword.title": "Forgot password",
+  "forgotPasswordForm.title": "Forgot password",
-  "forgotPassword.submit": "Send reset instructions",
+  "forgotPasswordForm.submit": "Send reset instructions",
-  "forgotPassword.instructionsSent": "The instructions have been sent!",
+  "forgotPasswordForm.instructionsSent": "The instructions have been sent!",
-  "forgotPassword.emailFieldLabel": "Email"
+  "forgotPasswordForm.emailFieldLabel": "Email",
+  "resetPasswordForm.passwordsMustMatch": "Passwords must match.",
+  "resetPasswordForm.mandatoryInput": "{inputName} is required.",
+  "resetPasswordForm.title": "Reset password",
+  "resetPasswordForm.submit": "Reset password",
+  "resetPasswordForm.passwordFieldLabel": "Password",
+  "resetPasswordForm.confirmPasswordFieldLabel": "Confirm password",
+  "resetPasswordForm.passwordUpdated": "The password has been updated. Now, you can login."
 }

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

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

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

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

packages/web/src/routes.tsx

@@ -10,6 +10,7 @@ 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 ResetPassword from 'pages/ResetPassword/index.ee';
 import EditorRoutes from 'pages/Editor/routes';
 import * as URLS from 'config/urls';
 import settingsRoutes from './settingsRoutes';
@@ -100,6 +101,15 @@ export default (
       }
     />
 
+    <Route
+      path={URLS.RESET_PASSWORD}
+      element={
+        <PublicLayout>
+          <ResetPassword />
+        </PublicLayout>
+      }
+    />
+
     <Route
       path={URLS.UPDATES}
       element={