diff --git a/.github/workflows/lint-web.yml b/.github/workflows/lint-web.yml index 529ef8a4..d03a049d 100644 --- 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 index 5796a7c7..d8483f5e 100644 --- a/webnext/index.html +++ b/webnext/index.html @@ -5,6 +5,24 @@ Defguard + + + + + + + + + + + + + + + + + + diff --git a/webnext/messages/de.json b/webnext/messages/de.json deleted file mode 100644 index 006f618a..00000000 --- a/webnext/messages/de.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "$schema": "https://inlang.com/schema/inlang-message-format" -} diff --git a/webnext/messages/en.json b/webnext/messages/en.json index 28f2511d..407567ad 100644 --- 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 index 61c07d99..51e63c9d 100644 --- 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 index 62d77adb..135d6924 100644 --- 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" } -} \ No newline at end of file +} diff --git a/webnext/src/assets/icons/android-icon-144x144.png b/webnext/src/assets/icons/android-icon-144x144.png new file mode 100644 index 00000000..3109608b Binary files /dev/null and b/webnext/src/assets/icons/android-icon-144x144.png differ diff --git a/webnext/src/assets/icons/android-icon-192x192.png b/webnext/src/assets/icons/android-icon-192x192.png new file mode 100644 index 00000000..a74bc057 Binary files /dev/null and b/webnext/src/assets/icons/android-icon-192x192.png differ diff --git a/webnext/src/assets/icons/android-icon-36x36.png b/webnext/src/assets/icons/android-icon-36x36.png new file mode 100644 index 00000000..90c474bf Binary files /dev/null and b/webnext/src/assets/icons/android-icon-36x36.png differ diff --git a/webnext/src/assets/icons/android-icon-48x48.png b/webnext/src/assets/icons/android-icon-48x48.png new file mode 100644 index 00000000..6866c634 Binary files /dev/null and b/webnext/src/assets/icons/android-icon-48x48.png differ diff --git a/webnext/src/assets/icons/android-icon-72x72.png b/webnext/src/assets/icons/android-icon-72x72.png new file mode 100644 index 00000000..6469e441 Binary files /dev/null and b/webnext/src/assets/icons/android-icon-72x72.png differ diff --git a/webnext/src/assets/icons/android-icon-96x96.png b/webnext/src/assets/icons/android-icon-96x96.png new file mode 100644 index 00000000..8c9ff507 Binary files /dev/null and b/webnext/src/assets/icons/android-icon-96x96.png differ diff --git a/webnext/src/assets/icons/apple-icon-114x114.png b/webnext/src/assets/icons/apple-icon-114x114.png new file mode 100644 index 00000000..275d3735 Binary files /dev/null and b/webnext/src/assets/icons/apple-icon-114x114.png differ diff --git a/webnext/src/assets/icons/apple-icon-120x120.png b/webnext/src/assets/icons/apple-icon-120x120.png new file mode 100644 index 00000000..78b4a825 Binary files /dev/null and b/webnext/src/assets/icons/apple-icon-120x120.png differ diff --git a/webnext/src/assets/icons/apple-icon-144x144.png b/webnext/src/assets/icons/apple-icon-144x144.png new file mode 100644 index 00000000..3109608b Binary files /dev/null and b/webnext/src/assets/icons/apple-icon-144x144.png differ diff --git a/webnext/src/assets/icons/apple-icon-152x152.png b/webnext/src/assets/icons/apple-icon-152x152.png new file mode 100644 index 00000000..84c93350 Binary files /dev/null and b/webnext/src/assets/icons/apple-icon-152x152.png differ diff --git a/webnext/src/assets/icons/apple-icon-180x180.png b/webnext/src/assets/icons/apple-icon-180x180.png new file mode 100644 index 00000000..3025f36c Binary files /dev/null and b/webnext/src/assets/icons/apple-icon-180x180.png differ diff --git a/webnext/src/assets/icons/apple-icon-57x57.png b/webnext/src/assets/icons/apple-icon-57x57.png new file mode 100644 index 00000000..e0ed68de Binary files /dev/null and b/webnext/src/assets/icons/apple-icon-57x57.png differ diff --git a/webnext/src/assets/icons/apple-icon-60x60.png b/webnext/src/assets/icons/apple-icon-60x60.png new file mode 100644 index 00000000..99d58ac5 Binary files /dev/null and b/webnext/src/assets/icons/apple-icon-60x60.png differ diff --git a/webnext/src/assets/icons/apple-icon-72x72.png b/webnext/src/assets/icons/apple-icon-72x72.png new file mode 100644 index 00000000..6469e441 Binary files /dev/null and b/webnext/src/assets/icons/apple-icon-72x72.png differ diff --git a/webnext/src/assets/icons/apple-icon-76x76.png b/webnext/src/assets/icons/apple-icon-76x76.png new file mode 100644 index 00000000..a4f840e9 Binary files /dev/null and b/webnext/src/assets/icons/apple-icon-76x76.png differ diff --git a/webnext/src/assets/icons/apple-icon-precomposed.png b/webnext/src/assets/icons/apple-icon-precomposed.png new file mode 100644 index 00000000..a74bc057 Binary files /dev/null and b/webnext/src/assets/icons/apple-icon-precomposed.png differ diff --git a/webnext/src/assets/icons/apple-icon.png b/webnext/src/assets/icons/apple-icon.png new file mode 100644 index 00000000..a74bc057 Binary files /dev/null and b/webnext/src/assets/icons/apple-icon.png differ diff --git a/webnext/src/assets/icons/favicon-16x16.png b/webnext/src/assets/icons/favicon-16x16.png new file mode 100644 index 00000000..3874dea5 Binary files /dev/null and b/webnext/src/assets/icons/favicon-16x16.png differ diff --git a/webnext/src/assets/icons/favicon-32x32.png b/webnext/src/assets/icons/favicon-32x32.png new file mode 100644 index 00000000..0b50e1f4 Binary files /dev/null and b/webnext/src/assets/icons/favicon-32x32.png differ diff --git a/webnext/src/assets/icons/favicon-96x96.png b/webnext/src/assets/icons/favicon-96x96.png new file mode 100644 index 00000000..8c9ff507 Binary files /dev/null and b/webnext/src/assets/icons/favicon-96x96.png differ diff --git a/webnext/src/assets/icons/favicon.ico b/webnext/src/assets/icons/favicon.ico new file mode 100644 index 00000000..1e0863b1 Binary files /dev/null and b/webnext/src/assets/icons/favicon.ico differ diff --git a/webnext/src/assets/icons/ms-icon-144x144.png b/webnext/src/assets/icons/ms-icon-144x144.png new file mode 100644 index 00000000..3109608b Binary files /dev/null and b/webnext/src/assets/icons/ms-icon-144x144.png differ diff --git a/webnext/src/assets/icons/ms-icon-150x150.png b/webnext/src/assets/icons/ms-icon-150x150.png new file mode 100644 index 00000000..560feeba Binary files /dev/null and b/webnext/src/assets/icons/ms-icon-150x150.png differ diff --git a/webnext/src/assets/icons/ms-icon-310x310.png b/webnext/src/assets/icons/ms-icon-310x310.png new file mode 100644 index 00000000..90b3a1ee Binary files /dev/null and b/webnext/src/assets/icons/ms-icon-310x310.png differ diff --git a/webnext/src/assets/icons/ms-icon-70x70.png b/webnext/src/assets/icons/ms-icon-70x70.png new file mode 100644 index 00000000..61f5c3f5 Binary files /dev/null and b/webnext/src/assets/icons/ms-icon-70x70.png differ diff --git a/webnext/src/pages/ClientDownload/ClientDownloadPage.tsx b/webnext/src/pages/ClientDownload/ClientDownloadPage.tsx index 5bc93153..6d3ea0ef 100644 --- 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,13 +56,13 @@ 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); }, @@ -78,11 +70,11 @@ export const ClientDownloadPage = () => { 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 = () => {

