fix: oidc will fail in the dev config

.github/workflows/publish.yaml

@@ -2,7 +2,7 @@ name: Publish Docker Image
 on:
   push:
     tags:
-      - 'v*'
+      - '*'
 
 jobs:
   publish:
@@ -39,3 +39,4 @@ jobs:
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+          platforms: linux/amd64, linux/arm64

README.md

@@ -8,7 +8,7 @@ This is a relatively tiny Remix app that aims to provide a usable GUI for the He
 It's still very early in it's development, however these are some of the features that are planned.
 
 - [ ] Editable tags, machine names, users, etc
-- [ ] ACL control through Docker integration
+- [x] ACL control through Docker integration
 - [x] OIDC based login for the web UI
 - [x] Automated API key regeneration
 - [x] Editable headscale configuration
@@ -16,6 +16,7 @@ It's still very early in it's development, however these are some of the feature
 ## Deployment
 - If you run Headscale in a Docker container, see the [Advanced Deployment](/docs/Advanced-Integration.md) guide.
 - If you run Headscale natively, see the [Basic Deployment](/docs/Basic-Integration.md) guide.
+- For more configuration options, refer to the [Configuration](/docs/Configuration.md) guide.
 
 ## Contributing
 If you would like to contribute, please install a relatively modern version of Node.js and PNPM.

app/components/Dropdown.tsx

@@ -0,0 +1,86 @@
+import { Menu, type MenuButtonProps, Transition } from '@headlessui/react'
+import clsx from 'clsx'
+import { Fragment, type HTMLProps, type ReactNode } from 'react'
+
+type Properties = {
+	readonly children: ReactNode;
+	readonly button: ReactNode;
+	// eslint-disable-next-line unicorn/no-keyword-prefix
+	readonly className?: string;
+	readonly width?: string;
+}
+
+function Dropdown(properties: Properties) {
+	return (
+		<div className={clsx('relative', properties.className)}>
+			<Menu>
+				<Button className='flex flex-col items-center'>
+					{properties.button}
+				</Button>
+				<Transition
+					as={Fragment}
+					enter='transition ease-out duration-100'
+					enterFrom='transform opacity-0 scale-95'
+					enterTo='transform opacity-100 scale-100'
+					leave='transition ease-in duration-75'
+					leaveFrom='transform opacity-100 scale-100'
+					leaveTo='transform opacity-0 scale-95'
+				>
+					<Menu.Items className={clsx(
+						'absolute right-0 mt-2 rounded-md',
+						'text-gray-700 dark:text-gray-300',
+						'bg-white dark:bg-zinc-800',
+						'overflow-hidden z-50',
+						'border border-gray-200 dark:border-zinc-700',
+						'divide-y divide-gray-200 dark:divide-zinc-700',
+						properties.width ?? 'w-36'
+					)}
+					>
+						{properties.children}
+					</Menu.Items>
+				</Transition>
+			</Menu>
+		</div>
+	)
+}
+
+function Button(properties: MenuButtonProps<'button'>) {
+	return (
+		<Menu.Button
+			{...properties}
+			className={clsx(
+				properties.className
+			)}
+		>
+			{properties.children}
+		</Menu.Button>
+	)
+}
+
+type ItemProperties = HTMLProps<HTMLDivElement> & {
+	variant?: 'static' | 'normal';
+}
+
+function Item(properties: ItemProperties) {
+	return (
+		<Menu.Item>
+			{({ active }) => (
+				<div
+					{...properties}
+					className={clsx(
+						'px-4 py-2 w-full',
+						'focus:outline-none focus:ring',
+						'focus:ring-gray-300 dark:focus:ring-zinc-700',
+						properties.className,
+						properties.variant !== 'static' && active
+							? 'bg-gray-100 dark:bg-zinc-500' : ''
+					)}
+				>
+					{properties.children}
+				</div>
+			)}
+		</Menu.Item>
+	)
+}
+
+export default Object.assign(Dropdown, { Item })

app/components/Modal.tsx

@@ -0,0 +1,160 @@
+import { Dialog, Transition } from '@headlessui/react'
+import { XMarkIcon } from '@heroicons/react/24/outline'
+import clsx from 'clsx'
+import { Fragment, type ReactNode, type SetStateAction, useState } from 'react'
+
+import Button from './Button'
+
+type HookParameters = {
+	title: string;
+	description?: string;
+	buttonText?: string;
+	variant?: 'danger' | 'confirm';
+	children?: ReactNode;
+
+	// Optional because the button submits
+	onConfirm?: () => void | Promise<void>;
+	onOpen?: () => void | Promise<void>;
+	onClose?: () => void | Promise<void>;
+}
+
+type Overrides = Omit<HookParameters, 'onOpen' | 'onClose'>
+
+type Properties = {
+	readonly isOpen: boolean;
+	readonly setIsOpen: (value: SetStateAction<boolean>) => void;
+	readonly parameters?: HookParameters;
+}
+
+export type OpenFunction = (overrides?: Overrides) => void
+
+export default function useModal(properties?: HookParameters) {
+	const [isOpen, setIsOpen] = useState(false)
+	const [liveProperties, setLiveProperties] = useState(properties)
+
+	return {
+		Modal: (
+			<Modal
+				isOpen={isOpen}
+				setIsOpen={setIsOpen}
+				parameters={liveProperties}
+			/>
+		),
+
+		open: (overrides?: Overrides) => {
+			if (!overrides && !properties) {
+				throw new Error('No properties provided')
+			}
+
+			setIsOpen(true)
+			if (properties?.onOpen) {
+				void properties.onOpen()
+			}
+
+			if (overrides) {
+				setLiveProperties(overrides)
+			}
+		},
+
+		close: () => {
+			setIsOpen(false)
+			if (properties?.onClose) {
+				void properties.onClose()
+			}
+		}
+	}
+}
+
+function Modal({ parameters, isOpen, setIsOpen }: Properties) {
+	if (!parameters) {
+		return
+	}
+
+	return (
+		<Transition
+			show={isOpen}
+			as={Fragment}
+		>
+			<Dialog
+				as='div'
+				className='relative z-50'
+				onClose={() => {
+					setIsOpen(false)
+				}}
+			>
+				<Transition.Child
+					enter='ease-out duration-100'
+					enterFrom='opacity-0'
+					enterTo='opacity-100'
+					leave='ease-in duration-75'
+					leaveFrom='opacity-100'
+					leaveTo='opacity-0'
+					as={Fragment}
+				>
+					<div className='fixed inset-0 bg-black/30' aria-hidden='true'/>
+				</Transition.Child>
+				<div className='fixed inset-0 flex w-screen items-center justify-center'>
+					<Transition.Child
+						enter='transition ease-out duration-100'
+						enterFrom='transform opacity-0 scale-95'
+						enterTo='transform opacity-100 scale-100'
+						leave='transition ease-in duration-75'
+						leaveFrom='transform opacity-100 scale-100'
+						leaveTo='transform opacity-0 scale-95'
+						as={Fragment}
+					>
+						<Dialog.Panel className={clsx(
+							'rounded-lg p-4 w-full max-w-md',
+							'bg-white dark:bg-black relative',
+							'border border-gray-200 dark:border-zinc-800'
+						)}
+						>
+							<XMarkIcon
+								className={clsx(
+									'absolute top-3 right-3 rounded-lg p-1.5',
+									'w-8 h-8 text-gray-500 dark:text-gray-400',
+									'hover:bg-gray-100 dark:hover:bg-zinc-800'
+								)}
+								onClick={() => {
+									setIsOpen(false)
+								}}
+							/>
+							<Dialog.Title className='text-xl font-bold'>
+								{parameters.title}
+							</Dialog.Title>
+							{parameters.description ? (
+								<Dialog.Description className='text-gray-500 dark:text-gray-400 mt-1'>
+									{parameters.description}
+								</Dialog.Description>
+							) : undefined}
+							{parameters.children ? (
+								<div className='w-full mt-4'>
+									{parameters.children}
+								</div>
+							) : undefined}
+							<Button
+								variant='emphasized'
+								type='submit'
+								className={clsx(
+									'w-full mt-12',
+									parameters.variant === 'danger'
+										? 'bg-red-800 dark:bg-red-500 focus:ring-red-500 dark:focus:ring-red-500'
+										: ''
+								)}
+								onClick={async () => {
+									if (parameters.onConfirm) {
+										await parameters.onConfirm()
+									}
+
+									setIsOpen(false)
+								}}
+							>
+								{parameters.buttonText ?? 'Confirm'}
+							</Button>
+						</Dialog.Panel>
+					</Transition.Child>
+				</div>
+			</Dialog>
+		</Transition>
+	)
+}

