groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #968 from automatisch/forgot-password

Browse Source 
feat: add forgot password featureset
This commit is contained in:
Ömer Faruk Aydın
2023-03-05 10:28:07 +01:00
committed by GitHub
parent f644113af8 4e46b16f7b
commit 63f8fc266d
17 changed files with 354 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,4 @@
import appConfig from '../../config/app';
import User from '../../models/user'; import User from '../../models/user';
import emailQueue from '../../queues/email'; import emailQueue from '../../queues/email';
import { import {
@@ -30,6 +31,8 @@ const forgotPassword = async (_parent: unknown, params: Params) => {
template: 'reset-password-instructions', template: 'reset-password-instructions',
params: { params: {
token: user.resetPasswordToken, token: user.resetPasswordToken,
webAppUrl: appConfig.webAppUrl,
fullName: user.fullName,
}, },
}; };
@@ -40,7 +43,7 @@ const forgotPassword = async (_parent: unknown, params: Params) => {
await emailQueue.add(jobName, jobPayload, jobOptions); await emailQueue.add(jobName, jobPayload, jobOptions);
return; return true;
}; };
export default forgotPassword; export default forgotPassword;

2
packages/backend/src/graphql/mutations/reset-password.ee.ts
View File

@@ -24,7 +24,7 @@ const resetPassword = async (_parent: unknown, params: Params) => {
await user.resetPassword(password); await user.resetPassword(password);
return; return true;
}; };
export default resetPassword; export default resetPassword;

1
packages/backend/src/helpers/authentication.ts
View File

@@ -31,6 +31,7 @@ const authentication = shield(
login: allow, login: allow,
createUser: allow, createUser: allow,
forgotPassword: allow, forgotPassword: allow,
resetPassword: allow,
}, },
}, },
{ {

19
packages/backend/src/views/emails/reset-password-instructions.ee.hbs
View File

@@ -1,16 +1,23 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Title</title> <title>Reset password instructions</title>
</head> </head>
<body> <body>
Hello {{ email }} <p>
Hello {{ fullName }},
</p>
Someone has requested a link to change your password, and you can do this through the link below. <p>
Someone has requested a link to change your password, and you can do this through the link below.
</p>
<a href="/reset-password">Change my password</a> <p>
<a href="{{ webAppUrl }}/reset-password?token={{ token }}">Change my password</a>
</p>
If you didn't request this, please ignore this email. <p>
Your password won't change until you access the link above and create a new one. If you didn't request this, please ignore this email. Your password won't change until you access the link above and create a new one.
</p>
</body> </body>
</html> </html>

4
packages/backend/src/workers/email.ts
View File

@@ -8,13 +8,13 @@ import appConfig from '../config/app';
export const worker = new Worker( export const worker = new Worker(
'email', 'email',
async (job) => { async (job) => {
const { email, subject, templateName, params } = job.data; const { email, subject, template, params } = job.data;
await mailer.sendMail({ await mailer.sendMail({
to: email, to: email,
from: appConfig.fromEmail, from: appConfig.fromEmail,
subject: subject, subject: subject,
html: compileEmail(templateName, params), html: compileEmail(template, params),
}); });
}, },
{ connection: redisConfig } { connection: redisConfig }

4
packages/web/src/components/DeleteAccountDialog/index.ee.tsx
View File

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

68
packages/web/src/components/ForgotPasswordForm/index.ee.tsx Normal file
View File

@@ -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('forgotPasswordForm.title')}
</Typography>
<Form onSubmit={handleSubmit}>
<TextField
label={formatMessage('forgotPasswordForm.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('forgotPasswordForm.submit')}
</LoadingButton>
{data && <Typography variant="body1" sx={{ color: (theme) => theme.palette.success.main }}>
{formatMessage('forgotPasswordForm.instructionsSent')}
</Typography>}
</Form>
</Paper>
);
}

108
packages/web/src/components/LoginForm/index.tsx
View File

@@ -11,59 +11,11 @@ import * as URLS from 'config/urls';
import { LOGIN } from 'graphql/mutations/login'; import { LOGIN } from 'graphql/mutations/login';
import Form from 'components/Form'; import Form from 'components/Form';
import TextField from 'components/TextField'; import TextField from 'components/TextField';
import useFormatMessage from 'hooks/useFormatMessage';
function renderFields(props: { loading: boolean }) {
const { loading = false } = props;
return () => {
return (
<>
<TextField
label="Email"
name="email"
required
fullWidth
margin="dense"
autoComplete="username"
data-test="email-text-field"
/>
<TextField
label="Password"
name="password"
type="password"
required
fullWidth
margin="dense"
autoComplete="current-password"
data-test="password-text-field"
/>
<LoadingButton
type="submit"
variant="contained"
color="primary"
sx={{ boxShadow: 2, mt: 3 }}
loading={loading}
fullWidth
data-test="login-button"
>
Login
</LoadingButton>
<Typography variant="body1" align="center" mt={3}>
Don't have an Automatisch account yet?&nbsp;
<Link component={RouterLink} to={URLS.SIGNUP} underline="none">
Sign up
</Link>
</Typography>
</>
);
};
}
function LoginForm() { function LoginForm() {
const navigate = useNavigate(); const navigate = useNavigate();
const formatMessage = useFormatMessage();
const authentication = useAuthentication(); const authentication = useAuthentication();
const [login, { loading }] = useMutation(LOGIN); const [login, { loading }] = useMutation(LOGIN);
@@ -85,8 +37,6 @@ function LoginForm() {
authentication.updateToken(token); authentication.updateToken(token);
}; };
const render = React.useMemo(() => renderFields({ loading }), [loading]);
return ( return (
<Paper sx={{ px: 2, py: 4 }}> <Paper sx={{ px: 2, py: 4 }}>
<Typography <Typography
@@ -100,10 +50,60 @@ function LoginForm() {
}} }}
gutterBottom gutterBottom
> >
Login {formatMessage('loginForm.title')}
</Typography> </Typography>
<Form onSubmit={handleSubmit} render={render} /> <Form onSubmit={handleSubmit}>
<TextField
label={formatMessage('loginForm.emailFieldLabel')}
name="email"
required
fullWidth
margin="dense"
autoComplete="username"
data-test="email-text-field"
/>
<TextField
label={formatMessage('loginForm.passwordFieldLabel')}
name="password"
type="password"
required
fullWidth
margin="dense"
autoComplete="current-password"
data-test="password-text-field"
sx={{ mb: 1 }}
/>
<Link
component={RouterLink}
to={URLS.FORGOT_PASSWORD}
underline="none"
>
{formatMessage('loginForm.forgotPasswordText')}
</Link>
<LoadingButton
type="submit"
variant="contained"
color="primary"
sx={{ boxShadow: 2, mt: 3 }}
loading={loading}
fullWidth
data-test="login-button"
>
{formatMessage('loginForm.submit')}
</LoadingButton>
<Typography variant="body1" align="center" mt={3}>
{formatMessage('loginForm.noAccount')}
&nbsp;
<Link component={RouterLink} to={URLS.SIGNUP} underline="none">
{formatMessage('loginForm.signUp')}
</Link>
</Typography>
</Form>
</Paper> </Paper>
); );
} }

