@serve.zone/dcrouter 13.5.0 → 13.7.1

package/ts_web/elements/domains/dns-provider-form.ts

@@ -0,0 +1,216 @@
+import {
+  DeesElement,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  state,
+  property,
+  cssManager,
+} from '@design.estate/dees-element';
+import * as interfaces from '../../../dist_ts_interfaces/index.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dns-provider-form': DnsProviderForm;
+  }
+}
+
+/**
+ * Reactive credential form for a DNS provider. Renders the type picker
+ * and the credential fields for the currently-selected type.
+ *
+ * Provider-agnostic — driven entirely by `dnsProviderTypeDescriptors` from
+ * `ts_interfaces/data/dns-provider.ts`. Adding a new provider type means
+ * appending one entry to the descriptors array; this form picks it up
+ * automatically.
+ *
+ * Usage:
+ *
+ *     const formEl = document.createElement('dns-provider-form');
+ *     formEl.providerName = 'My provider';
+ *     // ... pass element into a DeesModal as content ...
+ *     // on submit:
+ *     const data = formEl.collectData();
+ *     // → { name, type, credentials }
+ *
+ * In edit mode, set `lockType = true` so the user cannot change provider
+ * type after creation (credentials shapes don't transfer between types).
+ */
+@customElement('dns-provider-form')
+export class DnsProviderForm extends DeesElement {
+  /** Pre-populated provider name. */
+  @property({ type: String })
+  accessor providerName: string = '';
+
+  /**
+   * Currently selected provider type. Initialized to the first descriptor;
+   * caller can override before mounting (e.g. for edit dialogs).
+   */
+  @state()
+  accessor selectedType: interfaces.data.TDnsProviderType =
+    interfaces.data.dnsProviderTypeDescriptors[0]?.type ?? 'cloudflare';
+
+  /** When true, hide the type picker — used in edit dialogs. */
+  @property({ type: Boolean })
+  accessor lockType: boolean = false;
+
+  /**
+   * Help text shown above credentials. Useful for edit dialogs to indicate
+   * that fields can be left blank to keep current values.
+   */
+  @property({ type: String })
+  accessor credentialsHint: string = '';
+
+  /** Internal map of credential field values, keyed by the descriptor's `key`. */
+  @state()
+  accessor credentialValues: Record<string, string> = {};
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .field {
+        margin-bottom: 12px;
+      }
+
+      .helpText {
+        font-size: 12px;
+        opacity: 0.7;
+        margin-top: -6px;
+        margin-bottom: 8px;
+      }
+
+      .typeDescription {
+        font-size: 12px;
+        opacity: 0.8;
+        margin: 4px 0 16px;
+        padding: 8px 12px;
+        background: ${cssManager.bdTheme('#f3f4f6', '#1f2937')};
+        border-radius: 6px;
+      }
+
+      .credentialsHint {
+        font-size: 12px;
+        opacity: 0.7;
+        margin-bottom: 12px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const descriptors = interfaces.data.dnsProviderTypeDescriptors;
+    const descriptor = interfaces.data.getDnsProviderTypeDescriptor(this.selectedType);
+
+    return html`
+      <dees-form>
+        <div class="field">
+          <dees-input-text
+            .key=${'name'}
+            .label=${'Provider name'}
+            .value=${this.providerName}
+            .required=${true}
+          ></dees-input-text>
+        </div>
+
+        ${this.lockType
+          ? html`
+              <div class="field">
+                <dees-input-text
+                  .key=${'__type_display'}
+                  .label=${'Type'}
+                  .value=${descriptor?.displayName ?? this.selectedType}
+                  .disabled=${true}
+                ></dees-input-text>
+              </div>
+            `
+          : html`
+              <div class="field">
+                <dees-input-dropdown
+                  .key=${'__type'}
+                  .label=${'Provider type'}
+                  .options=${descriptors.map((d) => ({ option: d.displayName, key: d.type }))}
+                  .selectedOption=${descriptor
+                    ? { option: descriptor.displayName, key: descriptor.type }
+                    : undefined}
+                  @selectedOption=${(e: CustomEvent) => {
+                    const newType = (e.detail as any)?.key as
+                      | interfaces.data.TDnsProviderType
+                      | undefined;
+                    if (newType && newType !== this.selectedType) {
+                      this.selectedType = newType;
+                      this.credentialValues = {};
+                    }
+                  }}
+                ></dees-input-dropdown>
+              </div>
+            `}
+        ${descriptor
+          ? html`
+              <div class="typeDescription">${descriptor.description}</div>
+              ${this.credentialsHint
+                ? html`<div class="credentialsHint">${this.credentialsHint}</div>`
+                : ''}
+              ${descriptor.credentialFields.map(
+                (f) => html`
+                  <div class="field">
+                    <dees-input-text
+                      .key=${f.key}
+                      .label=${f.label}
+                      .required=${f.required && !this.lockType}
+                    ></dees-input-text>
+                    ${f.helpText ? html`<div class="helpText">${f.helpText}</div>` : ''}
+                  </div>
+                `,
+              )}
+            `
+          : html`<p>No provider types registered.</p>`}
+      </dees-form>
+    `;
+  }
+
+  /**
+   * Read the form values and assemble the create/update payload.
+   * Returns the typed credentials object built from the descriptor's keys.
+   */
+  public async collectData(): Promise<{
+    name: string;
+    type: interfaces.data.TDnsProviderType;
+    credentials: interfaces.data.TDnsProviderCredentials;
+    credentialsTouched: boolean;
+  } | null> {
+    const form = this.shadowRoot?.querySelector('dees-form') as any;
+    if (!form) return null;
+    const data = await form.collectFormData();
+    const descriptor = interfaces.data.getDnsProviderTypeDescriptor(this.selectedType);
+    if (!descriptor) return null;
+
+    // Build the credentials object from the descriptor's field keys.
+    const credsBody: Record<string, string> = {};
+    let credentialsTouched = false;
+    for (const f of descriptor.credentialFields) {
+      const value = data[f.key];
+      if (value !== undefined && value !== null && String(value).length > 0) {
+        credsBody[f.key] = String(value);
+        credentialsTouched = true;
+      }
+    }
+
+    // The discriminator goes on the credentials object so the backend
+    // factory and the discriminated union both stay happy.
+    const credentials = {
+      type: this.selectedType,
+      ...credsBody,
+    } as unknown as interfaces.data.TDnsProviderCredentials;
+
+    return {
+      name: String(data.name ?? ''),
+      type: this.selectedType,
+      credentials,
+      credentialsTouched,
+    };
+  }
+}

