Add DNS module ported from Sloth Manager

Ports zone/record management across Cloudflare, Loopia, Pi-hole, Azure DNS,
cPanel, and Technitium onto the new stack. Unlike the original (one instance
per provider configured via env vars), providers are now configured through
the UI and support multiple named instances per type, with API
credentials encrypted at rest via the integration_credentials table.

- server/src/dns/adapters/*: each provider ported to a config-based factory
  (no more process.env reads), preserving each provider's original quirks
  (Pi-hole session auth, Azure record-set merging, Loopia XML-RPC, cPanel
  UAPI/API2 fallbacks, Technitium composite record IDs).
- server/src/routes/dns.ts: provider CRUD (admin), a "test connection"
  endpoint, and zone/record browsing+sync+CRUD (operator+), all audit-logged.
- dns_zones_cache/dns_records_cache tables replace Sloth Manager's
  dns-cache.json file, keeping the same "cache is the source of truth for
  display, sync fetches fresh from the provider" behavior.
- web: a DNS page with provider management, zone browsing, and a record
  editor, plus a reusable dynamic provider-config form.

Verified: full build (tsc + vite) passes; a scripted HTTP-layer test against
a running server exercises auth, role gating (403 for viewer), validation
(400 on missing config fields), provider CRUD, credential non-leakage in
list responses, and adapter error propagation (502 against an unreachable
host) — all passing. Real provider connectivity still needs to be checked
against the user's actual DNS accounts.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web/src/components/DnsProviderForm.tsx

@@ -0,0 +1,162 @@
+import { useEffect, useState } from "react";
+import { api, type DnsProviderField, type DnsProviderType } from "../api/client";
+
+const PROVIDER_LABELS: Record<DnsProviderType, string> = {
+  cloudflare: "Cloudflare",
+  loopia: "Loopia",
+  pihole: "Pi-hole",
+  azure: "Azure DNS",
+  cpanel: "cPanel",
+  technitium: "Technitium",
+};
+
+export default function DnsProviderForm({
+  onCreated,
+  onCancel,
+}: {
+  onCreated: () => void;
+  onCancel: () => void;
+}) {
+  const [allFields, setAllFields] = useState<Record<DnsProviderType, DnsProviderField[]> | null>(null);
+  const [providerType, setProviderType] = useState<DnsProviderType>("cloudflare");
+  const [name, setName] = useState("");
+  const [values, setValues] = useState<Record<string, string | boolean>>({});
+  const [testResult, setTestResult] = useState<{ ok: boolean; zoneCount?: number; error?: string } | null>(null);
+  const [testing, setTesting] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    api.dns.providerFields().then((res) => setAllFields(res.fields));
+  }, []);
+
+  useEffect(() => {
+    setValues({});
+    setTestResult(null);
+  }, [providerType]);
+
+  const fields = allFields?.[providerType] ?? [];
+
+  function setField(key: string, value: string | boolean) {
+    setValues((v) => ({ ...v, [key]: value }));
+  }
+
+  async function testConnection() {
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const result = await api.dns.providers.test({ providerType, config: values });
+      setTestResult(result);
+    } catch (err) {
+      setTestResult({ ok: false, error: err instanceof Error ? err.message : String(err) });
+    } finally {
+      setTesting(false);
+    }
+  }
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setSaving(true);
+    try {
+      await api.dns.providers.create({ providerType, name, config: values });
+      onCreated();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="card mb-3">
+      <div className="card-header">
+        <h3 className="card-title">Add a DNS provider</h3>
+      </div>
+      <form onSubmit={submit}>
+        <div className="card-body row g-3">
+          {error && (
+            <div className="col-12">
+              <div className="alert alert-danger">{error}</div>
+            </div>
+          )}
+          <div className="col-md-4">
+            <label className="form-label">Provider</label>
+            <select
+              className="form-select"
+              value={providerType}
+              onChange={(e) => setProviderType(e.target.value as DnsProviderType)}
+            >
+              {Object.entries(PROVIDER_LABELS).map(([value, label]) => (
+                <option key={value} value={value}>
+                  {label}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="col-md-4">
+            <label className="form-label">Display name</label>
+            <input
+              className="form-control"
+              required
+              placeholder="e.g. Main Cloudflare account"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+
+          {fields.map((field) => (
+            <div className="col-md-4" key={field.key}>
+              {field.type === "checkbox" ? (
+                <label className="form-check form-check-single mt-4">
+                  <input
+                    type="checkbox"
+                    className="form-check-input"
+                    checked={Boolean(values[field.key])}
+                    onChange={(e) => setField(field.key, e.target.checked)}
+                  />
+                  <span className="form-check-label">{field.label}</span>
+                </label>
+              ) : (
+                <>
+                  <label className="form-label">{field.label}</label>
+                  <input
+                    type={field.type === "password" ? "password" : "text"}
+                    className="form-control"
+                    placeholder={field.placeholder}
+                    required
+                    value={(values[field.key] as string) ?? ""}
+                    onChange={(e) => setField(field.key, e.target.value)}
+                  />
+                </>
+              )}
+            </div>
+          ))}
+
+          {testResult && (
+            <div className="col-12">
+              {testResult.ok ? (
+                <div className="alert alert-success mb-0">
+                  Connection OK — found {testResult.zoneCount} zone{testResult.zoneCount === 1 ? "" : "s"}.
+                </div>
+              ) : (
+                <div className="alert alert-danger mb-0">Connection failed: {testResult.error}</div>
+              )}
+            </div>
+          )}
+        </div>
+        <div className="card-footer d-flex gap-2">
+          <button type="button" className="btn btn-outline-secondary" onClick={testConnection} disabled={testing}>
+            {testing ? "Testing…" : "Test connection"}
+          </button>
+          <button type="submit" className="btn btn-primary" disabled={saving}>
+            Add provider
+          </button>
+          <button type="button" className="btn" onClick={onCancel}>
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}