Merge branch 'main' of github.com:DefGuard/defguard into 279-e2e-test…

…-enrollment-process

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('[email protected]');
-  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);

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

web/src/i18n/i18n-types.ts

@@ -657,6 +657,12 @@ type RootTranslation = {
 			 * A​d​d​ ​n​e​w​ ​u​s​e​r
 			 */
 			title: string
+			messages: {
+				/**
+				 * U​s​e​r​ ​a​d​d​e​d
+				 */
+				userAdded: string
+			}
 			form: {
 				/**
 				 * A​d​d​ ​u​s​e​r
@@ -725,7 +731,7 @@ type RootTranslation = {
 					}
 					enableEnrollment: {
 						/**
-						 * U​s​e​ ​r​e​m​o​t​e​ ​e​n​r​o​l​l​m​e​n​t
+						 * U​s​e​ ​e​n​r​o​l​l​m​e​n​t​ ​p​r​o​c​e​s​s
 						 */
 						label: string
 					}
@@ -3216,6 +3222,12 @@ type RootTranslation = {
 				 * W​e​l​c​o​m​e​ ​e​-​m​a​i​l
 				 */
 				title: string
+				subject: {
+					/**
+					 * E​-​m​a​i​l​ ​s​u​b​j​e​c​t
+					 */
+					label: string
+				}
 				/**
 				 * T​h​i​s​ ​i​n​f​o​r​m​a​t​i​o​n​ ​w​i​l​l​ ​b​e​ ​s​e​n​t​ ​t​o​ ​u​s​e​r​ ​o​n​c​e​ ​e​n​r​o​l​l​m​e​n​t​ ​i​s​ ​c​o​m​p​l​e​t​e​d​.​ ​W​e​ ​a​d​v​i​s​e​ ​t​o​ ​i​n​s​e​r​t​ ​l​i​n​k​s​ ​a​n​d​ ​e​x​p​l​a​i​n​ ​n​e​x​t​ ​s​t​e​p​s​ ​b​r​i​e​f​l​y​.
 				 */
@@ -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.
 				 */

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

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)}
           />
         </div>
+        <Input
+          label={componentLL.subject.label()}
+          value={subject}
+          onChange={(e) => setSubject(e.target.value)}
+          disabled={isLoading || isUndefined(settings)}
+        />
         <div className="text-wrapper">
-          <textarea
+          <Textarea
             value={email}
-            onChange={(ev) => setEmail(ev.target.value)}
+            onChange={(ev: ChangeEvent<HTMLTextAreaElement>) => setEmail(ev.target.value)}
             disabled={isLoading || isUndefined(settings)}
           />
         </div>

web/src/pages/enrollment/components/EnrollmentEmail/style.scss

@@ -43,14 +43,20 @@
       }
     }
 
+    & > .input {
+      box-sizing: border-box;
+      margin: 20px 0;
+      width: 100%;
+      padding: 0;
+    }
+
     & > .text-wrapper {
       border-radius: 15px;
       box-sizing: border-box;
       padding: 20px;
       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);

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 = () => {
           />
         </div>
         <div className="text-wrapper">
-          <textarea
+          <Textarea
             value={message}
-            onChange={(ev) => setMessage(ev.target.value)}
+            onChange={(ev: ChangeEvent<HTMLTextAreaElement>) =>
+              setMessage(ev.target.value)
+            }
             disabled={isUndefined(settings) || isLoading}
           />
         </div>

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

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 = () => {
           )}
           <Button
             className="add-item"
-            onClick={() => setUserAddModalState({ visible: true })}
+            onClick={openAddUserModal}
             size={ButtonSize.SMALL}
             styleVariant={ButtonStyleVariant.PRIMARY}
             icon={<SvgIconUserAddNew />}
@@ -188,7 +187,6 @@ export const UsersOverview = () => {
         </div>
       )}
       <AddUserModal />
-      <StartEnrollmentModal />
     </section>
   );
 };

web/src/pages/users/UsersOverview/components/UserEditButton/UserEditButton.tsx

@@ -8,7 +8,7 @@ import { useAuthStore } from '../../../../../shared/hooks/store/useAuthStore';
 import { useModalStore } from '../../../../../shared/hooks/store/useModalStore';
 import { useUserProfileStore } from '../../../../../shared/hooks/store/useUserProfileStore';
 import { User } from '../../../../../shared/types';
-import { useEnrollmentModalStore } from '../../modals/StartEnrollmentModal/hooks/useEnrollmentModalStore';
+import { useAddUserModal } from '../../modals/AddUserModal/hooks/useAddUserModal';
 
 type Props = {
   user: User;
@@ -20,16 +20,22 @@ export const UserEditButton = ({ user }: Props) => {
   const setProvisionKeyModal = useModalStore((state) => state.setProvisionKeyModal);
   const setDeleteUserModal = useModalStore((state) => state.setDeleteUserModal);
   const setChangePasswordModal = useModalStore((state) => state.setChangePasswordModal);
-  const openEnrollmentModal = useEnrollmentModalStore((state) => state.open);
   const setUserProfile = useUserProfileStore((state) => state.setState);
+  const setAddUserModal = useAddUserModal((state) => state.setState);
   const currentUser = useAuthStore((state) => state.user);
   return (
     <EditButton>
       {!user.is_active && (
         <EditButtonOption
           key="start-enrollment"
           text={LL.usersOverview.list.editButton.startEnrollment()}
-          onClick={() => openEnrollmentModal(user)}
+          onClick={() =>
+            setAddUserModal({
+              visible: true,
+              step: 1,
+              user: user,
+            })
+          }
         />
       )}
       <EditButtonOption