app/root.tsx

@@ -22,11 +22,11 @@ export const links: LinksFunction = () => [
 ]
 
 export async function loader() {
-	await getContext()
+	const context = await getContext()
 	registerConfigWatcher()
 
-	if (!process.env.HEADSCALE_URL) {
-		throw new Error('The HEADSCALE_URL environment variable is required')
+	if (context.headscaleUrl.length === 0) {
+		throw new Error('No headscale URL was provided either by the HEADSCALE_URL environment variable or the config file')
 	}
 
 	if (!process.env.COOKIE_SECRET) {

app/routes/_data.acls._index/editor.tsx

@@ -0,0 +1,126 @@
+import { json } from '@codemirror/lang-json'
+import { yaml } from '@codemirror/lang-yaml'
+import { useFetcher } from '@remix-run/react'
+import { githubDark, githubLight } from '@uiw/codemirror-theme-github'
+import CodeMirror from '@uiw/react-codemirror'
+import clsx from 'clsx'
+import { useEffect, useMemo, useState } from 'react'
+import CodeMirrorMerge from 'react-codemirror-merge'
+import { toast } from 'react-hot-toast/headless'
+
+import Button from '~/components/Button'
+import Spinner from '~/components/Spinner'
+
+import Fallback from './fallback'
+
+type EditorProperties = {
+	readonly acl: string;
+	readonly setAcl: (acl: string) => void;
+	readonly mode: 'edit' | 'diff';
+
+	readonly data: {
+		hasAclWrite: boolean;
+		currentAcl: string;
+		aclType: string;
+	};
+}
+
+export default function Editor({ data, acl, setAcl, mode }: EditorProperties) {
+	const [light, setLight] = useState(false)
+	const [loading, setLoading] = useState(true)
+
+	const fetcher = useFetcher()
+	const aclType = useMemo(() => data.aclType === 'json' ? json() : yaml(), [data.aclType])
+
+	useEffect(() => {
+		const theme = window.matchMedia('(prefers-color-scheme: light)')
+		setLight(theme.matches)
+
+		theme.addEventListener('change', theme => {
+			setLight(theme.matches)
+		})
+
+		// Prevents the FOUC
+		setLoading(false)
+	}, [])
+
+	return (
+		<>
+			<div className={clsx(
+				'border border-gray-200 dark:border-gray-700',
+				'rounded-b-lg rounded-tr-lg mb-2 overflow-hidden'
+			)}
+			>
+				{loading ? (
+					<Fallback acl={acl} where='client'/>
+				) : (
+					mode === 'edit' ? (
+						<CodeMirror
+							value={acl}
+							className='h-editor text-sm'
+							theme={light ? githubLight : githubDark}
+							extensions={[aclType]}
+							readOnly={!data.hasAclWrite}
+							onChange={value => {
+								setAcl(value)
+							}}
+						/>
+					) : (
+						<div
+							className='overflow-y-scroll'
+							style={{ height: 'calc(100vh - 20rem)' }}
+						>
+							<CodeMirrorMerge
+								theme={light ? githubLight : githubDark}
+								orientation='a-b'
+							>
+								<CodeMirrorMerge.Original
+									readOnly
+									value={data.currentAcl}
+									extensions={[aclType]}
+								/>
+								<CodeMirrorMerge.Modified
+									readOnly
+									value={acl}
+									extensions={[aclType]}
+								/>
+							</CodeMirrorMerge>
+						</div>
+					)
+				)}
+			</div>
+
+			<Button
+				variant='emphasized'
+				className='text-sm w-fit mr-2'
+				onClick={() => {
+					fetcher.submit({
+						acl
+					}, {
+						method: 'PATCH',
+						encType: 'application/json'
+					})
+
+					toast('Updated tailnet ACL policy')
+				}}
+			>
+				{fetcher.state === 'idle' ? undefined : (
+					<Spinner className='w-3 h-3'/>
+				)}
+				Save
+			</Button>
+			<Button
+				variant='emphasized'
+				className={clsx(
+					'text-sm w-fit bg-gray-100 dark:bg-transparent',
+					'border border-gray-200 dark:border-gray-700'
+				)}
+				onClick={() => {
+					setAcl(data.currentAcl)
+				}}
+			>
+				Discard Changes
+			</Button>
+		</>
+	)
+}

app/routes/_data.acls._index/fallback.tsx

@@ -0,0 +1,51 @@
+import clsx from 'clsx'
+
+import Button from '~/components/Button'
+
+type FallbackProperties = {
+	readonly acl: string;
+	readonly where: 'client' | 'server';
+}
+
+export default function Fallback({ acl, where }: FallbackProperties) {
+	return (
+		<>
+			<div className={clsx(
+				where === 'server' ? 'mb-2 overflow-hidden rounded-tr-lg rounded-b-lg' : '',
+				where === 'server' ? 'border border-gray-200 dark:border-gray-700' : ''
+			)}
+			>
+				<textarea
+					readOnly
+					className={clsx(
+						'w-full h-editor font-mono resize-none',
+						'text-sm text-gray-600 dark:text-gray-300',
+						'pl-10 pt-1 leading-snug'
+					)}
+					value={acl}
+				/>
+			</div>
+			{where === 'server' ? (
+				<>
+					<Button
+						disabled
+						variant='emphasized'
+						className='text-sm w-fit mr-2'
+					>
+						Save
+					</Button>
+					<Button
+						disabled
+						variant='emphasized'
+						className={clsx(
+							'text-sm w-fit bg-gray-100 dark:bg-transparent',
+							'border border-gray-200 dark:border-gray-700'
+						)}
+					>
+						Discard Changes
+					</Button>
+				</>
+			) : undefined}
+		</>
+	)
+}

app/routes/_data.acls._index/route.tsx

@@ -1,13 +1,186 @@
-import { CubeTransparentIcon } from '@heroicons/react/24/outline'
+import { Tab } from '@headlessui/react'
+import { BeakerIcon, CubeTransparentIcon, EyeIcon, PencilSquareIcon } from '@heroicons/react/24/outline'
+import { type ActionFunctionArgs, json } from '@remix-run/node'
+import { useLoaderData } from '@remix-run/react'
+import clsx from 'clsx'
+import { useState } from 'react'
+import { Fragment } from 'react/jsx-runtime'
+import { ClientOnly } from 'remix-utils/client-only'
+
+import Notice from '~/components/Notice'
+import { getAcl, getContext, patchAcl } from '~/utils/config'
+import { sighupHeadscale } from '~/utils/docker'
+import { getSession } from '~/utils/sessions'
+
+import Editor from './editor'
+import Fallback from './fallback'
+
+export async function loader() {
+	const context = await getContext()
+	if (!context.hasAcl) {
+		throw new Error('No ACL configuration is available')
+	}
+
+	const { data, type } = await getAcl()
+	return {
+		hasAclWrite: context.hasAclWrite,
+		currentAcl: data,
+		aclType: type
+	}
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+	const session = await getSession(request.headers.get('Cookie'))
+	if (!session.has('hsApiKey')) {
+		return json({ success: false }, {
+			status: 401
+		})
+	}
+
+	const context = await getContext()
+	if (!context.hasAclWrite) {
+		return json({ success: false }, {
+			status: 403
+		})
+	}
+
+	const data = await request.json() as { acl: string }
+	await patchAcl(data.acl)
+
+	if (context.hasDockerSock) {
+		await sighupHeadscale()
+	}
+
+	return json({ success: true })
+}
 
 export default function Page() {
+	const data = useLoaderData<typeof loader>()
+	const [acl, setAcl] = useState(data.currentAcl)
+
 	return (
-		<div className='w-96 mx-auto flex flex-col justify-center items-center text-center'>
-			<CubeTransparentIcon className='w-32 h-32 text-gray-500'/>
-			<p className='text-lg mt-8'>
-				Access Control Lists are currently unavailable.
-				They will be available in a future release.
+		<div>
+			{data.hasAclWrite ? undefined : (
+				<div className='mb-4'>
+					<Notice>
+						The ACL policy file is readonly to Headplane.
+						You will not be able to make changes here.
+					</Notice>
+				</div>
+			)}
+
+			<h1 className='text-2xl font-medium mb-4'>
+				Access Control List (ACL)
+			</h1>
+
+			<p className='mb-4 max-w-prose'>
+				The ACL file is used to define the access control rules for your network.
+				You can find more information about the ACL file in the Tailscale documentation.
+				{' '}
+				<a
+					target='_blank'
+					rel='noreferrer'
+					href='https://tailscale.com/kb/1018/acls'
+					className='text-blue-500 dark:text-blue-400 hover:underline'
+				>
+					More information
+				</a>
 			</p>
+
+			<Tab.Group>
+				<Tab.List className={clsx(
+					'flex border-t border-gray-200 dark:border-gray-700',
+					'w-fit rounded-t-lg overflow-hidden',
+					'text-gray-400 dark:text-gray-500'
+				)}
+				>
+					<Tab as={Fragment}>
+						{({ selected }) => (
+							<button
+								type='button'
+								className={clsx(
+									'px-4 py-2 rounded-tl-lg',
+									'focus:outline-none flex items-center gap-2',
+									'border-l border-gray-200 dark:border-gray-700',
+									selected ? 'text-gray-900 dark:text-gray-100' : ''
+								)}
+							>
+								<PencilSquareIcon className='w-5 h-5'/>
+								<p>
+									Edit file
+								</p>
+							</button>
+						)}
+					</Tab>
+					<Tab as={Fragment}>
+						{({ selected }) => (
+							<button
+								type='button'
+								className={clsx(
+									'px-4 py-2',
+									'focus:outline-none flex items-center gap-2',
+									'border-x border-gray-200 dark:border-gray-700',
+									selected ? 'text-gray-900 dark:text-gray-100' : ''
+								)}
+							>
+								<EyeIcon className='w-5 h-5'/>
+								<p>
+									Preview changes
+								</p>
+							</button>
+						)}
+					</Tab>
+					<Tab as={Fragment}>
+						{({ selected }) => (
+							<button
+								type='button'
+								className={clsx(
+									'px-4 py-2 rounded-tr-lg',
+									'focus:outline-none flex items-center gap-2',
+									'border-r border-gray-200 dark:border-gray-700',
+									selected ? 'text-gray-900 dark:text-gray-100' : ''
+								)}
+							>
+								<BeakerIcon className='w-5 h-5'/>
+								<p>
+									Preview rules
+								</p>
+							</button>
+						)}
+					</Tab>
+				</Tab.List>
+				<Tab.Panels>
+					<Tab.Panel>
+						<ClientOnly fallback={<Fallback acl={acl} where='server'/>}>
+							{() => (
+								<Editor data={data} acl={acl} setAcl={setAcl} mode='edit'/>
+							)}
+						</ClientOnly>
+					</Tab.Panel>
+					<Tab.Panel>
+						<ClientOnly fallback={<Fallback acl={acl} where='server'/>}>
+							{() => (
+								<Editor data={data} acl={acl} setAcl={setAcl} mode='diff'/>
+							)}
+						</ClientOnly>
+					</Tab.Panel>
+					<Tab.Panel>
+						<div
+							className={clsx(
+								'border border-gray-200 dark:border-gray-700',
+								'rounded-b-lg rounded-tr-lg mb-4 overflow-hidden',
+								'p-16 flex flex-col items-center justify-center'
+							)}
+						>
+							<CubeTransparentIcon className='w-24 h-24 text-gray-300 dark:text-gray-500'/>
+							<p className='w-1/2 text-center mt-4'>
+								The Preview rules is very much still a work in progress.
+								It is a bit complicated to implement right now but hopefully it will be available soon.
+							</p>
+						</div>
+					</Tab.Panel>
+				</Tab.Panels>
+			</Tab.Group>
 		</div>
 	)
 }

app/routes/_data.dns._index/magic.tsx

@@ -1,9 +1,7 @@
-import { Dialog } from '@headlessui/react'
 import { useFetcher } from '@remix-run/react'
-import clsx from 'clsx'
-import { useState } from 'react'
 
 import Button from '~/components/Button'
+import useModal from '~/components/Modal'
 import Spinner from '~/components/Spinner'
 
 type Properties = {
@@ -13,8 +11,22 @@ type Properties = {
 }
 
 export default function Modal({ isEnabled, disabled }: Properties) {
-	const [isOpen, setIsOpen] = useState(false)
 	const fetcher = useFetcher()
+	const { Modal, open } = useModal({
+		title: `${isEnabled ? 'Disable' : 'Enable'} Magic DNS`,
+		variant: isEnabled ? 'danger' : 'confirm',
+		buttonText: `${isEnabled ? 'Disable' : 'Enable'} Magic DNS`,
+		description: 'Devices will no longer be accessible via your tailnet domain. The search domain will also be disabled.',
+		onConfirm: () => {
+			fetcher.submit({
+				// eslint-disable-next-line @typescript-eslint/naming-convention
+				'dns_config.magic_dns': !isEnabled
+			}, {
+				method: 'PATCH',
+				encType: 'application/json'
+			})
+		}
+	})
 
 	return (
 		<>
@@ -23,7 +35,7 @@ export default function Modal({ isEnabled, disabled }: Properties) {
 				className='w-fit text-sm'
 				disabled={disabled}
 				onClick={() => {
-					setIsOpen(true)
+					open()
 				}}
 			>
 				{fetcher.state === 'idle' ? undefined : (
@@ -31,46 +43,7 @@ export default function Modal({ isEnabled, disabled }: Properties) {
 				)}
 				{isEnabled ? 'Disable' : 'Enable'} Magic DNS
 			</Button>
-			<Dialog
-				className='relative z-50'
-				open={isOpen} onClose={() => {
-					setIsOpen(false)
-				}}
-			>
-				<div className='fixed inset-0 bg-black/30' aria-hidden='true'/>
-				<div className='fixed inset-0 flex w-screen items-center justify-center'>
-					<Dialog.Panel className='bg-white rounded-lg p-4 w-full max-w-md'>
-						<Dialog.Title className='text-lg font-bold'>
-							{isEnabled ? 'Disable' : 'Enable'} Magic DNS
-						</Dialog.Title>
-						<Dialog.Description className='text-gray-500 dark:text-gray-400'>
-							Devices will no longer be accessible via your tailnet domain.
-							The search domain will also be disabled.
-						</Dialog.Description>
-						<Button
-							variant='emphasized'
-							type='submit'
-							className={clsx(
-								'w-full mt-12',
-								isEnabled ? 'bg-red-800 dark:bg-red-500' : ''
-							)}
-							onClick={() => {
-								fetcher.submit({
-									// eslint-disable-next-line @typescript-eslint/naming-convention
-									'dns_config.magic_dns': !isEnabled
-								}, {
-									method: 'PATCH',
-									encType: 'application/json'
-								})
-
-								setIsOpen(false)
-							}}
-						>
-							{isEnabled ? 'Disable' : 'Enable'}
-						</Button>
-					</Dialog.Panel>
-				</div>
-			</Dialog>
+			{Modal}
 		</>
 	)
 }

app/routes/_data.dns._index/rename.tsx

@@ -7,6 +7,7 @@ import { useState } from 'react'
 import Button from '~/components/Button'
 import Code from '~/components/Code'
 import Input from '~/components/Input'
+import useModal from '~/components/Modal'
 import Spinner from '~/components/Spinner'
 
 type Properties = {
@@ -16,9 +17,31 @@ type Properties = {
 }
 
 export default function Modal({ name, disabled }: Properties) {
-	const [isOpen, setIsOpen] = useState(false)
 	const [newName, setNewName] = useState(name)
 	const fetcher = useFetcher()
+	const { Modal, open } = useModal({
+		title: 'Rename Tailnet',
+		description: 'Keep in mind that changing this can lead to all sorts of unexpected behavior and may break existing devices in your tailnet.',
+		buttonText: 'Rename',
+		children: (
+			<Input
+				type='text'
+				className='font-mono mt-4'
+				value={newName}
+				onChange={event => {
+					setNewName(event.target.value)
+				}}
+			/>
+		),
+		onConfirm: () => {
+			fetcher.submit({
+				'dns_config.base_domain': newName
+			}, {
+				method: 'PATCH',
+				encType: 'application/json'
+			})
+		}
+	})
 
 	return (
 		<div className='flex flex-col w-2/3'>
@@ -47,7 +70,7 @@ export default function Modal({ name, disabled }: Properties) {
 				className='text-sm w-fit'
 				disabled={disabled}
 				onClick={() => {
-					setIsOpen(true)
+					open()
 				}}
 			>
 				{fetcher.state === 'idle' ? undefined : (
@@ -55,50 +78,7 @@ export default function Modal({ name, disabled }: Properties) {
 				)}
 				Rename Tailnet...
 			</Button>
-			<Dialog
-				className='relative z-50'
-				open={isOpen} onClose={() => {
-					setIsOpen(false)
-				}}
-			>
-				<div className='fixed inset-0 bg-black/30' aria-hidden='true'/>
-				<div className='fixed inset-0 flex w-screen items-center justify-center'>
-					<Dialog.Panel className='bg-white rounded-lg p-4 w-full max-w-md dark:bg-zinc-800'>
-						<Dialog.Title className='text-lg font-bold'>
-							Rename {name}
-						</Dialog.Title>
-						<Dialog.Description className='text-gray-500 dark:text-gray-400'>
-							Keep in mind that changing this can lead to all sorts
-							of unexpected behavior and may break existing devices
-							in your tailnet.
-						</Dialog.Description>
-						<Input
-							type='text'
-							className='font-mono mt-4'
-							value={newName}
-							onChange={event => {
-								setNewName(event.target.value)
-							}}
-						/>
-						<button
-							type='submit'
-							className='rounded-lg py-2 bg-gray-800 text-white w-full mt-2'
-							onClick={() => {
-								fetcher.submit({
-									'dns_config.base_domain': newName
-								}, {
-									method: 'PATCH',
-									encType: 'application/json'
-								})
-
-								setIsOpen(false)
-							}}
-						>
-							Rename
-						</button>
-					</Dialog.Panel>
-				</div>
-			</Dialog>
+			{Modal}
 		</div>
 	)
 }

app/routes/_data.dns._index/route.tsx

@@ -12,6 +12,7 @@ import Spinner from '~/components/Spinner'
 import TableList from '~/components/TableList'
 import { getConfig, getContext, patchConfig } from '~/utils/config'
 import { restartHeadscale } from '~/utils/docker'
+import { getSession } from '~/utils/sessions'
 import { useLiveData } from '~/utils/useLiveData'
 
 import Domains from './domains'
@@ -45,9 +46,18 @@ export async function loader() {
 }
 
 export async function action({ request }: ActionFunctionArgs) {
+	const session = await getSession(request.headers.get('Cookie'))
+	if (!session.has('hsApiKey')) {
+		return json({ success: false }, {
+			status: 401
+		})
+	}
+
 	const context = await getContext()
 	if (!context.hasConfigWrite) {
-		return json({ success: false })
+		return json({ success: false }, {
+			status: 403
+		})
 	}
 
 	const data = await request.json() as Record<string, unknown>

app/routes/_data.machines._index.tsx

@@ -1,98 +0,0 @@
-/* eslint-disable unicorn/filename-case */
-import { ClipboardIcon } from '@heroicons/react/24/outline'
-import { type LoaderFunctionArgs } from '@remix-run/node'
-import { Link, useLoaderData } from '@remix-run/react'
-import clsx from 'clsx'
-import { toast } from 'react-hot-toast/headless'
-
-import StatusCircle from '~/components/StatusCircle'
-import { type Machine } from '~/types'
-import { pull } from '~/utils/headscale'
-import { getSession } from '~/utils/sessions'
-import { useLiveData } from '~/utils/useLiveData'
-
-export async function loader({ request }: LoaderFunctionArgs) {
-	const session = await getSession(request.headers.get('Cookie'))
-
-	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	const data = await pull<{ nodes: Machine[] }>('v1/node', session.get('hsApiKey')!)
-	return data.nodes
-}
-
-export default function Page() {
-	const data = useLoaderData<typeof loader>()
-	useLiveData({ interval: 3000 })
-
-	return (
-		<table className='table-auto w-full rounded-lg'>
-			<thead className='text-gray-500 dark:text-gray-400'>
-				<tr className='text-left uppercase text-sm font-bold'>
-					<th className='pl-4'>Name</th>
-					<th>IP Addresses</th>
-					<th>Last Seen</th>
-				</tr>
-			</thead>
-			<tbody className={clsx(
-				'divide-y divide-zinc-200 dark:divide-zinc-700 align-top',
-				'border-t border-zinc-200 dark:border-zinc-700'
-			)}
-			>
-				{data.map(machine => {
-					const tags = [...machine.forcedTags, ...machine.validTags]
-
-					return (
-						<tr key={machine.id} className='hover:bg-zinc-100 dark:hover:bg-zinc-800'>
-							<td className='py-2 pl-4'>
-								<Link to={`/machines/${machine.id}`}>
-									<h1>{machine.givenName}</h1>
-									<span className='text-sm font-mono text-gray-500 dark:text-gray-400'>
-										{machine.name}
-									</span>
-									<div className='flex gap-1 mt-1'>
-										{tags.map(tag => (
-											<span key={tag} className='text-xs bg-gray-200 text-gray-600 rounded-sm px-1 py-0.5'>
-												{tag}
-											</span>
-										))}
-									</div>
-								</Link>
-							</td>
-							<td className='pt-2 pb-4 font-mono text-gray-600 dark:text-gray-300'>
-								{machine.ipAddresses.map((ip, index) => (
-									<button
-										key={ip}
-										type='button'
-										className='flex items-center gap-x-1 w-full'
-										onClick={async () => {
-											await navigator.clipboard.writeText(ip)
-											toast('Copied IP address to clipboard')
-										}}
-									>
-										<span className={clsx(index === 0 ? 'text-gray-600 dark:text-gray-300' : 'text-gray-400 dark:text-gray-500')}>
-											{ip}
-										</span>
-										<ClipboardIcon className='text-gray-400 dark:text-gray-500 w-4 h-4'/>
-									</button>
-								))}
-							</td>
-							<td className='py-2'>
-								<span
-									className='flex items-center gap-x-1 text-sm text-gray-500 dark:text-gray-400'
-								>
-									<StatusCircle isOnline={machine.online} className='w-4 h-4'/>
-									<p>
-										{machine.online
-											? 'Connected'
-											: new Date(
-												machine.lastSeen
-											).toLocaleString()}
-									</p>
-								</span>
-							</td>
-						</tr>
-					)
-				})}
-			</tbody>
-		</table>
-	)
-}

app/routes/_data.machines._index/machine.tsx

@@ -0,0 +1,204 @@
+import { ChevronDownIcon, ClipboardIcon, EllipsisHorizontalIcon } from '@heroicons/react/24/outline'
+import { type FetcherWithComponents, Link } from '@remix-run/react'
+import clsx from 'clsx'
+import toast from 'react-hot-toast/headless'
+
+import Dropdown from '~/components/Dropdown'
+import type { OpenFunction } from '~/components/Modal'
+import StatusCircle from '~/components/StatusCircle'
+import { type Machine } from '~/types'
+
+type MachineProperties = {
+	readonly machine: Machine;
+	readonly open: OpenFunction;
+	readonly fetcher: FetcherWithComponents<unknown>;
+	readonly magic?: string;
+}
+
+export default function MachineRow({ machine, open, fetcher, magic }: MachineProperties) {
+	const tags = [...machine.forcedTags, ...machine.validTags]
+	return (
+		<tr
+			key={machine.id}
+			className='hover:bg-zinc-100 dark:hover:bg-zinc-800 group'
+		>
+			<td className='pl-0.5 py-2'>
+				<Link
+					to={`/machines/${machine.id}`}
+					className='group/link h-full'
+				>
+					<p className={clsx(
+						'font-semibold leading-snug',
+						'group-hover/link:text-blue-600',
+						'group-hover/link:dark:text-blue-400'
+					)}
+					>
+						{machine.givenName}
+					</p>
+					<p className='text-sm text-gray-400 font-mono'>
+						{machine.name}
+					</p>
+					<div className='flex gap-1 mt-1'>
+						{tags.map(tag => (
+							<span
+								key={tag}
+								className={clsx(
+									'text-xs rounded-sm px-1 py-0.5',
+									'bg-gray-100 dark:bg-zinc-700',
+									'text-gray-600 dark:text-gray-300'
+								)}
+							>
+								{tag}
+							</span>
+						))}
+					</div>
+				</Link>
+			</td>
+			<td className='py-2'>
+				<div className='flex items-center gap-x-1'>
+					{machine.ipAddresses[0]}
+					<Dropdown
+						width='w-max'
+						button={(
+							<ChevronDownIcon className='w-4 h-4'/>
+						)}
+					>
+						{machine.ipAddresses.map(ip => (
+							<Dropdown.Item key={ip}>
+								<button
+									type='button'
+									className={clsx(
+										'flex items-center gap-x-1.5 text-sm',
+										'justify-between w-full'
+									)}
+									onClick={async () => {
+										await navigator.clipboard.writeText(ip)
+										toast('Copied IP address to clipboard')
+									}}
+								>
+									{ip}
+									<ClipboardIcon className='w-3 h-3'/>
+								</button>
+							</Dropdown.Item>
+						))}
+						{magic ? (
+							<Dropdown.Item>
+								<button
+									type='button'
+									className={clsx(
+										'flex items-center gap-x-1.5 text-sm',
+										'justify-between w-full break-keep'
+									)}
+									onClick={async () => {
+										const ip = `${machine.givenName}.${machine.user.name}.${magic}`
+										await navigator.clipboard.writeText(ip)
+										toast('Copied hostname to clipboard')
+									}}
+								>
+									{machine.givenName}.{machine.user.name}.{magic}
+									<ClipboardIcon className='w-3 h-3'/>
+								</button>
+							</Dropdown.Item>
+						) : undefined}
+					</Dropdown>
+				</div>
+			</td>
+			<td className='py-2'>
+				<span
+					className='flex items-center gap-x-1 text-sm text-gray-500 dark:text-gray-400'
+				>
+					<StatusCircle isOnline={machine.online} className='w-4 h-4'/>
+					<p>
+						{machine.online
+							? 'Connected'
+							: new Date(
+								machine.lastSeen
+							).toLocaleString()}
+					</p>
+				</span>
+			</td>
+			<td className='py-2 pr-0.5'>
+				<div className={clsx(
+					'border border-transparent rounded-lg py-0.5 w-10',
+					'group-hover:border-gray-200 dark:group-hover:border-zinc-700'
+				)}
+				>
+					<Dropdown
+						className='left-1/4'
+						width='w-48'
+						button={(
+							<EllipsisHorizontalIcon className='w-5 h-5'/>
+						)}
+					>
+						<Dropdown.Item variant='static'>
+							<button
+								disabled
+								type='button'
+								className='text-left w-full opacity-50'
+								onClick={() => {
+									open()
+								}}
+							>
+								Edit machine name
+							</button>
+						</Dropdown.Item>
+						<Dropdown.Item variant='static'>
+							<button
+								disabled
+								type='button'
+								className='text-left w-full opacity-50'
+								onClick={() => {
+									open()
+								}}
+							>
+								Edit route settings
+							</button>
+						</Dropdown.Item>
+						<Dropdown.Item variant='static'>
+							<button
+								disabled
+								type='button'
+								className='text-left w-full opacity-50'
+								onClick={() => {
+									open()
+								}}
+							>
+								Edit ACL tags
+							</button>
+						</Dropdown.Item>
+						<Dropdown.Item>
+							<button
+								type='button'
+								className='text-left text-red-700 w-full'
+								onClick={() => {
+									open({
+										title: 'Remove Machine',
+										description: [
+											'This action is irreversible and will disconnect the machine from the Headscale server.',
+											'All data associated with this machine including ACLs and tags will be lost.'
+										].join('\n'),
+										variant: 'danger',
+										buttonText: 'Remove',
+										onConfirm: () => {
+											fetcher.submit(
+												{
+													id: machine.id
+												},
+												{
+													method: 'DELETE',
+													encType: 'application/json'
+												}
+											)
+										}
+									})
+								}}
+							>
+								Remove
+							</button>
+						</Dropdown.Item>
+					</Dropdown>
+				</div>
+			</td>
+		</tr>
+	)
+}

app/routes/_data.machines._index/route.tsx

@@ -0,0 +1,121 @@
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
+import { InformationCircleIcon } from '@heroicons/react/24/outline'
+import { type ActionFunctionArgs, json, type LoaderFunctionArgs } from '@remix-run/node'
+import { useFetcher, useLoaderData } from '@remix-run/react'
+import clsx from 'clsx'
+import { Button, Tooltip, TooltipTrigger } from 'react-aria-components'
+
+import Code from '~/components/Code'
+import useModal from '~/components/Modal'
+import { type Machine } from '~/types'
+import { getConfig, getContext } from '~/utils/config'
+import { del, pull } from '~/utils/headscale'
+import { getSession } from '~/utils/sessions'
+import { useLiveData } from '~/utils/useLiveData'
+
+import MachineRow from './machine'
+
+export async function loader({ request }: LoaderFunctionArgs) {
+	const session = await getSession(request.headers.get('Cookie'))
+
+	const data = await pull<{ nodes: Machine[] }>('v1/node', session.get('hsApiKey')!)
+	const context = await getContext()
+
+	let magic: string | undefined
+	if (context.hasConfig) {
+		const config = await getConfig()
+		if (config.dns_config.magic_dns) {
+			magic = config.dns_config.base_domain
+		}
+	}
+
+	return {
+		nodes: data.nodes,
+		magic
+	}
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+	const data = await request.json() as { id?: string }
+	if (!data.id) {
+		return json({ message: 'No ID provided' }, {
+			status: 400
+		})
+	}
+
+	const session = await getSession(request.headers.get('Cookie'))
+	if (!session.has('hsApiKey')) {
+		return json({ message: 'Unauthorized' }, {
+			status: 401
+		})
+	}
+
+	await del(`v1/node/${data.id}`, session.get('hsApiKey')!)
+	return json({ message: 'Machine removed' })
+}
+
+export default function Page() {
+	useLiveData({ interval: 3000 })
+	const data = useLoaderData<typeof loader>()
+	const fetcher = useFetcher()
+
+	const { Modal, open } = useModal()
+
+	return (
+		<>
+			{Modal}
+			<h1 className='text-2xl font-medium mb-4'>Machines</h1>
+			<table className='table-auto w-full rounded-lg'>
+				<thead className='text-gray-500 dark:text-gray-400'>
+					<tr className='text-left uppercase text-xs font-bold px-0.5'>
+						<th className='pb-2'>Name</th>
+						<th className='pb-2'>
+							<div className='flex items-center gap-x-1'>
+								Addresses
+								{data.magic ? (
+									<TooltipTrigger delay={0}>
+										<Button>
+											<InformationCircleIcon className='w-4 h-4 text-gray-400'/>
+										</Button>
+										<Tooltip className={clsx(
+											'text-sm max-w-xs p-2 rounded-lg mb-2',
+											'bg-white dark:bg-zinc-800',
+											'border border-gray-200 dark:border-zinc-700'
+										)}
+										>
+											Since MagicDNS is enabled, you can access devices
+											based on their name and also at
+											{' '}
+											<Code>
+												[name].[user].{data.magic}
+											</Code>
+										</Tooltip>
+									</TooltipTrigger>
+								) : undefined}
+							</div>
+						</th>
+						<th className='pb-2'>Last Seen</th>
+					</tr>
+				</thead>
+				<tbody className={clsx(
+					'divide-y divide-zinc-200 dark:divide-zinc-700 align-top',
+					'border-t border-zinc-200 dark:border-zinc-700'
+				)}
+				>
+					{data.nodes.map(machine => (
+						<MachineRow
+							key={machine.id}
+							// Typescript isn't smart enough yet
+							machine={machine as unknown as Machine}
+							fetcher={fetcher}
+							open={open}
+							magic={data.magic}
+						/>
+					))}
+				</tbody>
+			</table>
+		</>
+	)
+}

app/routes/_data.tsx

@@ -1,10 +1,8 @@
-import { Menu, Transition } from '@headlessui/react'
 import { Cog8ToothIcon, CpuChipIcon, GlobeAltIcon, LockClosedIcon, ServerStackIcon, UserCircleIcon, UsersIcon } from '@heroicons/react/24/outline'
 import { type LoaderFunctionArgs, redirect } from '@remix-run/node'
 import { Form, Outlet, useLoaderData, useRouteError } from '@remix-run/react'
-import clsx from 'clsx'
-import { Fragment } from 'react/jsx-runtime'
 
+import Dropdown from '~/components/Dropdown'
 import { ErrorPopup } from '~/components/Error'
 import TabLink from '~/components/TabLink'
 import { getContext } from '~/utils/config'
@@ -47,7 +45,7 @@ export default function Layout() {
 	const data = useLoaderData<typeof loader>()
 	return (
 		<>
-			<header className='mb-16 bg-gray-800 text-white dark:bg-gray-700'>
+			<header className='mb-6 bg-gray-800 text-white dark:bg-gray-700'>
 				<nav className='container mx-auto'>
 					<div className='flex items-center justify-between mb-8 pt-4'>
 						<div className='flex items-center gap-x-2'>
@@ -64,56 +62,21 @@ export default function Layout() {
 							<a href='https://github.com/juanfont/headscale' target='_blank' rel='noreferrer' className='text-gray-300 hover:text-white'>
 								Headscale
 							</a>
-							<div className='relative'>
-								<Menu>
-									<Menu.Button>
-										<UserCircleIcon className='w-8 h-8'/>
-									</Menu.Button>
-									<Transition
-										as={Fragment}
-										enter='transition ease-out duration-100'
-										enterFrom='transform opacity-0 scale-95'
-										enterTo='transform opacity-100 scale-100'
-										leave='transition ease-in duration-75'
-										leaveFrom='transform opacity-100 scale-100'
-										leaveTo='transform opacity-0 scale-95'
-									>
-										<Menu.Items className={clsx(
-											'absolute right-0 w-36 mt-2 rounded-md',
-											'text-gray-700 dark:text-gray-300',
-											'bg-white dark:bg-zinc-800 text-right',
-											'overflow-hidden',
-											'border border-gray-200 dark:border-zinc-500',
-											'divide-y divide-gray-200 dark:divide-zinc-500'
-										)}
-										>
-											<Menu.Item>
-												{() => (
-													<div className='px-4 py-2'>
-														<p>{data.user?.name}</p>
-														<p>{data.user?.email}</p>
-													</div>
-												)}
-											</Menu.Item>
-											<Menu.Item>
-												{({ active }) => (
-													<Form method='POST' action='/logout'>
-														<button
-															type='submit'
-															className={clsx(
-																'px-4 py-2 w-full text-right',
-																active ? 'bg-gray-200 dark:bg-zinc-500' : ''
-															)}
-														>
-															Logout
-														</button>
-													</Form>
-												)}
-											</Menu.Item>
-										</Menu.Items>
-									</Transition>
-								</Menu>
-							</div>
+							<Dropdown
+								button={<UserCircleIcon className='w-8 h-8'/>}
+							>
+								<Dropdown.Item variant='static'>
+									<p className='font-bold'>{data.user?.name}</p>
+									<p>{data.user?.email}</p>
+								</Dropdown.Item>
+								<Dropdown.Item className='text-red-700 cursor-pointer'>
+									<Form method='POST' action='/logout'>
+										<button type='submit' className='w-full'>
+											Logout
+										</button>
+									</Form>
+								</Dropdown.Item>
+							</Dropdown>
 						</div>
 					</div>
 					<div className='flex items-center gap-x-4'>

app/routes/login.tsx

@@ -7,6 +7,7 @@ import Card from '~/components/Card'
 import Code from '~/components/Code'
 import Input from '~/components/Input'
 import { type Key } from '~/types'
+import { getContext } from '~/utils/config'
 import { pull } from '~/utils/headscale'
 import { startOidc } from '~/utils/oidc'
 import { commitSession, getSession } from '~/utils/sessions'
@@ -22,9 +23,10 @@ export async function loader({ request }: LoaderFunctionArgs) {
 		})
 	}
 
-	const issuer = process.env.OIDC_ISSUER
-	const id = process.env.OIDC_CLIENT_ID
-	const secret = process.env.OIDC_CLIENT_SECRET
+	const context = await getContext()
+	const issuer = context.oidcConfig?.issuer
+	const id = context.oidcConfig?.client
+	const secret = context.oidcConfig?.secret
 	const normal = process.env.DISABLE_API_KEY_LOGIN
 
 	if (issuer && (!id || !secret)) {
@@ -50,10 +52,14 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
 export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData()
-	const oidcStart = String(formData.get('oidc-start'))
+	const oidcStart = formData.get('oidc-start')
+
 	if (oidcStart) {
-		const issuer = process.env.OIDC_ISSUER
-		const id = process.env.OIDC_CLIENT_ID
+		const context = await getContext()
+		const issuer = context.oidcConfig?.issuer
+		const id = context.oidcConfig?.client
+
+		// We know it exists here because this action only happens on OIDC
 		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 		return startOidc(issuer!, id!, request)
 	}

app/routes/oidc.callback.tsx

@@ -1,15 +1,15 @@
 import { type LoaderFunctionArgs } from '@remix-run/node'
 
+import { getContext } from '~/utils/config'
 import { finishOidc } from '~/utils/oidc'
 
 export async function loader({ request }: LoaderFunctionArgs) {
-	const issuer = process.env.OIDC_ISSUER
-	const id = process.env.OIDC_CLIENT_ID
-	const secret = process.env.OIDC_CLIENT_SECRET
+	const context = await getContext()
+	const oidc = context.oidcConfig
 
-	if (!issuer || !id || !secret) {
+	if (!oidc) {
 		throw new Error('An invalid OIDC configuration was provided')
 	}
 
-	return finishOidc(issuer, id, secret, request)
+	return finishOidc(oidc.issuer, oidc.client, oidc.secret, request)
 }

app/utils/config.ts

@@ -2,7 +2,7 @@ import { type FSWatcher, watch } from 'node:fs'
 import { access, constants, readFile, writeFile } from 'node:fs/promises'
 import { resolve } from 'node:path'
 
-import { type Document, parseDocument } from 'yaml'
+import { type Document, parse, parseDocument } from 'yaml'
 
 type Duration = `${string}s` | `${string}h` | `${string}m` | `${string}d` | `${string}y`
 
@@ -131,6 +131,31 @@ export async function getConfig(force = false) {
 	return config.toJSON() as Config
 }
 
+export async function getAcl() {
+	let path = process.env.ACL_FILE
+	if (!path) {
+		try {
+			const config = await getConfig()
+			path = config.acl_policy_path
+		} catch {}
+	}
+
+	if (!path) {
+		return { data: '', type: 'json' }
+	}
+
+	const data = await readFile(path, 'utf8')
+
+	// Naive check for YAML over JSON
+	// This is because JSON.parse doesn't support comments
+	try {
+		parse(data)
+		return { data, type: 'yaml' }
+	} catch {
+		return { data, type: 'json' }
+	}
+}
+
 // This is so obscenely dangerous, please have a check around it
 export async function patchConfig(partial: Record<string, unknown>) {
 	for (const [key, value] of Object.entries(partial)) {
@@ -141,6 +166,22 @@ export async function patchConfig(partial: Record<string, unknown>) {
 	await writeFile(path, config.toString(), 'utf8')
 }
 
+export async function patchAcl(data: string) {
+	let path = process.env.ACL_FILE
+	if (!path) {
+		try {
+			const config = await getConfig()
+			path = config.acl_policy_path
+		} catch {}
+	}
+
+	if (!path) {
+		throw new Error('No ACL file defined')
+	}
+
+	await writeFile(path, data, 'utf8')
+}
+
 let watcher: FSWatcher
 
 export function registerConfigWatcher() {
@@ -161,6 +202,12 @@ type Context = {
 	hasConfigWrite: boolean;
 	hasAcl: boolean;
 	hasAclWrite: boolean;
+	headscaleUrl: string;
+	oidcConfig?: {
+		issuer: string;
+		client: string;
+		secret: string;
+	};
 }
 
 export let context: Context
@@ -172,13 +219,55 @@ export async function getContext() {
 			hasConfig: await hasConfig(),
 			hasConfigWrite: await hasConfigW(),
 			hasAcl: await hasAcl(),
-			hasAclWrite: await hasAclW()
+			hasAclWrite: await hasAclW(),
+			headscaleUrl: await getHeadscaleUrl(),
+			oidcConfig: await getOidcConfig()
 		}
 	}
 
 	return context
 }
 
+async function getOidcConfig() {
+	// Check for the OIDC environment variables first
+	let issuer = process.env.OIDC_ISSUER
+	let client = process.env.OIDC_CLIENT_ID
+	let secret = process.env.OIDC_CLIENT_SECRET
+
+	if (!issuer || !client || !secret) {
+		const config = await getConfig()
+		issuer = config.oidc?.issuer
+		client = config.oidc?.client_id
+		secret = config.oidc?.client_secret
+	}
+
+	// If atleast one is defined but not all 3, throw an error
+	if ((issuer || client || secret) && !(issuer && client && secret)) {
+		throw new Error('OIDC configuration is incomplete')
+	}
+
+	if (!issuer || !client || !secret) {
+		return
+	}
+
+	return { issuer, client, secret }
+}
+
+async function getHeadscaleUrl() {
+	if (process.env.HEADSCALE_URL) {
+		return process.env.HEADSCALE_URL
+	}
+
+	try {
+		const config = await getConfig()
+		if (config.server_url) {
+			return config.server_url
+		}
+	} catch {}
+
+	return ''
+}
+
 async function checkSock() {
 	try {
 		await access('/var/run/docker.sock', constants.R_OK)
@@ -218,8 +307,6 @@ async function hasAcl() {
 			const config = await getConfig()
 			path = config.acl_policy_path
 		} catch {}
-
-		return false
 	}
 
 	if (!path) {
@@ -230,7 +317,9 @@ async function hasAcl() {
 		path = resolve(path)
 		await access(path, constants.R_OK)
 		return true
-	} catch {}
+	} catch (error) {
+		console.log('Cannot acquire read access to ACL file', error)
+	}
 
 	return false
 }
@@ -242,8 +331,6 @@ async function hasAclW() {
 			const config = await getConfig()
 			path = config.acl_policy_path
 		} catch {}
-
-		return false
 	}
 
 	if (!path) {
@@ -254,7 +341,10 @@ async function hasAclW() {
 		path = resolve(path)
 		await access(path, constants.W_OK)
 		return true
-	} catch {}
+	} catch (error) {
+		console.log('Cannot acquire read access to ACL file', error)
+	}
 
 	return false
 }
+

app/utils/docker.ts

@@ -8,6 +8,31 @@ import { Client } from 'undici'
 import { getContext } from './config'
 import { pull } from './headscale'
 
+export async function sighupHeadscale() {
+	const context = await getContext()
+	if (!context.hasDockerSock) {
+		return
+	}
+
+	if (!process.env.HEADSCALE_CONTAINER) {
+		throw new Error('HEADSCALE_CONTAINER is not set')
+	}
+
+	const client = new Client('http://localhost', {
+		socketPath: '/var/run/docker.sock'
+	})
+
+	const container = process.env.HEADSCALE_CONTAINER
+	const response = await client.request({
+		method: 'POST',
+		path: `/v1.30/containers/${container}/kill?signal=SIGHUP`
+	})
+
+	if (!response.statusCode || response.statusCode !== 204) {
+		throw new Error('Failed to send SIGHUP to Headscale')
+	}
+}
+
 export async function restartHeadscale() {
 	const context = await getContext()
 	if (!context.hasDockerSock) {

app/utils/headscale.ts

@@ -1,3 +1,5 @@
+import { getContext } from './config'
+
 export class HeadscaleError extends Error {
 	status: number
 
@@ -15,9 +17,9 @@ export class FatalError extends Error {
 	}
 }
 
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 export async function pull<T>(url: string, key: string) {
-	const prefix = process.env.HEADSCALE_URL!
+	const context = await getContext()
+	const prefix = context.headscaleUrl
 	const response = await fetch(`${prefix}/api/${url}`, {
 		headers: {
 			Authorization: `Bearer ${key}`
@@ -32,7 +34,8 @@ export async function pull<T>(url: string, key: string) {
 }
 
 export async function post<T>(url: string, key: string, body?: unknown) {
-	const prefix = process.env.HEADSCALE_URL!
+	const context = await getContext()
+	const prefix = context.headscaleUrl
 	const response = await fetch(`${prefix}/api/${url}`, {
 		method: 'POST',
 		body: body ? JSON.stringify(body) : undefined,
@@ -48,3 +51,19 @@ export async function post<T>(url: string, key: string, body?: unknown) {
 	return (response.json() as Promise<T>)
 }
 
+export async function del<T>(url: string, key: string) {
+	const context = await getContext()
+	const prefix = context.headscaleUrl
+	const response = await fetch(`${prefix}/api/${url}`, {
+		method: 'DELETE',
+		headers: {
+			Authorization: `Bearer ${key}`
+		}
+	})
+
+	if (!response.ok) {
+		throw new HeadscaleError(await response.text(), response.status)
+	}
+
+	return (response.json() as Promise<T>)
+}

compose.yaml

@@ -1,3 +1,7 @@
+# THIS IS A DEVELOPER CONFIGURATION FILE
+# IT IS NOT AN EXAMPLE OF SOMETHING YOU DEPLOY
+# I ONLY USE IT FOR DEVELOPING HEADPLANE
+
 version: '3.9'
 networks:
   headplane-dev:

docs/Basic-Integration.md

@@ -44,3 +44,7 @@ services:
 
 You may also choose to run it natively with the distributed binaries on the releases page.
 You'll need to manage running this yourself, and I would recommend making a `systemd` unit.
+
+## ACL Configuration
+If you would like to get the web ACL configuration working, you'll need to pass the `ACL_FILE` environment variable.
+This should point to the path of the ACL file on the Headscale server (ie. `ACL_FILE=/etc/headscale/acl_policy.json`).

docs/Configuration.md

@@ -13,7 +13,7 @@ You can configure Headplane using environment variables.
 - **`HOST`**: The host to bind the server to (default: `0.0.0.0`).
 - **`PORT`**: The port to bind the server to (default: `3000`).
 - **`CONFIG_FILE`**: The path to the Headscale `config.yaml` (default: `/etc/headscale/config.yaml`).
-- **`ACL_FILE`**: The path to the ACL file (default: `/etc/headscale/acl_policy.json`).
+- **`ACL_FILE`**: The path to the ACL file (default: `/etc/headscale/acl_policy.json`, not needed if you have `acl_policy_path` in your config).
 - **`HEADSCALE_CONTAINER`**: The name of the Headscale container (required for Docker integration).
 
 ### SSO/OpenID Connect

package.json

@@ -11,6 +11,8 @@
 		"typecheck": "tsc"
 	},
 	"dependencies": {
+		"@codemirror/lang-json": "^6.0.1",
+		"@codemirror/lang-yaml": "^6.1.1",
 		"@dnd-kit/core": "^6.1.0",
 		"@dnd-kit/modifiers": "^7.0.0",
 		"@dnd-kit/sortable": "^8.0.0",
@@ -20,12 +22,17 @@
 		"@remix-run/node": "^2.8.1",
 		"@remix-run/react": "^2.8.1",
 		"@remix-run/serve": "^2.8.1",
+		"@uiw/codemirror-theme-github": "^4.21.25",
+		"@uiw/react-codemirror": "^4.21.25",
 		"clsx": "^2.1.0",
 		"isbot": "^4.1.0",
 		"oauth4webapi": "^2.10.3",
 		"react": "^18.2.0",
+		"react-aria-components": "^1.1.1",
+		"react-codemirror-merge": "^4.21.25",
 		"react-dom": "^18.2.0",
 		"react-hot-toast": "^2.4.1",
+		"remix-utils": "^7.6.0",
 		"undici": "^6.10.2",
 		"usehooks-ts": "^3.0.2",
 		"yaml": "^2.4.1"

tailwind.config.ts

@@ -1,9 +1,24 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import type { Config } from 'tailwindcss'
 
 export default {
 	content: ['./app/**/*.{js,jsx,ts,tsx}'],
 	theme: {
-		extend: {}
+		container: {
+			center: true,
+			padding: {
+				DEFAULT: '1rem',
+				sm: '2rem',
+				lg: '4rem',
+				xl: '5rem',
+				'2xl': '6rem'
+			}
+		},
+		extend: {
+			height: {
+				editor: 'calc(100vh - 20rem)'
+			}
+		}
 	},
 	plugins: []
 } satisfies Config

test/config.yaml

@@ -264,7 +264,7 @@ unix_socket_permission: "0777"
 # help us test it.
 # OpenID Connect
 oidc:
-  only_start_if_oidc_is_available: true
+  only_start_if_oidc_is_available: false
   issuer: "https://sso.example.com"
   client_id: "headscale"
   client_secret: "super_secret_client_secret"