From 9be556d50d78e502eb2fc23ba779a14391a4a4f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20=C5=9Al=C4=99zak?=
 <102536422+filipslezaklab@users.noreply.github.com>
Date: Mon, 21 Aug 2023 13:59:55 +0200
Subject: [PATCH 1/2] style: add user modal (#313)

---
 web/src/i18n/en/index.ts                      |   5 +-
 web/src/i18n/i18n-types.ts                    |  16 +-
 web/src/i18n/pl/index.ts                      |   3 +
 .../users/UsersOverview/UsersOverview.tsx     |  10 +-
 .../UserEditButton/UserEditButton.tsx         |  12 +-
 .../modals/AddUserModal/AddUserModal.tsx      |  43 ++--
 .../AddUserForm}/AddUserForm.tsx              |  86 ++++----
 .../components/AddUserForm/style.scss         |  44 ++++
 .../EnrollmentTokenCard.tsx                   |  64 ++++++
 .../components/EnrollmentTokenCard/style.scss |  33 +++
 .../StartEnrollmentForm.tsx                   | 171 ++++++++++++++++
 .../components/StartEnrollmentForm/style.scss |  10 +
 .../AddUserModal/hooks/useAddUserModal.tsx    |  38 ++++
 .../modals/AddUserModal/style.scss            |  40 +---
 .../StartEnrollmentModal.tsx                  |  29 ---
 .../components/StartEnrollmentForm.tsx        | 191 ------------------
 .../hooks/useEnrollmentModalStore.tsx         |  31 ---
 web/src/shared/defguard-ui                    |   2 +-
 web/src/shared/hooks/store/useModalStore.ts   |   5 -
 web/src/shared/types.ts                       |   2 -
 20 files changed, 481 insertions(+), 354 deletions(-)
 rename web/src/pages/users/UsersOverview/modals/AddUserModal/{ => components/AddUserForm}/AddUserForm.tsx (76%)
 create mode 100644 web/src/pages/users/UsersOverview/modals/AddUserModal/components/AddUserForm/style.scss
 create mode 100644 web/src/pages/users/UsersOverview/modals/AddUserModal/components/EnrollmentTokenCard/EnrollmentTokenCard.tsx
 create mode 100644 web/src/pages/users/UsersOverview/modals/AddUserModal/components/EnrollmentTokenCard/style.scss
 create mode 100644 web/src/pages/users/UsersOverview/modals/AddUserModal/components/StartEnrollmentForm/StartEnrollmentForm.tsx
 create mode 100644 web/src/pages/users/UsersOverview/modals/AddUserModal/components/StartEnrollmentForm/style.scss
 create mode 100644 web/src/pages/users/UsersOverview/modals/AddUserModal/hooks/useAddUserModal.tsx
 delete mode 100644 web/src/pages/users/UsersOverview/modals/StartEnrollmentModal/StartEnrollmentModal.tsx
 delete mode 100644 web/src/pages/users/UsersOverview/modals/StartEnrollmentModal/components/StartEnrollmentForm.tsx
 delete mode 100644 web/src/pages/users/UsersOverview/modals/StartEnrollmentModal/hooks/useEnrollmentModalStore.tsx

diff --git a/web/src/i18n/en/index.ts b/web/src/i18n/en/index.ts
index 2453e17ba..5587ffe22 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',
           },
         },
       },
diff --git a/web/src/i18n/i18n-types.ts b/web/src/i18n/i18n-types.ts
index 3ac8aa4bc..2b7c310aa 100644
--- a/web/src/i18n/i18n-types.ts
+++ b/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
 					}
@@ -3926,6 +3932,12 @@ export type TranslationFunctions = {
 			 * Add new user
 			 */
 			title: () => LocalizedString
+			messages: {
+				/**
+				 * User added
+				 */
+				userAdded: () => LocalizedString
+			}
 			form: {
 				/**
 				 * Add user
@@ -3994,7 +4006,7 @@ export type TranslationFunctions = {
 					}
 					enableEnrollment: {
 						/**
-						 * Use remote enrollment
+						 * Use enrollment process
 						 */
 						label: () => LocalizedString
 					}
diff --git a/web/src/i18n/pl/index.ts b/web/src/i18n/pl/index.ts
index 700a527a7..92a937c6b 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',
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 = () => {
           )}
           <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>
   );
 };
diff --git a/web/src/pages/users/UsersOverview/components/UserEditButton/UserEditButton.tsx b/web/src/pages/users/UsersOverview/components/UserEditButton/UserEditButton.tsx
index 8f0e588ef..d76116ccb 100644
--- a/web/src/pages/users/UsersOverview/components/UserEditButton/UserEditButton.tsx
+++ b/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,8 +20,8 @@ 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>
@@ -29,7 +29,13 @@ export const UserEditButton = ({ user }: Props) => {
         <EditButtonOption
           key="start-enrollment"
           text={LL.usersOverview.list.editButton.startEnrollment()}
-          onClick={() => openEnrollmentModal(user)}
+          onClick={() =>
+            setAddUserModal({
+              visible: true,
+              step: 1,
+              user: user,
+            })
+          }
         />
       )}
       <EditButtonOption
