ui update

webnext/messages/en.json

@@ -1,13 +1,24 @@
 {
   "$schema": "https://inlang.com/schema/inlang-message-format",
+  "misc_or": "or",
+  "misc_and": "and",
   "controls_back": "Back",
   "controls_continue": "Continue",
+  "controls_cancel": "Cancel",
+  "controls_submit": "Submit",
+  "controls_hide": "Hide",
+  "controls_show": "Show",
   "form_error_min_len": "Minimum length of {length}",
   "form_error_email": "Enter valid email",
   "form_error_required": "Field is required",
+  "form_label_token": "Token",
+  "form_label_email": "email",
+  "form_label_url": "URL",
   "cmp_enrol_step": "Step {current}/{max}",
   "cmp_enrol_final": "Final step",
-  "start_footer_contact": "If you need assistance, please contact your defguard administrator at",
+  "cmp_openid_button": "Sign in with {provider}",
+  "cmp_copy_field_tooltip": "Copied",
+  "footer_contact": "If you need assistance, please contact your defguard administrator at",
   "start_footer_copyright": "Copyright ©2023-{currentYear} Defguard Sp. z o.o.",
   "start_multi_title": "Get Started with Defguard",
   "start_multi_subtitle": "Please select the option that suits your needs.",
@@ -48,5 +59,31 @@
   "client_download_for": "Defguard for {platform}",
   "client_download_supports_newer": "Supports {platform} and newer.",
   "client_download_supports_and": "Supports {platform} and {other}.",
-  "client_download_works_with": "Works with {platform}."
+  "client_download_works_with": "Works with {platform}.",
+  "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",
+  "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",
+  "enrollment_start_external_subtitle": "Select this option if you want to start the enrollment process using an external SSO (Google, Microsoft, etc.).",
+  "enrollment_start_internal_title": "Enter personal enrolment token",
+  "enrollment_start_internal_subtitle": "Select this option if your administrator has sent you an email or message with your personal token. If you haven't received your token, please contact your administrator.",
+  "client_setup_title": "Configure your defguard client/app",
+  "client_setup_subtitle": "Select the activation method according to your device type.",
+  "client_setup_desktop_title": "Desktop client",
+  "client_setup_desktop_auto_title": "Automatic configuration",
+  "client_setup_desktop_auto_explain_1": "Click the button below for automatic configuration.",
+  "client_setup_desktop_auto_explain_2": "Before using this option make sure the Defguard desktop client is already installed.",
+  "client_setup_desktop_auto_button_one_click": "One-Click Configuration",
+  "client_setup_desktop_auto_button_download": "Download for Desktop",
+  "client_setup_desktop_manual_title": "Manual configuration",
+  "client_setup_desktop_manual_subtitle": "Activate your desktop client manually by entering the URL and token you see bellow.",
+  "client_setup_desktop_manual_fold": "{intent} advanced configuration",
+  "client_setup_mobile_title": "Mobile application",
+  "client_setup_mobile_subtitle": "Scan QR code bellow to activate Defguard mobile application.",
+  "client_setup_mobile_forgot": "If you forgot to install the mobile app, click one of the buttons bellow.",
+  "client_setup_mobile_google": "Google Play",
+  "client_setup_mobile_apple": "Apple Store",
+  "client_setup_footer_extra": "Once your Defguard client is configured, you can close this window."
 }

webnext/package.json

@@ -26,17 +26,21 @@
     "@uidotdev/usehooks": "^2.4.1",
     "axios": "^1.12.2",
     "clsx": "^2.1.1",
+    "lodash-es": "^4.17.21",
     "motion": "^12.23.21",
+    "qrcode.react": "^4.2.0",
     "qs": "^6.14.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "rxjs": "^7.8.2",
     "zod": "^4.1.11",
     "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@biomejs/biome": "2.2.4",
     "@inlang/paraglide-js": "2.3.2",
     "@tanstack/router-plugin": "^1.132.2",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.5.2",
     "@types/qs": "^6.14.0",
     "@types/react": "^19.1.13",

