From 4b10f84c45faea5bfe423aea421d9388484abdc7 Mon Sep 17 00:00:00 2001
From: jakub-tldr <78603704+jakub-tldr@users.noreply.github.com>
Date: Thu, 29 Jan 2026 16:43:17 +0100
Subject: [PATCH 1/7] Add upload certificate file button

---
 .../AddLogStreamingModal.tsx                  | 20 +++++++++++++++----
 .../modals/AddDestinationModal/style.scss     | 11 ++++++++++
 .../FormUploadField/FormUploadField.tsx       |  9 ++++++++-
 .../components/UploadField/UploadField.tsx    |  3 ++-
 .../shared/components/UploadField/types.ts    |  1 +
 5 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/style.scss

diff --git a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx
index 8772a86e44..bdb818b07d 100644
--- a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx
+++ b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx
@@ -19,6 +19,7 @@ import {
   subscribeOpenModal,
 } from '../../../../../shared/hooks/modalControls/modalsSubjects';
 import { ModalName } from '../../../../../shared/hooks/modalControls/modalTypes';
+import './style.scss';
 
 const modalNameValue = ModalName.AddLogStreaming;
 
@@ -136,7 +137,7 @@ const FormStep = ({ destination, setOpen }: FormStepProps) => {
         url: z.string().trim().min(1, m.form_error_required()),
         username: z.string().optional(),
         password: z.string().optional(),
-        certificate: z.string().optional(),
+        certificate: z.file().nullable().optional(),
       }),
     [],
   );
@@ -149,7 +150,7 @@ const FormStep = ({ destination, setOpen }: FormStepProps) => {
       url: '',
       username: '',
       password: '',
-      certificate: '',
+      certificate: null,
     }),
     [],
   );
