feat: Cloudflare DNS management with automatic record sync
Add flexible DNS management to Docker Watcher. By default, wildcard DNS is assumed (current behavior). When disabled, users can configure a Cloudflare DNS provider with API token and zone selection. DNS A records are automatically created/updated/deleted in sync with proxy consumers (deployed instances and standalone proxies). - Settings: wildcard_dns toggle, dns_provider, cloudflare credentials - Cloudflare client: Provider interface with EnsureRecord/DeleteRecord/ListRecords - DNS lifecycle hooks in deployer and proxy manager (best-effort) - Settings UI: DNS config section with provider picker, zone selector, test button - DNS Records page at /dns with filtering, sync status, reconciliation - Records visible in both wildcard and managed modes - Cleanup on provider change: removes old records when switching modes
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { getSettings, updateSettings, getWebhookUrl, regenerateWebhookUrl, listNpmCertificates } from '$lib/api';
|
||||
import { getSettings, updateSettings, getWebhookUrl, regenerateWebhookUrl, listNpmCertificates, testDnsConnection, listDnsZones } from '$lib/api';
|
||||
import type { EntityPickerItem } from '$lib/types';
|
||||
import FormField from '$lib/components/FormField.svelte';
|
||||
import EntityPicker from '$lib/components/EntityPicker.svelte';
|
||||
@@ -28,6 +28,18 @@
|
||||
let certPickerItems = $state<EntityPickerItem[]>([]);
|
||||
let loadingCerts = $state(false);
|
||||
|
||||
// DNS settings state.
|
||||
let wildcardDns = $state(true);
|
||||
let dnsProvider = $state('');
|
||||
let cloudflareApiToken = $state('');
|
||||
let hasCloudflareApiToken = $state(false);
|
||||
let cloudflareZoneId = $state('');
|
||||
let zonePickerOpen = $state(false);
|
||||
let zonePickerItems = $state<EntityPickerItem[]>([]);
|
||||
let loadingZones = $state(false);
|
||||
let zoneName = $state('');
|
||||
let testingDns = $state(false);
|
||||
|
||||
let errors = $state<Record<string, string>>({});
|
||||
|
||||
function validateDomain(value: string): string {
|
||||
@@ -81,6 +93,10 @@
|
||||
sslCertificateId = settings.ssl_certificate_id ?? 0;
|
||||
notificationUrl = settings.notification_url ?? '';
|
||||
staleThresholdDays = String(settings.stale_threshold_days ?? 7);
|
||||
wildcardDns = settings.wildcard_dns ?? true;
|
||||
dnsProvider = settings.dns_provider ?? '';
|
||||
hasCloudflareApiToken = settings.has_cloudflare_api_token ?? false;
|
||||
cloudflareZoneId = settings.cloudflare_zone_id ?? '';
|
||||
} catch (err) {
|
||||
toasts.error(err instanceof Error ? err.message : $t('settingsGeneral.loadFailed'));
|
||||
} finally {
|
||||
@@ -99,13 +115,20 @@
|
||||
if (!validateAll()) return;
|
||||
saving = true;
|
||||
try {
|
||||
await updateSettings({
|
||||
const payload: Record<string, unknown> = {
|
||||
domain: domain.trim(), server_ip: serverIp.trim(), network: network.trim(),
|
||||
subdomain_pattern: subdomainPattern.trim(), polling_interval: pollingInterval.trim(),
|
||||
base_volume_path: baseVolumePath.trim(), notification_url: notificationUrl.trim(),
|
||||
ssl_certificate_id: sslCertificateId,
|
||||
stale_threshold_days: Math.max(1, parseInt(staleThresholdDays, 10) || 7)
|
||||
});
|
||||
stale_threshold_days: Math.max(1, parseInt(staleThresholdDays, 10) || 7),
|
||||
wildcard_dns: wildcardDns,
|
||||
dns_provider: wildcardDns ? '' : dnsProvider,
|
||||
cloudflare_zone_id: cloudflareZoneId
|
||||
};
|
||||
if (cloudflareApiToken) {
|
||||
payload.cloudflare_api_token = cloudflareApiToken;
|
||||
}
|
||||
await updateSettings(payload as any);
|
||||
toasts.success($t('settingsGeneral.saved'));
|
||||
} catch (err) {
|
||||
toasts.error(err instanceof Error ? err.message : $t('settingsGeneral.saveFailed'));
|
||||
@@ -174,9 +197,70 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function openZonePicker() {
|
||||
loadingZones = true;
|
||||
zonePickerOpen = true;
|
||||
try {
|
||||
const token = cloudflareApiToken || undefined;
|
||||
const zones = await listDnsZones(token);
|
||||
zonePickerItems = zones.map((zone): EntityPickerItem => ({
|
||||
value: zone.id,
|
||||
label: zone.name,
|
||||
description: zone.id
|
||||
}));
|
||||
if (zonePickerItems.length === 0) {
|
||||
toasts.error($t('settingsGeneral.noZonesFound'));
|
||||
zonePickerOpen = false;
|
||||
}
|
||||
} catch (err) {
|
||||
toasts.error(err instanceof Error ? err.message : $t('settingsGeneral.noZonesFound'));
|
||||
zonePickerOpen = false;
|
||||
} finally {
|
||||
loadingZones = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleZoneSelect(value: string) {
|
||||
cloudflareZoneId = value;
|
||||
const item = zonePickerItems.find((i) => i.value === value);
|
||||
zoneName = item?.label ?? '';
|
||||
zonePickerOpen = false;
|
||||
}
|
||||
|
||||
async function handleTestDns() {
|
||||
testingDns = true;
|
||||
try {
|
||||
const token = cloudflareApiToken || '';
|
||||
const result = await testDnsConnection('cloudflare', token, cloudflareZoneId);
|
||||
if (result.success) {
|
||||
toasts.success($t('settingsGeneral.connectionSuccess'));
|
||||
} else {
|
||||
toasts.error(`${$t('settingsGeneral.connectionFailed')}: ${result.error}`);
|
||||
}
|
||||
} catch (err) {
|
||||
toasts.error(err instanceof Error ? err.message : $t('settingsGeneral.connectionFailed'));
|
||||
} finally {
|
||||
testingDns = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function resolveZoneName() {
|
||||
if (!cloudflareZoneId) return;
|
||||
try {
|
||||
const zones = await listDnsZones();
|
||||
const match = zones.find((z) => z.id === cloudflareZoneId);
|
||||
zoneName = match?.name ?? cloudflareZoneId;
|
||||
} catch {
|
||||
zoneName = cloudflareZoneId;
|
||||
}
|
||||
}
|
||||
|
||||
async function init() {
|
||||
await loadSettings();
|
||||
await resolveCertName();
|
||||
if (!wildcardDns && cloudflareZoneId) {
|
||||
resolveZoneName();
|
||||
}
|
||||
loadWebhookUrlValue();
|
||||
}
|
||||
|
||||
@@ -260,6 +344,93 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DNS Configuration -->
|
||||
<div class="mt-6 border-t border-[var(--border-primary)] pt-4">
|
||||
<h3 class="mb-3 text-sm font-semibold text-[var(--text-primary)]">{$t('settingsGeneral.dnsConfig')}</h3>
|
||||
|
||||
<label class="flex items-center gap-3 cursor-pointer">
|
||||
<input type="checkbox" bind:checked={wildcardDns}
|
||||
class="h-4 w-4 rounded border-[var(--border-primary)] text-[var(--color-brand-600)] focus:ring-[var(--color-brand-500)]" />
|
||||
<div>
|
||||
<span class="text-sm font-medium text-[var(--text-primary)]">{$t('settingsGeneral.wildcardDns')}</span>
|
||||
<p class="text-xs text-[var(--text-tertiary)]">{$t('settingsGeneral.wildcardDnsHelp')}</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{#if !wildcardDns}
|
||||
<div class="mt-4 space-y-4 rounded-lg border border-[var(--border-primary)] bg-[var(--surface-card-hover)] p-4">
|
||||
<!-- DNS Provider -->
|
||||
<div>
|
||||
<label for="dnsProvider" class="block text-sm font-medium text-[var(--text-primary)]">{$t('settingsGeneral.dnsProvider')}</label>
|
||||
<p class="mt-0.5 text-xs text-[var(--text-tertiary)]">{$t('settingsGeneral.dnsProviderHelp')}</p>
|
||||
<select id="dnsProvider" bind:value={dnsProvider}
|
||||
class="mt-1.5 w-full max-w-xs rounded-lg border border-[var(--border-primary)] bg-[var(--surface-card)] px-3 py-2 text-sm text-[var(--text-primary)] focus:border-[var(--color-brand-500)] focus:outline-none focus:ring-1 focus:ring-[var(--color-brand-500)]">
|
||||
<option value="">-- Select --</option>
|
||||
<option value="cloudflare">Cloudflare</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{#if dnsProvider === 'cloudflare'}
|
||||
<!-- Cloudflare API Token -->
|
||||
<div>
|
||||
<FormField
|
||||
label={$t('settingsGeneral.cloudflareApiToken')}
|
||||
name="cloudflareApiToken"
|
||||
type="password"
|
||||
bind:value={cloudflareApiToken}
|
||||
placeholder={hasCloudflareApiToken ? '••••••••' : $t('settingsGeneral.cloudflareApiTokenPlaceholder')}
|
||||
helpText={hasCloudflareApiToken ? $t('settingsGeneral.cloudflareApiTokenConfigured') : $t('settingsGeneral.cloudflareApiTokenHelp')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Zone Picker -->
|
||||
<div>
|
||||
<label for="cloudflareZoneBtn" class="block text-sm font-medium text-[var(--text-primary)]">{$t('settingsGeneral.cloudflareZone')}</label>
|
||||
<p class="mt-0.5 text-xs text-[var(--text-tertiary)]">{$t('settingsGeneral.cloudflareZoneHelp')}</p>
|
||||
<div class="mt-1.5 flex items-center gap-2">
|
||||
<button
|
||||
id="cloudflareZoneBtn"
|
||||
type="button"
|
||||
onclick={openZonePicker}
|
||||
class="inline-flex items-center gap-2 rounded-lg border border-[var(--border-primary)] px-3 py-2 text-sm text-[var(--text-secondary)] hover:bg-[var(--surface-card)] transition-colors"
|
||||
>
|
||||
{#if loadingZones}
|
||||
{$t('settingsGeneral.loadingZones')}
|
||||
{:else if cloudflareZoneId && zoneName}
|
||||
{zoneName}
|
||||
{:else}
|
||||
{$t('settingsGeneral.noZone')}
|
||||
{/if}
|
||||
</button>
|
||||
{#if cloudflareZoneId}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => { cloudflareZoneId = ''; zoneName = ''; }}
|
||||
class="inline-flex items-center gap-1 rounded-lg border border-[var(--border-primary)] px-2 py-2 text-sm text-[var(--text-tertiary)] hover:text-[var(--color-danger)] hover:bg-[var(--surface-card)] transition-colors"
|
||||
>
|
||||
<IconX size={14} />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Test Connection -->
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onclick={handleTestDns}
|
||||
disabled={testingDns || (!cloudflareApiToken && !hasCloudflareApiToken)}
|
||||
class="inline-flex items-center gap-2 rounded-lg border border-[var(--color-brand-600)] px-3 py-2 text-sm font-medium text-[var(--color-brand-600)] hover:bg-[var(--color-brand-50)] transition-colors disabled:opacity-50"
|
||||
>
|
||||
{#if testingDns}<IconLoader size={16} />{/if}
|
||||
{testingDns ? $t('settingsGeneral.testingConnection') : $t('settingsGeneral.testConnection')}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<button onclick={handleSave} disabled={saving} class="inline-flex items-center gap-2 rounded-lg bg-[var(--color-brand-600)] px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-150 hover:bg-[var(--color-brand-700)] disabled:opacity-50 active:animate-press">
|
||||
{#if saving}<IconLoader size={16} />{/if}
|
||||
@@ -314,3 +485,12 @@
|
||||
onselect={handleCertSelect}
|
||||
onclose={() => { certPickerOpen = false; }}
|
||||
/>
|
||||
|
||||
<EntityPicker
|
||||
bind:open={zonePickerOpen}
|
||||
items={zonePickerItems}
|
||||
current={cloudflareZoneId}
|
||||
title={$t('settingsGeneral.selectZone')}
|
||||
onselect={handleZoneSelect}
|
||||
onclose={() => { zonePickerOpen = false; }}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user