webnext/src/pages/ClientDownload/ClientDownloadPage.tsx

@@ -1,12 +1,15 @@
 import './style.scss';
 import { useNavigate } from '@tanstack/react-router';
+import { useState } from 'react';
 import { m } from '../../paraglide/messages';
 import { Page } from '../../shared/components/Page/Page';
 import { PageNavigation } from '../../shared/components/PageNavigation/PageNavigation';
 import { EnrollmentStep } from '../../shared/components/Step/Step';
 import { Button } from '../../shared/defguard-ui/components/Button/Button';
 import { Icon } from '../../shared/defguard-ui/components/Icon';
 import type { IconKindValue } from '../../shared/defguard-ui/components/Icon/icon-types';
+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 { ThemeSpacing } from '../../shared/defguard-ui/types';
 import androidIcon from './assets/android.png';
@@ -15,6 +18,7 @@ import laptopIcon from './assets/laptop.png';
 import desktopIcon from './assets/pc-tower.png';
 
 export const ClientDownloadPage = () => {
+  const [modalOpen, setModalOpen] = useState(false);
   const navigate = useNavigate();
 
   return (
@@ -87,6 +91,31 @@ export const ClientDownloadPage = () => {
           icon={iosIcon}
         />
       </div>
+      <Modal
+        title={m.client_download_modal_title()}
+        size="small"
+        isOpen={modalOpen}
+        onClose={() => {
+          setModalOpen(false);
+        }}
+      >
+        <p>{m.client_download_modal_content()}</p>
+        <ModalControls
+          cancelProps={{
+            text: m.client_download_modal_cancel(),
+            onClick: () => setModalOpen(false),
+          }}
+          submitProps={{
+            text: m.controls_continue(),
+            onClick: () => {
+              navigate({
+                to: '/enrollment-start',
+                replace: true,
+              });
+            },
+          }}
+        />
+      </Modal>
       <PageNavigation
         backText={m.controls_back()}
         onBack={() => {
@@ -97,7 +126,7 @@ export const ClientDownloadPage = () => {
         }}
         nextText={m.controls_continue()}
         onNext={() => {
-          console.log('todo');
+          setModalOpen(true);
         }}
       />
     </Page>

webnext/src/pages/ClientDownload/style.scss

@@ -11,6 +11,7 @@
       flex-flow: row nowrap;
       align-items: center;
       justify-content: flex-start;
+      column-gap: var(--spacing-lg);
 
       p {
         font: var(--t-body-sm-400);

webnext/src/pages/Home/HomePage.tsx

@@ -17,12 +17,9 @@ export const HomePage = () => {
       <SizedBox height={ThemeSpacing.Xl6} />
       <HomeChoice />
       <footer>
-        <p>{m.start_footer_contact()}</p>
-        <SizedBox height={ThemeSpacing.Xs} />
         <p>{m.start_footer_copyright({ currentYear: currentYear.toString() })}</p>
         <SizedBox height={ThemeSpacing.Sm} />
       </footer>
-      <SizedBox height={28} />
     </Page>
   );
 };

webnext/src/pages/Home/components/HomeChoice.tsx

@@ -20,7 +20,7 @@ export const HomeChoice = () => {
         title={m.start_multi_enrollment_title()}
         subtitle={m.start_multi_enrollment_subtitle()}
         buttonText={m.start_multi_enrollment_button()}
-        buttonIcon="lock-open"
+        buttonIcon="arrow-big"
         link="/download"
         onClick={() => {}}
       />

webnext/src/pages/Home/style.scss

@@ -19,20 +19,11 @@
 
     & > footer {
       margin-top: auto;
-      padding-top: 50px;
 
       p {
         text-align: center;
-
-        &:nth-child(1) {
-          font: var(--t-body-sm-400);
-          color: var(--fg-neutral);
-        }
-
-        &:nth-child(3) {
-          font: var(--t-body-xs-400);
-          color: var(--fg-muted);
-        }
+        font: var(--t-body-xs-400);
+        color: var(--fg-muted);
       }
     }
   }