{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "dns-record-manager", "title": "Dns Record Manager", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/dns-record-manager/dns-record-manager.component.ts", "content": "import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, computed, signal } from '@angular/core'\nimport {\n Check,\n Cloud,\n CloudOff,\n Copy,\n Download,\n Edit2,\n FileCode,\n Globe,\n LucideAngularModule,\n MoreHorizontal,\n Plus,\n Search,\n ShieldAlert,\n ShieldCheck,\n Trash2,\n X,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport type DnsRecordType = 'A' | 'AAAA' | 'CNAME' | 'MX' | 'TXT' | 'CAA'\n\nexport interface DnsRecord {\n id: string\n type: DnsRecordType\n name: string\n content: string\n ttl: string\n proxied: boolean\n priority?: number\n comment?: string\n}\n\nexport interface DnsRecordManagerProps {\n domain?: string\n nameservers?: string[]\n dnssecEnabled?: boolean\n initialRecords?: DnsRecord[]\n initialAddOpen?: boolean\n className?: string\n}\n\nconst defaultRecords: DnsRecord[] = [\n {\n id: 'rec-1',\n type: 'A',\n name: '@',\n content: '76.76.21.21',\n ttl: 'Auto',\n proxied: true,\n comment: 'Apex production load balancer',\n },\n {\n id: 'rec-2',\n type: 'CNAME',\n name: 'www',\n content: 'cname.vercel-dns.com',\n ttl: 'Auto',\n proxied: true,\n comment: 'Primary web redirect',\n },\n {\n id: 'rec-3',\n type: 'CNAME',\n name: 'api',\n content: 'api-gateway.uipkge.net',\n ttl: '300s',\n proxied: false,\n comment: 'Direct REST gateway route',\n },\n {\n id: 'rec-4',\n type: 'AAAA',\n name: '@',\n content: '2606:4700:3038::6815:1515',\n ttl: 'Auto',\n proxied: true,\n comment: 'IPv6 edge ingress',\n },\n {\n id: 'rec-5',\n type: 'MX',\n name: 'mail',\n content: 'aspmx.l.google.com',\n ttl: '3600s',\n proxied: false,\n priority: 10,\n comment: 'Google Workspace MX',\n },\n {\n id: 'rec-6',\n type: 'TXT',\n name: '_dmarc',\n content: 'v=spf1 include:_spf.google.com ~all',\n ttl: '3600s',\n proxied: false,\n comment: 'Sender Policy Framework verification',\n },\n {\n id: 'rec-7',\n type: 'CAA',\n name: '@',\n content: '0 issue \"letsencrypt.org\"',\n ttl: 'Auto',\n proxied: false,\n comment: 'Certificate authority restriction',\n },\n]\n\nconst typeBadgeStyles: Record = {\n A: { bg: 'bg-info/10', text: 'text-info', border: 'border-info/30' },\n AAAA: { bg: 'bg-chart-1/10', text: 'text-chart-1', border: 'border-chart-1/30' },\n CNAME: { bg: 'bg-chart-2/10', text: 'text-chart-2', border: 'border-chart-2/30' },\n MX: { bg: 'bg-warning/10', text: 'text-warning', border: 'border-warning/30' },\n TXT: { bg: 'bg-success/10', text: 'text-success', border: 'border-success/30' },\n CAA: { bg: 'bg-info/10', text: 'text-info', border: 'border-info/30' },\n}\n\nconst placeholderMap: Record = {\n A: 'e.g. 76.76.21.21',\n AAAA: 'e.g. 2606:4700:3038::6815:1515',\n CNAME: 'e.g. cname.vercel-dns.com',\n MX: 'e.g. mail.google.com',\n TXT: 'e.g. v=spf1 include:_spf.google.com ~all',\n CAA: 'e.g. 0 issue \"letsencrypt.org\"',\n}\n\nconst contentLabelMap: Record = {\n A: 'IPv4 Address',\n AAAA: 'IPv6 Address',\n CNAME: 'Target Domain',\n MX: 'Mail Server Hostname',\n TXT: 'TXT Content / Value',\n CAA: 'Target / Tag Value',\n}\n\nconst PROXYABLE: DnsRecordType[] = ['A', 'AAAA', 'CNAME']\n\n/**\n * Angular port of the React DnsRecordManager block: a domain header card (DNSSEC badge,\n * zone-file / add-record actions, copyable nameservers), an optional BIND zone-file viewer,\n * an add/edit record form, and a filterable records table with proxy toggles and a row\n * action menu. Edit the sample records below.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-dns-record-manager, [ui-dns-record-manager]',\n standalone: true,\n host: {\n '[attr.data-slot]': '\"dns-record-manager\"',\n '[class]': 'hostClass',\n },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n UiInputComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n UiSwitchComponent,\n UiTableComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n \n
\n
\n
\n
\n
\n
\n \n
\n

{{ domain }}

\n @if (dnssecEnabled) {\n \n \n \n Active · DNSSEC Enabled\n \n } @else {\n \n \n \n Active · DNSSEC Inactive\n \n }\n
\n

\n Authoritative DNS routing and global edge proxy management for {{ domain }}.\n

\n
\n\n \n
\n \n \n {{ isZoneFileOpen() ? 'Hide Zone File' : 'Export Zone File' }}\n \n \n
\n
\n\n
\n\n \n
\n
\n Nameservers:\n
\n @for (ns of nameservers; track ns) {\n \n {{ ns }}\n @if (copiedKey() === ns) {\n \n } @else {\n \n }\n \n }\n
\n
\n
\n \n Propagation: 100% Synced\n
\n
\n
\n
\n\n \n @if (isZoneFileOpen()) {\n
\n
\n
\n
\n
BIND RFC 1035 Zone File
\n
\n Complete DNS zone mapping for {{ domain }} ready for import into Route53, Bind9, or Cloudflare.\n
\n
\n \n \n \n
\n
\n
\n
\n {{ zoneFileContent() }}\n
\n
\n \n @if (copiedKey() === 'zone-file') {\n \n } @else {\n \n }\n {{ copiedKey() === 'zone-file' ? 'Copied Zone File' : 'Copy Zone Content' }}\n \n \n \n Download .zone File\n \n
\n
\n
\n }\n\n \n @if (isAddOpen()) {\n
\n
\n
\n
\n
\n {{ editingId() ? 'Edit DNS Record' : 'Add New DNS Record' }}\n
\n
\n {{\n editingId()\n ? 'Update configuration, target destination, or edge proxy status.'\n : 'Configure host routing, MX exchangers, or verification TXT tags for ' + domain + '.'\n }}\n
\n
\n \n \n \n
\n
\n
\n
\n \n
\n \n \n \n \n A (IPv4 Address)\n AAAA (IPv6 Address)\n CNAME (Canonical Alias)\n MX (Mail Exchanger)\n TXT (Text Record)\n CAA (Cert Authority)\n \n \n
\n\n \n
\n \n \n
\n\n \n
\n \n \n \n \n Auto (Automatic)\n 1 min (60s)\n 5 mins (300s)\n 30 mins (1800s)\n 1 hour (3600s)\n 1 day (86400s)\n \n \n
\n
\n\n
\n \n
\n \n \n
\n\n \n @if (formType() === 'MX') {\n
\n \n \n
\n }\n
\n\n \n
\n \n \n
\n\n \n @if (isProxyable(formType())) {\n
\n
\n
\n \n Proxy Status\n
\n

\n {{\n formProxied()\n ? 'Proxied: Accelerate traffic and protect origin IP behind Cloudflare edge.'\n : 'DNS only: Direct traffic route without edge proxy caching.'\n }}\n

\n
\n \n
\n }\n\n \n
\n \n \n
\n
\n
\n }\n\n \n
\n \n
\n
\n \n \n
\n\n \n
\n \n All ({{ records().length }})\n \n @for (t of filterTypes; track t) {\n \n {{ t }}\n \n }\n
\n
\n\n \n
\n
\n
\n \n \n Type\n Name\n Target Content\n Proxy Status\n TTL\n \n Actions\n \n \n \n \n @for (record of filteredRecords(); track record.id) {\n \n \n \n {{ record.type }}\n \n\n \n \n
\n {{ record.name }}\n \n {{ resolveHostname(record.name) }}\n \n
\n \n\n \n \n
\n
\n
\n @if (record.type === 'MX') {\n \n Pri {{ record.priority }}\n \n }\n \n {{ record.content }}\n \n
\n @if (record.comment) {\n

{{ record.comment }}

\n }\n
\n\n \n @if (copiedKey() === record.id) {\n \n } @else {\n \n }\n \n
\n \n\n \n \n @if (isProxyable(record.type)) {\n
\n \n @if (record.proxied) {\n \n } @else {\n \n }\n {{ record.proxied ? 'Proxied' : 'DNS only' }}\n \n
\n } @else {\n
\n \n \n DNS only\n \n
\n }\n \n\n \n \n \n {{ record.ttl }}\n \n \n\n \n \n \n \n \n Open record actions\n \n \n \n \n Edit Record\n \n \n \n Copy Target\n \n \n \n Copy BIND Row\n \n \n \n \n Delete Record\n \n \n \n \n \n }\n\n \n @if (filteredRecords().length === 0) {\n \n \n
\n \n

No DNS records found

\n

\n {{\n searchQuery()\n ? 'No records match your search filter query.'\n : 'No records configured for this domain yet. Add your first record to begin routing.'\n }}\n

\n \n
\n \n \n }\n \n
\n
\n
\n\n \n
\n

\n Showing {{ filteredRecords().length }} of\n {{ records().length }} configured records\n

\n
\n \n \n {{ proxiedCount() }} Proxied\n \n \n \n {{ dnsOnlyCount() }} DNS Only\n \n
\n
\n
\n `,\n})\nexport class UiDnsRecordManagerComponent implements OnInit, OnDestroy {\n @Input() domain = 'uipkge.dev'\n @Input() nameservers: string[] = ['ns1.uipkge.net', 'ns2.uipkge.net']\n @Input() dnssecEnabled = true\n @Input() initialRecords?: DnsRecord[]\n @Input() initialAddOpen = false\n @Input('class') className?: string\n\n protected readonly Check = Check\n protected readonly Cloud = Cloud\n protected readonly CloudOff = CloudOff\n protected readonly Copy = Copy\n protected readonly Download = Download\n protected readonly Edit2 = Edit2\n protected readonly FileCode = FileCode\n protected readonly Globe = Globe\n protected readonly MoreHorizontal = MoreHorizontal\n protected readonly Plus = Plus\n protected readonly Search = Search\n protected readonly ShieldAlert = ShieldAlert\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Trash2 = Trash2\n protected readonly X = X\n\n protected readonly filterTypes: DnsRecordType[] = ['A', 'CNAME', 'MX', 'TXT', 'AAAA', 'CAA']\n\n readonly records = signal(defaultRecords.map((r) => ({ ...r })))\n readonly searchQuery = signal('')\n readonly selectedTypeFilter = signal('ALL')\n readonly isAddOpen = signal(false)\n readonly isZoneFileOpen = signal(false)\n readonly editingId = signal(null)\n\n // Form states\n readonly formType = signal('A')\n readonly formName = signal('')\n readonly formContent = signal('')\n readonly formTtl = signal('Auto')\n readonly formProxied = signal(true)\n readonly formPriority = signal(10)\n readonly formComment = signal('')\n\n readonly copiedKey = signal(null)\n private copyTimeout: ReturnType | undefined\n // Domain / nameservers are plain inputs; bump this so the zone file recomputes after edits.\n private readonly inputsVersion = signal(0)\n\n ngOnInit(): void {\n this.records.set(\n this.initialRecords ? this.initialRecords.map((r) => ({ ...r })) : defaultRecords.map((r) => ({ ...r })),\n )\n this.isAddOpen.set(this.initialAddOpen)\n this.inputsVersion.update((v) => v + 1)\n }\n\n ngOnDestroy(): void {\n clearTimeout(this.copyTimeout)\n }\n\n get hostClass(): string {\n return cn('block w-full space-y-6', this.className)\n }\n\n readonly filteredRecords = computed(() => {\n const query = this.searchQuery().trim().toLowerCase()\n const filter = this.selectedTypeFilter()\n return this.records().filter((record) => {\n const matchesType = filter === 'ALL' || record.type === filter\n const matchesQuery =\n !query ||\n record.name.toLowerCase().includes(query) ||\n record.content.toLowerCase().includes(query) ||\n record.type.toLowerCase().includes(query) ||\n (!!record.comment && record.comment.toLowerCase().includes(query))\n return matchesType && matchesQuery\n })\n })\n\n readonly proxiedCount = computed(() => this.records().filter((r) => r.proxied).length)\n readonly dnsOnlyCount = computed(() => this.records().filter((r) => !r.proxied).length)\n\n readonly zoneFileContent = computed(() => {\n this.inputsVersion()\n const domain = this.domain\n const nameservers = this.nameservers\n const date = new Date().toISOString().split('T')[0]!.replace(/-/g, '')\n const lines: string[] = [\n `; BIND zone file for ${domain}`,\n `; Generated on ${new Date().toUTCString()}`,\n `$ORIGIN ${domain}.`,\n `$TTL 3600`,\n ``,\n `; SOA Record`,\n `@ IN SOA ${nameservers[0]}. hostmaster.${domain}. (`,\n ` ${date}01 ; Serial`,\n ` 7200 ; Refresh (2 hours)`,\n ` 3600 ; Retry (1 hour)`,\n ` 1209600 ; Expire (2 weeks)`,\n ` 3600 ; Minimum TTL (1 hour)`,\n `)`,\n ``,\n `; Nameservers`,\n ]\n\n nameservers.forEach((ns) => {\n lines.push(`@ IN NS ${ns}.`)\n })\n\n lines.push('', '; Resource Records')\n\n for (const r of this.records()) {\n const recName = (r.name === '@' ? '@' : r.name).padEnd(12, ' ')\n const ttlValue = r.ttl === 'Auto' ? '3600' : r.ttl.replace('s', '')\n const ttlStr = ttlValue.padEnd(6, ' ')\n const typeStr = r.type.padEnd(7, ' ')\n\n if (r.type === 'MX') {\n const prio = String(r.priority ?? 10).padEnd(4, ' ')\n lines.push(`${recName} ${ttlStr} IN ${typeStr} ${prio} ${r.content}.`)\n } else if (r.type === 'TXT') {\n lines.push(`${recName} ${ttlStr} IN ${typeStr} \"${r.content}\"`)\n } else if (r.type === 'CNAME') {\n lines.push(`${recName} ${ttlStr} IN ${typeStr} ${r.content}.`)\n } else {\n lines.push(`${recName} ${ttlStr} IN ${typeStr} ${r.content}`)\n }\n }\n\n return lines.join('\\n')\n })\n\n contentLabel(): string {\n return contentLabelMap[this.formType()]\n }\n\n contentPlaceholder(): string {\n return placeholderMap[this.formType()]\n }\n\n isProxyable(type: DnsRecordType): boolean {\n return PROXYABLE.includes(type)\n }\n\n typeBadgeClass(type: DnsRecordType): string {\n const s = typeBadgeStyles[type]\n return cn(\n 'inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-mono text-xs font-bold',\n s.bg,\n s.text,\n s.border,\n )\n }\n\n filterClass(value: string, base: string): string {\n return cn(\n base,\n this.selectedTypeFilter() === value\n ? 'bg-primary text-primary-foreground shadow-xs'\n : 'bg-muted/70 text-muted-foreground hover:bg-muted hover:text-foreground',\n )\n }\n\n proxyButtonClass(proxied: boolean): string {\n return cn(\n 'group inline-flex min-h-6 items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors focus-visible:ring-[2px] focus-visible:outline-none',\n proxied\n ? 'border-warning/30 bg-warning/10 text-warning hover:bg-warning/20 text-warning'\n : 'border-border bg-muted/60 text-muted-foreground hover:bg-muted hover:text-foreground',\n )\n }\n\n toNumber(v: string): number {\n return Number(v)\n }\n\n bindRow(record: DnsRecord): string {\n return `${record.name} IN ${record.type} ${record.content}`\n }\n\n resolveHostname(recordName: string): string {\n if (recordName === '@') return this.domain\n return `${recordName}.${this.domain}`\n }\n\n async copyText(key: string, text: string): Promise {\n try {\n await navigator.clipboard.writeText(text)\n this.copiedKey.set(key)\n clearTimeout(this.copyTimeout)\n this.copyTimeout = setTimeout(() => this.copiedKey.set(null), 1600)\n } catch {\n // Clipboard unavailable\n }\n }\n\n handleTypeChange(value: string): void {\n const newType = value as DnsRecordType\n this.formType.set(newType)\n if (['MX', 'TXT', 'CAA'].includes(newType)) {\n this.formProxied.set(false)\n } else if (!this.editingId()) {\n this.formProxied.set(true)\n }\n }\n\n toggleProxy(id: string): void {\n this.records.update((prev) =>\n prev.map((r) => (r.id === id && this.isProxyable(r.type) ? { ...r, proxied: !r.proxied } : r)),\n )\n }\n\n deleteRecord(id: string): void {\n this.records.update((prev) => prev.filter((r) => r.id !== id))\n if (this.editingId() === id) this.cancelForm()\n }\n\n startAdd(): void {\n this.editingId.set(null)\n this.formType.set('A')\n this.formName.set('')\n this.formContent.set('')\n this.formTtl.set('Auto')\n this.formProxied.set(true)\n this.formPriority.set(10)\n this.formComment.set('')\n this.isAddOpen.set(true)\n }\n\n startEdit(record: DnsRecord): void {\n this.editingId.set(record.id)\n this.formType.set(record.type)\n this.formName.set(record.name)\n this.formContent.set(record.content)\n this.formTtl.set(record.ttl)\n this.formProxied.set(record.proxied)\n this.formPriority.set(record.priority ?? 10)\n this.formComment.set(record.comment ?? '')\n this.isAddOpen.set(true)\n }\n\n cancelForm(): void {\n this.isAddOpen.set(false)\n this.editingId.set(null)\n }\n\n saveRecord(): void {\n const name = this.formName().trim() || '@'\n const content = this.formContent().trim()\n if (!content) return\n const type = this.formType()\n const fields = {\n type,\n name,\n content,\n ttl: this.formTtl(),\n proxied: this.isProxyable(type) ? this.formProxied() : false,\n priority: type === 'MX' ? Number(this.formPriority()) : undefined,\n comment: this.formComment().trim() || undefined,\n }\n\n const editingId = this.editingId()\n if (editingId) {\n this.records.update((prev) => prev.map((r) => (r.id === editingId ? { ...r, ...fields } : r)))\n } else {\n this.records.update((prev) => [{ id: `rec-${Date.now()}`, ...fields }, ...prev])\n }\n\n this.cancelForm()\n }\n\n downloadZoneFile(): void {\n const blob = new Blob([this.zoneFileContent()], { type: 'text/plain;charset=utf-8' })\n const url = URL.createObjectURL(blob)\n const a = document.createElement('a')\n a.href = url\n a.download = `${this.domain}.zone`\n document.body.appendChild(a)\n a.click()\n document.body.removeChild(a)\n URL.revokeObjectURL(url)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/dns-record-manager/dns-record-manager.component.ts" }, { "path": "packages/registry-angular/blocks/dns-record-manager/index.ts", "content": "export { UiDnsRecordManagerComponent } from './dns-record-manager.component'\nexport type { DnsRecord, DnsRecordManagerProps, DnsRecordType } from './dns-record-manager.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/dns-record-manager/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/dropdown-menu.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/switch.json", "https://uipkge.dev/r/angular/table.json" ], "description": "Cloudflare/Vercel style DNS records management table and nameserver inspector with type badges, proxy toggle, copyable values, zone file exporter, and add/edit record panel.", "categories": [ "devops", "dashboard", "data" ] }