@@ -162,6 +163,17 @@ const FormStep = ({ destination, setOpen }: FormStepProps) => {
       onChange: formSchema,
     },
     onSubmit: async ({ value }) => {
+      let certificateContent: string | undefined = undefined;
+      
+      if (value.certificate) {
+        try {
+          certificateContent = await value.certificate.text();
+        } catch (error) {
+          console.error('Failed to read certificate file:', error);
+        }
+      }
+      console.log(certificateContent); // todo: delete
+
       const requestData: CreateActivityLogStreamRequest = {
         name: value.name,
         stream_type:
@@ -172,7 +184,7 @@ const FormStep = ({ destination, setOpen }: FormStepProps) => {
           url: value.url,
           username: value.username || undefined,
           password: value.password || undefined,
-          cert: value.certificate || undefined,
+          cert: certificateContent,
         },
       };
 
@@ -216,7 +228,7 @@ const FormStep = ({ destination, setOpen }: FormStepProps) => {
           <SizedBox height={ThemeSpacing.Xl} />
 
           <form.AppField name="certificate">
-            {(field) => <field.FormInput label="Certificate" />}
+            {(field) => <field.FormUploadField title='Upload certificate file' />}
           </form.AppField>
         </form.AppForm>
       </form>
diff --git a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/style.scss b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/style.scss
new file mode 100644
index 0000000000..158760f2b1
--- /dev/null
+++ b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/style.scss
@@ -0,0 +1,11 @@
+.upload-field {
+  width: 100%;
+
+  .inner-track {
+    width: 100%;
+
+    .file-row {
+      width: 100%;
+    }
+  }
+}
diff --git a/web/src/shared/components/FormUploadField/FormUploadField.tsx b/web/src/shared/components/FormUploadField/FormUploadField.tsx
index 1857f97c85..166fa11f92 100644
--- a/web/src/shared/components/FormUploadField/FormUploadField.tsx
+++ b/web/src/shared/components/FormUploadField/FormUploadField.tsx
@@ -9,5 +9,12 @@ export const FormUploadField = (
   const field = useFieldContext<File | null>();
   const error = useFormFieldError();
 
-  return <UploadField error={error} value={field.state.value} {...props} />;
+  return (
+    <UploadField
+      error={error}
+      value={field.state.value}
+      onChange={(value) => field.handleChange(value)}
+      {...props}
+    />
+  );
 };
diff --git a/web/src/shared/components/UploadField/UploadField.tsx b/web/src/shared/components/UploadField/UploadField.tsx
index 8396cb3381..d13de187b3 100644
--- a/web/src/shared/components/UploadField/UploadField.tsx
+++ b/web/src/shared/components/UploadField/UploadField.tsx
@@ -19,6 +19,7 @@ export const UploadField = ({
   loading,
   disabled,
   testId,
+  title,
   onChange,
 }: UploadFieldProps) => {
   const valuePresent = isPresent(value);
@@ -51,7 +52,7 @@ export const UploadField = ({
           <Button
             iconLeft="upload"
             variant="outlined"
-            text={m.cmp_file_upload_button()}
+            text={title ?? m.cmp_file_upload_button()}
             loading={loading || isPending}
             disabled={disabled}
             onClick={() => {
diff --git a/web/src/shared/components/UploadField/types.ts b/web/src/shared/components/UploadField/types.ts
index 1637a50565..07999fbb31 100644
--- a/web/src/shared/components/UploadField/types.ts
+++ b/web/src/shared/components/UploadField/types.ts
@@ -7,5 +7,6 @@ export interface UploadFieldProps {
   disabled?: boolean;
   acceptedExtensions?: string[];
   testId?: string;
+  title?: string;
   onChange?: (value: File | null) => void;
 }

From 9ba5f22b72de7b7e89787f046b2a140c186378ae Mon Sep 17 00:00:00 2001
From: jakub-tldr <78603704+jakub-tldr@users.noreply.github.com>
Date: Fri, 30 Jan 2026 10:49:36 +0100
Subject: [PATCH 2/7] fix validators, enable certifcate files in edit modal

---
 .../AddLogStreamingModal.tsx                  |  4 +--
 .../EditLogStreamingModal.tsx                 | 34 ++++++++++++++-----
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx
index bdb818b07d..3956ead0be 100644
--- a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx
+++ b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx
@@ -135,8 +135,8 @@ const FormStep = ({ destination, setOpen }: FormStepProps) => {
       z.object({
         name: z.string().trim().min(1, m.form_error_required()),
         url: z.string().trim().min(1, m.form_error_required()),
-        username: z.string().optional(),
-        password: z.string().optional(),
+        username: z.string().nullable().optional(),
+        password: z.string().nullable().optional(),
         certificate: z.file().nullable().optional(),
       }),
     [],
diff --git a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/EditDestinationModal/EditLogStreamingModal.tsx b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/EditDestinationModal/EditLogStreamingModal.tsx
index 508d7b08a9..135329817e 100644
--- a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/EditDestinationModal/EditLogStreamingModal.tsx
+++ b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/EditDestinationModal/EditLogStreamingModal.tsx
@@ -20,6 +20,7 @@ import {
   subscribeOpenModal,
 } from '../../../../../shared/hooks/modalControls/modalsSubjects';
 import { ModalName } from '../../../../../shared/hooks/modalControls/modalTypes';
+import { Snackbar } from '../../../../../shared/defguard-ui/providers/snackbar/snackbar';
 
 const modalNameValue = ModalName.EditLogStreaming;
 
@@ -40,7 +41,7 @@ export const EditLogStreamingModal = () => {
   }, [modalData]);
 
   useEffect(() => {
-    const openSub = subscribeOpenModal(modalNameValue, (data) => {
+    const openSub = subscribeOpenModal(modalNameValue, (data: ModalData) => {
       setModalData(data);
       setOpen(true);
     });
@@ -58,7 +59,9 @@ export const EditLogStreamingModal = () => {
       onClose={() => setOpen(false)}
       afterClose={() => setModalData(null)}
     >
-      {isPresent(modalData) && <ModalContent modalData={modalData} setOpen={setOpen} />}
+      {isPresent(modalData) && (
+        <ModalContent key={modalData.id} modalData={modalData} setOpen={setOpen} />
+      )}
     </Modal>
   );
 };
@@ -82,9 +85,9 @@ const ModalContent = ({ modalData, setOpen }: ModalContentProps) => {
       z.object({
         name: z.string().trim().min(1, m.form_error_required()),
         url: z.string().trim().min(1, m.form_error_required()),
-        username: z.string().optional(),
-        password: z.string().optional(),
-        certificate: z.string().optional(),
+        username: z.string().nullable().optional(),
+        password: z.string().nullable().optional(),
+        certificate: z.file().nullable().optional(),
       }),
     [],
   );
@@ -97,7 +100,9 @@ const ModalContent = ({ modalData, setOpen }: ModalContentProps) => {
       url: modalData.config.url,
       username: modalData.config.username || '',
       password: modalData.config.password || '',
-      certificate: modalData.config.cert || '',
+      certificate: modalData.config.cert
+        ? new File([modalData.config.cert], 'certificate.pem')
+        : null,
     }),
     [modalData],
   );
@@ -110,6 +115,19 @@ const ModalContent = ({ modalData, setOpen }: ModalContentProps) => {
       onChange: formSchema,
     },
     onSubmit: async ({ value }) => {
+      let certificateContent: string | undefined = undefined;
+
+      if (value.certificate) {
+        try {
+          certificateContent = await value.certificate.text();
+          if (certificateContent)
+          certificateContent = certificateContent.replace(/\r\n/g, '\n').trim();
+        } catch (error) {
+          Snackbar.error("Failed to read certificate file");
+          console.error('Failed to read certificate file:', error);
+        }
+      }
+
       const requestData: CreateActivityLogStreamRequest = {
         name: value.name,
         stream_type: modalData.stream_type,
@@ -117,7 +135,7 @@ const ModalContent = ({ modalData, setOpen }: ModalContentProps) => {
           url: value.url,
           username: value.username || undefined,
           password: value.password || undefined,
-          cert: value.certificate || undefined,
+          cert: certificateContent || undefined,
         },
       };
 
@@ -161,7 +179,7 @@ const ModalContent = ({ modalData, setOpen }: ModalContentProps) => {
           <SizedBox height={ThemeSpacing.Xl} />
 
           <form.AppField name="certificate">
-            {(field) => <field.FormInput label="Certificate" />}
+            {(field) => <field.FormUploadField title="Upload certificate file" />}
           </form.AppField>
         </form.AppForm>
       </form>

From 8207f94fe46c1a7cd65490ac4fc81b970dd40b2b Mon Sep 17 00:00:00 2001
From: jakub-tldr <78603704+jakub-tldr@users.noreply.github.com>
Date: Fri, 30 Jan 2026 10:52:59 +0100
Subject: [PATCH 3/7] linter

---
 .../modals/AddDestinationModal/AddLogStreamingModal.tsx   | 7 +++----
 .../modals/EditDestinationModal/EditLogStreamingModal.tsx | 8 ++++----
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx
index 3956ead0be..676a810823 100644
--- a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx
+++ b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx
@@ -163,8 +163,8 @@ const FormStep = ({ destination, setOpen }: FormStepProps) => {
       onChange: formSchema,
     },
     onSubmit: async ({ value }) => {
-      let certificateContent: string | undefined = undefined;
-      
+      let certificateContent: string | undefined;
+
       if (value.certificate) {
         try {
           certificateContent = await value.certificate.text();
@@ -172,7 +172,6 @@ const FormStep = ({ destination, setOpen }: FormStepProps) => {
           console.error('Failed to read certificate file:', error);
         }
       }
-      console.log(certificateContent); // todo: delete
 
       const requestData: CreateActivityLogStreamRequest = {
         name: value.name,
@@ -228,7 +227,7 @@ const FormStep = ({ destination, setOpen }: FormStepProps) => {
           <SizedBox height={ThemeSpacing.Xl} />
 
           <form.AppField name="certificate">
-            {(field) => <field.FormUploadField title='Upload certificate file' />}
+            {(field) => <field.FormUploadField title="Upload certificate file" />}
           </form.AppField>
         </form.AppForm>
       </form>
diff --git a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/EditDestinationModal/EditLogStreamingModal.tsx b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/EditDestinationModal/EditLogStreamingModal.tsx
index 135329817e..be1e780b80 100644
--- a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/EditDestinationModal/EditLogStreamingModal.tsx
+++ b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/EditDestinationModal/EditLogStreamingModal.tsx
@@ -11,6 +11,7 @@ import {
 import { Modal } from '../../../../../shared/defguard-ui/components/Modal/Modal';
 import { ModalControls } from '../../../../../shared/defguard-ui/components/ModalControls/ModalControls';
 import { SizedBox } from '../../../../../shared/defguard-ui/components/SizedBox/SizedBox';
+import { Snackbar } from '../../../../../shared/defguard-ui/providers/snackbar/snackbar';
 import { ThemeSpacing } from '../../../../../shared/defguard-ui/types';
 import { isPresent } from '../../../../../shared/defguard-ui/utils/isPresent';
 import { useAppForm } from '../../../../../shared/form';
@@ -20,7 +21,6 @@ import {
   subscribeOpenModal,
 } from '../../../../../shared/hooks/modalControls/modalsSubjects';
 import { ModalName } from '../../../../../shared/hooks/modalControls/modalTypes';
-import { Snackbar } from '../../../../../shared/defguard-ui/providers/snackbar/snackbar';
 
 const modalNameValue = ModalName.EditLogStreaming;
 
@@ -115,15 +115,15 @@ const ModalContent = ({ modalData, setOpen }: ModalContentProps) => {
       onChange: formSchema,
     },
     onSubmit: async ({ value }) => {
-      let certificateContent: string | undefined = undefined;
+      let certificateContent: string | undefined;
 
       if (value.certificate) {
         try {
           certificateContent = await value.certificate.text();
           if (certificateContent)
-          certificateContent = certificateContent.replace(/\r\n/g, '\n').trim();
+            certificateContent = certificateContent.replace(/\r\n/g, '\n').trim();
         } catch (error) {
-          Snackbar.error("Failed to read certificate file");
+          Snackbar.error('Failed to read certificate file');
           console.error('Failed to read certificate file:', error);
         }
       }

From ac8c71e0ac187651f22f0281967d8a61f711dd91 Mon Sep 17 00:00:00 2001
From: jakub-tldr <78603704+jakub-tldr@users.noreply.github.com>
Date: Fri, 30 Jan 2026 10:56:23 +0100
Subject: [PATCH 4/7] add snackbar

---
 .../modals/AddDestinationModal/AddLogStreamingModal.tsx         | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx
index 676a810823..00a6eec150 100644
--- a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx
+++ b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx
@@ -20,6 +20,7 @@ import {
 } from '../../../../../shared/hooks/modalControls/modalsSubjects';
 import { ModalName } from '../../../../../shared/hooks/modalControls/modalTypes';
 import './style.scss';
+import { Snackbar } from '../../../../../shared/defguard-ui/providers/snackbar/snackbar';
 
 const modalNameValue = ModalName.AddLogStreaming;
 
@@ -169,6 +170,7 @@ const FormStep = ({ destination, setOpen }: FormStepProps) => {
         try {
           certificateContent = await value.certificate.text();
         } catch (error) {
+          Snackbar.error('Failed to read certificate file');
           console.error('Failed to read certificate file:', error);
         }
       }

From a15af3f1310ab93a7f5e511cde7c0c0e93ddd46e Mon Sep 17 00:00:00 2001
From: jakub-tldr <78603704+jakub-tldr@users.noreply.github.com>
Date: Fri, 30 Jan 2026 11:08:18 +0100
Subject: [PATCH 5/7] fix

---
 web/src/shared/components/FormUploadField/FormUploadField.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/shared/components/FormUploadField/FormUploadField.tsx b/web/src/shared/components/FormUploadField/FormUploadField.tsx
index 166fa11f92..9d8a362d29 100644
--- a/web/src/shared/components/FormUploadField/FormUploadField.tsx
+++ b/web/src/shared/components/FormUploadField/FormUploadField.tsx
@@ -13,7 +13,7 @@ export const FormUploadField = (
     <UploadField
       error={error}
       value={field.state.value}
-      onChange={(value) => field.handleChange(value)}
+      onChange={field.handleChange}
       {...props}
     />
   );

From 2d44cf42c7d413ab02bc6c4d373e0ac22c45a312 Mon Sep 17 00:00:00 2001
From: jakub-tldr <78603704+jakub-tldr@users.noreply.github.com>
Date: Fri, 30 Jan 2026 11:47:41 +0100
Subject: [PATCH 6/7] apply suggestions

---
 .../AddLogStreamingModal.tsx                  | 10 +++----
 .../modals/AddDestinationModal/style.scss     | 11 --------
 .../EditLogStreamingModal.tsx                 | 27 ++++++++++---------
 .../shared/components/UploadField/style.scss  |  3 ++-
 4 files changed, 22 insertions(+), 29 deletions(-)
 delete mode 100644 web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/style.scss

diff --git a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx
index 00a6eec150..5c1bade6d9 100644
--- a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx
+++ b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx
@@ -136,9 +136,9 @@ const FormStep = ({ destination, setOpen }: FormStepProps) => {
       z.object({
         name: z.string().trim().min(1, m.form_error_required()),
         url: z.string().trim().min(1, m.form_error_required()),
-        username: z.string().nullable().optional(),
-        password: z.string().nullable().optional(),
-        certificate: z.file().nullable().optional(),
+        username: z.string().nullable(),
+        password: z.string().nullable(),
+        certificate: z.file().nullable(),
       }),
     [],
   );
@@ -183,8 +183,8 @@ const FormStep = ({ destination, setOpen }: FormStepProps) => {
             : ActivityLogStreamType.VectorHttp,
         stream_config: {
           url: value.url,
-          username: value.username || undefined,
-          password: value.password || undefined,
+          username: value.username,
+          password: value.password,
           cert: certificateContent,
         },
       };
diff --git a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/style.scss b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/style.scss
deleted file mode 100644
index 158760f2b1..0000000000
--- a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/style.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.upload-field {
-  width: 100%;
-
-  .inner-track {
-    width: 100%;
-
-    .file-row {
-      width: 100%;
-    }
-  }
-}
diff --git a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/EditDestinationModal/EditLogStreamingModal.tsx b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/EditDestinationModal/EditLogStreamingModal.tsx
index be1e780b80..8caac90978 100644
--- a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/EditDestinationModal/EditLogStreamingModal.tsx
+++ b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/EditDestinationModal/EditLogStreamingModal.tsx
@@ -26,6 +26,11 @@ const modalNameValue = ModalName.EditLogStreaming;
 
 type ModalData = ActivityLogStream;
 
+const processCertificate = async (file: File) => {
+  const content = await file.text();
+  return content.replace(/\r\n/g, '\n').trim();
+};
+
 export const EditLogStreamingModal = () => {
   const [isOpen, setOpen] = useState(false);
   const [modalData, setModalData] = useState<ModalData | null>(null);
@@ -85,9 +90,9 @@ const ModalContent = ({ modalData, setOpen }: ModalContentProps) => {
       z.object({
         name: z.string().trim().min(1, m.form_error_required()),
         url: z.string().trim().min(1, m.form_error_required()),
-        username: z.string().nullable().optional(),
-        password: z.string().nullable().optional(),
-        certificate: z.file().nullable().optional(),
+        username: z.string().nullable(),
+        password: z.string().nullable(),
+        certificate: z.file().nullable(),
       }),
     [],
   );
@@ -98,8 +103,8 @@ const ModalContent = ({ modalData, setOpen }: ModalContentProps) => {
     (): FormFields => ({
       name: modalData.name,
       url: modalData.config.url,
-      username: modalData.config.username || '',
-      password: modalData.config.password || '',
+      username: modalData.config.username,
+      password: modalData.config.password,
       certificate: modalData.config.cert
         ? new File([modalData.config.cert], 'certificate.pem')
         : null,
@@ -115,13 +120,11 @@ const ModalContent = ({ modalData, setOpen }: ModalContentProps) => {
       onChange: formSchema,
     },
     onSubmit: async ({ value }) => {
-      let certificateContent: string | undefined;
+      let certificateContent;
 
       if (value.certificate) {
         try {
-          certificateContent = await value.certificate.text();
-          if (certificateContent)
-            certificateContent = certificateContent.replace(/\r\n/g, '\n').trim();
+          certificateContent = await processCertificate(value.certificate);
         } catch (error) {
           Snackbar.error('Failed to read certificate file');
           console.error('Failed to read certificate file:', error);
@@ -133,9 +136,9 @@ const ModalContent = ({ modalData, setOpen }: ModalContentProps) => {
         stream_type: modalData.stream_type,
         stream_config: {
           url: value.url,
-          username: value.username || undefined,
-          password: value.password || undefined,
-          cert: certificateContent || undefined,
+          username: value.username,
+          password: value.password,
+          cert: certificateContent,
         },
       };
 
diff --git a/web/src/shared/components/UploadField/style.scss b/web/src/shared/components/UploadField/style.scss
index 5a2e68d4cb..4443fdd3f1 100644
--- a/web/src/shared/components/UploadField/style.scss
+++ b/web/src/shared/components/UploadField/style.scss
@@ -1,7 +1,7 @@
 .upload-field {
   & > .inner-track {
     display: flex;
-    flex-flow: column;
+    flex-flow: row;
     align-items: flex-start;
     justify-content: flex-start;
     padding: 1px;
@@ -11,6 +11,7 @@
     }
 
     .file-row {
+      flex: 1;
       box-sizing: border-box;
       padding: var(--spacing-sm);
       display: grid;

From 1a170eb3f4d4a4891dd0d9c28f5c73887b2d2a1d Mon Sep 17 00:00:00 2001
From: jakub-tldr <78603704+jakub-tldr@users.noreply.github.com>
Date: Fri, 30 Jan 2026 12:09:47 +0100
Subject: [PATCH 7/7] add helper function, apply suggestions

---
 .../AddLogStreamingModal.tsx                   | 14 ++------------
 .../EditLogStreamingModal.tsx                  | 18 ++----------------
 web/src/shared/api/types.ts                    |  6 +++---
 .../shared/components/UploadField/style.scss   |  2 +-
 web/src/shared/utils/processCertificateFile.ts | 14 ++++++++++++++
 5 files changed, 22 insertions(+), 32 deletions(-)
 create mode 100644 web/src/shared/utils/processCertificateFile.ts

diff --git a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx
index 5c1bade6d9..cca2dff9c7 100644
--- a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx
+++ b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/AddDestinationModal/AddLogStreamingModal.tsx
@@ -19,8 +19,7 @@ import {
   subscribeOpenModal,
 } from '../../../../../shared/hooks/modalControls/modalsSubjects';
 import { ModalName } from '../../../../../shared/hooks/modalControls/modalTypes';
-import './style.scss';
-import { Snackbar } from '../../../../../shared/defguard-ui/providers/snackbar/snackbar';
+import { processCertificateFile } from '../../../../../shared/utils/processCertificateFile';
 
 const modalNameValue = ModalName.AddLogStreaming;
 
@@ -164,16 +163,7 @@ const FormStep = ({ destination, setOpen }: FormStepProps) => {
       onChange: formSchema,
     },
     onSubmit: async ({ value }) => {
-      let certificateContent: string | undefined;
-
-      if (value.certificate) {
-        try {
-          certificateContent = await value.certificate.text();
-        } catch (error) {
-          Snackbar.error('Failed to read certificate file');
-          console.error('Failed to read certificate file:', error);
-        }
-      }
+      const certificateContent = await processCertificateFile(value.certificate);
 
       const requestData: CreateActivityLogStreamRequest = {
         name: value.name,
diff --git a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/EditDestinationModal/EditLogStreamingModal.tsx b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/EditDestinationModal/EditLogStreamingModal.tsx
index 8caac90978..6725204556 100644
--- a/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/EditDestinationModal/EditLogStreamingModal.tsx
+++ b/web/src/pages/settings/SettingsActivityLogStreamingPage/modals/EditDestinationModal/EditLogStreamingModal.tsx
@@ -11,7 +11,6 @@ import {
 import { Modal } from '../../../../../shared/defguard-ui/components/Modal/Modal';
 import { ModalControls } from '../../../../../shared/defguard-ui/components/ModalControls/ModalControls';
 import { SizedBox } from '../../../../../shared/defguard-ui/components/SizedBox/SizedBox';
-import { Snackbar } from '../../../../../shared/defguard-ui/providers/snackbar/snackbar';
 import { ThemeSpacing } from '../../../../../shared/defguard-ui/types';
 import { isPresent } from '../../../../../shared/defguard-ui/utils/isPresent';
 import { useAppForm } from '../../../../../shared/form';
@@ -21,16 +20,12 @@ import {
   subscribeOpenModal,
 } from '../../../../../shared/hooks/modalControls/modalsSubjects';
 import { ModalName } from '../../../../../shared/hooks/modalControls/modalTypes';
+import { processCertificateFile } from '../../../../../shared/utils/processCertificateFile';
 
 const modalNameValue = ModalName.EditLogStreaming;
 
 type ModalData = ActivityLogStream;
 
-const processCertificate = async (file: File) => {
-  const content = await file.text();
-  return content.replace(/\r\n/g, '\n').trim();
-};
-
 export const EditLogStreamingModal = () => {
   const [isOpen, setOpen] = useState(false);
   const [modalData, setModalData] = useState<ModalData | null>(null);
@@ -120,16 +115,7 @@ const ModalContent = ({ modalData, setOpen }: ModalContentProps) => {
       onChange: formSchema,
     },
     onSubmit: async ({ value }) => {
-      let certificateContent;
-
-      if (value.certificate) {
-        try {
-          certificateContent = await processCertificate(value.certificate);
-        } catch (error) {
-          Snackbar.error('Failed to read certificate file');
-          console.error('Failed to read certificate file:', error);
-        }
-      }
+      const certificateContent = await processCertificateFile(value.certificate);
 
       const requestData: CreateActivityLogStreamRequest = {
         name: value.name,
diff --git a/web/src/shared/api/types.ts b/web/src/shared/api/types.ts
index 942eaea980..c361698e8f 100644
--- a/web/src/shared/api/types.ts
+++ b/web/src/shared/api/types.ts
@@ -894,9 +894,9 @@ export interface CreateActivityLogStreamRequest {
 
 export interface ActivityLogStreamConfig {
   url: string;
-  username?: string;
-  password?: string;
-  cert?: string;
+  username: string | null;
+  password: string | null;
+  cert: string | null;
 }
 
 export type ActivityLogSortKey =
diff --git a/web/src/shared/components/UploadField/style.scss b/web/src/shared/components/UploadField/style.scss
index 4443fdd3f1..fd10e4e0e5 100644
--- a/web/src/shared/components/UploadField/style.scss
+++ b/web/src/shared/components/UploadField/style.scss
@@ -1,7 +1,7 @@
 .upload-field {
   & > .inner-track {
     display: flex;
-    flex-flow: row;
+    flex-flow: row nowrap;
     align-items: flex-start;
     justify-content: flex-start;
     padding: 1px;
diff --git a/web/src/shared/utils/processCertificateFile.ts b/web/src/shared/utils/processCertificateFile.ts
new file mode 100644
index 0000000000..fca3e053b2
--- /dev/null
+++ b/web/src/shared/utils/processCertificateFile.ts
@@ -0,0 +1,14 @@
+import { Snackbar } from '../defguard-ui/providers/snackbar/snackbar';
+export const processCertificateFile = async (
+  file: File | null,
+): Promise<string | null> => {
+  if (!file) return null;
+  try {
+    const content = await file.text();
+    return content.replace(/\r\n/g, '\n').trim();
+  } catch (error) {
+    Snackbar.error('Failed to read certificate file');
+    console.error('Failed to read certificate file:', error);
+    return null;
+  }
+};