DefGuard · filipslezaklab · Oct 6, 2025 · Oct 3, 2025 · Oct 6, 2025 · Oct 6, 2025
diff --git a/.github/workflows/lint-web.yml b/.github/workflows/lint-web.yml
@@ -36,6 +36,9 @@ jobs:
         run: |
           npm i -g pnpm
           pnpm i --frozen-lockfile
+      - name: Build translations
+        working-directory: ./webnext
+        run: pnpm dlx @inlang/paraglide-js compile --project ./project.inlang --outdir ./src/paraglide
       - name: Lint
         working-directory: ./webnext
         run: pnpm lint

diff --git a/webnext/index.html b/webnext/index.html
@@ -5,6 +5,24 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Defguard</title>
+  <!--Icons-->
+  <link rel="icon" type="image/ico" href="/src/assets/icons/favicon.ico" />
+  <link rel="icon" type="image/png" sizes="16x16" href="/src/assets/icons/favicon-16x16.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="/src/assets/icons/favicon-32x32.png" />
+  <link rel="icon" type="image/png" sizes="96x96" href="/src/assets/icons/favicon-96x96.png" />
+  <!--Apple-->
+  <link rer="apple-touch-icon" href="/src/assets/icons/app/512.png" />
+  <link rel="apple-touch-icon" sizes="57x57" href="/src/assets/icons/app/57.png" />
+  <link rel="apple-touch-icon" sizes="60x60" href="/src/assets/icons/app/60.png" />
+  <link rel="apple-touch-icon" sizes="72x72" href="/src/assets/icons/app/72.png" />
+  <link rel="apple-touch-icon" sizes="76x76" href="/src/assets/icons/app/76.png" />
+  <link rel="apple-touch-icon" sizes="114x114" href="/src/assets/icons/app/114.png" />
+  <link rel="apple-touch-icon" sizes="120x120" href="/src/assets/icons/app/120.png" />
+  <link rel="apple-touch-icon" sizes="144x144" href="/src/assets/icons/app/144.png" />
+  <link rel="apple-touch-icon" sizes="152x152" href="/src/assets/icons/app/152.png" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/src/assets/icons/app/180.png" />
+  <link rel="apple-touch-icon" sizes="256x256" href="/src/assets/icons/app/256.png" />
+  <link rel="apple-touch-icon" sizes="512x512" href="/src/assets/icons/app/512.png" />
 </head>
 
 <body>

diff --git a/webnext/messages/de.json b/webnext/messages/de.json
diff --git a/webnext/messages/en.json b/webnext/messages/en.json
@@ -8,6 +8,7 @@
   "controls_submit": "Submit",
   "controls_hide": "Hide",
   "controls_show": "Show",
+  "controls_got_it": "Got it",
   "form_error_min_len": "Minimum length of {length}",
   "form_error_email": "Enter valid email",
   "form_error_required": "Field is required",
@@ -53,6 +54,9 @@
   "password_end_title": "Password successfully updated.",
   "password_end_subtitle": "Password successfully updated.",
   "password_end_link": "Go to Log in",
+  "client_download_apple_help_title": "Apple hardware type",
+  "client_download_apple_help_content_1": "Click the Apple logo in the top-left corner of your screen and choose About This Mac.",
+  "client_download_apple_help_content_2": "Under the Processor section, you'll see the type of hardware your Mac is using.",
   "client_download_title": "Download defguard application",
   "client_download_subtitle": "Download the client/app you want to activate VPN access on.",
   "client_download_label_desktop": "Desktop clients",
@@ -64,6 +68,7 @@
   "client_download_modal_title": "Download confirmation",
   "client_download_modal_content": "Please make sure to download at least one client, as you'll need it in the next step to configure your VPN device.",
   "client_download_modal_cancel": "Back to download",
+  "client_download_apple_help_header": "Apple Hardware",
   "enrollment_start_title": "Select activation type",
   "enrollment_start_subtitle": "Select the configuration type based on your organization's approach.",
   "enrollment_start_external_title": "Sign in with External SSO",