diff --git a/web/src/pages/users/UsersOverview/modals/AddUserModal/AddUserModal.tsx b/web/src/pages/users/UsersOverview/modals/AddUserModal/AddUserModal.tsx
index fc3b43d07..1b3ed76d2 100644
--- a/web/src/pages/users/UsersOverview/modals/AddUserModal/AddUserModal.tsx
+++ b/web/src/pages/users/UsersOverview/modals/AddUserModal/AddUserModal.tsx
@@ -1,32 +1,43 @@
 import './style.scss';
 
+import { ReactNode } from 'react';
 import { shallow } from 'zustand/shallow';
 
 import { useI18nContext } from '../../../../../i18n/i18n-react';
 import { ModalWithTitle } from '../../../../../shared/defguard-ui/components/Layout/modals/ModalWithTitle/ModalWithTitle';
-import { useModalStore } from '../../../../../shared/hooks/store/useModalStore';
-import { AddUserForm } from './AddUserForm';
+import { AddUserForm } from './components/AddUserForm/AddUserForm';
+import { EnrollmentTokenCard } from './components/EnrollmentTokenCard/EnrollmentTokenCard';
+import { StartEnrollmentForm } from './components/StartEnrollmentForm/StartEnrollmentForm';
+import { useAddUserModal } from './hooks/useAddUserModal';
 
