feat(dns-providers): add provider-agnostic DNS provider form metadata and reusable UI for create/edit flows

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

@@ -10,6 +10,8 @@ import {
 import * as appstate from '../../appstate.js';
 import * as interfaces from '../../../dist_ts_interfaces/index.js';
 import { viewHostCss } from '../shared/css.js';
+import './dns-provider-form.js';
+import type { DnsProviderForm } from './dns-provider-form.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -80,12 +82,12 @@ export class OpsViewProviders extends DeesElement {
       <div class="providersContainer">
         <dees-table
           .heading1=${'Providers'}
-          .heading2=${'External DNS provider accounts (Cloudflare, etc.)'}
+          .heading2=${'External DNS provider accounts'}
           .data=${providers}
           .showColumnFilters=${true}
           .displayFunction=${(p: interfaces.data.IDnsProviderPublic) => ({
             Name: p.name,
-            Type: p.type,
+            Type: this.providerTypeLabel(p.type),
             Status: this.renderStatusBadge(p.status),
             'Last Tested': p.lastTestedAt ? new Date(p.lastTestedAt).toLocaleString() : 'never',
             Error: p.lastError || '-',
@@ -147,34 +149,39 @@ export class OpsViewProviders extends DeesElement {
     return html`<span class="statusBadge ${status}">${status}</span>`;
   }
 
+  private providerTypeLabel(type: interfaces.data.TDnsProviderType): string {
+    return interfaces.data.getDnsProviderTypeDescriptor(type)?.displayName ?? type;
+  }
+
   private async showCreateDialog() {
-    const { DeesModal } = await import('@design.estate/dees-catalog');
+    const { DeesModal, DeesToast } = await import('@design.estate/dees-catalog');
+    const formEl = document.createElement('dns-provider-form') as DnsProviderForm;
     DeesModal.createAndShow({
       heading: 'Add DNS Provider',
-      content: html`
-        <dees-form>
-          <dees-input-text .key=${'name'} .label=${'Provider name'} .required=${true}></dees-input-text>
-          <dees-input-text
-            .key=${'apiToken'}
-            .label=${'Cloudflare API token'}
-            .required=${true}
-          ></dees-input-text>
-        </dees-form>
-      `,
+      content: html`${formEl}`,
       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 data = await formEl.collectData();
+            if (!data) return;
+            if (!data.name) {
+              DeesToast.show({ message: 'Name is required', type: 'warning', duration: 2500 });
+              return;
+            }
+            if (!data.credentialsTouched) {
+              DeesToast.show({
+                message: 'Fill in the provider credentials',
+                type: 'warning',
+                duration: 2500,
+              });
+              return;
+            }
             await appstate.domainsStatePart.dispatchAction(appstate.createDnsProviderAction, {
-              name: String(data.name),
-              type: 'cloudflare',
-              credentials: { type: 'cloudflare', apiToken: String(data.apiToken) },
+              name: data.name,
+              type: data.type,
+              credentials: data.credentials,
             });
             modalArg.destroy();
           },
@@ -185,34 +192,28 @@ export class OpsViewProviders extends DeesElement {
 
   private async showEditDialog(provider: interfaces.data.IDnsProviderPublic) {
     const { DeesModal } = await import('@design.estate/dees-catalog');
+    const formEl = document.createElement('dns-provider-form') as DnsProviderForm;
+    formEl.providerName = provider.name;
+    formEl.selectedType = provider.type;
+    formEl.lockType = true;
+    formEl.credentialsHint =
+      'Leave credential fields blank to keep the current values. Fill them to rotate.';
     DeesModal.createAndShow({
       heading: `Edit Provider: ${provider.name}`,
-      content: html`
-        <dees-form>
-          <dees-input-text .key=${'name'} .label=${'Provider name'} .value=${provider.name}></dees-input-text>
-          <dees-input-text
-            .key=${'apiToken'}
-            .label=${'New API token (leave blank to keep current)'}
-          ></dees-input-text>
-        </dees-form>
-      `,
+      content: html`${formEl}`,
       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 apiToken = data.apiToken ? String(data.apiToken) : '';
+            const data = await formEl.collectData();
+            if (!data) return;
             await appstate.domainsStatePart.dispatchAction(appstate.updateDnsProviderAction, {
               id: provider.id,
-              name: String(data.name),
-              credentials: apiToken
-                ? { type: 'cloudflare', apiToken }
-                : undefined,
+              name: data.name || provider.name,
+              // Only send credentials if the user actually entered something —
+              // otherwise we keep the current secret untouched.
+              credentials: data.credentialsTouched ? data.credentials : undefined,
             });
             modalArg.destroy();
           },