diff --git a/webnext/package.json b/webnext/package.json
@@ -1,15 +1,14 @@
 {
   "name": "webnext",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build && tsc --noEmit",
-    "check-types": "tsc --noEmit",
+    "build": "vite build && tsc -b",
     "preview": "vite preview",
     "biome": "biome",
-    "lint": "biome check ./src/ && prettier src/**/*.scss --check --log-level error && stylelint \"src/**/*.scss\" -c ./.stylelintrc.json",
+    "lint": "biome check ./src/ && prettier src/**/*.scss --check --log-level error && stylelint \"src/**/*.scss\" -c ./.stylelintrc.json && tsc -b",
     "fix": "biome check ./src/ --write --unsafe && prettier src/**/*.scss -w --log-level silent",
     "tsc": "tsc"
   },

diff --git a/webnext/project.inlang/settings.json b/webnext/project.inlang/settings.json
@@ -2,8 +2,7 @@
   "$schema": "https://inlang.com/schema/project-settings",
   "baseLocale": "en",
   "locales": [
-    "en",
-    "de"
+    "en"
   ],
   "modules": [
     "https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4/dist/index.js",
@@ -12,4 +11,4 @@
   "plugin.inlang.messageFormat": {
     "pathPattern": "./messages/{locale}.json"
   }
-}
+}
diff --git a/webnext/src/assets/icons/android-icon-144x144.png b/webnext/src/assets/icons/android-icon-144x144.png
diff --git a/webnext/src/assets/icons/android-icon-192x192.png b/webnext/src/assets/icons/android-icon-192x192.png
diff --git a/webnext/src/assets/icons/android-icon-36x36.png b/webnext/src/assets/icons/android-icon-36x36.png
diff --git a/webnext/src/assets/icons/android-icon-48x48.png b/webnext/src/assets/icons/android-icon-48x48.png
diff --git a/webnext/src/assets/icons/android-icon-72x72.png b/webnext/src/assets/icons/android-icon-72x72.png
diff --git a/webnext/src/assets/icons/android-icon-96x96.png b/webnext/src/assets/icons/android-icon-96x96.png
diff --git a/webnext/src/assets/icons/apple-icon-114x114.png b/webnext/src/assets/icons/apple-icon-114x114.png
diff --git a/webnext/src/assets/icons/apple-icon-120x120.png b/webnext/src/assets/icons/apple-icon-120x120.png
diff --git a/webnext/src/assets/icons/apple-icon-144x144.png b/webnext/src/assets/icons/apple-icon-144x144.png
diff --git a/webnext/src/assets/icons/apple-icon-152x152.png b/webnext/src/assets/icons/apple-icon-152x152.png
diff --git a/webnext/src/assets/icons/apple-icon-180x180.png b/webnext/src/assets/icons/apple-icon-180x180.png
diff --git a/webnext/src/assets/icons/apple-icon-57x57.png b/webnext/src/assets/icons/apple-icon-57x57.png
diff --git a/webnext/src/assets/icons/apple-icon-60x60.png b/webnext/src/assets/icons/apple-icon-60x60.png
diff --git a/webnext/src/assets/icons/apple-icon-72x72.png b/webnext/src/assets/icons/apple-icon-72x72.png
diff --git a/webnext/src/assets/icons/apple-icon-76x76.png b/webnext/src/assets/icons/apple-icon-76x76.png
diff --git a/webnext/src/assets/icons/apple-icon-precomposed.png b/webnext/src/assets/icons/apple-icon-precomposed.png
diff --git a/webnext/src/assets/icons/apple-icon.png b/webnext/src/assets/icons/apple-icon.png
diff --git a/webnext/src/assets/icons/favicon-16x16.png b/webnext/src/assets/icons/favicon-16x16.png
diff --git a/webnext/src/assets/icons/favicon-32x32.png b/webnext/src/assets/icons/favicon-32x32.png
diff --git a/webnext/src/assets/icons/favicon-96x96.png b/webnext/src/assets/icons/favicon-96x96.png
diff --git a/webnext/src/assets/icons/favicon.ico b/webnext/src/assets/icons/favicon.ico
diff --git a/webnext/src/assets/icons/ms-icon-144x144.png b/webnext/src/assets/icons/ms-icon-144x144.png
diff --git a/webnext/src/assets/icons/ms-icon-150x150.png b/webnext/src/assets/icons/ms-icon-150x150.png
diff --git a/webnext/src/assets/icons/ms-icon-310x310.png b/webnext/src/assets/icons/ms-icon-310x310.png
diff --git a/webnext/src/assets/icons/ms-icon-70x70.png b/webnext/src/assets/icons/ms-icon-70x70.png
diff --git a/webnext/src/pages/ClientDownload/ClientDownloadPage.tsx b/webnext/src/pages/ClientDownload/ClientDownloadPage.tsx
@@ -16,45 +16,37 @@ import { ModalControls } from '../../shared/defguard-ui/components/ModalControls
 import { SizedBox } from '../../shared/defguard-ui/components/SizedBox/SizedBox';
 import { ThemeSpacing } from '../../shared/defguard-ui/types';
 import { isPresent } from '../../shared/defguard-ui/utils/isPresent';
