@serve.zone/dcrouter 13.7.1 → 13.9.0

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

@@ -23,17 +23,25 @@ export class OpsViewCertificates extends DeesElement {
   @state()
   accessor certState: appstate.ICertificateState = appstate.certificateStatePart.getState()!;
 
+  @state()
+  accessor acmeState: appstate.IAcmeConfigState = appstate.acmeConfigStatePart.getState()!;
+
   constructor() {
     super();
-    const sub = appstate.certificateStatePart.select().subscribe((newState) => {
+    const certSub = appstate.certificateStatePart.select().subscribe((newState) => {
       this.certState = newState;
     });
-    this.rxSubscriptions.push(sub);
+    this.rxSubscriptions.push(certSub);
+    const acmeSub = appstate.acmeConfigStatePart.select().subscribe((newState) => {
+      this.acmeState = newState;
+    });
+    this.rxSubscriptions.push(acmeSub);
   }
 
   async connectedCallback() {
     await super.connectedCallback();
     await appstate.certificateStatePart.dispatchAction(appstate.fetchCertificateOverviewAction, null);
+    await appstate.acmeConfigStatePart.dispatchAction(appstate.fetchAcmeConfigAction, null);
   }
 
   public static styles = [
@@ -46,6 +54,62 @@ export class OpsViewCertificates extends DeesElement {
         gap: 24px;
       }
 
+      .acmeCard {
+        padding: 16px 20px;
+        background: ${cssManager.bdTheme('#f9fafb', '#111827')};
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#374151')};
+        border-radius: 8px;
+      }
+
+      .acmeCard.acmeCardEmpty {
+        background: ${cssManager.bdTheme('#fffbeb', '#1c1917')};
+        border-color: ${cssManager.bdTheme('#fde68a', '#78350f')};
+      }
+
+      .acmeCardHeader {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+      }
+
+      .acmeCardTitle {
+        font-size: 14px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#111827', '#f3f4f6')};
+      }
+
+      .acmeGrid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        gap: 12px 24px;
+      }
+
+      .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')};
+      }
+
+      .acmeEmptyHint {
+        margin: 0;
+        font-size: 13px;
+        line-height: 1.5;
+        color: ${cssManager.bdTheme('#78350f', '#fde68a')};
+      }
+
       .statusBadge {
         display: inline-flex;
         align-items: center;
@@ -162,12 +226,151 @@ export class OpsViewCertificates extends DeesElement {
       <dees-heading level="3">Certificates</dees-heading>
 
       <div class="certificatesContainer">
+        ${this.renderAcmeSettingsCard()}
         ${this.renderStatsTiles(summary)}
         ${this.renderCertificateTable()}
       </div>
     `;
   }
 
+  private renderAcmeSettingsCard(): TemplateResult {
+    const config = this.acmeState.config;
+
+    if (!config) {
+      return html`
+        <div class="acmeCard acmeCardEmpty">
+          <div class="acmeCardHeader">
+            <span class="acmeCardTitle">ACME Settings</span>
+            <dees-button
+              eventName="edit-acme"
+              @click=${() => this.showEditAcmeDialog()}
+              .type=${'highlighted'}
+            >Configure</dees-button>
+          </div>
+          <p class="acmeEmptyHint">
+            No ACME configuration yet. Click <strong>Configure</strong> to set up automated TLS
+            certificate issuance via Let's Encrypt. You'll also need at least one DNS provider
+            under <strong>Domains &gt; Providers</strong>.
+          </p>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="acmeCard">
+        <div class="acmeCardHeader">
+          <span class="acmeCardTitle">ACME Settings</span>
+          <dees-button eventName="edit-acme" @click=${() => this.showEditAcmeDialog()}>Edit</dees-button>
+        </div>
+        <div class="acmeGrid">
+          <div class="acmeField">
+            <span class="acmeLabel">Account email</span>
+            <span class="acmeValue">${config.accountEmail || '(not set)'}</span>
+          </div>
+          <div class="acmeField">
+            <span class="acmeLabel">Status</span>
+            <span class="acmeValue">
+              <span class="statusBadge ${config.enabled ? 'valid' : 'unknown'}">
+                ${config.enabled ? 'enabled' : 'disabled'}
+              </span>
+            </span>
+          </div>
+          <div class="acmeField">
+            <span class="acmeLabel">Mode</span>
+            <span class="acmeValue">
+              <span class="statusBadge ${config.useProduction ? 'valid' : 'provisioning'}">
+                ${config.useProduction ? 'production' : 'staging'}
+              </span>
+            </span>
+          </div>
+          <div class="acmeField">
+            <span class="acmeLabel">Auto-renew</span>
+            <span class="acmeValue">${config.autoRenew ? 'on' : 'off'}</span>
+          </div>
+          <div class="acmeField">
+            <span class="acmeLabel">Renewal threshold</span>
+            <span class="acmeValue">${config.renewThresholdDays} days</span>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private async showEditAcmeDialog() {
+    const { DeesModal, DeesToast } = await import('@design.estate/dees-catalog');
+    const current = this.acmeState.config;
+
+    DeesModal.createAndShow({
+      heading: current ? 'Edit ACME Settings' : 'Configure ACME',
+      content: html`
+        <dees-form>
+          <dees-input-text
+            .key=${'accountEmail'}
+            .label=${'Account email'}
+            .value=${current?.accountEmail ?? ''}
+            .required=${true}
+          ></dees-input-text>
+          <dees-input-checkbox
+            .key=${'enabled'}
+            .label=${'Enabled'}
+            .value=${current?.enabled ?? true}
+          ></dees-input-checkbox>
+          <dees-input-checkbox
+            .key=${'useProduction'}
+            .label=${"Use Let's Encrypt production (uncheck for staging)"}
+            .value=${current?.useProduction ?? true}
+          ></dees-input-checkbox>
+          <dees-input-checkbox
+            .key=${'autoRenew'}
+            .label=${'Auto-renew certificates'}
+            .value=${current?.autoRenew ?? true}
+          ></dees-input-checkbox>
+          <dees-input-text
+            .key=${'renewThresholdDays'}
+            .label=${'Renewal threshold (days)'}
+            .value=${String(current?.renewThresholdDays ?? 30)}
+          ></dees-input-text>
+        </dees-form>
+        <p style="margin-top: 12px; font-size: 12px; opacity: 0.7;">
+          Most fields take effect on the next dcrouter restart (SmartAcme is instantiated once at
+          startup). Changing the account email creates a new Let's Encrypt account — only do this
+          if you know what you're doing.
+        </p>
+      `,
+      menuOptions: [
+        { name: 'Cancel', action: async (modalArg: any) => modalArg.destroy() },
+        {
+          name: 'Save',
+          action: async (modalArg: any) => {
+            const form = modalArg.shadowRoot
+              ?.querySelector('.content')
+              ?.querySelector('dees-form');
+            if (!form) return;
+            const data = await form.collectFormData();
+            const email = String(data.accountEmail ?? '').trim();
+            if (!email) {
+              DeesToast.show({
+                message: 'Account email is required',
+                type: 'warning',
+                duration: 2500,
+              });
+              return;
+            }
+            const threshold = parseInt(String(data.renewThresholdDays ?? '30'), 10);
+            await appstate.acmeConfigStatePart.dispatchAction(appstate.updateAcmeConfigAction, {
+              accountEmail: email,
+              enabled: Boolean(data.enabled),
+              useProduction: Boolean(data.useProduction),
+              autoRenew: Boolean(data.autoRenew),
+              renewThresholdDays: Number.isFinite(threshold) ? threshold : 30,
+            });
+            modalArg.destroy();
+          },
+        },
+      ],
+    });
+  }
+
   private renderStatsTiles(summary: appstate.ICertificateState['summary']): TemplateResult {
     const tiles: IStatsTile[] = [
       {

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

@@ -80,7 +80,7 @@ export class OpsViewDns extends DeesElement {
         font-weight: 500;
       }
 
-      .sourceBadge.manual {
+      .sourceBadge.local {
         background: ${cssManager.bdTheme('#e0e7ff', '#1e1b4b')};
         color: ${cssManager.bdTheme('#3730a3', '#a5b4fc')};
       }
@@ -184,7 +184,7 @@ export class OpsViewDns extends DeesElement {
   private domainHint(domainId: string): string {
     const domain = this.domainsState.domains.find((d) => d.id === domainId);
     if (!domain) return '';
-    if (domain.source === 'manual') {
+    if (domain.source === 'dcrouter') {
       return 'Records are served by dcrouter (authoritative).';
     }
     return 'Records are stored at the provider — changes here are pushed via the provider API.';

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

@@ -55,7 +55,7 @@ export class OpsViewDomains extends DeesElement {
         font-weight: 500;
       }
 
-      .sourceBadge.manual {
+      .sourceBadge.dcrouter {
         background: ${cssManager.bdTheme('#e0e7ff', '#1e1b4b')};
         color: ${cssManager.bdTheme('#3730a3', '#a5b4fc')};
       }
@@ -76,7 +76,7 @@ export class OpsViewDomains extends DeesElement {
       <div class="domainsContainer">
         <dees-table
           .heading1=${'Domains'}
-          .heading2=${'Domains under management — manual (authoritative) or imported from a provider'}
+          .heading2=${'Domains under management — served by dcrouter (authoritative) or imported from a provider'}
           .data=${domains}
           .showColumnFilters=${true}
           .displayFunction=${(d: interfaces.data.IDomain) => ({
@@ -90,11 +90,11 @@ export class OpsViewDomains extends DeesElement {
           })}
           .dataActions=${[
             {
-              name: 'Add Manual Domain',
+              name: 'Add DcRouter Domain',
               iconName: 'lucide:plus',
               type: ['header' as const],
               actionFunc: async () => {
-                await this.showCreateManualDialog();
+                await this.showCreateDcrouterDialog();
               },
             },
             {
@@ -168,17 +168,17 @@ export class OpsViewDomains extends DeesElement {
     d: interfaces.data.IDomain,
     providersById: Map<string, interfaces.data.IDnsProviderPublic>,
   ): TemplateResult {
-    if (d.source === 'manual') {
-      return html`<span class="sourceBadge manual">Manual</span>`;
+    if (d.source === 'dcrouter') {
+      return html`<span class="sourceBadge dcrouter">DcRouter</span>`;
     }
     const provider = d.providerId ? providersById.get(d.providerId) : undefined;
     return html`<span class="sourceBadge provider">${provider?.name || 'Provider'}</span>`;
   }
 
-  private async showCreateManualDialog() {
+  private async showCreateDcrouterDialog() {
     const { DeesModal } = await import('@design.estate/dees-catalog');
     DeesModal.createAndShow({
-      heading: 'Add Manual Domain',
+      heading: 'Add DcRouter Domain',
       content: html`
         <dees-form>
           <dees-input-text .key=${'name'} .label=${'FQDN (e.g. example.com)'} .required=${true}></dees-input-text>
@@ -199,7 +199,7 @@ export class OpsViewDomains extends DeesElement {
               ?.querySelector('dees-form');
             if (!form) return;
             const data = await form.collectFormData();
-            await appstate.domainsStatePart.dispatchAction(appstate.createManualDomainAction, {
+            await appstate.domainsStatePart.dispatchAction(appstate.createDcrouterDomainAction, {
               name: String(data.name),
               description: data.description ? String(data.description) : undefined,
             });

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

@@ -71,6 +71,11 @@ export class OpsViewProviders extends DeesElement {
         background: ${cssManager.bdTheme('#f3f4f6', '#1f2937')};
         color: ${cssManager.bdTheme('#4b5563', '#9ca3af')};
       }
+
+      .statusBadge.builtin {
+        background: ${cssManager.bdTheme('#e0e7ff', '#1e1b4b')};
+        color: ${cssManager.bdTheme('#3730a3', '#a5b4fc')};
+      }
     `,
   ];
 
@@ -82,15 +87,21 @@ export class OpsViewProviders extends DeesElement {
       <div class="providersContainer">
         <dees-table
           .heading1=${'Providers'}
-          .heading2=${'External DNS provider accounts'}
+          .heading2=${'Built-in dcrouter + external DNS provider accounts'}
           .data=${providers}
           .showColumnFilters=${true}
           .displayFunction=${(p: interfaces.data.IDnsProviderPublic) => ({
             Name: p.name,
             Type: this.providerTypeLabel(p.type),
-            Status: this.renderStatusBadge(p.status),
-            'Last Tested': p.lastTestedAt ? new Date(p.lastTestedAt).toLocaleString() : 'never',
-            Error: p.lastError || '-',
+            Status: p.builtIn
+              ? html`<span class="statusBadge builtin">built-in</span>`
+              : this.renderStatusBadge(p.status),
+            'Last Tested': p.builtIn
+              ? '—'
+              : p.lastTestedAt
+                ? new Date(p.lastTestedAt).toLocaleString()
+                : 'never',
+            Error: p.builtIn ? '—' : p.lastError || '-',
           })}
           .dataActions=${[
             {
@@ -116,6 +127,7 @@ export class OpsViewProviders extends DeesElement {
               name: 'Test Connection',
               iconName: 'lucide:plug',
               type: ['inRow', 'contextmenu'] as any,
+              actionRelevancyCheckFunc: (p: interfaces.data.IDnsProviderPublic) => !p.builtIn,
               actionFunc: async (actionData: any) => {
                 const provider = actionData.item as interfaces.data.IDnsProviderPublic;
                 await this.testProvider(provider);
@@ -125,6 +137,7 @@ export class OpsViewProviders extends DeesElement {
               name: 'Edit',
               iconName: 'lucide:pencil',
               type: ['inRow', 'contextmenu'] as any,
+              actionRelevancyCheckFunc: (p: interfaces.data.IDnsProviderPublic) => !p.builtIn,
               actionFunc: async (actionData: any) => {
                 const provider = actionData.item as interfaces.data.IDnsProviderPublic;
                 await this.showEditDialog(provider);
@@ -134,6 +147,7 @@ export class OpsViewProviders extends DeesElement {
               name: 'Delete',
               iconName: 'lucide:trash2',
               type: ['inRow', 'contextmenu'] as any,
+              actionRelevancyCheckFunc: (p: interfaces.data.IDnsProviderPublic) => !p.builtIn,
               actionFunc: async (actionData: any) => {
                 const provider = actionData.item as interfaces.data.IDnsProviderPublic;
                 await this.deleteProvider(provider);