package/ts_web/elements/domains/index.ts

@@ -0,0 +1,5 @@
+export * from './dns-provider-form.js';
+export * from './ops-view-providers.js';
+export * from './ops-view-domains.js';
+export * from './ops-view-dns.js';
+export * from './ops-view-certificates.js';

package/ts_web/elements/{ops-view-certificates.ts → domains/ops-view-certificates.ts}

@@ -7,9 +7,9 @@ import {
   state,
   cssManager,
 } from '@design.estate/dees-element';
-import * as appstate from '../appstate.js';
-import * as interfaces from '../../dist_ts_interfaces/index.js';
-import { viewHostCss } from './shared/css.js';
+import * as appstate from '../../appstate.js';
+import * as interfaces from '../../../dist_ts_interfaces/index.js';
+import { viewHostCss } from '../shared/css.js';
 import { type IStatsTile } from '@design.estate/dees-catalog';
 
 declare global {
@@ -159,7 +159,7 @@ export class OpsViewCertificates extends DeesElement {
     const { summary } = this.certState;
 
     return html`
-      <dees-heading level="hr">Certificates</dees-heading>
+      <dees-heading level="3">Certificates</dees-heading>
 
       <div class="certificatesContainer">
         ${this.renderStatsTiles(summary)}

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

@@ -0,0 +1,273 @@
+import {
+  DeesElement,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  state,
+  cssManager,
+} from '@design.estate/dees-element';
+import * as appstate from '../../appstate.js';
+import * as interfaces from '../../../dist_ts_interfaces/index.js';
+import { viewHostCss } from '../shared/css.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ops-view-dns': OpsViewDns;
+  }
+}
+
+const RECORD_TYPES: interfaces.data.TDnsRecordType[] = [
+  'A',
+  'AAAA',
+  'CNAME',
+  'MX',
+  'TXT',
+  'NS',
+  'CAA',
+];
+
+@customElement('ops-view-dns')
+export class OpsViewDns extends DeesElement {
+  @state()
+  accessor domainsState: appstate.IDomainsState = appstate.domainsStatePart.getState()!;
+
+  constructor() {
+    super();
+    const sub = appstate.domainsStatePart.select().subscribe((newState) => {
+      this.domainsState = newState;
+    });
+    this.rxSubscriptions.push(sub);
+  }
+
+  async connectedCallback() {
+    await super.connectedCallback();
+    await appstate.domainsStatePart.dispatchAction(appstate.fetchDomainsAndProvidersAction, null);
+    // If a domain is already selected (e.g. via "View Records" navigation), refresh its records
+    const selected = this.domainsState.selectedDomainId;
+    if (selected) {
+      await appstate.domainsStatePart.dispatchAction(appstate.fetchDnsRecordsForDomainAction, {
+        domainId: selected,
+      });
+    }
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      .dnsContainer {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .domainPicker {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 16px;
+        background: ${cssManager.bdTheme('#f9fafb', '#111827')};
+        border-radius: 8px;
+      }
+
+      .sourceBadge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 11px;
+        font-weight: 500;
+      }
+
+      .sourceBadge.manual {
+        background: ${cssManager.bdTheme('#e0e7ff', '#1e1b4b')};
+        color: ${cssManager.bdTheme('#3730a3', '#a5b4fc')};
+      }
+
+      .sourceBadge.synced {
+        background: ${cssManager.bdTheme('#fef3c7', '#451a03')};
+        color: ${cssManager.bdTheme('#92400e', '#fde047')};
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const domains = this.domainsState.domains;
+    const selectedId = this.domainsState.selectedDomainId;
+    const records = this.domainsState.records;
+
+    return html`
+      <dees-heading level="3">DNS Records</dees-heading>
+      <div class="dnsContainer">
+        <div class="domainPicker">
+          <span>Domain:</span>
+          <dees-input-dropdown
+            .options=${domains.map((d) => ({ option: d.name, key: d.id }))}
+            .selectedOption=${selectedId
+              ? { option: domains.find((d) => d.id === selectedId)?.name || '', key: selectedId }
+              : undefined}
+            @selectedOption=${async (e: CustomEvent) => {
+              const id = (e.detail as any)?.key;
+              if (!id) return;
+              await appstate.domainsStatePart.dispatchAction(
+                appstate.fetchDnsRecordsForDomainAction,
+                { domainId: id },
+              );
+            }}
+          ></dees-input-dropdown>
+        </div>
+
+        ${selectedId
+          ? html`
+              <dees-table
+                .heading1=${'DNS Records'}
+                .heading2=${this.domainHint(selectedId)}
+                .data=${records}
+                .showColumnFilters=${true}
+                .displayFunction=${(r: interfaces.data.IDnsRecord) => ({
+                  Name: r.name,
+                  Type: r.type,
+                  Value: r.value,
+                  TTL: r.ttl,
+                  Source: html`<span class="sourceBadge ${r.source}">${r.source}</span>`,
+                })}
+                .dataActions=${[
+                  {
+                    name: 'Add Record',
+                    iconName: 'lucide:plus',
+                    type: ['header' as const],
+                    actionFunc: async () => {
+                      await this.showCreateRecordDialog(selectedId);
+                    },
+                  },
+                  {
+                    name: 'Refresh',
+                    iconName: 'lucide:rotateCw',
+                    type: ['header' as const],
+                    actionFunc: async () => {
+                      await appstate.domainsStatePart.dispatchAction(
+                        appstate.fetchDnsRecordsForDomainAction,
+                        { domainId: selectedId },
+                      );
+                    },
+                  },
+                  {
+                    name: 'Edit',
+                    iconName: 'lucide:pencil',
+                    type: ['inRow', 'contextmenu'] as any,
+                    actionFunc: async (actionData: any) => {
+                      const rec = actionData.item as interfaces.data.IDnsRecord;
+                      await this.showEditRecordDialog(rec);
+                    },
+                  },
+                  {
+                    name: 'Delete',
+                    iconName: 'lucide:trash2',
+                    type: ['inRow', 'contextmenu'] as any,
+                    actionFunc: async (actionData: any) => {
+                      const rec = actionData.item as interfaces.data.IDnsRecord;
+                      await appstate.domainsStatePart.dispatchAction(
+                        appstate.deleteDnsRecordAction,
+                        { id: rec.id, domainId: rec.domainId },
+                      );
+                    },
+                  },
+                ]}
+              ></dees-table>
+            `
+          : html`<p style="opacity: 0.7;">Pick a domain above to view its records.</p>`}
+      </div>
+    `;
+  }
+
+  private domainHint(domainId: string): string {
+    const domain = this.domainsState.domains.find((d) => d.id === domainId);
+    if (!domain) return '';
+    if (domain.source === 'manual') {
+      return 'Records are served by dcrouter (authoritative).';
+    }
+    return 'Records are stored at the provider — changes here are pushed via the provider API.';
+  }
+
+  private async showCreateRecordDialog(domainId: string) {
+    const { DeesModal } = await import('@design.estate/dees-catalog');
+    DeesModal.createAndShow({
+      heading: 'Add DNS Record',
+      content: html`
+        <dees-form>
+          <dees-input-text .key=${'name'} .label=${'Name (FQDN)'} .required=${true}></dees-input-text>
+          <dees-input-dropdown
+            .key=${'type'}
+            .label=${'Type'}
+            .options=${RECORD_TYPES.map((t) => ({ option: t, key: t }))}
+            .required=${true}
+          ></dees-input-dropdown>
+          <dees-input-text
+            .key=${'value'}
+            .label=${'Value (for MX use "10 mail.example.com")'}
+            .required=${true}
+          ></dees-input-text>
+          <dees-input-text .key=${'ttl'} .label=${'TTL (seconds)'} .value=${'300'}></dees-input-text>
+        </dees-form>
+      `,
+      menuOptions: [
+        { name: 'Cancel', action: async (modalArg: any) => modalArg.destroy() },
+        {
+          name: 'Create',
+          action: async (modalArg: any) => {
+            const form = modalArg.shadowRoot
+              ?.querySelector('.content')
+              ?.querySelector('dees-form');
+            if (!form) return;
+            const data = await form.collectFormData();
+            const type = (data.type?.key ?? data.type) as interfaces.data.TDnsRecordType;
+            await appstate.domainsStatePart.dispatchAction(appstate.createDnsRecordAction, {
+              domainId,
+              name: String(data.name),
+              type,
+              value: String(data.value),
+              ttl: parseInt(String(data.ttl || '300'), 10),
+            });
+            modalArg.destroy();
+          },
+        },
+      ],
+    });
+  }
+
+  private async showEditRecordDialog(rec: interfaces.data.IDnsRecord) {
+    const { DeesModal } = await import('@design.estate/dees-catalog');
+    DeesModal.createAndShow({
+      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=${'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-form>
+      `,
+      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();
+            await appstate.domainsStatePart.dispatchAction(appstate.updateDnsRecordAction, {
+              id: rec.id,
+              domainId: rec.domainId,
+              name: String(data.name),
+              value: String(data.value),
+              ttl: parseInt(String(data.ttl || '300'), 10),
+            });
+            modalArg.destroy();
+          },
+        },
+      ],
+    });
+  }
+}