@serve.zone/dcrouter 13.9.1 → 13.10.0

package/ts_web/elements/domains/ops-view-dns.ts

@@ -101,8 +101,8 @@ export class OpsViewDns extends DeesElement {
       <dees-heading level="3">DNS Records</dees-heading>
       <div class="dnsContainer">
         <div class="domainPicker">
-          <span>Domain:</span>
           <dees-input-dropdown
+            .label=${'Domain'}
             .options=${domains.map((d) => ({ option: d.name, key: d.id }))}
             .selectedOption=${selectedId
               ? { option: domains.find((d) => d.id === selectedId)?.name || '', key: selectedId }
@@ -196,7 +196,7 @@ export class OpsViewDns extends DeesElement {
       heading: 'Add DNS Record',
       content: html`
         <dees-form>
-          <dees-input-text .key=${'name'} .label=${'Name (FQDN)'} .required=${true}></dees-input-text>
+          <dees-input-text .key=${'name'} .label=${'Name'} .description=${'Fully qualified domain name'} .required=${true}></dees-input-text>
           <dees-input-dropdown
             .key=${'type'}
             .label=${'Type'}
@@ -205,10 +205,11 @@ export class OpsViewDns extends DeesElement {
           ></dees-input-dropdown>
           <dees-input-text
             .key=${'value'}
-            .label=${'Value (for MX use "10 mail.example.com")'}
+            .label=${'Value'}
+            .description=${'For MX records use priority format, e.g. "10 mail.example.com"'}
             .required=${true}
           ></dees-input-text>
-          <dees-input-text .key=${'ttl'} .label=${'TTL (seconds)'} .value=${'300'}></dees-input-text>
+          <dees-input-text .key=${'ttl'} .label=${'TTL'} .description=${'Time to live in seconds'} .value=${'300'}></dees-input-text>
         </dees-form>
       `,
       menuOptions: [
@@ -242,9 +243,9 @@ export class OpsViewDns extends DeesElement {
       heading: `Edit ${rec.type} ${rec.name}`,
       content: html`
         <dees-form>
-          <dees-input-text .key=${'name'} .label=${'Name (FQDN)'} .value=${rec.name}></dees-input-text>
+          <dees-input-text .key=${'name'} .label=${'Name'} .description=${'Fully qualified domain name'} .value=${rec.name}></dees-input-text>
           <dees-input-text .key=${'value'} .label=${'Value'} .value=${rec.value}></dees-input-text>
-          <dees-input-text .key=${'ttl'} .label=${'TTL (seconds)'} .value=${String(rec.ttl)}></dees-input-text>
+          <dees-input-text .key=${'ttl'} .label=${'TTL'} .description=${'Time to live in seconds'} .value=${String(rec.ttl)}></dees-input-text>
         </dees-form>
       `,
       menuOptions: [

package/ts_web/elements/domains/ops-view-domains.ts

@@ -181,8 +181,8 @@ export class OpsViewDomains extends DeesElement {
       heading: 'Add DcRouter Domain',
       content: html`
         <dees-form>
-          <dees-input-text .key=${'name'} .label=${'FQDN (e.g. example.com)'} .required=${true}></dees-input-text>
-          <dees-input-text .key=${'description'} .label=${'Description (optional)'}></dees-input-text>
+          <dees-input-text .key=${'name'} .label=${'FQDN'} .description=${'e.g. example.com'} .required=${true}></dees-input-text>
+          <dees-input-text .key=${'description'} .label=${'Description'}></dees-input-text>
         </dees-form>
         <p style="margin-top: 12px; font-size: 12px; opacity: 0.7;">
           dcrouter will become the authoritative DNS server for this domain. You'll need to
@@ -235,7 +235,8 @@ export class OpsViewDomains extends DeesElement {
           ></dees-input-dropdown>
           <dees-input-text
             .key=${'domainNames'}
-            .label=${'Comma-separated FQDNs to import (e.g. example.com, foo.com)'}
+            .label=${'Domain Names'}
+            .description=${'Comma-separated FQDNs, e.g. example.com, foo.com'}
             .required=${true}
           ></dees-input-text>
         </dees-form>

package/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`
       <dees-heading level="3">Email Security</dees-heading>
 
-      <dees-statsgrid
-        .tiles=${tiles}
-        .minTileWidth=${200}
-      ></dees-statsgrid>
+      <div class="securityContainer">
+        <dees-statsgrid
+          .tiles=${tiles}
+          .minTileWidth=${200}
+        ></dees-statsgrid>
 
-      <h2>Email Security Configuration</h2>
-      <div class="securityCard">
-        <dees-form>
-          <dees-input-checkbox
-            .key=${'enableSPF'}
-            .label=${'Enable SPF checking'}
-            .value=${true}
-          ></dees-input-checkbox>
-          <dees-input-checkbox
-            .key=${'enableDKIM'}
-            .label=${'Enable DKIM validation'}
-            .value=${true}
-          ></dees-input-checkbox>
-          <dees-input-checkbox
-            .key=${'enableDMARC'}
-            .label=${'Enable DMARC policy enforcement'}
-            .value=${true}
-          ></dees-input-checkbox>
-          <dees-input-checkbox
-            .key=${'enableSpamFilter'}
-            .label=${'Enable spam filtering'}
-            .value=${true}
-          ></dees-input-checkbox>
-        </dees-form>
-        <dees-button
-          class="actionButton"
-          type="highlighted"
-          @click=${() => this.saveEmailSecuritySettings()}
-        >
-          Save Settings
-        </dees-button>
+        <dees-settings
+          .heading=${'Security Configuration'}
+          .settingsFields=${[
+            { key: 'spf', label: 'SPF checking', value: 'enabled' },
+            { key: 'dkim', label: 'DKIM validation', value: 'enabled' },
+            { key: 'dmarc', label: 'DMARC policy', value: 'enabled' },
+            { key: 'spam', label: 'Spam filtering', value: 'enabled' },
+          ]}
+          .actions=${[{ name: 'Edit', action: () => this.showEditSecurityDialog() }]}
+        ></dees-settings>
       </div>
     `;
   }
 
-  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`
+        <dees-form>
+          <dees-input-checkbox .key=${'enableSPF'} .label=${'SPF checking'} .value=${true}></dees-input-checkbox>
+          <dees-input-checkbox .key=${'enableDKIM'} .label=${'DKIM validation'} .value=${true}></dees-input-checkbox>
+          <dees-input-checkbox .key=${'enableDMARC'} .label=${'DMARC policy enforcement'} .value=${true}></dees-input-checkbox>
+          <dees-input-checkbox .key=${'enableSpamFilter'} .label=${'Spam filtering'} .value=${true}></dees-input-checkbox>
+        </dees-form>
+        <p style="margin-top: 12px; font-size: 12px; opacity: 0.7;">
+          These settings are read-only for now. Update the dcrouter configuration to change them.
+        </p>
+      `,
+      menuOptions: [
+        { name: 'Close', action: async (modalArg: any) => modalArg.destroy() },
+      ],
+    });
   }
 }

package/ts_web/elements/network/ops-view-remoteingress.ts

@@ -243,9 +243,9 @@ export class OpsViewRemoteIngress extends DeesElement {
                   content: html`
                     <dees-form>
                       <dees-input-text .key=${'name'} .label=${'Name'} .required=${true}></dees-input-text>
-                      <dees-input-text .key=${'listenPorts'} .label=${'Additional Manual Ports (comma-separated, optional)'}></dees-input-text>
+                      <dees-input-text .key=${'listenPorts'} .label=${'Manual Ports'} .description=${'Comma-separated port numbers, optional'}></dees-input-text>
                       <dees-input-checkbox .key=${'autoDerivePorts'} .label=${'Auto-derive ports from routes'} .value=${true}></dees-input-checkbox>
-                      <dees-input-text .key=${'tags'} .label=${'Tags (comma-separated, optional)'}></dees-input-text>
+                      <dees-input-text .key=${'tags'} .label=${'Tags'} .description=${'Comma-separated, optional'}></dees-input-text>
                     </dees-form>
                   `,
                   menuOptions: [
@@ -320,9 +320,9 @@ export class OpsViewRemoteIngress extends DeesElement {
                   content: html`
                     <dees-form>
                       <dees-input-text .key=${'name'} .label=${'Name'} .value=${edge.name}></dees-input-text>
-                      <dees-input-text .key=${'listenPorts'} .label=${'Manual Ports (comma-separated)'} .value=${(edge.listenPorts || []).join(', ')}></dees-input-text>
+                      <dees-input-text .key=${'listenPorts'} .label=${'Manual Ports'} .description=${'Comma-separated port numbers'} .value=${(edge.listenPorts || []).join(', ')}></dees-input-text>
                       <dees-input-checkbox .key=${'autoDerivePorts'} .label=${'Auto-derive ports from routes'} .value=${edge.autoDerivePorts !== false}></dees-input-checkbox>
-                      <dees-input-text .key=${'tags'} .label=${'Tags (comma-separated)'} .value=${(edge.tags || []).join(', ')}></dees-input-text>
+                      <dees-input-text .key=${'tags'} .label=${'Tags'} .description=${'Comma-separated'} .value=${(edge.tags || []).join(', ')}></dees-input-text>
                     </dees-form>
                   `,
                   menuOptions: [

package/ts_web/elements/network/ops-view-routes.ts

@@ -473,19 +473,19 @@ export class OpsViewRoutes extends DeesElement {
       content: html`
         <dees-form>
           <dees-input-text .key=${'name'} .label=${'Route Name'} .value=${route.name || ''} .required=${true}></dees-input-text>
-          <dees-input-text .key=${'ports'} .label=${'Ports (comma-separated)'} .value=${currentPorts} .required=${true}></dees-input-text>
+          <dees-input-text .key=${'ports'} .label=${'Ports'} .description=${'Comma-separated, e.g. 80, 443'} .value=${currentPorts} .required=${true}></dees-input-text>
           <dees-input-list .key=${'domains'} .label=${'Domains'} .placeholder=${'Add domain...'} .value=${currentDomains}></dees-input-list>
-          <dees-input-text .key=${'priority'} .label=${'Priority (higher = matched first)'} .value=${route.priority != null ? String(route.priority) : ''}></dees-input-text>
+          <dees-input-text .key=${'priority'} .label=${'Priority'} .description=${'Higher values are matched first'} .value=${route.priority != null ? String(route.priority) : ''}></dees-input-text>
           <dees-input-dropdown .key=${'sourceProfileRef'} .label=${'Source Profile'} .options=${profileOptions} .selectedOption=${profileOptions.find((o) => o.key === (merged.metadata?.sourceProfileRef || '')) || null}></dees-input-dropdown>
           <dees-input-dropdown .key=${'networkTargetRef'} .label=${'Network Target'} .options=${targetOptions} .selectedOption=${targetOptions.find((o) => o.key === (merged.metadata?.networkTargetRef || '')) || null}></dees-input-dropdown>
-          <dees-input-text .key=${'targetHost'} .label=${'Target Host (if no target selected)'} .value=${currentTargetHost}></dees-input-text>
-          <dees-input-text .key=${'targetPort'} .label=${'Target Port (if no target selected)'} .value=${currentTargetPort}></dees-input-text>
+          <dees-input-text .key=${'targetHost'} .label=${'Target Host'} .description=${'Used when no network target is selected'} .value=${currentTargetHost}></dees-input-text>
+          <dees-input-text .key=${'targetPort'} .label=${'Target Port'} .description=${'Used when no network target is selected'} .value=${currentTargetPort}></dees-input-text>
           <dees-input-dropdown .key=${'tlsMode'} .label=${'TLS Mode'} .options=${tlsModeOptions} .selectedOption=${tlsModeOptions.find((o) => o.key === currentTlsMode) || tlsModeOptions[0]}></dees-input-dropdown>
           <div class="tlsCertificateGroup" style="display: ${needsCert ? 'flex' : 'none'}; flex-direction: column; gap: 16px;">
             <dees-input-dropdown .key=${'tlsCertificate'} .label=${'Certificate'} .options=${tlsCertOptions} .selectedOption=${tlsCertOptions.find((o) => o.key === currentTlsCert) || tlsCertOptions[0]}></dees-input-dropdown>
             <div class="tlsCustomCertGroup" style="display: ${needsCert && isCustom ? 'flex' : 'none'}; flex-direction: column; gap: 16px;">
-              <dees-input-text .key=${'tlsCertKey'} .label=${'Private Key (PEM)'} .value=${currentCustomKey}></dees-input-text>
-              <dees-input-text .key=${'tlsCertCert'} .label=${'Certificate (PEM)'} .value=${currentCustomCert}></dees-input-text>
+              <dees-input-text .key=${'tlsCertKey'} .label=${'Private Key'} .description=${'PEM-encoded private key'} .value=${currentCustomKey}></dees-input-text>
+              <dees-input-text .key=${'tlsCertCert'} .label=${'Certificate'} .description=${'PEM-encoded certificate'} .value=${currentCustomCert}></dees-input-text>
             </div>
           </div>
         </dees-form>
@@ -607,19 +607,19 @@ export class OpsViewRoutes extends DeesElement {
       content: html`
         <dees-form>
           <dees-input-text .key=${'name'} .label=${'Route Name'} .required=${true}></dees-input-text>
-          <dees-input-text .key=${'ports'} .label=${'Ports (comma-separated)'} .required=${true}></dees-input-text>
+          <dees-input-text .key=${'ports'} .label=${'Ports'} .description=${'Comma-separated, e.g. 80, 443'} .required=${true}></dees-input-text>
           <dees-input-list .key=${'domains'} .label=${'Domains'} .placeholder=${'Add domain...'}></dees-input-list>
-          <dees-input-text .key=${'priority'} .label=${'Priority (higher = matched first)'}></dees-input-text>
+          <dees-input-text .key=${'priority'} .label=${'Priority'} .description=${'Higher values are matched first'}></dees-input-text>
           <dees-input-dropdown .key=${'sourceProfileRef'} .label=${'Source Profile'} .options=${profileOptions}></dees-input-dropdown>
           <dees-input-dropdown .key=${'networkTargetRef'} .label=${'Network Target'} .options=${targetOptions}></dees-input-dropdown>
-          <dees-input-text .key=${'targetHost'} .label=${'Target Host (if no target selected)'} .value=${'localhost'}></dees-input-text>
-          <dees-input-text .key=${'targetPort'} .label=${'Target Port (if no target selected)'}></dees-input-text>
+          <dees-input-text .key=${'targetHost'} .label=${'Target Host'} .description=${'Used when no network target is selected'} .value=${'localhost'}></dees-input-text>
+          <dees-input-text .key=${'targetPort'} .label=${'Target Port'} .description=${'Used when no network target is selected'}></dees-input-text>
           <dees-input-dropdown .key=${'tlsMode'} .label=${'TLS Mode'} .options=${tlsModeOptions} .selectedOption=${tlsModeOptions[0]}></dees-input-dropdown>
           <div class="tlsCertificateGroup" style="display: none; flex-direction: column; gap: 16px;">
             <dees-input-dropdown .key=${'tlsCertificate'} .label=${'Certificate'} .options=${tlsCertOptions} .selectedOption=${tlsCertOptions[0]}></dees-input-dropdown>
             <div class="tlsCustomCertGroup" style="display: none; flex-direction: column; gap: 16px;">
-              <dees-input-text .key=${'tlsCertKey'} .label=${'Private Key (PEM)'}></dees-input-text>
-              <dees-input-text .key=${'tlsCertCert'} .label=${'Certificate (PEM)'}></dees-input-text>
+              <dees-input-text .key=${'tlsCertKey'} .label=${'Private Key'} .description=${'PEM-encoded private key'}></dees-input-text>
+              <dees-input-text .key=${'tlsCertCert'} .label=${'Certificate'} .description=${'PEM-encoded certificate'}></dees-input-text>
             </div>
           </div>
         </dees-form>

package/ts_web/elements/network/ops-view-targetprofiles.ts

@@ -176,7 +176,7 @@ export class OpsViewTargetProfiles extends DeesElement {
           <dees-input-text .key=${'name'} .label=${'Name'} .required=${true}></dees-input-text>
           <dees-input-text .key=${'description'} .label=${'Description'}></dees-input-text>
           <dees-input-list .key=${'domains'} .label=${'Domains'} .placeholder=${'e.g. *.example.com'} .allowFreeform=${true}></dees-input-list>
-          <dees-input-list .key=${'targets'} .label=${'Targets (ip:port)'} .placeholder=${'e.g. 10.0.0.1:443'} .allowFreeform=${true}></dees-input-list>
+          <dees-input-list .key=${'targets'} .label=${'Targets'} .description=${'Format: ip:port, e.g. 10.0.0.1:443'} .placeholder=${'e.g. 10.0.0.1:443'} .allowFreeform=${true}></dees-input-list>
           <dees-input-list .key=${'routeRefs'} .label=${'Route Refs'} .placeholder=${'Type to search routes...'} .candidates=${routeCandidates} .allowFreeform=${true}></dees-input-list>
         </dees-form>
       `,
@@ -235,7 +235,7 @@ export class OpsViewTargetProfiles extends DeesElement {
           <dees-input-text .key=${'name'} .label=${'Name'} .value=${profile.name}></dees-input-text>
           <dees-input-text .key=${'description'} .label=${'Description'} .value=${profile.description || ''}></dees-input-text>
           <dees-input-list .key=${'domains'} .label=${'Domains'} .placeholder=${'e.g. *.example.com'} .allowFreeform=${true} .value=${currentDomains}></dees-input-list>
-          <dees-input-list .key=${'targets'} .label=${'Targets (ip:port)'} .placeholder=${'e.g. 10.0.0.1:443'} .allowFreeform=${true} .value=${currentTargets}></dees-input-list>
+          <dees-input-list .key=${'targets'} .label=${'Targets'} .description=${'Format: ip:port, e.g. 10.0.0.1:443'} .placeholder=${'e.g. 10.0.0.1:443'} .allowFreeform=${true} .value=${currentTargets}></dees-input-list>
           <dees-input-list .key=${'routeRefs'} .label=${'Route Refs'} .placeholder=${'Type to search routes...'} .candidates=${routeCandidates} .allowFreeform=${true} .value=${currentRouteRefs}></dees-input-list>
         </dees-form>
       `,

package/ts_web/elements/network/ops-view-vpn.ts

@@ -371,8 +371,8 @@ export class OpsViewVpn extends DeesElement {
                     </div>
                     <dees-input-checkbox .key=${'allowAdditionalAcls'} .label=${'Allow additional ACLs'} .value=${false}></dees-input-checkbox>
                     <div class="aclGroup" style="display: none; flex-direction: column; gap: 16px;">
-                      <dees-input-text .key=${'destinationAllowList'} .label=${'Destination Allow List (comma-separated IPs/CIDRs)'}></dees-input-text>
-                      <dees-input-text .key=${'destinationBlockList'} .label=${'Destination Block List (comma-separated IPs/CIDRs)'}></dees-input-text>
+                      <dees-input-text .key=${'destinationAllowList'} .label=${'Destination Allow List'} .description=${'Comma-separated IPs or CIDRs'}></dees-input-text>
+                      <dees-input-text .key=${'destinationBlockList'} .label=${'Destination Block List'} .description=${'Comma-separated IPs or CIDRs'}></dees-input-text>
                     </div>
                   </dees-form>
                 `,
@@ -681,8 +681,8 @@ export class OpsViewVpn extends DeesElement {
                     </div>
                     <dees-input-checkbox .key=${'allowAdditionalAcls'} .label=${'Allow additional ACLs'} .value=${currentAllowAcls}></dees-input-checkbox>
                     <div class="aclGroup" style="display: ${currentAllowAcls ? 'flex' : 'none'}; flex-direction: column; gap: 16px;">
-                      <dees-input-text .key=${'destinationAllowList'} .label=${'Destination Allow List (comma-separated IPs/CIDRs)'} .value=${currentAllowList}></dees-input-text>
-                      <dees-input-text .key=${'destinationBlockList'} .label=${'Destination Block List (comma-separated IPs/CIDRs)'} .value=${currentBlockList}></dees-input-text>
+                      <dees-input-text .key=${'destinationAllowList'} .label=${'Destination Allow List'} .description=${'Comma-separated IPs or CIDRs'} .value=${currentAllowList}></dees-input-text>
+                      <dees-input-text .key=${'destinationBlockList'} .label=${'Destination Block List'} .description=${'Comma-separated IPs or CIDRs'} .value=${currentBlockList}></dees-input-text>
                     </div>
                   </dees-form>
                 `,