+import { openVirtualLink } from '../../shared/utils/openVirtualLink';
 import androidIcon from './assets/android.png';
+import apple_video_src from './assets/apple_hardware_help.mp4';
 import iosIcon from './assets/ios.png';
 import laptopIcon from './assets/laptop.png';
 import desktopIcon from './assets/pc-tower.png';
 
 // open link in onClick handler
-const openLink = (value: string): void => {
-  const anchorElement = document.createElement('a');
-  anchorElement.style.display = 'none';
-  anchorElement.href = value;
-  anchorElement.target = '_blank';
-  anchorElement.rel = 'noopener noreferrer';
-  document.body.appendChild(anchorElement);
-  anchorElement.click();
-  anchorElement.remove();
-};
 
 const linuxMenu: MenuItemsGroup[] = [
   {
     items: [
       {
         text: 'Deb X86',
-        onClick: () => openLink(externalLink.client.desktop.linux.deb.amd),
+        onClick: () => openVirtualLink(externalLink.client.desktop.linux.deb.amd),
       },
       {
         text: 'Deb ARM',
-        onClick: () => openLink(externalLink.client.desktop.linux.deb.arm),
+        onClick: () => openVirtualLink(externalLink.client.desktop.linux.deb.arm),
       },
       {
         text: 'RPM X86',
-        onClick: () => openLink(externalLink.client.desktop.linux.rpm.amd),
+        onClick: () => openVirtualLink(externalLink.client.desktop.linux.rpm.amd),
       },
       {
         text: 'RPM ARM',
-        onClick: () => openLink(externalLink.client.desktop.linux.rpm.arm),
+        onClick: () => openVirtualLink(externalLink.client.desktop.linux.rpm.arm),
       },
       {
         text: 'ArchLinux',
-        onClick: () => openLink(externalLink.client.desktop.linux.arch),
+        onClick: () => openVirtualLink(externalLink.client.desktop.linux.arch),
       },
     ],
   },
@@ -64,25 +56,25 @@ export const ClientDownloadPage = () => {
   const navigate = useNavigate();
 
   const [confirmModalOpen, setConfirmModalOpen] = useState(false);
-  const [_appleHelpModalOpen, setAppleHelpModalOpen] = useState(false);
+  const [appleHelpModalOpen, setAppleHelpModalOpen] = useState(false);
 
   const appleMenu = useMemo(
     (): MenuItemsGroup[] => [
       {
         header: {
-          text: 'Apple',
+          text: m.client_download_apple_help_header(),
           onHelp: () => {
             setAppleHelpModalOpen(true);
           },
         },
         items: [
           {
             text: 'Intel',
-            onClick: () => openLink(externalLink.client.desktop.macos.intel),
+            onClick: () => openVirtualLink(externalLink.client.desktop.macos.intel),
           },
           {
             text: 'ARM',
-            onClick: () => openLink(externalLink.client.desktop.macos.arm),
+            onClick: () => openVirtualLink(externalLink.client.desktop.macos.arm),
           },
         ],
       },
@@ -97,7 +89,7 @@ export const ClientDownloadPage = () => {
         <h1>{m.client_download_title()}</h1>
         <p>{m.client_download_subtitle()}</p>
       </header>
-      <SizedBox height={ThemeSpacing.Xl5} />
+      <SizedBox height={ThemeSpacing.Xl4} />
       <div className="platforms">
         <div className="label">
           <Icon icon="desktop" size={20} /> <p>{m.client_download_label_desktop()}</p>
@@ -127,7 +119,7 @@ export const ClientDownloadPage = () => {
         />
         <Platform
           testId="macos"
-          title={m.client_download_for({ platform: 'Windows' })}
+          title={m.client_download_for({ platform: 'MacOS' })}
           subtitle={m.client_download_supports_newer({
             platform: 'macOS 14 (Sonoma)',
           })}
@@ -190,6 +182,37 @@ export const ClientDownloadPage = () => {
           }}
         />
       </Modal>
+      <Modal
+        title={m.client_download_apple_help_title()}
+        size="small"
+        isOpen={appleHelpModalOpen}
+        onClose={() => {
+          setAppleHelpModalOpen(false);
+        }}
+      >
+        <p>{m.client_download_apple_help_content_1()}</p>
+        <SizedBox height={ThemeSpacing.Xl} />
+        <video
+          controls
+          playsInline
+          preload="metadata"
+          src={apple_video_src}
+          style={{
+            width: '100%',
+            height: 'auto',
+          }}
+        />
+        <SizedBox height={ThemeSpacing.Xl} />
+        <p>{m.client_download_apple_help_content_2()}</p>
+        <ModalControls
+          submitProps={{
+            text: m.controls_got_it(),
+            onClick: () => {
+              setAppleHelpModalOpen(false);
+            },
+          }}
+        />
+      </Modal>
       <PageNavigation
         backText={m.controls_back()}
         onBack={() => {

diff --git a/webnext/src/pages/ClientDownload/assets/apple_hardware_help.mp4 b/webnext/src/pages/ClientDownload/assets/apple_hardware_help.mp4
diff --git a/webnext/src/pages/enrollment/ConfigureClient/ConfigureClientPage.tsx b/webnext/src/pages/enrollment/ConfigureClient/ConfigureClientPage.tsx
@@ -95,7 +95,7 @@ export const ConfigureClientPage = () => {
         </button>
       </ContainerWithIcon>
       <SizedBox height={ThemeSpacing.Md} />
-      <ContainerWithIcon id="setup-mobile" icon="mobile">
+      <ContainerWithIcon id="setup-mobile" icon="phone">
         <header>
           <h5>{m.client_setup_mobile_title()}</h5>
           <p>{m.client_setup_mobile_subtitle()}</p>

diff --git a/webnext/src/pages/enrollment/EnrollmentStart/EnrollmentStartPage.tsx b/webnext/src/pages/enrollment/EnrollmentStart/EnrollmentStartPage.tsx
@@ -134,7 +134,7 @@ export const EnrollmentStartPage = () => {
         backText={m.controls_back()}
         onBack={() => {
           navigate({
-            to: '/',
+            to: '/download',
           });
         }}
         nextText={m.controls_continue()}

diff --git a/webnext/src/shared/defguard-ui/components/Modal/style.scss b/webnext/src/shared/defguard-ui/components/Modal/style.scss
@@ -45,11 +45,11 @@
 
       & > .modal-header {
         box-sizing: border-box;
-        padding: var(--spacing-md) var(--spacing-xl);
+        padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-lg);
         border-top-left-radius: var(--radius-lg);
         border-top-right-radius: var(--radius-lg);
         display: grid;
-        grid-template-columns: 1fr 20px;
+        grid-template-columns: 1fr 36px;
         grid-template-rows: 1fr;
         align-items: center;
         user-select: none;

diff --git a/webnext/src/shared/utils/openVirtualLink.ts b/webnext/src/shared/utils/openVirtualLink.ts
@@ -0,0 +1,10 @@
+export const openVirtualLink = (value: string): void => {
+  const anchorElement = document.createElement('a');
+  anchorElement.style.display = 'none';
+  anchorElement.href = value;
+  anchorElement.target = '_blank';
+  anchorElement.rel = 'noopener noreferrer';
+  document.body.appendChild(anchorElement);
+  anchorElement.click();
+  anchorElement.remove();
+};