-const AddUserModal = () => {
-  const [{ visible: isOpen }, setModalState] = useModalStore(
-    (state) => [state.addUserModal, state.setAddUserModal],
+const steps: ReactNode[] = [
+  <AddUserForm key={0} />,
+  <StartEnrollmentForm key={1} />,
+  <EnrollmentTokenCard key={2} />,
+];
+
+export const AddUserModal = () => {
+  const { LL } = useI18nContext();
+
+  const [currentStep, visible] = useAddUserModal(
+    (state) => [state.step, state.visible],
     shallow,
   );
 
-  const setIsOpen = (v: boolean) => setModalState({ visible: v });
-  const { LL } = useI18nContext();
+  const [reset, close] = useAddUserModal((state) => [state.reset, state.close], shallow);
 
   return (
     <ModalWithTitle
-      backdrop
-      title={LL.modals.addUser.title()}
-      isOpen={isOpen}
-      setIsOpen={setIsOpen}
       id="add-user-modal"
-    >
-      <AddUserForm />
-    </ModalWithTitle>
+      backdrop
+      title={
+        currentStep === 0 ? LL.modals.addUser.title() : LL.modals.startEnrollment.title()
+      }
+      onClose={close}
+      afterClose={reset}
+      steps={steps}
+      currentStep={currentStep}
+      isOpen={visible}
+    />
   );
 };
-
-export default AddUserModal;
diff --git a/web/src/pages/users/UsersOverview/modals/AddUserModal/AddUserForm.tsx b/web/src/pages/users/UsersOverview/modals/AddUserModal/components/AddUserForm/AddUserForm.tsx
similarity index 76%
rename from web/src/pages/users/UsersOverview/modals/AddUserModal/AddUserForm.tsx
rename to web/src/pages/users/UsersOverview/modals/AddUserModal/components/AddUserForm/AddUserForm.tsx
index 096d1a3bf..e1c3fa66b 100644
--- a/web/src/pages/users/UsersOverview/modals/AddUserModal/AddUserForm.tsx
+++ b/web/src/pages/users/UsersOverview/modals/AddUserModal/components/AddUserForm/AddUserForm.tsx
@@ -1,40 +1,43 @@
+import './style.scss';
+
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { omit } from 'lodash-es';
 import { useMemo, useRef, useState } from 'react';
 import { SubmitHandler, useController, useForm } from 'react-hook-form';
 import * as yup from 'yup';
+import { shallow } from 'zustand/shallow';
 
-import { useI18nContext } from '../../../../../i18n/i18n-react';
-import { FormCheckBox } from '../../../../../shared/defguard-ui/components/Form/FormCheckBox/FormCheckBox';
-import { FormInput } from '../../../../../shared/defguard-ui/components/Form/FormInput/FormInput';
-import { Button } from '../../../../../shared/defguard-ui/components/Layout/Button/Button';
+import { useI18nContext } from '../../../../../../../i18n/i18n-react';
+import { FormCheckBox } from '../../../../../../../shared/defguard-ui/components/Form/FormCheckBox/FormCheckBox';
+import { FormInput } from '../../../../../../../shared/defguard-ui/components/Form/FormInput/FormInput';
+import { Button } from '../../../../../../../shared/defguard-ui/components/Layout/Button/Button';
 import {
   ButtonSize,
   ButtonStyleVariant,
-} from '../../../../../shared/defguard-ui/components/Layout/Button/types';
-import { useModalStore } from '../../../../../shared/hooks/store/useModalStore';
-import useApi from '../../../../../shared/hooks/useApi';
-import { useToaster } from '../../../../../shared/hooks/useToaster';
+} from '../../../../../../../shared/defguard-ui/components/Layout/Button/types';
+import useApi from '../../../../../../../shared/hooks/useApi';
+import { useToaster } from '../../../../../../../shared/hooks/useToaster';
 import {
   patternDigitOrLowercase,
   patternNoSpecialChars,
   patternStartsWithDigit,
   patternValidEmail,
   patternValidPhoneNumber,
-} from '../../../../../shared/patterns';
-import { QueryKeys } from '../../../../../shared/queries';
-import { passwordValidator } from '../../../../../shared/validators/password';
-import { useEnrollmentModalStore } from '../StartEnrollmentModal/hooks/useEnrollmentModalStore';
+} from '../../../../../../../shared/patterns';
+import { QueryKeys } from '../../../../../../../shared/queries';
+import { passwordValidator } from '../../../../../../../shared/validators/password';
+import { useAddUserModal } from '../../hooks/useAddUserModal';
 
 interface Inputs {
   username: string;
-  password?: string;
   email: string;
   last_name: string;
   first_name: string;
-  phone?: string;
-  // had to add field for conditional form validation to work
   enable_enrollment: boolean;
+  // disabled when enableEnrollment is true
+  password?: string;
+  phone?: string;
 }
 
 export const AddUserForm = () => {
@@ -120,24 +123,30 @@ export const AddUserForm = () => {
 
   const queryClient = useQueryClient();
 
-  const setModalState = useModalStore((state) => state.setAddUserModal);
-  const openEnrollmentModal = useEnrollmentModalStore((state) => state.open);
-
   const toaster = useToaster();
 
+  const [setModalState, nextStep, close] = useAddUserModal(
+    (state) => [state.setState, state.nextStep, state.close],
+    shallow,
+  );
+
   const addUserMutation = useMutation(addUser, {
     onSuccess: (user) => {
       queryClient.invalidateQueries([QueryKeys.FETCH_USERS_LIST]);
-      toaster.success('User added.');
       if (enableEnrollment) {
-        openEnrollmentModal(user);
+        toaster.success(LL.modals.addUser.messages.userAdded());
+        setModalState({
+          user: user,
+        });
+        nextStep();
+      } else {
+        close();
       }
-      setModalState({ visible: false });
     },
     onError: (err) => {
+      close();
+      toaster.error(LL.messages.error());
       console.error(err);
-      setModalState({ visible: false });
-      toaster.error('Error occurred.');
     },
   });
 
@@ -148,14 +157,16 @@ export const AddUserForm = () => {
       usernameAvailable(data.username)
         .then(() => {
           setCheckingUsername(false);
-          let userData = data;
-          if (enableEnrollment) {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { password, ...rest } = data;
-            userData = rest;
+          if (data.enable_enrollment) {
+            const userData = omit(data, ['password', 'enable_enrollment']);
+            addUserMutation.mutate(userData);
+          } else {
+            if (data.password) {
+              addUserMutation.mutate(omit(data, ['enable_enrollment']));
+            } else {
+              trigger('password', { shouldFocus: true });
+            }
           }
-          // TODO: add notification toggle to form
-          addUserMutation.mutate(userData);
         })
         .catch(() => {
           setCheckingUsername(false);
@@ -166,7 +177,16 @@ export const AddUserForm = () => {
   };
 
   return (
-    <form data-testid="add-user-form" onSubmit={handleSubmit(onSubmit)}>
+    <form
+      id="add-user-form"
+      data-testid="add-user-form"
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <FormCheckBox
+        labelPlacement="right"
+        label={LL.modals.addUser.form.fields.enableEnrollment.label()}
+        controller={{ control, name: 'enable_enrollment' }}
+      />
       <div className="row">
         <div className="item">
           <FormInput
@@ -188,10 +208,6 @@ export const AddUserForm = () => {
             required={!enableEnrollment}
             disabled={enableEnrollment}
           />
-          <FormCheckBox
-            label={LL.modals.addUser.form.fields.enableEnrollment.label()}
-            controller={{ control, name: 'enable_enrollment' }}
-          />
           <FormInput
             label={LL.modals.addUser.form.fields.email.label()}
             placeholder={LL.modals.addUser.form.fields.email.placeholder()}
diff --git a/web/src/pages/users/UsersOverview/modals/AddUserModal/components/AddUserForm/style.scss b/web/src/pages/users/UsersOverview/modals/AddUserModal/components/AddUserForm/style.scss
new file mode 100644
index 000000000..68a0dc708
--- /dev/null
+++ b/web/src/pages/users/UsersOverview/modals/AddUserModal/components/AddUserForm/style.scss
@@ -0,0 +1,44 @@
+@use '@scssutils' as *;
+
+#add-user-form {
+  width: 100%;
+
+  @media (min-width: 635px) {
+    min-width: 635px;
+  }
+
+  @include media-breakpoint-up(lg) {
+    width: 1100px;
+  }
+
+  & > .form-checkbox {
+    margin-bottom: 25px;
+  }
+  & > .row {
+    display: flex;
+    flex-flow: column;
+    width: 100%;
+    @include media-breakpoint-up(lg) {
+      display: inline-grid;
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: auto;
+      column-gap: 4rem;
+    }
+
+    & > .item {
+      display: flex;
+      flex-flow: column;
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    & > .controls {
+      width: 100%;
+      justify-content: center;
+
+      & > .btn {
+        max-width: 275px;
+      }
+    }
+  }
+}
diff --git a/web/src/pages/users/UsersOverview/modals/AddUserModal/components/EnrollmentTokenCard/EnrollmentTokenCard.tsx b/web/src/pages/users/UsersOverview/modals/AddUserModal/components/EnrollmentTokenCard/EnrollmentTokenCard.tsx
new file mode 100644
index 000000000..8e44b415f
--- /dev/null
+++ b/web/src/pages/users/UsersOverview/modals/AddUserModal/components/EnrollmentTokenCard/EnrollmentTokenCard.tsx
@@ -0,0 +1,64 @@
+import './style.scss';
+
+import { isUndefined } from 'lodash-es';
+import { ReactNode, useMemo } from 'react';
+
+import { useI18nContext } from '../../../../../../../i18n/i18n-react';
+import { ActionButton } from '../../../../../../../shared/defguard-ui/components/Layout/ActionButton/ActionButton';
+import { ActionButtonVariant } from '../../../../../../../shared/defguard-ui/components/Layout/ActionButton/types';
+import { Button } from '../../../../../../../shared/defguard-ui/components/Layout/Button/Button';
+import {
+  ButtonSize,
+  ButtonStyleVariant,
+} from '../../../../../../../shared/defguard-ui/components/Layout/Button/types';
+import { ExpandableCard } from '../../../../../../../shared/defguard-ui/components/Layout/ExpandableCard/ExpandableCard';
+import { useClipboard } from '../../../../../../../shared/hooks/useClipboard';
+import { useAddUserModal } from '../../hooks/useAddUserModal';
+
+export const EnrollmentTokenCard = () => {
+  const { LL } = useI18nContext();
+  const tokenResponse = useAddUserModal((state) => state.tokenResponse);
+  const { writeToClipboard } = useClipboard();
+  const closeModal = useAddUserModal((state) => state.close);
+
+  const actions = useMemo(
+    (): ReactNode[] => [
+      <ActionButton
+        variant={ActionButtonVariant.COPY}
+        disabled={isUndefined(tokenResponse)}
+        onClick={() => {
+          if (tokenResponse) {
+            const res = `URL: ${tokenResponse.enrollment_url} \nToken: ${tokenResponse.enrollment_token}`;
+            writeToClipboard(res);
+          }
+        }}
+        key={0}
+      />,
+    ],
+    [tokenResponse, writeToClipboard],
+  );
+
+  return (
+    <div id="enrollment-token-step">
+      <ExpandableCard
+        title={LL.modals.startEnrollment.tokenCard.title()}
+        actions={actions}
+        expanded
+        disableExpand
+      >
+        <p>URL: {tokenResponse?.enrollment_url}</p>
+        <p>TOKEN: {tokenResponse?.enrollment_token}</p>
+      </ExpandableCard>
+      <div className="controls">
+        <Button
+          type="button"
+          size={ButtonSize.LARGE}
+          styleVariant={ButtonStyleVariant.STANDARD}
+          text={LL.form.close()}
+          className="cancel"
+          onClick={() => closeModal()}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/web/src/pages/users/UsersOverview/modals/AddUserModal/components/EnrollmentTokenCard/style.scss b/web/src/pages/users/UsersOverview/modals/AddUserModal/components/EnrollmentTokenCard/style.scss
new file mode 100644
index 000000000..90c914b83
--- /dev/null
+++ b/web/src/pages/users/UsersOverview/modals/AddUserModal/components/EnrollmentTokenCard/style.scss
@@ -0,0 +1,33 @@
+@use '@scssutils' as *;
+
+#enrollment-token-step {
+  box-sizing: border-box;
+
+  @include media-breakpoint-up(lg) {
+    padding: 0 40px;
+  }
+
+  .expanded-content {
+    p,
+    span,
+    strong,
+    a {
+      @include typography(app-body-2);
+
+      color: var(--text-body-secondary);
+    }
+  }
+
+  & > .controls {
+    margin-top: 40px;
+    display: none;
+
+    & > .btn {
+      width: 100%;
+    }
+
+    @include media-breakpoint-up(lg) {
+      display: block;
+    }
+  }
+}
diff --git a/web/src/pages/users/UsersOverview/modals/AddUserModal/components/StartEnrollmentForm/StartEnrollmentForm.tsx b/web/src/pages/users/UsersOverview/modals/AddUserModal/components/StartEnrollmentForm/StartEnrollmentForm.tsx
new file mode 100644
index 000000000..aa520bd6c
--- /dev/null
+++ b/web/src/pages/users/UsersOverview/modals/AddUserModal/components/StartEnrollmentForm/StartEnrollmentForm.tsx
@@ -0,0 +1,171 @@
+import './style.scss';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation } from '@tanstack/react-query';
+import { useEffect, useMemo } from 'react';
+import { SubmitHandler, useController, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { shallow } from 'zustand/shallow';
+
+import { useI18nContext } from '../../../../../../../i18n/i18n-react';
+import { FormInput } from '../../../../../../../shared/defguard-ui/components/Form/FormInput/FormInput';
+import { FormToggle } from '../../../../../../../shared/defguard-ui/components/Form/FormToggle/FormToggle';
+import { Button } from '../../../../../../../shared/defguard-ui/components/Layout/Button/Button';
+import {
+  ButtonSize,
+  ButtonStyleVariant,
+} from '../../../../../../../shared/defguard-ui/components/Layout/Button/types';
+import { ToggleOption } from '../../../../../../../shared/defguard-ui/components/Layout/Toggle/types';
+import useApi from '../../../../../../../shared/hooks/useApi';
+import { useToaster } from '../../../../../../../shared/hooks/useToaster';
+import { useAddUserModal } from '../../hooks/useAddUserModal';
+
+enum EnrollmentMode {
+  EMAIL = 1,
+  MANUAL = 2,
+}
+
+type FormFields = {
+  mode: EnrollmentMode;
+  email?: string;
+};
+
+export const StartEnrollmentForm = () => {
+  const { LL } = useI18nContext();
+  const {
+    user: { startEnrollment },
+  } = useApi();
+
+  const user = useAddUserModal((state) => state.user);
+  const [nextStep, setModalState, closeModal] = useAddUserModal(
+    (state) => [state.nextStep, state.setState, state.close],
+    shallow,
+  );
+
+  const schema = useMemo(
+    () =>
+      z
+        .object({
+          mode: z.nativeEnum(EnrollmentMode),
+          email: z.string().optional().or(z.literal('')),
+        })
+        .superRefine((obj, ctx) => {
+          if (obj.mode === EnrollmentMode.EMAIL) {
+            if (!obj.email || obj.email.length === 0) {
+              ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: LL.form.error.required(),
+                path: ['email'],
+              });
+            }
+            if (!z.string().trim().email().safeParse(obj.email).success) {
+              ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: LL.form.error.invalid(),
+                path: ['email'],
+              });
+            }
+          }
+        }),
+    [LL.form.error],
+  );
+
+  const { handleSubmit, control, watch, trigger } = useForm<FormFields>({
+    resolver: zodResolver(schema),
+    mode: 'all',
+    defaultValues: {
+      email: '',
+      mode: EnrollmentMode.EMAIL,
+    },
+  });
+
+  const {
+    field: { value: choiceValue },
+  } = useController({ control, name: 'mode' });
+
+  const toaster = useToaster();
+
+  const { mutate, isLoading } = useMutation(startEnrollment, {
+    onSuccess: (res) => {
+      toaster.success(LL.modals.startEnrollment.messages.success());
+      if (choiceValue === EnrollmentMode.EMAIL) {
+        closeModal();
+      } else {
+        setModalState({ tokenResponse: res });
+        nextStep();
+      }
+    },
+    onError: (err) => {
+      console.error(err);
+      toaster.error(LL.modals.startEnrollment.messages.error());
+    },
+  });
+
+  const onSubmit: SubmitHandler<FormFields> = async (data) => {
+    if (user) {
+      mutate({
+        username: user.username,
+        email: data.email,
+        send_enrollment_notification: data.mode === EnrollmentMode.EMAIL,
+      });
+    }
+  };
+
+  const toggleOptions = useMemo(() => {
+    const res: ToggleOption<number>[] = [
+      {
+        text: LL.modals.startEnrollment.form.mode.options.email(),
+        value: EnrollmentMode.EMAIL,
+      },
+      {
+        text: LL.modals.startEnrollment.form.mode.options.manual(),
+        value: EnrollmentMode.MANUAL,
+      },
+    ];
+    return res;
+  }, [LL.modals.startEnrollment.form.mode.options]);
+
+  useEffect(() => {
+    const sub = watch((_, { name }) => {
+      if (name === 'mode') {
+        trigger('email');
+      }
+    });
+    return () => {
+      sub.unsubscribe();
+    };
+  }, [watch, trigger]);
+
+  return (
+    <form
+      id="enrollment-start-form"
+      data-testid="start-enrollment-form"
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <FormToggle options={toggleOptions} controller={{ control, name: 'mode' }} />
+      <FormInput
+        label={LL.modals.startEnrollment.form.email.label()}
+        controller={{ control, name: 'email' }}
+        disabled={choiceValue === EnrollmentMode.MANUAL}
+      />
+
+      <div className="controls">
+        <Button
+          type="button"
+          size={ButtonSize.LARGE}
+          styleVariant={ButtonStyleVariant.STANDARD}
+          text={LL.form.cancel()}
+          className="cancel"
+          onClick={() => closeModal()}
+        />
+        <Button
+          type="submit"
+          text={LL.modals.startEnrollment.form.submit()}
+          styleVariant={ButtonStyleVariant.PRIMARY}
+          size={ButtonSize.LARGE}
+          loading={isLoading}
+        />
+      </div>
+    </form>
+  );
+};
diff --git a/web/src/pages/users/UsersOverview/modals/AddUserModal/components/StartEnrollmentForm/style.scss b/web/src/pages/users/UsersOverview/modals/AddUserModal/components/StartEnrollmentForm/style.scss
new file mode 100644
index 000000000..c30f6da0c
--- /dev/null
+++ b/web/src/pages/users/UsersOverview/modals/AddUserModal/components/StartEnrollmentForm/style.scss
@@ -0,0 +1,10 @@
+@use '@scssutils' as *;
+
+#enrollment-start-form {
+  width: 100%;
+
+  & > .toggle {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+}
diff --git a/web/src/pages/users/UsersOverview/modals/AddUserModal/hooks/useAddUserModal.tsx b/web/src/pages/users/UsersOverview/modals/AddUserModal/hooks/useAddUserModal.tsx
new file mode 100644
index 000000000..f26bca5ae
--- /dev/null
+++ b/web/src/pages/users/UsersOverview/modals/AddUserModal/hooks/useAddUserModal.tsx
@@ -0,0 +1,38 @@
+import { createWithEqualityFn } from 'zustand/traditional';
+
+import { StartEnrollmentResponse, User } from '../../../../../../shared/types';
+
+const defaultValues: StoreValues = {
+  visible: false,
+  step: 0,
+  user: undefined,
+};
+
+export const useAddUserModal = createWithEqualityFn<Store>(
+  (set, get) => ({
+    ...defaultValues,
+    open: () => set({ ...defaultValues, visible: true }),
+    close: () => set({ visible: false }),
+    nextStep: () => set({ step: get().step + 1 }),
+    setState: (values) => set((old) => ({ ...old, ...values })),
+    reset: () => set(defaultValues),
+  }),
+  Object.is,
+);
+
+type Store = StoreValues & StoreMethods;
+
+type StoreValues = {
+  visible: boolean;
+  step: number;
+  user?: User;
+  tokenResponse?: StartEnrollmentResponse;
+};
+
+type StoreMethods = {
+  open: () => void;
+  close: () => void;
+  reset: () => void;
+  nextStep: () => void;
+  setState: (values: Partial<StoreValues>) => void;
+};
diff --git a/web/src/pages/users/UsersOverview/modals/AddUserModal/style.scss b/web/src/pages/users/UsersOverview/modals/AddUserModal/style.scss
index c6a5c205f..3b9919800 100644
--- a/web/src/pages/users/UsersOverview/modals/AddUserModal/style.scss
+++ b/web/src/pages/users/UsersOverview/modals/AddUserModal/style.scss
@@ -1,39 +1,15 @@
-@use '@scss/helpers' as *;
+@use '@scssutils' as *;
 
 #add-user-modal {
-  @include media-breakpoint-up(lg) {
-    width: 1150px;
-  }
-
-  & > .content {
-    & > form {
-      & > .row {
-        display: flex;
-        flex-flow: column;
-        width: 100%;
-        @include media-breakpoint-up(lg) {
-          display: inline-grid;
-          grid-template-columns: 1fr 1fr;
-          grid-template-rows: auto;
-          column-gap: 4rem;
-        }
+  overflow-x: hidden;
 
-        & > .item {
-          display: flex;
-          flex-flow: column;
-        }
-      }
-
-      @include media-breakpoint-up(lg) {
-        & > .controls {
-          width: 100%;
-          justify-content: center;
+  &.step-0 {
+    @media (max-width: 635px) {
+      width: 100%;
+    }
 
-          & > .btn {
-            max-width: 275px;
-          }
-        }
-      }
+    @media (min-width: 635px) {
+      width: auto;
     }
   }
 }
diff --git a/web/src/pages/users/UsersOverview/modals/StartEnrollmentModal/StartEnrollmentModal.tsx b/web/src/pages/users/UsersOverview/modals/StartEnrollmentModal/StartEnrollmentModal.tsx
deleted file mode 100644
index 9855127a5..000000000
--- a/web/src/pages/users/UsersOverview/modals/StartEnrollmentModal/StartEnrollmentModal.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { shallow } from 'zustand/shallow';
-
-import { useI18nContext } from '../../../../../i18n/i18n-react';
-import { ModalWithTitle } from '../../../../../shared/defguard-ui/components/Layout/modals/ModalWithTitle/ModalWithTitle';
-import { StartEnrollmentForm } from './components/StartEnrollmentForm';
-import { useEnrollmentModalStore } from './hooks/useEnrollmentModalStore';
-
-export const StartEnrollmentModal = () => {
-  const { LL } = useI18nContext();
-  const isOpen = useEnrollmentModalStore((state) => state.isOpen);
-
-  const [close, reset] = useEnrollmentModalStore(
-    (state) => [state.close, state.reset],
-    shallow,
-  );
-
-  return (
-    <ModalWithTitle
-      id="start-enrollment-modal"
-      backdrop
-      title={LL.modals.startEnrollment.title()}
-      isOpen={isOpen}
-      onClose={() => close()}
-      afterClose={() => reset()}
-    >
-      <StartEnrollmentForm />
-    </ModalWithTitle>
-  );
-};
diff --git a/web/src/pages/users/UsersOverview/modals/StartEnrollmentModal/components/StartEnrollmentForm.tsx b/web/src/pages/users/UsersOverview/modals/StartEnrollmentModal/components/StartEnrollmentForm.tsx
deleted file mode 100644
index e07f0289d..000000000
--- a/web/src/pages/users/UsersOverview/modals/StartEnrollmentModal/components/StartEnrollmentForm.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useMutation } from '@tanstack/react-query';
-import { useMemo, useState } from 'react';
-import { SubmitHandler, useController, useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { useI18nContext } from '../../../../../../i18n/i18n-react';
-import { FormInput } from '../../../../../../shared/defguard-ui/components/Form/FormInput/FormInput';
-import { FormToggle } from '../../../../../../shared/defguard-ui/components/Form/FormToggle/FormToggle';
-import { ActionButton } from '../../../../../../shared/defguard-ui/components/Layout/ActionButton/ActionButton';
-import { ActionButtonVariant } from '../../../../../../shared/defguard-ui/components/Layout/ActionButton/types';
-import { Button } from '../../../../../../shared/defguard-ui/components/Layout/Button/Button';
-import {
-  ButtonSize,
-  ButtonStyleVariant,
-} from '../../../../../../shared/defguard-ui/components/Layout/Button/types';
-import { ExpandableCard } from '../../../../../../shared/defguard-ui/components/Layout/ExpandableCard/ExpandableCard';
-import { ToggleOption } from '../../../../../../shared/defguard-ui/components/Layout/Toggle/types';
-import useApi from '../../../../../../shared/hooks/useApi';
-import { useClipboard } from '../../../../../../shared/hooks/useClipboard';
-import { useToaster } from '../../../../../../shared/hooks/useToaster';
-import { useEnrollmentModalStore } from '../hooks/useEnrollmentModalStore';
-
-enum EnrollmentMode {
-  EMAIL = 1,
-  MANUAL = 2,
-}
-
-type FormFields = {
-  mode: EnrollmentMode;
-  email?: string;
-};
-
-export const StartEnrollmentForm = () => {
-  const { writeToClipboard } = useClipboard();
-  const closeModal = useEnrollmentModalStore((state) => state.close);
-  const user = useEnrollmentModalStore((state) => state.user);
-  const { LL } = useI18nContext();
-  const [enrollmentUrl, setEnrollmentUrl] = useState<string | undefined>(undefined);
-  const [enrollmentToken, setEnrollmentToken] = useState<string | undefined>(undefined);
-  const {
-    user: { startEnrollment },
-  } = useApi();
-
-  const schema = useMemo(
-    () =>
-      z
-        .object({
-          mode: z.nativeEnum(EnrollmentMode),
-          email: z.string().trim().email(LL.form.error.invalid()).optional(),
-        })
-        .superRefine((obj, ctx) => {
-          if (obj.mode === EnrollmentMode.EMAIL) {
-            if (!obj.email || obj.email.length === 0) {
-              ctx.addIssue({
-                code: z.ZodIssueCode.custom,
-                message: LL.form.error.required(),
-                path: ['email'],
-              });
-            }
-          }
-        }),
-    [LL.form.error],
-  );
-
-  const {
-    handleSubmit,
-    control,
-    formState: { isValid },
-  } = useForm<FormFields>({
-    resolver: zodResolver(schema),
-    mode: 'all',
-    defaultValues: {
-      email: '',
-      mode: EnrollmentMode.EMAIL,
-    },
-  });
-
-  const {
-    field: { value: choiceValue },
-  } = useController({ control, name: 'mode' });
-
-  const toaster = useToaster();
-
-  const startEnrollmentMutation = useMutation(startEnrollment, {
-    onSuccess: () => {
-      toaster.success(LL.modals.startEnrollment.messages.success());
-      if (choiceValue === EnrollmentMode.EMAIL) {
-        closeModal();
-      }
-    },
-    onError: (err) => {
-      console.error(err);
-      toaster.error(LL.modals.startEnrollment.messages.error());
-    },
-  });
-
-  const onSubmit: SubmitHandler<FormFields> = async (data) => {
-    if (user) {
-      startEnrollmentMutation
-        .mutateAsync({
-          username: user.username,
-          email: data.email,
-          send_enrollment_notification: data.mode === EnrollmentMode.EMAIL,
-        })
-        .then((response) => {
-          setEnrollmentUrl(response.enrollment_url);
-          setEnrollmentToken(response.enrollment_token);
-        });
-    }
-  };
-
-  const toggleOptions = useMemo(() => {
-    const res: ToggleOption<number>[] = [
-      {
-        text: LL.modals.startEnrollment.form.mode.options.email(),
-        value: EnrollmentMode.EMAIL,
-      },
-      {
-        text: LL.modals.startEnrollment.form.mode.options.manual(),
-        value: EnrollmentMode.MANUAL,
-      },
-    ];
-    return res;
-  }, [LL.modals.startEnrollment.form.mode.options]);
-
-  const showToken = Boolean(enrollmentUrl && enrollmentToken);
-
-  const getActions = useMemo(
-    () => [
-      <ActionButton
-        type="button"
-        key={1}
-        variant={ActionButtonVariant.COPY}
-        onClick={() => {
-          const res = `Enrollment URL: ${enrollmentUrl}\nToken: ${enrollmentToken}`;
-          writeToClipboard(res);
-        }}
-      />,
-    ],
-    [enrollmentUrl, enrollmentToken, writeToClipboard],
-  );
-
-  return (
-    <>
-      {showToken ? (
-        <ExpandableCard
-          title={LL.modals.startEnrollment.tokenCard.title()}
-          disableExpand={true}
-          expanded={true}
-          actions={getActions}
-        >
-          <p>Enrollment URL: {enrollmentUrl}</p>
-          <p>Token: {enrollmentToken}</p>
-        </ExpandableCard>
-      ) : (
-        <form data-testid="start-enrollment-form" onSubmit={handleSubmit(onSubmit)}>
-          <FormToggle
-            options={toggleOptions}
-            controller={{ control, name: 'mode' }}
-            disabled={showToken}
-          />
-          <FormInput
-            label={LL.modals.startEnrollment.form.email.label()}
-            controller={{ control, name: 'email' }}
-            disabled={choiceValue === EnrollmentMode.MANUAL || showToken}
-          />
-
-          <div className="controls">
-            <Button
-              type="button"
-              size={ButtonSize.LARGE}
-              styleVariant={ButtonStyleVariant.STANDARD}
-              text={LL.form.cancel()}
-              className="cancel"
-              onClick={() => closeModal()}
-            />
-            <Button
-              type="submit"
-              text={LL.modals.startEnrollment.form.submit()}
-              styleVariant={ButtonStyleVariant.PRIMARY}
-              size={ButtonSize.LARGE}
-              disabled={!isValid}
-              loading={startEnrollmentMutation.isLoading}
-            />
-          </div>
-        </form>
-      )}
-    </>
-  );
-};
diff --git a/web/src/pages/users/UsersOverview/modals/StartEnrollmentModal/hooks/useEnrollmentModalStore.tsx b/web/src/pages/users/UsersOverview/modals/StartEnrollmentModal/hooks/useEnrollmentModalStore.tsx
deleted file mode 100644
index cbfda5aff..000000000
--- a/web/src/pages/users/UsersOverview/modals/StartEnrollmentModal/hooks/useEnrollmentModalStore.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { createWithEqualityFn } from 'zustand/traditional';
-
-import { User } from '../../../../../../shared/types';
-
-const defaultValues: StoreValues = {
-  isOpen: false,
-  user: undefined,
-};
-
-export const useEnrollmentModalStore = createWithEqualityFn<Store>(
-  (set) => ({
-    ...defaultValues,
-    open: (user) => set({ isOpen: true, user }),
-    close: () => set({ isOpen: false }),
-    reset: () => set(defaultValues),
-  }),
-  Object.is,
-);
-
-type Store = StoreValues & StoreMethods;
-
-type StoreValues = {
-  isOpen: boolean;
-  user?: User;
-};
-
-type StoreMethods = {
-  open: (user: User) => void;
-  close: () => void;
-  reset: () => void;
-};
diff --git a/web/src/shared/defguard-ui b/web/src/shared/defguard-ui
index 1a2d3e726..7c9cc35eb 160000
--- a/web/src/shared/defguard-ui
+++ b/web/src/shared/defguard-ui
@@ -1 +1 @@
-Subproject commit 1a2d3e726a4e6f8996c9971d237c8abe071ae2e4
+Subproject commit 7c9cc35ebfb8c4ad5f928c3cb1f8d999580ea455
diff --git a/web/src/shared/hooks/store/useModalStore.ts b/web/src/shared/hooks/store/useModalStore.ts
index f7bb54c6e..87e18956e 100644
--- a/web/src/shared/hooks/store/useModalStore.ts
+++ b/web/src/shared/hooks/store/useModalStore.ts
@@ -52,9 +52,6 @@ export const useModalStore = createWithEqualityFn<UseModalStore>(
     keyDeleteModal: {
       visible: false,
     },
-    addUserModal: {
-      visible: false,
-    },
     webhookModal: {
       visible: false,
       webhook: undefined,
@@ -90,8 +87,6 @@ export const useModalStore = createWithEqualityFn<UseModalStore>(
       set((oldState) => ({
         recoveryCodesModal: { ...oldState.recoveryCodesModal, ...newState },
       })),
-    setAddUserModal: (v) =>
-      set((state) => ({ addUserModal: { ...state.addUserModal, ...v } })),
     setKeyDeleteModal: (v) =>
       set((state) => ({ keyDeleteModal: { ...state.keyDeleteModal, ...v } })),
     setKeyDetailModal: (v) =>
diff --git a/web/src/shared/types.ts b/web/src/shared/types.ts
index f61ee333a..b726e6377 100644
--- a/web/src/shared/types.ts
+++ b/web/src/shared/types.ts
@@ -592,7 +592,6 @@ export interface UseModalStore {
   keyDetailModal: KeyDetailModal;
   keyDeleteModal: KeyDeleteModal;
   deleteUserModal: DeleteUserModal;
-  addUserModal: StandardModalState;
   licenseModal: StandardModalState;
   changePasswordModal: ChangePasswordModal;
   changeWalletModal: ChangeWalletModal;
@@ -609,7 +608,6 @@ export interface UseModalStore {
   setState: (data: Partial<UseModalStore>) => void;
   setWebhookModal: ModalSetter<WebhookModal>;
   setRecoveryCodesModal: ModalSetter<RecoveryCodesModal>;
-  setAddUserModal: ModalSetter<StandardModalState>;
   setKeyDetailModal: ModalSetter<KeyDetailModal>;
   setKeyDeleteModal: ModalSetter<KeyDeleteModal>;
   setDeleteUserModal: ModalSetter<DeleteUserModal>;

From c9f256a9466e15389527dce8787830ecdd98634b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20=C5=9Al=C4=99zak?=
 <102536422+filipslezaklab@users.noreply.github.com>
Date: Mon, 21 Aug 2023 14:51:04 +0200
Subject: [PATCH 2/2] fix: missing enrollment settings field (#314)

---
 web/src/i18n/en/index.ts                        |  3 +++
 web/src/i18n/i18n-types.ts                      | 12 ++++++++++++
 web/src/i18n/pl/index.ts                        |  3 +++
 .../EnrollmentEmail/EnrollmentEmail.tsx         | 17 ++++++++++++++---
 .../components/EnrollmentEmail/style.scss       | 10 ++++++++--
 .../EnrollmentWelcomeMessage.tsx                |  9 ++++++---
 .../EnrollmentWelcomeMessage/style.scss         |  3 +--
 7 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/web/src/i18n/en/index.ts b/web/src/i18n/en/index.ts
index 5587ffe22..b523db552 100644
--- a/web/src/i18n/en/index.ts
+++ b/web/src/i18n/en/index.ts
@@ -1414,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 2b7c310aa..2f8809794 100644
--- a/web/src/i18n/i18n-types.ts
+++ b/web/src/i18n/i18n-types.ts
@@ -3222,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​.
 				 */
@@ -6481,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 92a937c6b..f9235568a 100644
--- a/web/src/i18n/pl/index.ts
+++ b/web/src/i18n/pl/index.ts
@@ -1402,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)}
           />
         </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>
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 = () => {
           />
         </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>
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);