From b1aff1f481fe92814cc16120efefd44f56759fb7 Mon Sep 17 00:00:00 2001 From: Jacek Chmielewski Date: Mon, 30 Mar 2026 10:57:49 +0200 Subject: [PATCH 01/29] bootstrap settings certs tab --- web/messages/en/settings.json | 5 +++ .../SettingsIndexPage/SettingsIndexPage.tsx | 4 ++ .../SettingsCertificatesTab.tsx | 28 ++++++++++++ .../pages/settings/SettingsIndexPage/types.ts | 1 + web/src/routeTree.gen.ts | 44 +++++++++++++++++++ .../_authorized/_default/settings/ca.tsx | 9 ++++ .../_authorized/_default/settings/certs.tsx | 9 ++++ 7 files changed, 100 insertions(+) create mode 100644 web/src/pages/settings/SettingsIndexPage/tabs/SettingsCertificatesTab/SettingsCertificatesTab.tsx create mode 100644 web/src/routes/_authorized/_default/settings/ca.tsx create mode 100644 web/src/routes/_authorized/_default/settings/certs.tsx diff --git a/web/messages/en/settings.json b/web/messages/en/settings.json index e8fc854f6b..2ac4bb6e22 100644 --- a/web/messages/en/settings.json +++ b/web/messages/en/settings.json @@ -27,6 +27,10 @@ "settings_instance_helper_session_duration": "", "settings_instance_label_password_reset_session_expiration": "Password reset session expiration", "settings_instance_helper_password_reset_session_expiration": "", + "settings_certs_ca_title": "Defguard Certificate Authority", + "settings_certs_ca_description": "Manage certificates automatically generated by Defguard for secure communication. These certificates are used to authenticate devices and services, ensuring encrypted connections across your network.", + "settings_certs_certs_title": "Edge/Core Certificates", + "settings_certs_certs_description": "Add and manage certificates issued outside of Defguard. Use them to integrate existing infrastructure and maintain secure connections with external systems and services.", "settings_vpn_stats_toggle_title": "Stats purge", "settings_vpn_stats_label_purge_frequency": "Stats purge frequency", "settings_vpn_stats_helper_purge_frequency": "", @@ -87,6 +91,7 @@ "settings_tab_general": "General", "settings_tab_notifications": "Notifications", "settings_tab_identity_providers": "External identity providers", + "settings_tab_certificates": "Certificates", "settings_tab_activity_streaming": "Activity streaming", "settings_tab_license": "License", "settings_general_section_instance_content": "Configure your instance name and branding settings. Add a logo to personalize the interface and make it easily recognizable to your users.", diff --git a/web/src/pages/settings/SettingsIndexPage/SettingsIndexPage.tsx b/web/src/pages/settings/SettingsIndexPage/SettingsIndexPage.tsx index b473fcc27f..109d3fb2df 100644 --- a/web/src/pages/settings/SettingsIndexPage/SettingsIndexPage.tsx +++ b/web/src/pages/settings/SettingsIndexPage/SettingsIndexPage.tsx @@ -12,6 +12,7 @@ import { SettingsGeneralTab } from './tabs/SettingsGeneralTab'; import { SettingsLicenseTab } from './tabs/SettingsLicenseTab/SettingsLicenseTab'; import { SettingsNotificationsTab } from './tabs/SettingsNotificationsTab'; import { type SettingsTabValue, settingsTabsSchema } from './types'; +import { SettingsCertificatesTab } from './tabs/SettingsCertificatesTab/SettingsCertificatesTab'; const tabComponent: Record = { general: , @@ -19,6 +20,7 @@ const tabComponent: Record = { activity: , license: , identity: , + certs: , }; const tabToTitle = (tab: SettingsTabValue): string => { @@ -33,6 +35,8 @@ const tabToTitle = (tab: SettingsTabValue): string => { return m.settings_tab_notifications(); case 'identity': return m.settings_tab_identity_providers(); + case 'certs': + return m.settings_tab_certificates(); } }; diff --git a/web/src/pages/settings/SettingsIndexPage/tabs/SettingsCertificatesTab/SettingsCertificatesTab.tsx b/web/src/pages/settings/SettingsIndexPage/tabs/SettingsCertificatesTab/SettingsCertificatesTab.tsx new file mode 100644 index 0000000000..74828cc093 --- /dev/null +++ b/web/src/pages/settings/SettingsIndexPage/tabs/SettingsCertificatesTab/SettingsCertificatesTab.tsx @@ -0,0 +1,28 @@ +import { Link } from "@tanstack/react-router"; +import { SettingsLayout } from "../../../../../shared/components/SettingsLayout/SettingsLayout"; +import { SectionSelect } from "../../../../../shared/defguard-ui/components/SectionSelect/SectionSelect"; +import { m } from '../../../../../paraglide/messages'; +import { SizedBox } from "../../../../../shared/defguard-ui/components/SizedBox/SizedBox"; +import { ThemeSpacing } from "../../../../../shared/defguard-ui/types"; + +export const SettingsCertificatesTab = () => { + return ( + + + + + + + + + + ); +} diff --git a/web/src/pages/settings/SettingsIndexPage/types.ts b/web/src/pages/settings/SettingsIndexPage/types.ts index 55bb1747c6..f3888c6105 100644 --- a/web/src/pages/settings/SettingsIndexPage/types.ts +++ b/web/src/pages/settings/SettingsIndexPage/types.ts @@ -7,6 +7,7 @@ export const settingsTabsSchema = z.enum([ 'notifications', 'identity', 'activity', + 'certs', 'license', ]); diff --git a/web/src/routeTree.gen.ts b/web/src/routeTree.gen.ts index 65413be998..63a87d2c8b 100644 --- a/web/src/routeTree.gen.ts +++ b/web/src/routeTree.gen.ts @@ -56,6 +56,8 @@ import { Route as AuthorizedDefaultSettingsInstanceRouteImport } from './routes/ import { Route as AuthorizedDefaultSettingsGatewayNotificationsRouteImport } from './routes/_authorized/_default/settings/gateway-notifications' import { Route as AuthorizedDefaultSettingsEditOpenidRouteImport } from './routes/_authorized/_default/settings/edit-openid' import { Route as AuthorizedDefaultSettingsClientRouteImport } from './routes/_authorized/_default/settings/client' +import { Route as AuthorizedDefaultSettingsCertsRouteImport } from './routes/_authorized/_default/settings/certs' +import { Route as AuthorizedDefaultSettingsCaRouteImport } from './routes/_authorized/_default/settings/ca' import { Route as AuthorizedDefaultAclRulesRouteImport } from './routes/_authorized/_default/acl/rules' import { Route as AuthorizedDefaultAclEditRuleRouteImport } from './routes/_authorized/_default/acl/edit-rule' import { Route as AuthorizedDefaultAclEditDestinationRouteImport } from './routes/_authorized/_default/acl/edit-destination' @@ -323,6 +325,18 @@ const AuthorizedDefaultSettingsClientRoute = path: '/settings/client', getParentRoute: () => AuthorizedDefaultRoute, } as any) +const AuthorizedDefaultSettingsCertsRoute = + AuthorizedDefaultSettingsCertsRouteImport.update({ + id: '/settings/certs', + path: '/settings/certs', + getParentRoute: () => AuthorizedDefaultRoute, + } as any) +const AuthorizedDefaultSettingsCaRoute = + AuthorizedDefaultSettingsCaRouteImport.update({ + id: '/settings/ca', + path: '/settings/ca', + getParentRoute: () => AuthorizedDefaultRoute, + } as any) const AuthorizedDefaultAclRulesRoute = AuthorizedDefaultAclRulesRouteImport.update({ id: '/acl/rules', @@ -439,6 +453,8 @@ export interface FileRoutesByFullPath { '/acl/edit-destination': typeof AuthorizedDefaultAclEditDestinationRoute '/acl/edit-rule': typeof AuthorizedDefaultAclEditRuleRoute '/acl/rules': typeof AuthorizedDefaultAclRulesRoute + '/settings/ca': typeof AuthorizedDefaultSettingsCaRoute + '/settings/certs': typeof AuthorizedDefaultSettingsCertsRoute '/settings/client': typeof AuthorizedDefaultSettingsClientRoute '/settings/edit-openid': typeof AuthorizedDefaultSettingsEditOpenidRoute '/settings/gateway-notifications': typeof AuthorizedDefaultSettingsGatewayNotificationsRoute @@ -497,6 +513,8 @@ export interface FileRoutesByTo { '/acl/edit-destination': typeof AuthorizedDefaultAclEditDestinationRoute '/acl/edit-rule': typeof AuthorizedDefaultAclEditRuleRoute '/acl/rules': typeof AuthorizedDefaultAclRulesRoute + '/settings/ca': typeof AuthorizedDefaultSettingsCaRoute + '/settings/certs': typeof AuthorizedDefaultSettingsCertsRoute '/settings/client': typeof AuthorizedDefaultSettingsClientRoute '/settings/edit-openid': typeof AuthorizedDefaultSettingsEditOpenidRoute '/settings/gateway-notifications': typeof AuthorizedDefaultSettingsGatewayNotificationsRoute @@ -559,6 +577,8 @@ export interface FileRoutesById { '/_authorized/_default/acl/edit-destination': typeof AuthorizedDefaultAclEditDestinationRoute '/_authorized/_default/acl/edit-rule': typeof AuthorizedDefaultAclEditRuleRoute '/_authorized/_default/acl/rules': typeof AuthorizedDefaultAclRulesRoute + '/_authorized/_default/settings/ca': typeof AuthorizedDefaultSettingsCaRoute + '/_authorized/_default/settings/certs': typeof AuthorizedDefaultSettingsCertsRoute '/_authorized/_default/settings/client': typeof AuthorizedDefaultSettingsClientRoute '/_authorized/_default/settings/edit-openid': typeof AuthorizedDefaultSettingsEditOpenidRoute '/_authorized/_default/settings/gateway-notifications': typeof AuthorizedDefaultSettingsGatewayNotificationsRoute @@ -620,6 +640,8 @@ export interface FileRouteTypes { | '/acl/edit-destination' | '/acl/edit-rule' | '/acl/rules' + | '/settings/ca' + | '/settings/certs' | '/settings/client' | '/settings/edit-openid' | '/settings/gateway-notifications' @@ -678,6 +700,8 @@ export interface FileRouteTypes { | '/acl/edit-destination' | '/acl/edit-rule' | '/acl/rules' + | '/settings/ca' + | '/settings/certs' | '/settings/client' | '/settings/edit-openid' | '/settings/gateway-notifications' @@ -739,6 +763,8 @@ export interface FileRouteTypes { | '/_authorized/_default/acl/edit-destination' | '/_authorized/_default/acl/edit-rule' | '/_authorized/_default/acl/rules' + | '/_authorized/_default/settings/ca' + | '/_authorized/_default/settings/certs' | '/_authorized/_default/settings/client' | '/_authorized/_default/settings/edit-openid' | '/_authorized/_default/settings/gateway-notifications' @@ -1102,6 +1128,20 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof AuthorizedDefaultSettingsClientRouteImport parentRoute: typeof AuthorizedDefaultRoute } + '/_authorized/_default/settings/certs': { + id: '/_authorized/_default/settings/certs' + path: '/settings/certs' + fullPath: '/settings/certs' + preLoaderRoute: typeof AuthorizedDefaultSettingsCertsRouteImport + parentRoute: typeof AuthorizedDefaultRoute + } + '/_authorized/_default/settings/ca': { + id: '/_authorized/_default/settings/ca' + path: '/settings/ca' + fullPath: '/settings/ca' + preLoaderRoute: typeof AuthorizedDefaultSettingsCaRouteImport + parentRoute: typeof AuthorizedDefaultRoute + } '/_authorized/_default/acl/rules': { id: '/_authorized/_default/acl/rules' path: '/acl/rules' @@ -1208,6 +1248,8 @@ interface AuthorizedDefaultRouteChildren { AuthorizedDefaultAclEditDestinationRoute: typeof AuthorizedDefaultAclEditDestinationRoute AuthorizedDefaultAclEditRuleRoute: typeof AuthorizedDefaultAclEditRuleRoute AuthorizedDefaultAclRulesRoute: typeof AuthorizedDefaultAclRulesRoute + AuthorizedDefaultSettingsCaRoute: typeof AuthorizedDefaultSettingsCaRoute + AuthorizedDefaultSettingsCertsRoute: typeof AuthorizedDefaultSettingsCertsRoute AuthorizedDefaultSettingsClientRoute: typeof AuthorizedDefaultSettingsClientRoute AuthorizedDefaultSettingsEditOpenidRoute: typeof AuthorizedDefaultSettingsEditOpenidRoute AuthorizedDefaultSettingsGatewayNotificationsRoute: typeof AuthorizedDefaultSettingsGatewayNotificationsRoute @@ -1246,6 +1288,8 @@ const AuthorizedDefaultRouteChildren: AuthorizedDefaultRouteChildren = { AuthorizedDefaultAclEditDestinationRoute, AuthorizedDefaultAclEditRuleRoute: AuthorizedDefaultAclEditRuleRoute, AuthorizedDefaultAclRulesRoute: AuthorizedDefaultAclRulesRoute, + AuthorizedDefaultSettingsCaRoute: AuthorizedDefaultSettingsCaRoute, + AuthorizedDefaultSettingsCertsRoute: AuthorizedDefaultSettingsCertsRoute, AuthorizedDefaultSettingsClientRoute: AuthorizedDefaultSettingsClientRoute, AuthorizedDefaultSettingsEditOpenidRoute: AuthorizedDefaultSettingsEditOpenidRoute, diff --git a/web/src/routes/_authorized/_default/settings/ca.tsx b/web/src/routes/_authorized/_default/settings/ca.tsx new file mode 100644 index 0000000000..87b4268d12 --- /dev/null +++ b/web/src/routes/_authorized/_default/settings/ca.tsx @@ -0,0 +1,9 @@ +import { createFileRoute } from '@tanstack/react-router' + +export const Route = createFileRoute('/_authorized/_default/settings/ca')({ + component: RouteComponent, +}) + +function RouteComponent() { + return
Hello "/_authorized/_default/settings/ca"!
+} diff --git a/web/src/routes/_authorized/_default/settings/certs.tsx b/web/src/routes/_authorized/_default/settings/certs.tsx new file mode 100644 index 0000000000..5ed8fa8ebe --- /dev/null +++ b/web/src/routes/_authorized/_default/settings/certs.tsx @@ -0,0 +1,9 @@ +import { createFileRoute } from '@tanstack/react-router' + +export const Route = createFileRoute('/_authorized/_default/settings/certs')({ + component: RouteComponent, +}) + +function RouteComponent() { + return
Hello "/_authorized/_default/settings/certs"!
+} From b82348568738006284fee04663b424c847b0e918 Mon Sep 17 00:00:00 2001 From: Jacek Chmielewski Date: Mon, 30 Mar 2026 11:22:47 +0200 Subject: [PATCH 02/29] bootstrap cert settings pages --- .../SettingsCaPage/SettingsCaPage.tsx | 52 +++++++++++++++++++ .../SettingsCertificatesPage.tsx | 52 +++++++++++++++++++ .../_authorized/_default/settings/ca.tsx | 9 ++-- .../_authorized/_default/settings/certs.tsx | 9 ++-- 4 files changed, 110 insertions(+), 12 deletions(-) create mode 100644 web/src/pages/settings/SettingsCaPage/SettingsCaPage.tsx create mode 100644 web/src/pages/settings/SettingsCertificatesPage/SettingsCertificatesPage.tsx diff --git a/web/src/pages/settings/SettingsCaPage/SettingsCaPage.tsx b/web/src/pages/settings/SettingsCaPage/SettingsCaPage.tsx new file mode 100644 index 0000000000..7f6640880d --- /dev/null +++ b/web/src/pages/settings/SettingsCaPage/SettingsCaPage.tsx @@ -0,0 +1,52 @@ +import { Link } from '@tanstack/react-router'; +import { m } from '../../../paraglide/messages'; +import type { Settings } from '../../../shared/api/types'; +import { Breadcrumbs } from '../../../shared/components/Breadcrumbs/Breadcrumbs'; +import { Page } from '../../../shared/components/Page/Page'; +import { SettingsCard } from '../../../shared/components/SettingsCard/SettingsCard'; +import { SettingsHeader } from '../../../shared/components/SettingsHeader/SettingsHeader'; +import { SettingsLayout } from '../../../shared/components/SettingsLayout/SettingsLayout'; +import { isPresent } from '../../../shared/defguard-ui/utils/isPresent'; +import { getSettingsQueryOptions } from '../../../shared/query'; +import { useQuery } from '@tanstack/react-query'; + +const breadcrumbs = [ + + {m.settings_breadcrumb_general()} + , + + {m.settings_breadcrumb_instance()} + , +]; + +export const SettingsCaPage = () => { + const { data: settings } = useQuery(getSettingsQueryOptions); + return ( + + + + + {isPresent(settings) && ( + + + + )} + + + ); +}; + +const Content = ({ settings }: { settings: Settings }) => { + console.log(settings); + return (
TODO
); +}; diff --git a/web/src/pages/settings/SettingsCertificatesPage/SettingsCertificatesPage.tsx b/web/src/pages/settings/SettingsCertificatesPage/SettingsCertificatesPage.tsx new file mode 100644 index 0000000000..90d00e323a --- /dev/null +++ b/web/src/pages/settings/SettingsCertificatesPage/SettingsCertificatesPage.tsx @@ -0,0 +1,52 @@ +import { Link } from '@tanstack/react-router'; +import { m } from '../../../paraglide/messages'; +import type { Settings } from '../../../shared/api/types'; +import { Breadcrumbs } from '../../../shared/components/Breadcrumbs/Breadcrumbs'; +import { Page } from '../../../shared/components/Page/Page'; +import { SettingsCard } from '../../../shared/components/SettingsCard/SettingsCard'; +import { SettingsHeader } from '../../../shared/components/SettingsHeader/SettingsHeader'; +import { SettingsLayout } from '../../../shared/components/SettingsLayout/SettingsLayout'; +import { isPresent } from '../../../shared/defguard-ui/utils/isPresent'; +import { getSettingsQueryOptions } from '../../../shared/query'; +import { useQuery } from '@tanstack/react-query'; + +const breadcrumbs = [ + + {m.settings_breadcrumb_general()} + , + + {m.settings_breadcrumb_instance()} + , +]; + +export const SettingsCertificatesPage = () => { + const { data: settings } = useQuery(getSettingsQueryOptions); + return ( + + + + + {isPresent(settings) && ( + + + + )} + + + ); +}; + +const Content = ({ settings }: { settings: Settings }) => { + console.log(settings); + return (
TODO
); +}; diff --git a/web/src/routes/_authorized/_default/settings/ca.tsx b/web/src/routes/_authorized/_default/settings/ca.tsx index 87b4268d12..6dec5b74ca 100644 --- a/web/src/routes/_authorized/_default/settings/ca.tsx +++ b/web/src/routes/_authorized/_default/settings/ca.tsx @@ -1,9 +1,6 @@ import { createFileRoute } from '@tanstack/react-router' +import { SettingsCaPage } from '../../../../pages/settings/SettingsCaPage/SettingsCaPage'; export const Route = createFileRoute('/_authorized/_default/settings/ca')({ - component: RouteComponent, -}) - -function RouteComponent() { - return
Hello "/_authorized/_default/settings/ca"!
-} + component: SettingsCaPage, +}); diff --git a/web/src/routes/_authorized/_default/settings/certs.tsx b/web/src/routes/_authorized/_default/settings/certs.tsx index 5ed8fa8ebe..b8a0fd6112 100644 --- a/web/src/routes/_authorized/_default/settings/certs.tsx +++ b/web/src/routes/_authorized/_default/settings/certs.tsx @@ -1,9 +1,6 @@ import { createFileRoute } from '@tanstack/react-router' +import { SettingsCertificatesPage } from '../../../../pages/settings/SettingsCertificatesPage/SettingsCertificatesPage'; export const Route = createFileRoute('/_authorized/_default/settings/certs')({ - component: RouteComponent, -}) - -function RouteComponent() { - return
Hello "/_authorized/_default/settings/certs"!
-} + component: SettingsCertificatesPage, +}); From a3b212ad0eca40cbd12cfba496caa7546bedac87 Mon Sep 17 00:00:00 2001 From: Jacek Chmielewski Date: Mon, 30 Mar 2026 12:49:51 +0200 Subject: [PATCH 03/29] ca cert styling --- web/messages/en/settings.json | 5 ++ .../SettingsCaPage/SettingsCaPage.tsx | 48 ++++++++++++++----- .../pages/settings/SettingsCaPage/style.scss | 20 ++++++++ .../SettingsCertificatesPage.tsx | 14 +++--- 4 files changed, 67 insertions(+), 20 deletions(-) create mode 100644 web/src/pages/settings/SettingsCaPage/style.scss diff --git a/web/messages/en/settings.json b/web/messages/en/settings.json index 2ac4bb6e22..3d59b05b93 100644 --- a/web/messages/en/settings.json +++ b/web/messages/en/settings.json @@ -29,6 +29,11 @@ "settings_instance_helper_password_reset_session_expiration": "", "settings_certs_ca_title": "Defguard Certificate Authority", "settings_certs_ca_description": "Manage certificates automatically generated by Defguard for secure communication. These certificates are used to authenticate devices and services, ensuring encrypted connections across your network.", + "settings_certs_ca_summary_title": "Certificate authority summary", + "settings_certs_ca_summary": "The system created all required certificate files, including the root certificate and private key. You can download these files and continue with the configuration.", + "settings_certs_ca_certificate_validated_title": "Certificate Validated", + "settings_certs_ca_certificate_validated": "Your uploaded Certificate has been successfully validated. All required files were checked and confirmed as correct and ready for use. You can download the validated certificate files if needed for your setup.", + "settings_certs_ca_information_extracted": "Information extracted from uploaded files", "settings_certs_certs_title": "Edge/Core Certificates", "settings_certs_certs_description": "Add and manage certificates issued outside of Defguard. Use them to integrate existing infrastructure and maintain secure connections with external systems and services.", "settings_vpn_stats_toggle_title": "Stats purge", diff --git a/web/src/pages/settings/SettingsCaPage/SettingsCaPage.tsx b/web/src/pages/settings/SettingsCaPage/SettingsCaPage.tsx index 7f6640880d..02c89be0f7 100644 --- a/web/src/pages/settings/SettingsCaPage/SettingsCaPage.tsx +++ b/web/src/pages/settings/SettingsCaPage/SettingsCaPage.tsx @@ -1,14 +1,18 @@ +import './style.scss'; import { Link } from '@tanstack/react-router'; import { m } from '../../../paraglide/messages'; -import type { Settings } from '../../../shared/api/types'; import { Breadcrumbs } from '../../../shared/components/Breadcrumbs/Breadcrumbs'; import { Page } from '../../../shared/components/Page/Page'; import { SettingsCard } from '../../../shared/components/SettingsCard/SettingsCard'; import { SettingsHeader } from '../../../shared/components/SettingsHeader/SettingsHeader'; import { SettingsLayout } from '../../../shared/components/SettingsLayout/SettingsLayout'; -import { isPresent } from '../../../shared/defguard-ui/utils/isPresent'; -import { getSettingsQueryOptions } from '../../../shared/query'; -import { useQuery } from '@tanstack/react-query'; +import { DescriptionBlock } from '../../../shared/components/DescriptionBlock/DescriptionBlock'; +import { ActionableSection } from '../../../shared/defguard-ui/components/ActionableSection/ActionableSection'; +import { ActionableSectionVariant } from '../../../shared/defguard-ui/components/ActionableSection/types'; +import caIconSrc from '../../SetupPage/assets/ca.png'; +import { SizedBox } from '../../../shared/defguard-ui/components/SizedBox/SizedBox'; +import { ThemeSpacing } from '../../../shared/defguard-ui/types'; +import { Divider } from '../../../shared/defguard-ui/components/Divider/Divider'; const breadcrumbs = [ { - const { data: settings } = useQuery(getSettingsQueryOptions); return ( @@ -36,17 +39,36 @@ export const SettingsCaPage = () => { title={m.settings_certs_ca_title()} subtitle={m.settings_certs_ca_description()} /> - {isPresent(settings) && ( - - - - )} + + +

{m.settings_certs_ca_summary()}

+
+ + +
); }; -const Content = ({ settings }: { settings: Settings }) => { - console.log(settings); - return (
TODO
); +const Content = () => { + return ( + + +

{m.settings_certs_ca_information_extracted()}

+ +
+
Email
+
test@mail.com
+
Valid by
+
25/03/2057 | 16:23:00
+
+ +
+ ); }; diff --git a/web/src/pages/settings/SettingsCaPage/style.scss b/web/src/pages/settings/SettingsCaPage/style.scss new file mode 100644 index 0000000000..152830646a --- /dev/null +++ b/web/src/pages/settings/SettingsCaPage/style.scss @@ -0,0 +1,20 @@ +.ca-info-title { + font: var(--t-body-xs-500); +} + +.ca-info-grid { + display: grid; + grid-template-columns: 180px 1fr; + gap: var(--spacing-md) var(--spacing-lg); + align-items: center; + + .ca-info-label { + color: var(--fg-neutral); + font: var(--t-body-sm-400); + } + + .ca-info-value { + color: var(--fg-faded); + font: var(--t-body-sm-500); + } +} diff --git a/web/src/pages/settings/SettingsCertificatesPage/SettingsCertificatesPage.tsx b/web/src/pages/settings/SettingsCertificatesPage/SettingsCertificatesPage.tsx index 90d00e323a..0f0358625f 100644 --- a/web/src/pages/settings/SettingsCertificatesPage/SettingsCertificatesPage.tsx +++ b/web/src/pages/settings/SettingsCertificatesPage/SettingsCertificatesPage.tsx @@ -9,6 +9,8 @@ import { SettingsLayout } from '../../../shared/components/SettingsLayout/Settin import { isPresent } from '../../../shared/defguard-ui/utils/isPresent'; import { getSettingsQueryOptions } from '../../../shared/query'; import { useQuery } from '@tanstack/react-query'; +import { SizedBox } from '../../../shared/defguard-ui/components/SizedBox/SizedBox'; +import { ThemeSpacing } from '../../../shared/defguard-ui/types'; const breadcrumbs = [ { title={m.settings_certs_certs_title()} subtitle={m.settings_certs_certs_description()} /> - {isPresent(settings) && ( - - - - )} + + + + ); }; -const Content = ({ settings }: { settings: Settings }) => { - console.log(settings); +const Content = () => { return (
TODO
); }; From 75e71aee01813563b7501f5a4502ef1ccfb9f70b Mon Sep 17 00:00:00 2001 From: Jacek Chmielewski Date: Mon, 30 Mar 2026 12:57:14 +0200 Subject: [PATCH 04/29] download CA cert button --- web/messages/en/settings.json | 3 +++ .../pages/settings/SettingsCaPage/SettingsCaPage.tsx | 11 +++++++---- web/src/pages/settings/SettingsCaPage/style.scss | 1 + 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/web/messages/en/settings.json b/web/messages/en/settings.json index 3d59b05b93..b150ea95a0 100644 --- a/web/messages/en/settings.json +++ b/web/messages/en/settings.json @@ -34,6 +34,9 @@ "settings_certs_ca_certificate_validated_title": "Certificate Validated", "settings_certs_ca_certificate_validated": "Your uploaded Certificate has been successfully validated. All required files were checked and confirmed as correct and ready for use. You can download the validated certificate files if needed for your setup.", "settings_certs_ca_information_extracted": "Information extracted from uploaded files", + "settings_certs_ca_download": "Download CA certificate", + "settings_certs_ca_email": "Email", + "settings_certs_ca_valid_until": "Valid until", "settings_certs_certs_title": "Edge/Core Certificates", "settings_certs_certs_description": "Add and manage certificates issued outside of Defguard. Use them to integrate existing infrastructure and maintain secure connections with external systems and services.", "settings_vpn_stats_toggle_title": "Stats purge", diff --git a/web/src/pages/settings/SettingsCaPage/SettingsCaPage.tsx b/web/src/pages/settings/SettingsCaPage/SettingsCaPage.tsx index 02c89be0f7..bf3d415bcb 100644 --- a/web/src/pages/settings/SettingsCaPage/SettingsCaPage.tsx +++ b/web/src/pages/settings/SettingsCaPage/SettingsCaPage.tsx @@ -13,6 +13,7 @@ import caIconSrc from '../../SetupPage/assets/ca.png'; import { SizedBox } from '../../../shared/defguard-ui/components/SizedBox/SizedBox'; import { ThemeSpacing } from '../../../shared/defguard-ui/types'; import { Divider } from '../../../shared/defguard-ui/components/Divider/Divider'; +import { Button } from '../../../shared/defguard-ui/components/Button/Button'; const breadcrumbs = [ {

{m.settings_certs_ca_information_extracted()}

-
Email
-
test@mail.com
-
Valid by
-
25/03/2057 | 16:23:00
+
{m.settings_certs_ca_email()}
+
TODO
+
{m.settings_certs_ca_valid_until()}
+
TODO
+ +