122
packages/web/src/components/ResetPasswordForm/index.ee.tsx Normal file
View File

@@ -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>
);
}

4
packages/web/src/components/SignUpForm/index.ee.tsx
View File

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

2
packages/web/src/config/urls.ts
View File

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

7
packages/web/src/graphql/mutations/forgot-password.ee.ts Normal file
View File

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

7
packages/web/src/graphql/mutations/reset-password.ee.ts Normal file
View File

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

22
packages/web/src/locales/en.json
View File

@@ -112,6 +112,24 @@
"signupForm.passwordFieldLabel": "Password", "signupForm.passwordFieldLabel": "Password",
"signupForm.confirmPasswordFieldLabel": "Confirm password", "signupForm.confirmPasswordFieldLabel": "Confirm password",
"signupForm.submit": "Sign up", "signupForm.submit": "Sign up",
"signupForm.passwordMustMatch": "Passwords must match.", "signupForm.passwordsMustMatch": "Passwords must match.",
"signupForm.mandatoryInput": "{inputName} is required." "signupForm.mandatoryInput": "{inputName} is required.",
"loginForm.title": "Login",
"loginForm.emailFieldLabel": "Email",
"loginForm.passwordFieldLabel": "Password",
"loginForm.forgotPasswordText": "Forgot password?",
"loginForm.submit": "Login",
"loginForm.noAccount": "Don't have an Automatisch account yet?",
"loginForm.signUp": "Sign up",
"forgotPasswordForm.title": "Forgot password",
"forgotPasswordForm.submit": "Send reset instructions",
"forgotPasswordForm.instructionsSent": "The instructions have been sent!",
"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."
} }

14
packages/web/src/pages/ForgotPassword/index.ee.tsx Normal file
View File

@@ -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 ForgotPassword(): React.ReactElement {
return (
<Box sx={{ display: 'flex', flex: 1, alignItems: 'center' }}>
<Container maxWidth="sm">
<ForgotPasswordForm />
</Container>
</Box>
);
}

14
packages/web/src/pages/ResetPassword/index.ee.tsx Normal file
View File

@@ -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>
);
}

20
packages/web/src/routes.tsx
View File

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