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

Merge pull request #1954 from automatisch/user-invitation

Browse Source 
feat: Implement user invitation functionality
This commit is contained in:
Ömer Faruk Aydın
2024-07-11 12:18:20 +02:00
committed by GitHub
parent c9813e0316 a9f5736c12
commit 099dfbd0b0
34 changed files with 498 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/backend/src/controllers/api/v1/users/accept-invitation.js Normal file
View File

@@ -0,0 +1,21 @@
import User from '../../../../models/user.js';
export default async (request, response) => {
const { token, password } = request.body;
if (!token) {
throw new Error('Invitation token is required!');
}
const user = await User.query()
.findOne({ invitation_token: token })
.throwIfNotFound();
if (!user.isInvitationTokenValid()) {
return response.status(422).end();
}
await user.acceptInvitation(password);
response.status(204).end();
};

11
packages/backend/src/db/migrations/20240708140250_add_status_to_users.js Normal file
View File

@@ -0,0 +1,11 @@
export async function up(knex) {
return knex.schema.table('users', (table) => {
table.string('status').defaultTo('active');
});
}
export async function down(knex) {
return knex.schema.table('users', (table) => {
table.dropColumn('status');
});
}

13
packages/backend/src/db/migrations/20240708141218_add_invitation_token_to_users.js Normal file
View File

@@ -0,0 +1,13 @@
export async function up(knex) {
return knex.schema.table('users', (table) => {
table.string('invitation_token');
table.timestamp('invitation_token_sent_at');
});
}
export async function down(knex) {
return knex.schema.table('users', (table) => {
table.dropColumn('invitation_token');
table.dropColumn('invitation_token_sent_at');
});
}

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

