diff --git a/e2e/utils/controllers/enrollment.ts b/e2e/utils/controllers/enrollment.ts
index 67441c08b..936ede4e0 100644
--- a/e2e/utils/controllers/enrollment.ts
+++ b/e2e/utils/controllers/enrollment.ts
@@ -4,6 +4,7 @@ import { BrowserContext } from 'playwright';
import { defaultUserAdmin, routes, testUserTemplate } from '../../config';
import { User } from '../../types';
import { waitForBase } from '../waitForBase';
+import { waitForPromise } from '../waitForPromise';
import { loginBasic } from './login';
import { logout } from './logout';
@@ -29,25 +30,26 @@ export const createUserEnrollment = async (
await formElement.getByTestId('field-phone').type(user.phone);
await formElement.getByTestId('field-enable_enrollment').click();
await formElement.locator('button[type="submit"]').click();
- await formElement.waitFor({ state: 'hidden', timeout: 2000 });
- const modalElement = page.locator('#start-enrollment-modal');
- await modalElement.waitFor({ state: 'visible' });
- const modalForm = modalElement.locator('form');
- await modalForm.getByTestId('field-email').type('Test@test.pl');
- await modalForm.locator('.toggle-option').nth(1).click();
- await modalForm.locator('button[type="submit"]').click();
+ waitForPromise(2000);
+ const modalElement = page.locator('#add-user-modal');
+ const enrollmentForm = modalElement.getByTestId('start-enrollment-form');
+ await enrollmentForm.locator('.toggle-option').nth(1).click();
+ await enrollmentForm.locator('button[type="submit"]').click();
// Copy to clipboard
await modalElement
- .locator('.content')
+ .locator('.step-content')
+ .locator('#enrollment-token-step')
.locator('.expandable-card')
.locator('.top')
.locator('.actions')
- .getByTestId('copy-enrollment-token')
+ .locator('button')
.click();
+
await modalElement
- .locator('.content')
+ .locator('.step-content')
+ .locator('#enrollment-token-step')
.locator('.controls')
- .getByTestId('button-close-enrollment')
+ .locator('button')
.click();
await modalElement.waitFor({ state: 'hidden' });
await logout(page);
diff --git a/web/src/i18n/en/index.ts b/web/src/i18n/en/index.ts
index 2453e17ba..b523db552 100644
--- a/web/src/i18n/en/index.ts
+++ b/web/src/i18n/en/index.ts
@@ -318,6 +318,9 @@ const en: BaseTranslation = {
},
addUser: {
title: 'Add new user',
+ messages: {
+ userAdded: 'User added',
+ },
form: {
submit: 'Add user',
fields: {
@@ -346,7 +349,7 @@ const en: BaseTranslation = {
label: 'Phone',
},
enableEnrollment: {
- label: 'Use remote enrollment',
+ label: 'Use enrollment process',
},
},
},
@@ -1411,6 +1414,9 @@ const en: BaseTranslation = {
},
welcomeEmail: {
title: 'Welcome e-mail',
+ subject: {
+ label: 'E-mail subject',
+ },
messageBox:
'This information will be sent to user once enrollment is completed. We advise to insert links and explain next steps briefly.',
controls: {
diff --git a/web/src/i18n/i18n-types.ts b/web/src/i18n/i18n-types.ts
index 3ac8aa4bc..2f8809794 100644
--- a/web/src/i18n/i18n-types.ts
+++ b/web/src/i18n/i18n-types.ts
@@ -657,6 +657,12 @@ type RootTranslation = {
* Add new user
*/
title: string
+ messages: {
+ /**
+ * User added
+ */
+ userAdded: string
+ }
form: {
/**
* Add user
@@ -725,7 +731,7 @@ type RootTranslation = {
}
enableEnrollment: {
/**
- * Use remote enrollment
+ * Use enrollment process
*/
label: string
}
@@ -3216,6 +3222,12 @@ type RootTranslation = {
* Welcome e-mail
*/
title: string
+ subject: {
+ /**
+ * E-mail subject
+ */
+ label: string
+ }
/**
* This information will be sent to user once enrollment is completed. We advise to insert links and explain next steps briefly.
*/
@@ -3926,6 +3938,12 @@ export type TranslationFunctions = {
* Add new user
*/
title: () => LocalizedString
+ messages: {
+ /**
+ * User added
+ */
+ userAdded: () => LocalizedString
+ }
form: {
/**
* Add user
@@ -3994,7 +4012,7 @@ export type TranslationFunctions = {
}
enableEnrollment: {
/**
- * Use remote enrollment
+ * Use enrollment process
*/
label: () => LocalizedString
}
@@ -6469,6 +6487,12 @@ export type TranslationFunctions = {
* Welcome e-mail
*/
title: () => LocalizedString
+ subject: {
+ /**
+ * E-mail subject
+ */
+ label: () => LocalizedString
+ }
/**
* This information will be sent to user once enrollment is completed. We advise to insert links and explain next steps briefly.
*/
diff --git a/web/src/i18n/pl/index.ts b/web/src/i18n/pl/index.ts
index 700a527a7..f9235568a 100644
--- a/web/src/i18n/pl/index.ts
+++ b/web/src/i18n/pl/index.ts
@@ -318,6 +318,9 @@ const pl: Translation = {
},
},
addUser: {
+ messages: {
+ userAdded: 'Stworzono użytkownika',
+ },
title: 'Dodaj nowego użytkownika',
form: {
submit: 'Dodaj użytkownika',
@@ -1399,6 +1402,9 @@ const pl: Translation = {
messageBox: 'Ta informacja będzie wyświetlona w końcowym kroku rejestracj',
},
welcomeEmail: {
+ subject: {
+ label: 'Temat wiadomości',
+ },
title: 'Powitalny E-mail',
messageBox: 'Ta informacja będzie wysłana gdy użytkownik zakończy rejestrację.',
controls: {
diff --git a/web/src/pages/enrollment/components/EnrollmentEmail/EnrollmentEmail.tsx b/web/src/pages/enrollment/components/EnrollmentEmail/EnrollmentEmail.tsx
index d8b10d67a..5ecd66e5f 100644
--- a/web/src/pages/enrollment/components/EnrollmentEmail/EnrollmentEmail.tsx
+++ b/web/src/pages/enrollment/components/EnrollmentEmail/EnrollmentEmail.tsx
@@ -2,7 +2,7 @@ import './style.scss';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { isUndefined } from 'lodash-es';
-import { useEffect, useState } from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
import { useI18nContext } from '../../../../i18n/i18n-react';
import SvgIconCheckmark from '../../../../shared/components/svg/IconCheckmark';
@@ -13,8 +13,10 @@ import {
} from '../../../../shared/defguard-ui/components/Layout/Button/types';
import { Card } from '../../../../shared/defguard-ui/components/Layout/Card/Card';
import { CheckBox } from '../../../../shared/defguard-ui/components/Layout/Checkbox/CheckBox';
+import { Input } from '../../../../shared/defguard-ui/components/Layout/Input/Input';
import { MessageBox } from '../../../../shared/defguard-ui/components/Layout/MessageBox/MessageBox';
import { MessageBoxType } from '../../../../shared/defguard-ui/components/Layout/MessageBox/types';
+import { Textarea } from '../../../../shared/defguard-ui/components/Layout/Textarea/Textarea';
import useApi from '../../../../shared/hooks/useApi';
import { useToaster } from '../../../../shared/hooks/useToaster';
import { QueryKeys } from '../../../../shared/queries';
@@ -28,6 +30,7 @@ export const EnrollmentEmail = () => {
const { LL } = useI18nContext();
const [duplicateMessage, setDuplicateMessage] = useState(false);
const [email, setEmail] = useState('');
+ const [subject, setSubject] = useState('');
const componentLL = LL.enrollmentPage.settings.welcomeEmail;
const settings = useEnrollmentStore((state) => state.settings);
const toaster = useToaster();
@@ -50,6 +53,7 @@ export const EnrollmentEmail = () => {
...settings,
enrollment_use_welcome_message_as_email: duplicateMessage,
enrollment_welcome_email: email,
+ enrollment_welcome_email_subject: subject,
});
}
};
@@ -58,6 +62,7 @@ export const EnrollmentEmail = () => {
if (settings) {
setDuplicateMessage(settings.enrollment_use_welcome_message_as_email);
setEmail(settings.enrollment_welcome_email);
+ setSubject(settings.enrollment_welcome_email_subject);
}
//eslint-disable-next-line
}, []);
@@ -90,10 +95,16 @@ export const EnrollmentEmail = () => {
disabled={isUndefined(settings)}
/>
+ setSubject(e.target.value)}
+ disabled={isLoading || isUndefined(settings)}
+ />
-
diff --git a/web/src/pages/enrollment/components/EnrollmentEmail/style.scss b/web/src/pages/enrollment/components/EnrollmentEmail/style.scss
index 7b8646355..b2fde9fcb 100644
--- a/web/src/pages/enrollment/components/EnrollmentEmail/style.scss
+++ b/web/src/pages/enrollment/components/EnrollmentEmail/style.scss
@@ -43,6 +43,13 @@
}
}
+ & > .input {
+ box-sizing: border-box;
+ margin: 20px 0;
+ width: 100%;
+ padding: 0;
+ }
+
& > .text-wrapper {
border-radius: 15px;
box-sizing: border-box;
@@ -50,7 +57,6 @@
border: 1px solid var(--border-primary);
width: 100%;
min-height: 700px;
- resize: vertical;
overflow: hidden;
& > textarea {
min-height: 660px;
@@ -60,7 +66,7 @@
padding: 0;
margin: 0;
resize: none;
- overflow-y: auto;
+ overflow: none;
background-color: transparent;
@include typography(app-welcome-2);
diff --git a/web/src/pages/enrollment/components/EnrollmentWelcomeMessage/EnrollmentWelcomeMessage.tsx b/web/src/pages/enrollment/components/EnrollmentWelcomeMessage/EnrollmentWelcomeMessage.tsx
index 3f838fb09..bee12b0a4 100644
--- a/web/src/pages/enrollment/components/EnrollmentWelcomeMessage/EnrollmentWelcomeMessage.tsx
+++ b/web/src/pages/enrollment/components/EnrollmentWelcomeMessage/EnrollmentWelcomeMessage.tsx
@@ -2,7 +2,7 @@ import './style.scss';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { isUndefined } from 'lodash-es';
-import { useEffect, useState } from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
import { useI18nContext } from '../../../../i18n/i18n-react';
import SvgIconCheckmark from '../../../../shared/components/svg/IconCheckmark';
@@ -14,6 +14,7 @@ import {
import { Card } from '../../../../shared/defguard-ui/components/Layout/Card/Card';
import { MessageBox } from '../../../../shared/defguard-ui/components/Layout/MessageBox/MessageBox';
import { MessageBoxType } from '../../../../shared/defguard-ui/components/Layout/MessageBox/types';
+import { Textarea } from '../../../../shared/defguard-ui/components/Layout/Textarea/Textarea';
import useApi from '../../../../shared/hooks/useApi';
import { useToaster } from '../../../../shared/hooks/useToaster';
import { QueryKeys } from '../../../../shared/queries';
@@ -71,9 +72,11 @@ export const EnrollmentWelcomeMessage = () => {
/>
-
diff --git a/web/src/pages/enrollment/components/EnrollmentWelcomeMessage/style.scss b/web/src/pages/enrollment/components/EnrollmentWelcomeMessage/style.scss
index babbe32b9..703148f63 100644
--- a/web/src/pages/enrollment/components/EnrollmentWelcomeMessage/style.scss
+++ b/web/src/pages/enrollment/components/EnrollmentWelcomeMessage/style.scss
@@ -33,7 +33,6 @@
border: 1px solid var(--border-primary);
width: 100%;
min-height: 700px;
- resize: vertical;
overflow: hidden;
& > textarea {
min-height: 660px;
@@ -43,7 +42,7 @@
padding: 0;
margin: 0;
resize: none;
- overflow-y: auto;
+ overflow: hidden;
background-color: transparent;
@include typography(app-welcome-2);
diff --git a/web/src/pages/users/UsersOverview/UsersOverview.tsx b/web/src/pages/users/UsersOverview/UsersOverview.tsx
index f1e185b60..d89ad55f4 100644
--- a/web/src/pages/users/UsersOverview/UsersOverview.tsx
+++ b/web/src/pages/users/UsersOverview/UsersOverview.tsx
@@ -22,13 +22,12 @@ import {
SelectSelectedValue,
SelectSizeVariant,
} from '../../../shared/defguard-ui/components/Layout/Select/types';
-import { useModalStore } from '../../../shared/hooks/store/useModalStore';
import useApi from '../../../shared/hooks/useApi';
import { QueryKeys } from '../../../shared/queries';
import { User } from '../../../shared/types';
import { UsersList } from './components/UsersList/UsersList';
-import AddUserModal from './modals/AddUserModal/AddUserModal';
-import { StartEnrollmentModal } from './modals/StartEnrollmentModal/StartEnrollmentModal';
+import { AddUserModal } from './modals/AddUserModal/AddUserModal';
+import { useAddUserModal } from './modals/AddUserModal/hooks/useAddUserModal';
enum FilterOptions {
ALL = 'all',
@@ -83,7 +82,7 @@ export const UsersOverview = () => {
const [usersSearchValue, setUsersSearchValue] = useState('');
- const setUserAddModalState = useModalStore((state) => state.setAddUserModal);
+ const openAddUserModal = useAddUserModal((state) => state.open);
const filteredUsers = useMemo(() => {
if (!users || (users && !users.length)) {
@@ -161,7 +160,7 @@ export const UsersOverview = () => {
)}