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

feat: add accept-invitation page

Browse Source
This commit is contained in:
Ali BARIN
2024-07-09 11:46:31 +00:00
committed by Faruk AYDIN
parent 3c3e6e4144
commit 9922033d33
13 changed files with 225 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/backend/src/controllers/api/v1/users/accept-invitation.js
View File

@@ -12,9 +12,7 @@ export default async (request, response) => {
.throwIfNotFound();
if (!user.isInvitationTokenValid()) {
throw new Error(
'Invitation link is not valid or expired. You can use reset password to get a new link.'
);
return response.status(422).end();
}
await user.acceptInvitation(password);

2
packages/backend/src/graphql/mutations/create-user.ee.js
View File

@@ -23,7 +23,7 @@ const createUser = async (_parent, params, context) => {
const userPayload = {
fullName,
email,
status: 'pending',
status: 'invited',
};
try {

7
packages/backend/src/models/user.js
View File

@@ -35,7 +35,7 @@ class User extends Base {
password: { type: 'string' },
status: {
type: 'string',
enum: ['active', 'pending'],
enum: ['active', 'invited'],
default: 'active',
},
resetPasswordToken: { type: ['string', 'null'] },
@@ -234,11 +234,12 @@ class User extends Base {
return await this.$query().patch({
invitationToken: null,
invitationTokenSentAt: null,
status: 'active',
password,
});
}
async isResetPasswordTokenValid() {
isResetPasswordTokenValid() {
if (!this.resetPasswordTokenSentAt) {
return false;
}
@@ -250,7 +251,7 @@ class User extends Base {
return now.getTime() - sentAt.getTime() < fourHoursInMilliseconds;
}
async isInvitationTokenValid() {
isInvitationTokenValid() {
if (!this.invitationTokenSentAt) {
return false;
}

1
packages/backend/src/serializers/user.js
View File

@@ -8,6 +8,7 @@ const userSerializer = (user) => {
email: user.email,
createdAt: user.createdAt.getTime(),
updatedAt: user.updatedAt.getTime(),
status: user.status,
fullName: user.fullName,
};

134
packages/web/src/components/AcceptInvitationForm/index.jsx Normal file
View File

@@ -0,0 +1,134 @@
import { yupResolver } from '@hookform/resolvers/yup';
import LoadingButton from '@mui/lab/LoadingButton';
import Paper from '@mui/material/Paper';
import Alert from '@mui/material/Alert';
import Typography from '@mui/material/Typography';
import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
import * as React from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import * as yup from 'yup';
import Form from 'components/Form';
import TextField from 'components/TextField';
import * as URLS from 'config/urls';
import useAcceptInvitation from 'hooks/useAcceptInvitation';
import useFormatMessage from 'hooks/useFormatMessage';
const validationSchema = yup.object().shape({
password: yup.string().required('acceptInvitationForm.mandatoryInput'),
confirmPassword: yup
.string()
.required('acceptInvitationForm.mandatoryInput')
.oneOf([yup.ref('password')], 'acceptInvitationForm.passwordsMustMatch'),
});
export default function ResetPasswordForm() {
const enqueueSnackbar = useEnqueueSnackbar();
const formatMessage = useFormatMessage();
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const acceptInvitation = useAcceptInvitation();
const token = searchParams.get('token');
const handleSubmit = async (values) => {
await acceptInvitation.mutateAsync({
password: values.password,
token,
});
enqueueSnackbar(formatMessage('acceptInvitationForm.invitationAccepted'), {
variant: 'success',
SnackbarProps: {
'data-test': 'snackbar-accept-invitation-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('acceptInvitationForm.title')}
</Typography>
<Form
onSubmit={handleSubmit}
resolver={yupResolver(validationSchema)}
mode="onChange"
render={({ formState: { errors, touchedFields } }) => (
<>
<TextField
label={formatMessage('acceptInvitationForm.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(
'acceptInvitationForm.passwordFieldLabel',
),
})
: ''
}
/>
<TextField
label={formatMessage(
'acceptInvitationForm.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(
'acceptInvitationForm.confirmPasswordFieldLabel',
),
})
: ''
}
/>
{acceptInvitation.isError && (
<Alert
severity="error"
sx={{ mt: 1, fontWeight: 500 }}
>
{formatMessage('acceptInvitationForm.invalidToken')}
</Alert>
)}
<LoadingButton
type="submit"
variant="contained"
color="primary"
sx={{ boxShadow: 2, my: 3 }}
loading={acceptInvitation.isPending}
disabled={!token}
fullWidth
>
{formatMessage('acceptInvitationForm.submit')}
</LoadingButton>
</>
)}
/>
</Paper>
);
}

16
packages/web/src/components/UserList/index.jsx
View File

@@ -1,6 +1,7 @@
import * as React from 'react';
import { Link } from 'react-router-dom';
import Stack from '@mui/material/Stack';
import Chip from '@mui/material/Chip';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
@@ -64,6 +65,15 @@ export default function UserList() {
</Typography>
</TableCell>
<TableCell component="th">
<Typography
variant="subtitle1"
sx={{ color: 'text.secondary', fontWeight: 700 }}
>
{formatMessage('userList.status')}
</Typography>
</TableCell>
<TableCell component="th" />
</TableRow>
</TableHead>
@@ -100,6 +110,12 @@ export default function UserList() {
</Typography>
</TableCell>
<TableCell>
<Typography variant="subtitle2" data-test="user-status">
<Chip label={user.status} variant="outlined" color={user.status === 'active' ? 'success' : 'warning'} />
</Typography>
</TableCell>
<TableCell>
<Stack direction="row" gap={1} justifyContent="right">
<IconButton

1
packages/web/src/config/urls.js
View File

@@ -5,6 +5,7 @@ export const EXECUTION = (executionId) => `/executions/${executionId}`;
export const LOGIN = '/login';
export const LOGIN_CALLBACK = `${LOGIN}/callback`;
export const SIGNUP = '/sign-up';
export const ACCEPT_INVITATON = '/accept-invitation';
export const FORGOT_PASSWORD = '/forgot-password';
export const RESET_PASSWORD = '/reset-password';
export const APPS = '/apps';

15
packages/web/src/hooks/useAcceptInvitation.js Normal file
View File

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

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

@@ -153,6 +153,14 @@
"resetPasswordForm.passwordFieldLabel": "Password",
"resetPasswordForm.confirmPasswordFieldLabel": "Confirm password",
"resetPasswordForm.passwordUpdated": "The password has been updated. Now, you can login.",
"acceptInvitationForm.passwordsMustMatch": "Passwords must match.",
"acceptInvitationForm.mandatoryInput": "{inputName} is required.",
"acceptInvitationForm.title": "Accept invitation",
"acceptInvitationForm.submit": "Set your password",
"acceptInvitationForm.passwordFieldLabel": "Password",
"acceptInvitationForm.confirmPasswordFieldLabel": "Confirm password",
"acceptInvitationForm.invitationAccepted": "The password has been set. Now, you can login.",
"acceptInvitationForm.invalidToken": "Invitation link is not valid or expired. You can use reset password to get a new link.",
"usageAlert.informationText": "Tasks: {consumedTaskCount}/{allowedTaskCount} (Resets {relativeResetDate})",
"usageAlert.viewPlans": "View plans",
"jsonViewer.noDataFound": "We couldn't find anything matching your search",
@@ -190,7 +198,6 @@
"deleteUserButton.cancel": "Cancel",
"deleteUserButton.confirm": "Delete",
"deleteUserButton.successfullyDeleted": "The user has been deleted.",
"editUserPage.title": "Edit user",
"createUserPage.title": "Create user",
"userForm.fullName": "Full name",
"userForm.email": "Email",
@@ -199,11 +206,14 @@
"createUser.submit": "Create",
"createUser.successfullyCreated": "The user has been created.",
"createUser.invitationEmailInfo": "Invitation email will be sent if SMTP credentials are valid. Otherwise, you can share the invitation link manually: <link></link>",
"editUserPage.title": "Edit user",
"editUser.status": "Status",
"editUser.submit": "Update",
"editUser.successfullyUpdated": "The user has been updated.",
"userList.fullName": "Full name",
"userList.email": "Email",
"userList.role": "Role",
"userList.status": "Status",
"rolesPage.title": "Role management",
"rolesPage.createRole": "Create role",
"deleteRoleButton.title": "Delete role",

14
packages/web/src/pages/AcceptInvitation/index.jsx 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 AcceptInvitationForm from 'components/AcceptInvitationForm';
export default function AcceptInvitation() {
return (
<Box sx={{ display: 'flex', flex: 1, alignItems: 'center' }}>
<Container maxWidth="sm">
<AcceptInvitationForm />
</Container>
</Box>
);
}

15
packages/web/src/pages/EditUser/index.jsx
View File

@@ -3,6 +3,8 @@ import LoadingButton from '@mui/lab/LoadingButton';
import Grid from '@mui/material/Grid';
import Skeleton from '@mui/material/Skeleton';
import Stack from '@mui/material/Stack';
import Chip from '@mui/material/Chip';
import Typography from '@mui/material/Typography';
import MuiTextField from '@mui/material/TextField';
import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
import * as React from 'react';
@@ -82,6 +84,7 @@ export default function EditUser() {
<Skeleton variant="rounded" height={55} />
<Skeleton variant="rounded" height={55} />
<Skeleton variant="rounded" height={55} />
<Skeleton variant="rounded" height={55} />
<Skeleton variant="rounded" height={45} />
</Stack>
)}
@@ -89,6 +92,18 @@ export default function EditUser() {
{!isUserLoading && (
<Form defaultValues={user} onSubmit={handleUserUpdate}>
<Stack direction="column" gap={2}>
<Stack direction="row" gap={2} mb={2} alignItems="center">
<Typography variant="h6" noWrap>
{formatMessage('editUser.status')}
</Typography>
<Chip
label={user.status}
variant="outlined"
color={user.status === 'active' ? 'success' : 'warning'}
/>
</Stack>
<TextField
required={true}
name="fullName"

2
packages/web/src/pages/ForgotPassword/index.ee.jsx
View File

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

10
packages/web/src/routes.jsx
View File

@@ -11,6 +11,7 @@ import Execution from 'pages/Execution';
import Flows from 'pages/Flows';
import Flow from 'pages/Flow';
import Login from 'pages/Login';
import AcceptInvitation from 'pages/AcceptInvitation';
import LoginCallback from 'pages/LoginCallback';
import SignUp from 'pages/SignUp/index.ee';
import ForgotPassword from 'pages/ForgotPassword/index.ee';
@@ -106,6 +107,15 @@ function Routes() {
}
/>
<Route
path={URLS.ACCEPT_INVITATON}
element={
<PublicLayout>
<AcceptInvitation />
</PublicLayout>
}
/>
<Route
path={URLS.FORGOT_PASSWORD}
element={