{m.client_download_title()}

{m.client_download_subtitle()}

- +

{m.client_download_label_desktop()}

@@ -127,7 +119,7 @@ export const ClientDownloadPage = () => { /> { }} /> + { + setAppleHelpModalOpen(false); + }} + > +

{m.client_download_apple_help_content_1()}

+ + { diff --git a/webnext/src/pages/ClientDownload/assets/apple_hardware_help.mp4 b/webnext/src/pages/ClientDownload/assets/apple_hardware_help.mp4 new file mode 100644 index 00000000..7eccfc0e Binary files /dev/null and b/webnext/src/pages/ClientDownload/assets/apple_hardware_help.mp4 differ diff --git a/webnext/src/pages/enrollment/ConfigureClient/ConfigureClientPage.tsx b/webnext/src/pages/enrollment/ConfigureClient/ConfigureClientPage.tsx index fab03529..585fc780 100644 --- a/webnext/src/pages/enrollment/ConfigureClient/ConfigureClientPage.tsx +++ b/webnext/src/pages/enrollment/ConfigureClient/ConfigureClientPage.tsx @@ -95,7 +95,7 @@ export const ConfigureClientPage = () => { - +
{m.client_setup_mobile_title()}

{m.client_setup_mobile_subtitle()}

diff --git a/webnext/src/pages/enrollment/EnrollmentStart/EnrollmentStartPage.tsx b/webnext/src/pages/enrollment/EnrollmentStart/EnrollmentStartPage.tsx index 85ba4905..4aefe4b2 100644 --- 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 index f801cf37..91108919 100644 --- 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 new file mode 100644 index 00000000..10b6d108 --- /dev/null +++ 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(); +};