diff --git a/packages/backend/src/graphql/mutations/forgot-password.ee.ts b/packages/backend/src/graphql/mutations/forgot-password.ee.ts index 045ee704..dab887b0 100644 --- a/packages/backend/src/graphql/mutations/forgot-password.ee.ts +++ b/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; diff --git a/packages/web/src/components/DeleteAccountDialog/index.ee.tsx b/packages/web/src/components/DeleteAccountDialog/index.ee.tsx index 59b9f308..d7310de5 100644 --- a/packages/web/src/components/DeleteAccountDialog/index.ee.tsx +++ b/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(); diff --git a/packages/web/src/components/ForgotPasswordForm/index.ee.tsx b/packages/web/src/components/ForgotPasswordForm/index.ee.tsx new file mode 100644 index 00000000..2fb21a05 --- /dev/null +++ b/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 ( + + theme.palette.text.disabled, + pb: 2, + mb: 2, + }} + gutterBottom + > + {formatMessage('forgotPassword.title')} + + +
+ + + + {formatMessage('forgotPassword.submit')} + + + {data && theme.palette.success.main }}> + {formatMessage('forgotPassword.instructionsSent')} + } + +
+ ); +} diff --git a/packages/web/src/components/LoginForm/index.tsx b/packages/web/src/components/LoginForm/index.tsx index fab8fae2..d6a82a8e 100644 --- a/packages/web/src/components/LoginForm/index.tsx +++ b/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 }} /> + + Forgot password? + + - Login + {formatMessage('loginForm.title')}
diff --git a/packages/web/src/config/urls.ts b/packages/web/src/config/urls.ts index 062d88f4..be5e5ef7 100644 --- a/packages/web/src/config/urls.ts +++ b/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'; diff --git a/packages/web/src/graphql/mutations/forgot-password.ee.ts b/packages/web/src/graphql/mutations/forgot-password.ee.ts new file mode 100644 index 00000000..9373875e --- /dev/null +++ b/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) + } +`; diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index 22afbb8e..381839d1 100644 --- a/packages/web/src/locales/en.json +++ b/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" +} \ No newline at end of file diff --git a/packages/web/src/pages/ForgotPassword/index.ee.tsx b/packages/web/src/pages/ForgotPassword/index.ee.tsx new file mode 100644 index 00000000..42e7093c --- /dev/null +++ b/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 ( + + + + + + ); +} diff --git a/packages/web/src/routes.tsx b/packages/web/src/routes.tsx index 5120663c..2147cd95 100644 --- a/packages/web/src/routes.tsx +++ b/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 ( } /> + + + + } + /> +