From ab0cb7b7826550ac5ef220511d9089bc70bb5a91 Mon Sep 17 00:00:00 2001
From: Aarnav Tale <aarnavtale@icloud.com>
Date: Sun, 7 Jul 2024 14:52:47 -0400
Subject: [PATCH] feat(TALE-11): support custom DNS records

---
 app/routes/_data.dns._index/dialogs/dns.tsx | 121 +++++++++++++++++
 app/routes/_data.dns._index/dns.tsx         | 137 ++++++++++++++++++++
 app/routes/_data.dns._index/route.tsx       |   6 +
 3 files changed, 264 insertions(+)
 create mode 100644 app/routes/_data.dns._index/dialogs/dns.tsx
 create mode 100644 app/routes/_data.dns._index/dns.tsx

diff --git a/app/routes/_data.dns._index/dialogs/dns.tsx b/app/routes/_data.dns._index/dialogs/dns.tsx
new file mode 100644
index 0000000..28949dc
--- /dev/null
+++ b/app/routes/_data.dns._index/dialogs/dns.tsx
@@ -0,0 +1,121 @@
+import { Form, useSubmit } from '@remix-run/react'
+import { useMemo, useState } from 'react'
+
+import Code from '~/components/Code'
+import Dialog from '~/components/Dialog'
+import TextField from '~/components/TextField'
+import { cn } from '~/utils/cn'
+
+interface Props {
+	records: { name: string, type: 'A', value: string }[]
+}
+
+export default function AddDNS({ records }: Props) {
+	const submit = useSubmit()
+	const [name, setName] = useState('')
+	const [ip, setIp] = useState('')
+
+	const isDuplicate = useMemo(() => {
+		if (name.length === 0 || ip.length === 0) return false
+		const lookup = records.find(record => record.name === name)
+		if (!lookup) return false
+
+		return lookup.value === ip
+	}, [records, name, ip])
+
+	return (
+		<Dialog>
+			<Dialog.Button>
+				Add DNS record
+			</Dialog.Button>
+			<Dialog.Panel>
+				{close => (
+					<>
+						<Dialog.Title>
+							Add DNS record
+						</Dialog.Title>
+						<Dialog.Text>
+							Enter the domain and IP address for the new DNS record.
+						</Dialog.Text>
+						<Form
+							method="POST"
+							onSubmit={(event) => {
+								event.preventDefault()
+								if (!name || !ip) return
+
+								setName('')
+								setIp('')
+
+								submit({
+									'dns_config.extra_records': [
+										...records,
+										{
+											name,
+											type: 'A',
+											value: ip,
+										},
+									],
+								}, {
+									method: 'PATCH',
+									encType: 'application/json',
+								})
+
+								close()
+							}}
+						>
+							<TextField
+								label="Domain"
+								placeholder="test.example.com"
+								name="domain"
+								state={[name, setName]}
+								className={cn(
+									'mt-2',
+									isDuplicate && 'outline outline-red-500',
+								)}
+							/>
+							<TextField
+								label="IP Address"
+								placeholder="101.101.101.101"
+								name="ip"
+								state={[ip, setIp]}
+								className={cn(
+									isDuplicate && 'outline outline-red-500',
+								)}
+							/>
+							{isDuplicate
+								? (
+									<p className="text-sm opacity-50">
+										A record with the domain name
+										{' '}
+										<Code>{name}</Code>
+										{' '}
+										and IP address
+										{' '}
+										<Code>{ip}</Code>
+										{' '}
+										already exists.
+									</p>
+									)
+								: undefined}
+							<div className="mt-6 flex justify-end gap-2 mt-8">
+								<Dialog.Action
+									variant="cancel"
+									onPress={close}
+								>
+									Cancel
+								</Dialog.Action>
+								<Dialog.Action
+									variant="confirm"
+									onPress={close}
+									isDisabled={isDuplicate}
+								>
+									Add
+								</Dialog.Action>
+							</div>
+						</Form>
+					</>
+				)}
+			</Dialog.Panel>
+		</Dialog>
+	)
+}
diff --git a/app/routes/_data.dns._index/dns.tsx b/app/routes/_data.dns._index/dns.tsx
new file mode 100644
index 0000000..5eca27e
--- /dev/null
+++ b/app/routes/_data.dns._index/dns.tsx
@@ -0,0 +1,137 @@
+import { useSubmit } from '@remix-run/react'
+import { useState } from 'react'
+import { Button } from 'react-aria-components'
+
+import Code from '~/components/Code'
+import Link from '~/components/Link'
+import Switch from '~/components/Switch'
+import TableList from '~/components/TableList'
+import { cn } from '~/utils/cn'
+
+import AddDNS from './dialogs/dns'
+
+interface Props {
+	records: { name: string, type: 'A', value: string }[]
+	isDisabled: boolean
+}
+
+export default function DNS({ records, isDisabled }: Props) {
+	const submit = useSubmit()
+
+	return (
+		<div className="flex flex-col w-2/3">
+			<h1 className="text-2xl font-medium mb-4">DNS Records</h1>
+			<p className="text-gray-700 dark:text-gray-300">
+				Headscale supports adding custom DNS records to your Tailnet.
+				As of now, only
+				{' '}
+				<Code>A</Code>
+				{' '}
+				records are supported.
+				{' '}
+				<Link
+					to="https://headscale.net/dns-records/"
+					name="Headscale DNS Records documentation"
+				>
+					Learn More
+				</Link>
+			</p>
+			<div className="mt-4">
+				<TableList className="mb-8">
+					{records.length === 0
+						? (
+							<TableList.Item>
+								<p className="opacity-50 text-sm mx-auto">
+									No DNS records found
+								</p>
+							</TableList.Item>
+							)
+						: records.map((record, index) => (
+							<TableList.Item key={index}>
+								<div className="flex gap-24">
+									<div className="flex gap-2">
+										<p className="font-mono text-sm font-bold">{record.type}</p>
+										<p className="font-mono text-sm">{record.name}</p>
+									</div>
+									<p className="font-mono text-sm">{record.value}</p>
+								</div>
+								<Button
+									className={cn(
+										'text-sm',
+										'text-red-600 dark:text-red-400',
+										'hover:text-red-700 dark:hover:text-red-300',
+										isDisabled && 'opacity-50 cursor-not-allowed',
+									)}
+									isDisabled={isDisabled}
+									onPress={() => {
+										submit({
+											'dns_config.extra_records': records
+												.filter((_, i) => i !== index),
+										}, {
+											method: 'PATCH',
+											encType: 'application/json',
+										})
+									}}
+								>
+									Remove
+								</Button>
+							</TableList.Item>
+						))}
+				</TableList>
+
+				{isDisabled
+					? undefined
+					: (
+						<AddDNS records={records} />
+						)}
+			</div>
+		</div>
+	)
+}
+
+interface ListProps {
+	isGlobal: boolean
+	isDisabled: boolean
+	nameservers: string[]
+	name: string
+	override: boolean
+}
+
+function NameserverList({ isGlobal, isDisabled, nameservers, name, override }: ListProps) {
+	const [localOverride, setLocalOverride] = useState(override)
+	const submit = useSubmit()
+
+	return (
+		<div className="mb-8">
+			<div className="flex items-center justify-between mb-2">
+				<h2 className="text-md font-medium opacity-80">
+					{isGlobal ? 'Global Nameservers' : name}
+				</h2>
+				{isGlobal
+					? (
+						<div className="flex gap-2 items-center">
+							<span className="text-sm opacity-50">
+								Override local DNS
+							</span>
+							<Switch
+								label="Override local DNS"
+								defaultSelected={localOverride}
+								isDisabled={isDisabled}
+								onChange={() => {
+									submit({
+										'dns_config.override_local_dns': !localOverride,
+									}, {
+										method: 'PATCH',
+										encType: 'application/json',
+									})
+
+									setLocalOverride(!localOverride)
+								}}
+							/>
+						</div>
+						)
+					: undefined}
+			</div>
+		</div>
+	)
+}
diff --git a/app/routes/_data.dns._index/route.tsx b/app/routes/_data.dns._index/route.tsx
index 9ca30fe..535b1f5 100644
--- a/app/routes/_data.dns._index/route.tsx
+++ b/app/routes/_data.dns._index/route.tsx
@@ -8,6 +8,7 @@ import { loadConfig, patchConfig } from '~/utils/config/headscale'
 import { getSession } from '~/utils/sessions'
 import { useLiveData } from '~/utils/useLiveData'
 
+import DNS from './dns'
 import Domains from './domains'
 import MagicModal from './magic'
 import Nameservers from './nameservers'
@@ -90,6 +91,11 @@ export default function Page() {
 				isDisabled={!data.config.write}
 			/>
 
+			<DNS
+				records={data.extraRecords}
+				isDisabled={!data.config.write}
+			/>
+
 			<Domains
 				baseDomain={data.magicDns ? data.baseDomain : undefined}
 				searchDomains={data.searchDomains}