From 196e5dfc1b5c3c59b62031dd53f1ee5406be94e8 Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Sun, 12 Apr 2026 20:43:57 +0000 Subject: [PATCH] feat(web-ui): standardize settings views for ACME and email security panels --- changelog.md | 7 ++ package.json | 2 +- pnpm-lock.yaml | 14 +-- ts/00_commitinfo_data.ts | 2 +- ts_web/00_commitinfo_data.ts | 2 +- .../elements/domains/ops-view-certificates.ts | 111 +++--------------- .../elements/email/ops-view-email-security.ts | 95 ++++++--------- 7 files changed, 71 insertions(+), 162 deletions(-) diff --git a/changelog.md b/changelog.md index a797fe9..cca37c0 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,12 @@ # Changelog +## 2026-04-12 - 13.10.0 - feat(web-ui) +standardize settings views for ACME and email security panels + +- replace custom ACME settings layouts with the reusable dees-settings component for configured and empty states +- update the email security view to present settings through dees-settings and open a modal-based read-only edit dialog +- bump @design.estate/dees-catalog to ^3.78.0 to support the updated UI components + ## 2026-04-12 - 13.9.2 - fix(web-ui) improve form field descriptions and align certificate settings with tile components diff --git a/package.json b/package.json index ce087a5..2a966f9 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "@api.global/typedserver": "^8.4.6", "@api.global/typedsocket": "^4.1.2", "@apiclient.xyz/cloudflare": "^7.1.0", - "@design.estate/dees-catalog": "^3.76.1", + "@design.estate/dees-catalog": "^3.78.0", "@design.estate/dees-element": "^2.2.4", "@push.rocks/lik": "^6.4.0", "@push.rocks/projectinfo": "^5.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6261836..00fc211 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,8 +24,8 @@ importers: specifier: ^7.1.0 version: 7.1.0 '@design.estate/dees-catalog': - specifier: ^3.76.1 - version: 3.76.1(@tiptap/pm@2.27.2) + specifier: ^3.78.0 + version: 3.78.0(@tiptap/pm@2.27.2) '@design.estate/dees-element': specifier: ^2.2.4 version: 2.2.4 @@ -353,8 +353,8 @@ packages: '@configvault.io/interfaces@1.0.17': resolution: {integrity: sha512-bEcCUR2VBDJsTin8HQh8Uw/mlYl2v8A3jMIaQ+MTB9Hrqd6CZL2dL7iJdWyFl/3EIX+LDxWFR+Oq7liIq7w+1Q==} - '@design.estate/dees-catalog@3.76.1': - resolution: {integrity: sha512-DSnu1NHz0C9CI13e6HMUV6lFiAKzOoPccZUZu6wDrpTcGha1trvFftcRzsieJ0NrvNJ6qZrh1vGL6ZYhu5RO0A==} + '@design.estate/dees-catalog@3.78.0': + resolution: {integrity: sha512-doc9eYGsFV47Ui7k5FuLXpt3ytC/Q+g+yX+qGU/V4fZpc5KUXpL04/FRzO0AU1wF9Xl9GMmL39CcE2vKj88QAQ==} '@design.estate/dees-comms@1.0.30': resolution: {integrity: sha512-KchMlklJfKAjQiJiR0xmofXtQ27VgZtBIxcMwPE9d+h3jJRv+lPZxzBQVOM0eyM0uS44S5vJMZ11IeV4uDXSHg==} @@ -4318,7 +4318,7 @@ snapshots: '@api.global/typedrequest-interfaces': 3.0.19 '@api.global/typedsocket': 4.1.2(@push.rocks/smartserve@2.0.3) '@cloudflare/workers-types': 4.20260405.1 - '@design.estate/dees-catalog': 3.76.1(@tiptap/pm@2.27.2) + '@design.estate/dees-catalog': 3.78.0(@tiptap/pm@2.27.2) '@design.estate/dees-comms': 1.0.30 '@push.rocks/lik': 6.4.0 '@push.rocks/smartdelay': 3.0.5 @@ -4847,7 +4847,7 @@ snapshots: dependencies: '@api.global/typedrequest-interfaces': 3.0.19 - '@design.estate/dees-catalog@3.76.1(@tiptap/pm@2.27.2)': + '@design.estate/dees-catalog@3.78.0(@tiptap/pm@2.27.2)': dependencies: '@design.estate/dees-domtools': 2.5.4 '@design.estate/dees-element': 2.2.4 @@ -6915,7 +6915,7 @@ snapshots: '@serve.zone/catalog@2.12.3(@tiptap/pm@2.27.2)': dependencies: - '@design.estate/dees-catalog': 3.76.1(@tiptap/pm@2.27.2) + '@design.estate/dees-catalog': 3.78.0(@tiptap/pm@2.27.2) '@design.estate/dees-domtools': 2.5.4 '@design.estate/dees-element': 2.2.4 '@design.estate/dees-wcctools': 3.8.0 diff --git a/ts/00_commitinfo_data.ts b/ts/00_commitinfo_data.ts index 89c5f1c..924d19a 100644 --- a/ts/00_commitinfo_data.ts +++ b/ts/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@serve.zone/dcrouter', - version: '13.9.2', + version: '13.10.0', description: 'A multifaceted routing service handling mail and SMS delivery functions.' } diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 89c5f1c..924d19a 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@serve.zone/dcrouter', - version: '13.9.2', + version: '13.10.0', description: 'A multifaceted routing service handling mail and SMS delivery functions.' } diff --git a/ts_web/elements/domains/ops-view-certificates.ts b/ts_web/elements/domains/ops-view-certificates.ts index 688c5f2..5004e0f 100644 --- a/ts_web/elements/domains/ops-view-certificates.ts +++ b/ts_web/elements/domains/ops-view-certificates.ts @@ -54,51 +54,6 @@ export class OpsViewCertificates extends DeesElement { gap: 24px; } - .acmeTileHeader { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - padding: 8px 12px; - } - - .acmeTileHeading { - font-size: 14px; - font-weight: 600; - } - - .acmeEmptyContent { - padding: 16px; - font-size: 13px; - line-height: 1.5; - color: ${cssManager.bdTheme('#78350f', '#fde68a')}; - } - - .acmeGrid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); - gap: 12px 24px; - padding: 16px; - } - - .acmeField { - display: flex; - flex-direction: column; - gap: 2px; - } - - .acmeLabel { - font-size: 11px; - text-transform: uppercase; - letter-spacing: 0.03em; - color: ${cssManager.bdTheme('#6b7280', '#9ca3af')}; - } - - .acmeValue { - font-size: 13px; - color: ${cssManager.bdTheme('#111827', '#f3f4f6')}; - } - .statusBadge { display: inline-flex; align-items: center; @@ -227,60 +182,26 @@ export class OpsViewCertificates extends DeesElement { if (!config) { return html` - -
- ACME Settings - this.showEditAcmeDialog()} - .type=${'highlighted'} - >Configure -
-
- No ACME configuration yet. Click Configure to set up automated TLS - certificate issuance via Let's Encrypt. You'll also need at least one DNS provider - under Domains > Providers. -
- + Providers.'} + .actions=${[{ name: 'Configure', action: () => this.showEditAcmeDialog() }]} + > `; } return html` - -
- ACME Settings - this.showEditAcmeDialog()}>Edit -
-
-
- Account email - ${config.accountEmail || '(not set)'} -
-
- Status - - - ${config.enabled ? 'enabled' : 'disabled'} - - -
-
- Mode - - - ${config.useProduction ? 'production' : 'staging'} - - -
-
- Auto-renew - ${config.autoRenew ? 'on' : 'off'} -
-
- Renewal threshold - ${config.renewThresholdDays} days -
-
- + this.showEditAcmeDialog() }]} + > `; } diff --git a/ts_web/elements/email/ops-view-email-security.ts b/ts_web/elements/email/ops-view-email-security.ts index 766b67b..bd6218c 100644 --- a/ts_web/elements/email/ops-view-email-security.ts +++ b/ts_web/elements/email/ops-view-email-security.ts @@ -37,25 +37,10 @@ export class OpsViewEmailSecurity extends DeesElement { cssManager.defaultStyles, viewHostCss, css` - h2 { - margin: 32px 0 16px 0; - font-size: 24px; - font-weight: 600; - color: ${cssManager.bdTheme('#333', '#ccc')}; - } - dees-statsgrid { - margin-bottom: 32px; - } - .securityCard { - background: ${cssManager.bdTheme('#fff', '#222')}; - border: 1px solid ${cssManager.bdTheme('#e9ecef', '#333')}; - border-radius: 8px; - padding: 24px; - position: relative; - overflow: hidden; - } - .actionButton { - margin-top: 16px; + .securityContainer { + display: flex; + flex-direction: column; + gap: 24px; } `, ]; @@ -113,48 +98,44 @@ export class OpsViewEmailSecurity extends DeesElement { return html` Email Security - +
+ -

Email Security Configuration

-
- - - - - - - this.saveEmailSecuritySettings()} - > - Save Settings - + this.showEditSecurityDialog() }]} + >
`; } - private async saveEmailSecuritySettings() { - // Config is read-only from the UI for now - alert('Email security settings are read-only. Update the dcrouter configuration file to change these settings.'); + private async showEditSecurityDialog() { + const { DeesModal } = await import('@design.estate/dees-catalog'); + DeesModal.createAndShow({ + heading: 'Edit Security Configuration', + content: html` + + + + + + +

+ These settings are read-only for now. Update the dcrouter configuration to change them. +

+ `, + menuOptions: [ + { name: 'Close', action: async (modalArg: any) => modalArg.destroy() }, + ], + }); } }