Merge branch 'dev' of github.com:DefGuard/defguard into dev

Author: teon

web/messages/en/modal.json

@@ -137,6 +137,7 @@
   "modal_network_device_manual_config_content": "Use the provided configuration file by importing it into your device's WireGuard app.",
   "modal_network_device_manual_config_download": "Download config file",
   "modal_network_device_manual_config_warning": "Defguard doesn't store private keys. Keys are generated in your browser — only the public key is saved. Download the configuration now; the private key won't be available later.",
+  "modal_user_device_config_warning": "Defguard doesn't store private keys. This configuration excludes them and is not intended for client import or setup.",
   "modal_add_vector_destination_title": "Add Vector destination",
   "modal_add_logstash_destination_title": "Add Logstash destination",
   "modal_logstash_destination_title": "Logstash",

web/src/pages/NetworkDevicesPage/modals/NetworkDeviceConfigModal/NetworkDeviceConfigModal.tsx

@@ -68,7 +68,7 @@ const ModalContent = ({ config, device }: ModalData) => {
       <InfoBanner
         variant="warning"
         icon={IconKind.WarningOutlined}
-        text={m.modal_network_device_manual_config_warning()}
+        text={m.modal_user_device_config_warning()}
       />
       <SizedBox height={ThemeSpacing.Xl2} />
       <CodeBox text={config.replaceAll('\n', '<br/>')} markdown />

web/src/shared/components/modals/AddUserDeviceModal/steps/AddDeviceModalManualDownloadStep/AddDeviceModalManualDownloadStep.tsx

@@ -1,5 +1,7 @@
 import { m } from '../../../../../../paraglide/messages';
 import { Divider } from '../../../../../defguard-ui/components/Divider/Divider';
+import { IconKind } from '../../../../../defguard-ui/components/Icon';
+import { InfoBanner } from '../../../../../defguard-ui/components/InfoBanner/InfoBanner';
 import { ModalControls } from '../../../../../defguard-ui/components/ModalControls/ModalControls';
 import { useAddUserDeviceModal } from '../../store/useAddUserDeviceModal';
 import './style.scss';
@@ -14,8 +16,11 @@ export const AddDeviceModalManualDownloadStep = () => {
 
   return (
     <div id="add-user-device-manual-download">
-      <p>{m.modal_add_user_device_manual_download_warn_title()}</p>
-      <p>{m.modal_add_user_device_manual_download_warn_content()}</p>
+      <InfoBanner
+        variant="warning"
+        icon={IconKind.WarningOutlined}
+        text={m.modal_network_device_manual_config_warning()}
+      />
       <Divider orientation="horizontal" />
       <ModalDeviceConfigSection data={response} privateKey={keys.privateKey} />
       <Divider />

web/src/shared/components/modals/UserDeviceConfigModal/UserDeviceConfigModal.tsx

@@ -1,6 +1,8 @@
 import { m } from '../../../../paraglide/messages';
 import type { AddDeviceResponse } from '../../../api/types';
 import { Divider } from '../../../defguard-ui/components/Divider/Divider';
+import { IconKind } from '../../../defguard-ui/components/Icon';
+import { InfoBanner } from '../../../defguard-ui/components/InfoBanner/InfoBanner';
 import { Modal } from '../../../defguard-ui/components/Modal/Modal';
 import { ModalControls } from '../../../defguard-ui/components/ModalControls/ModalControls';
 import { isPresent } from '../../../defguard-ui/utils/isPresent';
@@ -50,6 +52,12 @@ export const UserDeviceConfigModal = () => {
 const ModalContent = ({ data }: { data: AddDeviceResponse }) => {
   return (
     <>
+      <InfoBanner
+        variant="warning"
+        icon={IconKind.WarningOutlined}
+        text={m.modal_user_device_config_warning()}
+      />
+      <Divider orientation="horizontal" />
       <ModalDeviceConfigSection data={data} />
       <Divider />
       <ModalControls