@@ -1,10 +1,16 @@
import appConfig from '../../config/app.js';
import User from '../../models/user.js';
import Role from '../../models/role.js';
import emailQueue from '../../queues/email.js';
import {
REMOVE_AFTER_30_DAYS_OR_150_JOBS,
REMOVE_AFTER_7_DAYS_OR_50_JOBS,
} from '../../helpers/remove-job-configuration.js';
const createUser = async (_parent, params, context) => {
context.currentUser.can('create', 'User');
const { fullName, email, password } = params.input;
const { fullName, email } = params.input;
const existingUser = await User.query().findOne({
email: email.toLowerCase(),
@@ -17,7 +23,7 @@ const createUser = async (_parent, params, context) => {
const userPayload = {
fullName,
email,
password,
status: 'invited',
};
try {
@@ -32,7 +38,29 @@ const createUser = async (_parent, params, context) => {
const user = await User.query().insert(userPayload);
return user;
await user.generateInvitationToken();
const jobName = `Invitation Email - ${user.id}`;
const acceptInvitationUrl = `${appConfig.webAppUrl}/accept-invitation?token=${user.invitationToken}`;
const jobPayload = {
email: user.email,
subject: 'You are invited!',
template: 'invitation-instructions',
params: {
fullName: user.fullName,
acceptInvitationUrl,
},
};
const jobOptions = {
removeOnComplete: REMOVE_AFTER_7_DAYS_OR_50_JOBS,
removeOnFail: REMOVE_AFTER_30_DAYS_OR_150_JOBS,
};
await emailQueue.add(jobName, jobPayload, jobOptions);
return { user, acceptInvitationUrl };
};
export default createUser;

2
packages/backend/src/graphql/mutations/forgot-password.ee.js
View File

@@ -22,7 +22,7 @@ const forgotPassword = async (_parent, params) => {
const jobPayload = {
email: user.email,
subject: 'Reset Password',
template: 'reset-password-instructions',
template: 'reset-password-instructions.ee',
params: {
token: user.resetPasswordToken,
webAppUrl: appConfig.webAppUrl,

8
packages/backend/src/graphql/schema.graphql
View File

@@ -8,7 +8,7 @@ type Mutation {
createFlow(input: CreateFlowInput): Flow
createRole(input: CreateRoleInput): Role
createStep(input: CreateStepInput): Step
createUser(input: CreateUserInput): User
createUser(input: CreateUserInput): UserWithAcceptInvitationUrl
deleteConnection(input: DeleteConnectionInput): Boolean
deleteCurrentUser: Boolean
deleteFlow(input: DeleteFlowInput): Boolean
@@ -375,7 +375,6 @@ input DeleteStepInput {
input CreateUserInput {
fullName: String!
email: String!
password: String!
role: UserRoleInput!
}
@@ -520,6 +519,11 @@ type User {
updatedAt: String
}
type UserWithAcceptInvitationUrl {
user: User
acceptInvitationUrl: String
}
type Role {
id: String
name: String

2
packages/backend/src/helpers/compile-email.ee.js
View File

@@ -6,7 +6,7 @@ import { fileURLToPath } from 'url';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const compileEmail = (emailPath, replacements = {}) => {
const filePath = path.join(__dirname, `../views/emails/${emailPath}.ee.hbs`);
const filePath = path.join(__dirname, `../views/emails/${emailPath}.hbs`);
const source = fs.readFileSync(filePath, 'utf-8').toString();
const template = handlebars.compile(source);
return template(replacements);

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

@@ -33,8 +33,21 @@ class User extends Base {
fullName: { type: 'string', minLength: 1 },
email: { type: 'string', format: 'email', minLength: 1, maxLength: 255 },
password: { type: 'string' },
status: {
type: 'string',
enum: ['active', 'invited'],
default: 'active',
},
resetPasswordToken: { type: ['string', 'null'] },
resetPasswordTokenSentAt: { type: ['string', 'null'], format: 'date-time' },
resetPasswordTokenSentAt: {
type: ['string', 'null'],
format: 'date-time',
},
invitationToken: { type: ['string', 'null'] },
invitationTokenSentAt: {
type: ['string', 'null'],
format: 'date-time',
},
trialExpiryDate: { type: 'string' },
roleId: { type: 'string', format: 'uuid' },
deletedAt: { type: 'string' },
@@ -202,6 +215,13 @@ class User extends Base {
await this.$query().patch({ resetPasswordToken, resetPasswordTokenSentAt });
}
async generateInvitationToken() {
const invitationToken = crypto.randomBytes(64).toString('hex');
const invitationTokenSentAt = new Date().toISOString();
await this.$query().patch({ invitationToken, invitationTokenSentAt });
}
async resetPassword(password) {
return await this.$query().patch({
resetPasswordToken: null,
@@ -210,7 +230,16 @@ class User extends Base {
});
}
async isResetPasswordTokenValid() {
async acceptInvitation(password) {
return await this.$query().patch({
invitationToken: null,
invitationTokenSentAt: null,
status: 'active',
password,
});
}
isResetPasswordTokenValid() {
if (!this.resetPasswordTokenSentAt) {
return false;
}
@@ -222,6 +251,18 @@ class User extends Base {
return now.getTime() - sentAt.getTime() < fourHoursInMilliseconds;
}
isInvitationTokenValid() {
if (!this.invitationTokenSentAt) {
return false;
}
const sentAt = new Date(this.invitationTokenSentAt);
const now = new Date();
const seventyTwoHoursInMilliseconds = 1000 * 60 * 60 * 72;
return now.getTime() - sentAt.getTime() < seventyTwoHoursInMilliseconds;
}
async generateHash() {
if (this.password) {
this.password = await bcrypt.hash(this.password, 10);
@@ -381,7 +422,7 @@ class User extends Base {
email,
password,
fullName,
roleId: adminRole.id
roleId: adminRole.id,
});
await Config.markInstallationCompleted();

3
packages/backend/src/routes/api/v1/users.js
View File

@@ -9,6 +9,7 @@ import getAppsAction from '../../../controllers/api/v1/users/get-apps.js';
import getInvoicesAction from '../../../controllers/api/v1/users/get-invoices.ee.js';
import getSubscriptionAction from '../../../controllers/api/v1/users/get-subscription.ee.js';
import getPlanAndUsageAction from '../../../controllers/api/v1/users/get-plan-and-usage.ee.js';
import acceptInvitationAction from '../../../controllers/api/v1/users/accept-invitation.js';
const router = Router();
@@ -49,4 +50,6 @@ router.get(
asyncHandler(getPlanAndUsageAction)
);
router.post('/invitation', asyncHandler(acceptInvitationAction));
export default router;

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,
};

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

@@ -35,6 +35,7 @@ describe('userSerializer', () => {
email: user.email,
fullName: user.fullName,
id: user.id,
status: user.status,
updatedAt: user.updatedAt.getTime(),
};

23
packages/backend/src/views/emails/invitation-instructions.hbs Normal file
View File

@@ -0,0 +1,23 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Invitation instructions</title>
</head>
<body>
<p>
Hello {{ fullName }},
</p>
<p>
You have been invited to join our platform. To accept the invitation, click the link below.
</p>
<p>
<a href="{{ acceptInvitationUrl }}">Accept invitation</a>
</p>
<p>
If you did not expect this invitation, you can ignore this email.
</p>
</body>
</html>

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

@@ -9,7 +9,7 @@
</p>
<p>
Someone has requested a link to change your password, and you can do this through the link below.
Someone has requested a link to change your password, and you can do this through the link below within 72 hours.
</p>
<p>

1
packages/backend/test/mocks/rest/api/v1/admin/users/get-user.js
View File

@@ -14,6 +14,7 @@ const getUserMock = (currentUser, role) => {
name: role.name,
updatedAt: role.updatedAt.getTime(),
},
status: currentUser.status,
trialExpiryDate: currentUser.trialExpiryDate.toISOString(),
updatedAt: currentUser.updatedAt.getTime(),
},

1
packages/backend/test/mocks/rest/api/v1/admin/users/get-users.js
View File

@@ -18,6 +18,7 @@ const getUsersMock = async (users, roles) => {
updatedAt: role.updatedAt.getTime(),
}
: null,
status: user.status,
trialExpiryDate: user.trialExpiryDate.toISOString(),
updatedAt: user.updatedAt.getTime(),
};

1
packages/backend/test/mocks/rest/api/v1/users/get-current-user.js
View File

@@ -23,6 +23,7 @@ const getCurrentUserMock = (currentUser, role, permissions) => {
name: role.name,
updatedAt: role.updatedAt.getTime(),
},
status: currentUser.status,
trialExpiryDate: currentUser.trialExpiryDate.toISOString(),
updatedAt: currentUser.updatedAt.getTime(),
},

31
packages/e2e-tests/fixtures/accept-invitation-page.js Normal file
View File

@@ -0,0 +1,31 @@
const { BasePage } = require('./base-page');
export class AcceptInvitation extends BasePage {
path = '/accept-invitation';
/**
* @param {import('@playwright/test').Page} page
*/
constructor(page) {
super(page);
this.page = page;
this.passwordTextField = this.page.getByTestId('password-text-field');
this.passwordConfirmationTextField = this.page.getByTestId('confirm-password-text-field');
this.submitButton = this.page.getByTestId('submit-button');
this.pageTitle = this.page.getByTestId('accept-invitation-form-title');
}
async open(token) {
return await this.page.goto(`${this.path}?token=${token}`);
}
async acceptInvitation(
password
) {
await this.passwordTextField.fill(password);
await this.passwordConfirmationTextField.fill(password);
await this.submitButton.click();
}
}

4
packages/e2e-tests/fixtures/admin/create-user-page.js
View File

@@ -11,10 +11,11 @@ export class AdminCreateUserPage extends AuthenticatedPage {
super(page);
this.fullNameInput = page.getByTestId('full-name-input');
this.emailInput = page.getByTestId('email-input');
this.passwordInput = page.getByTestId('password-input');
this.roleInput = page.getByTestId('role.id-autocomplete');
this.createButton = page.getByTestId('create-button');
this.pageTitle = page.getByTestId('create-user-title');
this.invitationEmailInfoAlert = page.getByTestId('invitation-email-info-alert');
this.acceptInvitationLink = page.getByTestId('invitation-email-info-alert').getByRole('link');
}
seed(seed) {
@@ -25,7 +26,6 @@ export class AdminCreateUserPage extends AuthenticatedPage {
return {
fullName: faker.person.fullName(),
email: faker.internet.email().toLowerCase(),
password: faker.internet.password(),
};
}
}

37
packages/e2e-tests/tests/admin/manage-roles.spec.js
View File

@@ -1,5 +1,6 @@
const { test, expect } = require('../../fixtures/index');
const { LoginPage } = require('../../fixtures/login-page');
const { AcceptInvitation } = require('../../fixtures/accept-invitation-page');
test.describe('Role management page', () => {
test('Admin role is not deletable', async ({ adminRolesPage }) => {
@@ -190,13 +191,15 @@ test.describe('Role management page', () => {
await adminCreateUserPage.emailInput.fill(
'user-role-test@automatisch.io'
);
await adminCreateUserPage.passwordInput.fill('sample');
await adminCreateUserPage.roleInput.click();
await adminCreateUserPage.page
.getByRole('option', { name: 'Delete Role', exact: true })
.click();
await adminCreateUserPage.createButton.click();
await adminUsersPage.snackbar.waitFor({
await adminCreateUserPage.snackbar.waitFor({
state: 'attached',
});
await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
state: 'attached',
});
const snackbar = await adminUsersPage.getSnackbarData(
@@ -292,7 +295,6 @@ test.describe('Role management page', () => {
await adminCreateUserPage.emailInput.fill(
'user-delete-role-test@automatisch.io'
);
await adminCreateUserPage.passwordInput.fill('sample');
await adminCreateUserPage.roleInput.click();
await adminCreateUserPage.page
.getByRole('option', { name: 'Cannot Delete Role' })
@@ -301,6 +303,9 @@ test.describe('Role management page', () => {
await adminCreateUserPage.snackbar.waitFor({
state: 'attached',
});
await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
state: 'attached',
});
const snackbar = await adminCreateUserPage.getSnackbarData(
'snackbar-create-user-success'
);
@@ -374,7 +379,6 @@ test('Accessibility of role management page', async ({
await adminCreateUserPage.isMounted();
await adminCreateUserPage.fullNameInput.fill('Role Test');
await adminCreateUserPage.emailInput.fill('basic-role-test@automatisch.io');
await adminCreateUserPage.passwordInput.fill('sample');
await adminCreateUserPage.roleInput.click();
await adminCreateUserPage.page
.getByRole('option', { name: 'Basic Test' })
@@ -383,6 +387,9 @@ test('Accessibility of role management page', async ({
await adminCreateUserPage.snackbar.waitFor({
state: 'attached',
});
await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
state: 'attached',
});
const snackbar = await adminCreateUserPage.getSnackbarData(
'snackbar-create-user-success'
);
@@ -391,10 +398,23 @@ test('Accessibility of role management page', async ({
});
await test.step('Logout and login to the basic role user', async () => {
const acceptInvitationLink = await adminCreateUserPage.acceptInvitationLink;
console.log(acceptInvitationLink);
const acceptInvitationUrl = await acceptInvitationLink.textContent();
console.log(acceptInvitationUrl);
const acceptInvitatonToken = acceptInvitationUrl.split('?token=')[1];
await page.getByTestId('profile-menu-button').click();
await page.getByTestId('logout-item').click();
// await page.reload({ waitUntil: 'networkidle' });
const acceptInvitationPage = new AcceptInvitation(page);
await acceptInvitationPage.open(acceptInvitatonToken);
await acceptInvitationPage.acceptInvitation('sample');
const loginPage = new LoginPage(page);
// await loginPage.isMounted();
await loginPage.login('basic-role-test@automatisch.io', 'sample');
await expect(loginPage.loginButton).not.toBeVisible();
@@ -410,9 +430,14 @@ test('Accessibility of role management page', async ({
await page.waitForTimeout(750);
const isUnmounted = await page.evaluate(() => {
const root = document.querySelector('#root');
if (root) {
return root.children.length === 0;
// We have react query devtools only in dev env.
// In production, there is nothing in root.
// That's why `<= 1`.
return root.children.length <= 1;
}
return false;
});
await expect(isUnmounted).toBe(true);

18
packages/e2e-tests/tests/admin/manage-users.spec.js
View File

@@ -29,16 +29,20 @@ test.describe('User management page', () => {
await adminUsersPage.createUserButton.click();
await adminCreateUserPage.fullNameInput.fill(user.fullName);
await adminCreateUserPage.emailInput.fill(user.email);
await adminCreateUserPage.passwordInput.fill(user.password);
await adminCreateUserPage.roleInput.click();
await adminCreateUserPage.page.getByRole(
'option', { name: 'Admin' }
).click();
await adminCreateUserPage.createButton.click();
await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
state: 'attached'
});
const snackbar = await adminUsersPage.getSnackbarData(
'snackbar-create-user-success'
);
await expect(snackbar.variant).toBe('success');
await adminUsersPage.navigateTo();
await adminUsersPage.closeSnackbar();
}
);
@@ -105,10 +109,10 @@ test.describe('User management page', () => {
await test.step(
'Create the test user',
async () => {
await adminUsersPage.navigateTo();
await adminUsersPage.createUserButton.click();
await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
await adminCreateUserPage.emailInput.fill(testUser.email);
await adminCreateUserPage.passwordInput.fill(testUser.password);
await adminCreateUserPage.roleInput.click();
await adminCreateUserPage.page.getByRole(
'option', { name: 'Admin' }
@@ -125,6 +129,7 @@ test.describe('User management page', () => {
await test.step(
'Delete the created user',
async () => {
await adminUsersPage.navigateTo();
await adminUsersPage.findUserPageWithEmail(testUser.email);
const userRow = await adminUsersPage.getUserRowByEmail(testUser.email);
await adminUsersPage.clickDeleteUser(userRow);
@@ -146,7 +151,6 @@ test.describe('User management page', () => {
await adminUsersPage.createUserButton.click();
await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
await adminCreateUserPage.emailInput.fill(testUser.email);
await adminCreateUserPage.passwordInput.fill(testUser.password);
await adminCreateUserPage.roleInput.click();
await adminCreateUserPage.page.getByRole(
'option', { name: 'Admin' }
@@ -179,7 +183,6 @@ test.describe('User management page', () => {
await adminUsersPage.createUserButton.click();
await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
await adminCreateUserPage.emailInput.fill(testUser.email);
await adminCreateUserPage.passwordInput.fill(testUser.password);
await adminCreateUserPage.roleInput.click();
await adminCreateUserPage.page.getByRole(
'option', { name: 'Admin' }
@@ -196,10 +199,10 @@ test.describe('User management page', () => {
await test.step(
'Create the user again',
async () => {
await adminUsersPage.navigateTo();
await adminUsersPage.createUserButton.click();
await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
await adminCreateUserPage.emailInput.fill(testUser.email);
await adminCreateUserPage.passwordInput.fill(testUser.password);
const createUserPageUrl = page.url();
await adminCreateUserPage.roleInput.click();
await adminCreateUserPage.page.getByRole(
@@ -227,10 +230,10 @@ test.describe('User management page', () => {
await test.step(
'Create the first user',
async () => {
await adminUsersPage.navigateTo();
await adminUsersPage.createUserButton.click();
await adminCreateUserPage.fullNameInput.fill(user1.fullName);
await adminCreateUserPage.emailInput.fill(user1.email);
await adminCreateUserPage.passwordInput.fill(user1.password);
await adminCreateUserPage.roleInput.click();
await adminCreateUserPage.page.getByRole(
'option', { name: 'Admin' }
@@ -247,10 +250,10 @@ test.describe('User management page', () => {
await test.step(
'Create the second user',
async () => {
await adminUsersPage.navigateTo();
await adminUsersPage.createUserButton.click();
await adminCreateUserPage.fullNameInput.fill(user2.fullName);
await adminCreateUserPage.emailInput.fill(user2.email);
await adminCreateUserPage.passwordInput.fill(user2.password);
await adminCreateUserPage.roleInput.click();
await adminCreateUserPage.page.getByRole(
'option', { name: 'Admin' }
@@ -267,6 +270,7 @@ test.describe('User management page', () => {
await test.step(
'Try editing the second user to have the email of the first user',
async () => {
await adminUsersPage.navigateTo();
await adminUsersPage.findUserPageWithEmail(user2.email);
let userRow = await adminUsersPage.getUserRowByEmail(user2.email);
await adminUsersPage.clickEditUser(userRow);

1
packages/e2e-tests/tests/connections/create-connection.spec.js
View File

@@ -36,6 +36,7 @@ test.describe('Connections page', () => {
}) => {
await connectionsPage.clickAddConnectionButton();
await expect(page).toHaveURL('/app/ntfy/connections/add?shared=false');
await expect(page.getByTestId('create-connection-button')).not.toBeDisabled();
await page.getByTestId('create-connection-button').click();
await expect(
page.getByTestId('create-connection-button')

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

@@ -0,0 +1,138 @@
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
data-test="accept-invitation-form-title"
>
{formatMessage('acceptInvitationForm.title')}
</Typography>
<Form
onSubmit={handleSubmit}
resolver={yupResolver(validationSchema)}
mode="onChange"
render={({ formState: { errors, touchedFields } }) => (
<>
<TextField
label={formatMessage('acceptInvitationForm.passwordFieldLabel')}
name="password"
data-test="password-text-field"
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"
data-test="confirm-password-text-field"
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"
data-test="submit-button"
color="primary"
sx={{ boxShadow: 2, my: 3 }}
loading={acceptInvitation.isPending}
disabled={!token}
fullWidth
>
{formatMessage('acceptInvitationForm.submit')}
</LoadingButton>
</>
)}
/>
</Paper>
);
}

1
packages/web/src/components/AddAppConnection/index.jsx
View File

@@ -151,6 +151,7 @@ function AddAppConnection(props) {
color="primary"
sx={{ boxShadow: 2 }}
loading={inProgress}
disabled={!authenticate}
data-test="create-connection-button"
>
{formatMessage('addAppConnection.submit')}

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';

11
packages/web/src/graphql/mutations/create-user.ee.js
View File

@@ -2,12 +2,15 @@ import { gql } from '@apollo/client';
export const CREATE_USER = gql`
mutation CreateUser($input: CreateUserInput) {
createUser(input: $input) {
id
email
fullName
role {
user {
id
email
fullName
role {
id
}
}
acceptInvitationUrl
}
}
`;

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

1
packages/web/src/index.jsx
View File

@@ -35,6 +35,7 @@ root.render(
</SnackbarProvider>
</Router>,
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

13
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",
@@ -198,11 +205,15 @@
"userForm.password": "Password",
"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>
);
}

42
packages/web/src/pages/CreateUser/index.jsx
View File

@@ -2,6 +2,7 @@ import { useMutation } from '@apollo/client';
import LoadingButton from '@mui/lab/LoadingButton';
import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack';
import Alert from '@mui/material/Alert';
import MuiTextField from '@mui/material/TextField';
import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
import * as React from 'react';
@@ -14,7 +15,6 @@ import ControlledAutocomplete from 'components/ControlledAutocomplete';
import Form from 'components/Form';
import PageTitle from 'components/PageTitle';
import TextField from 'components/TextField';
import * as URLS from 'config/urls';
import { CREATE_USER } from 'graphql/mutations/create-user.ee';
import useFormatMessage from 'hooks/useFormatMessage';
import useRoles from 'hooks/useRoles.ee';
@@ -24,11 +24,10 @@ function generateRoleOptions(roles) {
}
export default function CreateUser() {
const navigate = useNavigate();
const formatMessage = useFormatMessage();
const [createUser, { loading }] = useMutation(CREATE_USER);
const { data, loading: isRolesLoading } = useRoles();
const roles = data?.data;
const [createUser, { loading, data }] = useMutation(CREATE_USER);
const { data: rolesData, loading: isRolesLoading } = useRoles();
const roles = rolesData?.data;
const enqueueSnackbar = useEnqueueSnackbar();
const queryClient = useQueryClient();
@@ -38,7 +37,6 @@ export default function CreateUser() {
variables: {
input: {
fullName: userData.fullName,
password: userData.password,
email: userData.email,
role: {
id: userData.role?.id,
@@ -54,8 +52,6 @@ export default function CreateUser() {
'data-test': 'snackbar-create-user-success',
},
});
navigate(URLS.USERS);
} catch (error) {
throw new Error('Failed while creating!');
}
@@ -89,15 +85,6 @@ export default function CreateUser() {
fullWidth
/>
<TextField
required={true}
name="password"
label={formatMessage('userForm.password')}
type="password"
data-test="password-input"
fullWidth
/>
<Can I="update" a="Role">
<ControlledAutocomplete
name="role.id"
@@ -125,6 +112,27 @@ export default function CreateUser() {
>
{formatMessage('createUser.submit')}
</LoadingButton>
{data && (
<Alert
severity="info"
color="primary"
sx={{ fontWeight: '500' }}
data-test="invitation-email-info-alert"
>
{formatMessage('createUser.invitationEmailInfo', {
link: () => (
<a
href={data.createUser.acceptInvitationUrl}
target="_blank"
rel="noreferrer"
>
{data.createUser.acceptInvitationUrl}
</a>
),
})}
</Alert>
)}
</Stack>
</Form>
</Grid>

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={