fix: oidc will fail in the dev config

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/Modal.tsx

@@ -26,6 +26,8 @@ type Properties = {
 	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)

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

@@ -1,15 +1,18 @@
 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, useState } from 'react'
+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;
@@ -18,12 +21,16 @@ type EditorProperties = {
 	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)')
@@ -32,48 +39,54 @@ export default function Editor({ data, acl, setAcl, mode }: EditorProperties) {
 		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'
 			)}
 			>
-				{mode === 'edit' ? (
-					<CodeMirror
-						value={acl}
-						maxHeight='calc(100vh - 20rem)'
-						theme={light ? githubLight : githubDark}
-						extensions={[json()]}
-						readOnly={!data.hasAclWrite}
-						onChange={value => {
-							setAcl(value)
-						}}
-					/>
+				{loading ? (
+					<Fallback acl={acl} where='client'/>
 				) : (
-					<div
-						className='overflow-y-scroll'
-						style={{ height: 'calc(100vh - 20rem)' }}
-					>
-						<CodeMirrorMerge
+					mode === 'edit' ? (
+						<CodeMirror
+							value={acl}
+							className='h-editor text-sm'
 							theme={light ? githubLight : githubDark}
-							orientation='a-b'
+							extensions={[aclType]}
+							readOnly={!data.hasAclWrite}
+							onChange={value => {
+								setAcl(value)
+							}}
+						/>
+					) : (
+						<div
+							className='overflow-y-scroll'
+							style={{ height: 'calc(100vh - 20rem)' }}
 						>
-							<CodeMirrorMerge.Original
-								readOnly
-								value={data.currentAcl}
-								extensions={[json()]}
-							/>
-							<CodeMirrorMerge.Modified
-								readOnly
-								value={acl}
-								extensions={[json()]}
-							/>
-						</CodeMirrorMerge>
-					</div>
+							<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>
 

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

@@ -13,6 +13,7 @@ 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()
@@ -20,10 +21,11 @@ export async function loader() {
 		throw new Error('No ACL configuration is available')
 	}
 
-	const acl = await getAcl()
+	const { data, type } = await getAcl()
 	return {
 		hasAclWrite: context.hasAclWrite,
-		currentAcl: acl
+		currentAcl: data,
+		aclType: type
 	}
 }
 
@@ -44,7 +46,11 @@ export async function action({ request }: ActionFunctionArgs) {
 
 	const data = await request.json() as { acl: string }
 	await patchAcl(data.acl)
-	await sighupHeadscale()
+
+	if (context.hasDockerSock) {
+		await sighupHeadscale()
+	}
+
 	return json({ success: true })
 }
 
@@ -53,7 +59,7 @@ export default function Page() {
 	const [acl, setAcl] = useState(data.currentAcl)
 
 	return (
-		<div className='mx-16'>
+		<div>
 			{data.hasAclWrite ? undefined : (
 				<div className='mb-4'>
 					<Notice>
@@ -85,7 +91,7 @@ export default function Page() {
 				<Tab.List className={clsx(
 					'flex border-t border-gray-200 dark:border-gray-700',
 					'w-fit rounded-t-lg overflow-hidden',
-					'text-gray-300 dark:text-gray-500'
+					'text-gray-400 dark:text-gray-500'
 				)}
 				>
 					<Tab as={Fragment}>
@@ -145,14 +151,14 @@ export default function Page() {
 				</Tab.List>
 				<Tab.Panels>
 					<Tab.Panel>
-						<ClientOnly>
+						<ClientOnly fallback={<Fallback acl={acl} where='server'/>}>
 							{() => (
 								<Editor data={data} acl={acl} setAcl={setAcl} mode='edit'/>
 							)}
 						</ClientOnly>
 					</Tab.Panel>
 					<Tab.Panel>
-						<ClientOnly>
+						<ClientOnly fallback={<Fallback acl={acl} where='server'/>}>
 							{() => (
 								<Editor data={data} acl={acl} setAcl={setAcl} mode='diff'/>
 							)}
@@ -169,7 +175,7 @@ export default function Page() {
 							<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's a bit complicated to implement right now but hopefully it will be available soon.
+								It is a bit complicated to implement right now but hopefully it will be available soon.
 							</p>
 						</div>
 					</Tab.Panel>

app/routes/_data.machines._index.tsx

@@ -1,208 +0,0 @@
-/* eslint-disable unicorn/filename-case */
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-
-import { ClipboardIcon, EllipsisHorizontalIcon } from '@heroicons/react/24/outline'
-import { type ActionFunctionArgs, json, type LoaderFunctionArgs } from '@remix-run/node'
-import { Link, useFetcher, useLoaderData } from '@remix-run/react'
-import clsx from 'clsx'
-import { useState } from 'react'
-import { toast } from 'react-hot-toast/headless'
-
-import Dropdown from '~/components/Dropdown'
-import useModal from '~/components/Modal'
-import StatusCircle from '~/components/StatusCircle'
-import { type Machine } from '~/types'
-import { del, 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'))
-
-	const data = await pull<{ nodes: Machine[] }>('v1/node', session.get('hsApiKey')!)
-	return data.nodes
-}
-
-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}
-			<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 group'>
-								<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>
-								<td className='py-2 pr-4'>
-									<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>
-						)
-					})}
-				</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

@@ -45,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'>

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`
 
@@ -141,11 +141,19 @@ export async function getAcl() {
 	}
 
 	if (!path) {
-		return ''
+		return { data: '', type: 'json' }
 	}
 
 	const data = await readFile(path, 'utf8')
-	return data
+
+	// 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
@@ -223,8 +231,8 @@ export async function getContext() {
 async function getOidcConfig() {
 	// Check for the OIDC environment variables first
 	let issuer = process.env.OIDC_ISSUER
-	let client = process.env.OIDC_CLIENT
-	let secret = process.env.OIDC_SECRET
+	let client = process.env.OIDC_CLIENT_ID
+	let secret = process.env.OIDC_CLIENT_SECRET
 
 	if (!issuer || !client || !secret) {
 		const config = await getConfig()
@@ -339,3 +347,4 @@ async function hasAclW() {
 
 	return false
 }
+

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

@@ -12,6 +12,7 @@
 	},
 	"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",
@@ -27,6 +28,7 @@
 		"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",

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"