diff --git a/src/assets/dns-shared.css b/src/assets/dns-shared.css new file mode 100644 index 0000000..09c9432 --- /dev/null +++ b/src/assets/dns-shared.css @@ -0,0 +1,496 @@ +/* DNS Shared Styles - Used by DnsExternalView and DnsZonesView */ + +/* Button Base */ +.dns-view .btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.625rem 1.25rem; + border-radius: var(--radius-sm); + font-weight: 500; + font-size: 0.875rem; + cursor: pointer; + transition: all 0.2s; + border: none; +} + +.dns-view .btn-primary { + background: #6366f1; + color: white; +} + +.dns-view .btn-primary:hover:not(:disabled) { + background: #4f46e5; +} + +.dns-view .btn-primary:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.dns-view .btn-secondary { + background: white; + border: 1px solid #e5e7eb; + color: #374151; +} + +.dns-view .btn-secondary:hover:not(:disabled) { + background: #f9fafb; +} + +.dns-view .btn-secondary.btn-sm { + padding: 0.5rem 0.75rem; + font-size: 0.8125rem; +} + +.dns-view .btn-danger { + background: #fef2f2; + border: 1px solid #fecaca; + color: #dc2626; +} + +.dns-view .btn-danger:hover:not(:disabled) { + background: #fee2e2; +} + +.dns-view .btn-icon { + padding: 0.625rem; + background: white; + border: 1px solid #e5e7eb; + color: #6b7280; +} + +.dns-view .btn-icon:hover:not(:disabled) { + background: #f9fafb; + color: #374151; +} + +.dns-view .btn-icon:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.dns-view .btn-icon-sm { + padding: 0.375rem; + background: none; + border: none; + color: #6b7280; + cursor: pointer; + border-radius: var(--radius-sm); + transition: all 0.2s; +} + +.dns-view .btn-icon-sm:hover { + background: #f3f4f6; + color: #374151; +} + +.dns-view .btn-icon-sm.danger:hover { + background: #fee2e2; + color: #dc2626; +} + +/* Form Styles */ +.dns-view .form-group { + margin-bottom: 1rem; +} + +.dns-view .form-group label { + display: block; + font-size: 0.875rem; + font-weight: 600; + color: #374151; + margin-bottom: 0.5rem; +} + +.dns-view .form-group input, +.dns-view .form-group select, +.dns-view .form-group textarea { + width: 100%; + padding: 0.75rem 1rem; + border: 1px solid #d1d5db; + border-radius: var(--radius-sm); + font-size: 0.875rem; + transition: all 0.2s; + font-family: inherit; +} + +.dns-view .form-group input:focus, +.dns-view .form-group select:focus, +.dns-view .form-group textarea:focus { + outline: none; + border-color: #6366f1; + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); +} + +.dns-view .form-group input:disabled, +.dns-view .form-group select:disabled, +.dns-view .form-group textarea:disabled { + background: #f9fafb; + color: #9ca3af; +} + +.dns-view .form-group textarea { + resize: vertical; + min-height: 80px; +} + +.dns-view .form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} + +.dns-view .hint { + display: block; + font-size: 0.75rem; + color: #6b7280; + margin-top: 0.375rem; +} + +.dns-view .error-message { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1rem; + background: #fef2f2; + border: 1px solid #fecaca; + border-radius: var(--radius-sm); + color: #dc2626; + font-size: 0.875rem; + margin-bottom: 1rem; +} + +.dns-view .checkbox-group label { + display: flex; + align-items: center; + gap: 0.5rem; + cursor: pointer; +} + +.dns-view .checkbox-group input[type="checkbox"] { + width: auto; +} + +/* Modal Styles */ +.dns-view .modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(4px); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; +} + +.dns-view .modal-container { + background: white; + border-radius: var(--radius-sm); + width: 100%; + max-width: 480px; + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); +} + +.dns-view .modal-header { + padding: 1.25rem 1.5rem; + border-bottom: 1px solid #e5e7eb; + display: flex; + justify-content: space-between; + align-items: center; +} + +.dns-view .modal-header h3 { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 1.125rem; + font-weight: 600; + color: #111827; + margin: 0; +} + +.dns-view .modal-header h3 i { + color: #6366f1; +} + +.dns-view .close-btn { + background: none; + border: none; + color: #9ca3af; + cursor: pointer; + padding: 0.5rem; + border-radius: var(--radius-sm); + transition: all 0.2s; +} + +.dns-view .close-btn:hover { + background: #f3f4f6; + color: #6b7280; +} + +.dns-view .modal-body { + padding: 1.5rem; +} + +.dns-view .modal-footer { + padding: 1rem 1.5rem; + border-top: 1px solid #e5e7eb; + display: flex; + justify-content: flex-end; + gap: 0.75rem; +} + +/* Section Styles */ +.dns-view .section-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; +} + +.dns-view .section-header h3 { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 1rem; + font-weight: 600; + color: #1f2937; + margin: 0; +} + +.dns-view .section-actions { + display: flex; + align-items: center; + gap: 0.5rem; +} + +/* Loading & Empty States */ +.dns-view .loading-state, +.dns-view .empty-state { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; + padding: 3rem; + color: #6b7280; +} + +.dns-view .loading-state i, +.dns-view .empty-state i { + font-size: 2rem; +} + +/* Breadcrumb */ +.dns-view .breadcrumb { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.dns-view .breadcrumb-btn { + display: flex; + align-items: center; + gap: 0.375rem; + padding: 0.375rem 0.75rem; + background: none; + border: none; + color: #6b7280; + font-size: 0.875rem; + cursor: pointer; + transition: color 0.2s; +} + +.dns-view .breadcrumb-btn:hover { + color: #4f46e5; +} + +.dns-view .breadcrumb-separator { + color: #d1d5db; +} + +.dns-view .breadcrumb-current { + display: flex; + align-items: center; + gap: 0.375rem; + font-weight: 600; + color: #1f2937; +} + +.dns-view .breadcrumb-current i { + color: #6366f1; +} + +/* Zone Styles */ +.dns-view .zones-grid { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.dns-view .zone-card { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 1.25rem; + background: #f9fafb; + border: 1px solid #e5e7eb; + border-radius: var(--radius-sm); + cursor: pointer; + transition: all 0.2s; +} + +.dns-view .zone-card:hover { + background: #f3f4f6; + border-color: #6366f1; +} + +.dns-view .zone-name { + display: flex; + align-items: center; + gap: 0.5rem; + font-weight: 600; + color: #1f2937; +} + +.dns-view .zone-name i { + color: #6366f1; +} + +.dns-view .zone-meta { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.dns-view .zone-records { + font-size: 0.75rem; + color: #6b7280; +} + +.dns-view .zone-status { + padding: 0.25rem 0.5rem; + border-radius: 9999px; + font-size: 0.7rem; + font-weight: 600; + text-transform: uppercase; +} + +.dns-view .zone-status.active { + background: #dcfce7; + color: #166534; +} + +/* Records Table */ +.dns-view .records-table { + overflow-x: auto; +} + +.dns-view .records-table table { + width: 100%; + border-collapse: collapse; +} + +.dns-view .records-table th, +.dns-view .records-table td { + padding: 0.75rem 1rem; + text-align: left; + border-bottom: 1px solid #e5e7eb; +} + +.dns-view .records-table th { + background: #f9fafb; + font-size: 0.75rem; + font-weight: 600; + color: #6b7280; + text-transform: uppercase; +} + +.dns-view .records-table tbody tr:hover { + background: #f9fafb; +} + +/* Record Type Badges */ +.dns-view .record-type { + display: inline-block; + padding: 0.25rem 0.5rem; + border-radius: var(--radius-sm); + font-size: 0.75rem; + font-weight: 600; + font-family: monospace; +} + +.dns-view .record-type.a { + background: #dbeafe; + color: #1e40af; +} + +.dns-view .record-type.aaaa { + background: #e0e7ff; + color: #3730a3; +} + +.dns-view .record-type.cname { + background: #fef3c7; + color: #92400e; +} + +.dns-view .record-type.mx { + background: #fce7f3; + color: #9d174d; +} + +.dns-view .record-type.txt { + background: #dcfce7; + color: #166534; +} + +.dns-view .record-type.ns { + background: #f3e8ff; + color: #6b21a8; +} + +.dns-view .record-type.srv { + background: #fed7aa; + color: #c2410c; +} + +.dns-view .record-type.caa { + background: #e0f2fe; + color: #0369a1; +} + +.dns-view .record-type.ptr { + background: #fae8ff; + color: #a21caf; +} + +.dns-view .record-name { + font-family: monospace; + font-weight: 500; +} + +.dns-view .record-content { + font-family: monospace; + font-size: 0.875rem; + color: #6b7280; + max-width: 300px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.dns-view .actions-cell { + display: flex; + gap: 0.25rem; +} + +/* Responsive */ +@media (max-width: 768px) { + .dns-view .form-row { + grid-template-columns: 1fr; + } +} diff --git a/src/layouts/DashboardLayout.vue b/src/layouts/DashboardLayout.vue index c66e5fe..4edb1eb 100644 --- a/src/layouts/DashboardLayout.vue +++ b/src/layouts/DashboardLayout.vue @@ -116,6 +116,22 @@ +
+
+ + DNS + +
+
+ Zones + External Providers +
+
+
@@ -268,6 +284,7 @@ const expandedGroups = reactive({ docker: true, system: false, databases: false, + dns: false, security: false, extensions: false, admin: false, @@ -321,6 +338,8 @@ const currentPageTitle = computed(() => { databases: "Database Servers", security: "Security & Monitoring", certificates: "SSL Certificates", + "dns-zones": "DNS Zones", + "dns-external": "External DNS Providers", apps: "Installed Apps", templates: "Templates", marketplace: "App Marketplace", @@ -351,6 +370,12 @@ const breadcrumbs = computed(() => { } else if (routeName === "certificates") { crumbs.push({ label: "Security", path: "" }); crumbs.push({ label: "Certificates", path: "" }); + } else if (routeName === "dns-zones") { + crumbs.push({ label: "DNS", path: "" }); + crumbs.push({ label: "Zones", path: "" }); + } else if (routeName === "dns-external") { + crumbs.push({ label: "DNS", path: "" }); + crumbs.push({ label: "External Providers", path: "" }); } else if (["apps", "marketplace"].includes(routeName)) { crumbs.push({ label: "Apps", path: "" }); crumbs.push({ label: currentPageTitle.value, path: "" }); diff --git a/src/router/index.ts b/src/router/index.ts index 2d988c2..9b8188c 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -114,6 +114,16 @@ const routes: RouteRecordRaw[] = [ name: "cron-jobs", component: () => import("@/views/CronJobsView.vue"), }, + { + path: "dns/zones", + name: "dns-zones", + component: () => import("@/views/DnsZonesView.vue"), + }, + { + path: "dns/external", + name: "dns-external", + component: () => import("@/views/DnsExternalView.vue"), + }, ], }, ]; diff --git a/src/services/api.ts b/src/services/api.ts index b5c3794..5f6b6ff 100644 --- a/src/services/api.ts +++ b/src/services/api.ts @@ -952,3 +952,151 @@ export const schedulerApi = { params: limit ? { limit } : undefined, }), }; + +// DNS Types +export interface DNSCredentialField { + name: string; + label: string; + type: string; + required: boolean; + help_text?: string; +} + +export interface DNSProvider { + name: string; + display_name: string; + provider: string; + credentials: DNSCredentialField[]; +} + +export interface DNSZone { + id: string; + name: string; + status: string; + name_servers?: string[]; + record_count?: number; +} + +export interface DNSRecord { + id: string; + zone_id: string; + type: string; + name: string; + content: string; + ttl: number; + priority?: number; + proxied?: boolean; +} + +export interface DNSRecordCreate { + type: string; + name: string; + content: string; + ttl: number; + priority?: number; + proxied?: boolean; +} + +export interface DNSRecordUpdate { + content?: string; + ttl?: number; + priority?: number; + proxied?: boolean; +} + +export const dnsApi = { + getProviders: () => apiClient.get<{ providers: DNSProvider[] }>("/dns/providers"), + + getProviderInfo: (provider: string) => + apiClient.get<{ + name: string; + display_name: string; + provider: string; + credentials: DNSCredentialField[]; + }>(`/dns/${provider}/info`), + + validateCredentials: (provider: string, credentials: Record) => + apiClient.post<{ valid: boolean; error?: string }>(`/dns/${provider}/validate`, { credentials }), + + listZones: (provider: string, credentials: Record) => + apiClient.post<{ zones: DNSZone[] }>(`/dns/${provider}/zones`, { credentials }), + + getZone: (provider: string, zoneId: string, credentials: Record) => + apiClient.post(`/dns/${provider}/zones/${zoneId}`, { credentials }), + + listRecords: (provider: string, zoneId: string, credentials: Record) => + apiClient.post<{ records: DNSRecord[] }>(`/dns/${provider}/zones/${zoneId}/records`, { credentials }), + + createRecord: (provider: string, zoneId: string, credentials: Record, record: DNSRecordCreate) => + apiClient.post(`/dns/${provider}/zones/${zoneId}/records/create`, { + credentials, + record, + }), + + updateRecord: ( + provider: string, + zoneId: string, + recordId: string, + credentials: Record, + record: DNSRecordUpdate, + ) => + apiClient.put(`/dns/${provider}/zones/${zoneId}/records/${recordId}`, { + credentials, + record, + }), + + deleteRecord: (provider: string, zoneId: string, recordId: string, credentials: Record) => + apiClient.delete(`/dns/${provider}/zones/${zoneId}/records/${recordId}`, { + data: { credentials }, + }), +}; + +// PowerDNS Types +export interface PowerDNSZone { + id: string; + name: string; + kind: string; + serial: number; + dnssec: boolean; + rrsets?: PowerDNSRRSet[]; +} + +export interface PowerDNSRRSet { + name: string; + type: string; + ttl: number; + changetype?: "REPLACE" | "DELETE"; + records: PowerDNSRecordContent[]; +} + +export interface PowerDNSRecordContent { + content: string; + disabled: boolean; +} + +export interface PowerDNSZoneCreate { + name: string; + kind: string; + nameservers?: string[]; +} + +export const powerDnsApi = { + getStatus: () => apiClient.get<{ running: boolean; version?: string }>("/dns/powerdns/status"), + + enableService: () => apiClient.post<{ message: string }>("/dns/powerdns/enable"), + + disableService: () => apiClient.post<{ message: string }>("/dns/powerdns/disable"), + + restartService: () => apiClient.post<{ message: string }>("/dns/powerdns/restart"), + + listZones: () => apiClient.get<{ zones: PowerDNSZone[] }>("/dns/powerdns/zones"), + + getZone: (zoneId: string) => apiClient.get(`/dns/powerdns/zones/${zoneId}`), + + createZone: (zone: PowerDNSZoneCreate) => apiClient.post("/dns/powerdns/zones", zone), + + deleteZone: (zoneId: string) => apiClient.delete(`/dns/powerdns/zones/${zoneId}`), + + updateRecords: (zoneId: string, rrsets: PowerDNSRRSet[]) => + apiClient.patch(`/dns/powerdns/zones/${zoneId}`, { rrsets }), +}; diff --git a/src/stores/dns.ts b/src/stores/dns.ts new file mode 100644 index 0000000..596cdc9 --- /dev/null +++ b/src/stores/dns.ts @@ -0,0 +1,200 @@ +import { defineStore } from "pinia"; +import { ref, computed } from "vue"; +import { + dnsApi, + type DNSProvider, + type DNSZone, + type DNSRecord, + type DNSRecordCreate, + type DNSRecordUpdate, +} from "@/services/api"; + +export const useDnsStore = defineStore("dns", () => { + const providers = ref([]); + const zones = ref([]); + const records = ref([]); + const loading = ref(false); + const error = ref(""); + + const selectedProvider = ref(""); + const selectedZone = ref(null); + const credentials = ref>({}); + const credentialsValid = ref(false); + + const currentProvider = computed(() => providers.value.find((p) => p.provider === selectedProvider.value)); + + const fetchProviders = async () => { + loading.value = true; + error.value = ""; + + try { + const response = await dnsApi.getProviders(); + providers.value = response.data.providers || []; + } catch (e: any) { + error.value = e.response?.data?.error || e.message || "Failed to load providers"; + } finally { + loading.value = false; + } + }; + + const validateCredentials = async () => { + if (!selectedProvider.value) return false; + + loading.value = true; + error.value = ""; + credentialsValid.value = false; + + try { + const response = await dnsApi.validateCredentials(selectedProvider.value, credentials.value); + credentialsValid.value = response.data.valid; + if (!response.data.valid && response.data.error) { + error.value = response.data.error; + } + return response.data.valid; + } catch (e: any) { + error.value = e.response?.data?.error || e.message || "Failed to validate credentials"; + return false; + } finally { + loading.value = false; + } + }; + + const fetchZones = async () => { + if (!selectedProvider.value || !credentialsValid.value) return; + + loading.value = true; + error.value = ""; + + try { + const response = await dnsApi.listZones(selectedProvider.value, credentials.value); + zones.value = response.data.zones || []; + } catch (e: any) { + error.value = e.response?.data?.error || e.message || "Failed to load zones"; + } finally { + loading.value = false; + } + }; + + const fetchRecords = async (zoneId: string) => { + if (!selectedProvider.value || !credentialsValid.value) return; + + loading.value = true; + error.value = ""; + + try { + const response = await dnsApi.listRecords(selectedProvider.value, zoneId, credentials.value); + records.value = response.data.records || []; + } catch (e: any) { + error.value = e.response?.data?.error || e.message || "Failed to load records"; + } finally { + loading.value = false; + } + }; + + const createRecord = async (zoneId: string, record: DNSRecordCreate) => { + if (!selectedProvider.value || !credentialsValid.value) return null; + + loading.value = true; + error.value = ""; + + try { + const response = await dnsApi.createRecord(selectedProvider.value, zoneId, credentials.value, record); + await fetchRecords(zoneId); + return response.data; + } catch (e: any) { + error.value = e.response?.data?.error || e.message || "Failed to create record"; + return null; + } finally { + loading.value = false; + } + }; + + const updateRecord = async (zoneId: string, recordId: string, record: DNSRecordUpdate) => { + if (!selectedProvider.value || !credentialsValid.value) return null; + + loading.value = true; + error.value = ""; + + try { + const response = await dnsApi.updateRecord(selectedProvider.value, zoneId, recordId, credentials.value, record); + await fetchRecords(zoneId); + return response.data; + } catch (e: any) { + error.value = e.response?.data?.error || e.message || "Failed to update record"; + return null; + } finally { + loading.value = false; + } + }; + + const deleteRecord = async (zoneId: string, recordId: string) => { + if (!selectedProvider.value || !credentialsValid.value) return false; + + loading.value = true; + error.value = ""; + + try { + await dnsApi.deleteRecord(selectedProvider.value, zoneId, recordId, credentials.value); + await fetchRecords(zoneId); + return true; + } catch (e: any) { + error.value = e.response?.data?.error || e.message || "Failed to delete record"; + return false; + } finally { + loading.value = false; + } + }; + + const selectProvider = (provider: string) => { + selectedProvider.value = provider; + credentials.value = {}; + credentialsValid.value = false; + zones.value = []; + records.value = []; + selectedZone.value = null; + }; + + const selectZone = async (zone: DNSZone) => { + selectedZone.value = zone; + await fetchRecords(zone.id); + }; + + const clearZone = () => { + selectedZone.value = null; + records.value = []; + }; + + const reset = () => { + selectedProvider.value = ""; + credentials.value = {}; + credentialsValid.value = false; + zones.value = []; + records.value = []; + selectedZone.value = null; + error.value = ""; + }; + + return { + providers, + zones, + records, + loading, + error, + selectedProvider, + selectedZone, + credentials, + credentialsValid, + currentProvider, + fetchProviders, + validateCredentials, + fetchZones, + fetchRecords, + createRecord, + updateRecord, + deleteRecord, + selectProvider, + selectZone, + clearZone, + reset, + }; +}); diff --git a/src/views/DnsExternalView.vue b/src/views/DnsExternalView.vue new file mode 100644 index 0000000..07036fb --- /dev/null +++ b/src/views/DnsExternalView.vue @@ -0,0 +1,649 @@ + + + + + + diff --git a/src/views/DnsZonesView.vue b/src/views/DnsZonesView.vue new file mode 100644 index 0000000..9ae1c98 --- /dev/null +++ b/src/views/DnsZonesView.vue @@ -0,0 +1,980 @@ +