chore: v0.3.7

CHANGELOG.md

@@ -1,3 +1,17 @@
+### 0.3.7 (November 30, 2024)
+- Allow customizing the OIDC token endpoint auth method via `OIDC_CLIENT_SECRET_METHOD` (fixes [#57](https://github.com/tale/headplane/issues/57))
+- Added a `/healthz` endpoint for Kubernetes and other health checks (fixes [#59](https://github.com/tale/headplane/issues/59))
+- Allow `HEADSCALE_PUBLIC_URL` to be set if `HEADSCALE_URL` points to a different internal address (fixes [#60](https://github.com/tale/headplane/issues/60))
+- Fixed an issue where the copy machine registration command had a typo.
+
+### 0.3.6 (November 20, 2024)
+- Fixed an issue where select dropdowns would not scroll (fixes [#53](https://github.com/tale/headplane/issues/53))
+- Added a button to copy the machine registration command to the clipboard (fixes [#52](https://github.com/tale/headplane/issues/52))
+
+### 0.3.5 (November 8, 2024)
+- Quickfix a bug where environment variables are ignored on the server.
+- Remove a nagging error about missing cookie since that happens when signed out.
+
 ### 0.3.4 (November 7, 2024)
 - Clicking on the machine name in the users page now takes you to the machine overview page.
 - Completely rebuilt the production server to work better outside of Docker and be lighter. More specifically, we've switched from the `@remix-run/serve` package to our own custom built server.

app/components/Code.tsx

@@ -1,12 +1,45 @@
-import clsx from 'clsx'
+import { useState, HTMLProps } from 'react'
-import { type HTMLProps } from 'react'
+import { CopyIcon, CheckIcon } from '@primer/octicons-react'
 
-type Properties = HTMLProps<HTMLSpanElement>
+import { cn } from '~/utils/cn'
+import { toast } from '~/components/Toaster'
+
+interface Props extends HTMLProps<HTMLSpanElement> {
+	isCopyable?: boolean
+}
+
+export default function Code(props: Props) {
+	const [isCopied, setIsCopied] = useState(false)
 
-export default function Code(properties: Properties) {
 	return (
-		<code className={clsx('bg-gray-100 dark:bg-zinc-700 p-0.5 rounded-md', properties.className)}>
+		<>
-			{properties.children}
+			<code className={cn(
-		</code>
+				'bg-ui-100 dark:bg-ui-800 p-0.5 rounded-md',
+				props.className
+			)}>
+				{props.children}
+			</code>
+			{props.isCopyable && (
+				<button
+					className={cn(
+						'ml-1 p-1 rounded-md',
+						'bg-ui-100 dark:bg-ui-800',
+						'text-ui-500 dark:text-ui-400',
+						'inline-flex items-center justify-center'
+					)}
+					onClick={() => {
+						navigator.clipboard.writeText(props.children.join(''))
+						toast('Copied to clipboard')
+						setIsCopied(true)
+						setTimeout(() => setIsCopied(false), 1000)
+					}}
+				>
+					{isCopied ?
+						<CheckIcon className="h-3 w-3" /> :
+						<CopyIcon className="h-3 w-3" />
+					}
+				</button>
+			)}
+		</>
 	)
 }

app/components/Select.tsx

@@ -46,7 +46,7 @@ function Select(props: SelectProps) {
 				className={cn(
 					'mt-2 rounded-md w-[var(--trigger-width)]',
 					'bg-ui-100 dark:bg-ui-800 shadow-sm',
-					'overflow-hidden z-50',
+					'z-50 overflow-y-auto',
 					'border border-ui-200 dark:border-ui-600',
 					'entering:animate-in exiting:animate-out',
 					'entering:fade-in entering:zoom-in-95',
@@ -54,7 +54,7 @@ function Select(props: SelectProps) {
 					'fill-mode-forwards origin-left-right',
 				)}
 			>
-				<ListBox>
+				<ListBox orientation="vertical">
 					{props.children}
 				</ListBox>
 			</Popover>

app/routes/_data.machines._index/dialogs/new.tsx

@@ -50,10 +50,8 @@ export default function New(data: NewProps) {
 							<Dialog.Text className='mb-4'>
 								The machine key is given when you run
 								{' '}
-								<Code>
+								<Code isCopyable>
 									tailscale up --login-server=
-								</Code>
-								<Code>
 									{data.server}
 								</Code>
 								{' '}

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

@@ -46,6 +46,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 		users: users.users,
 		magic,
 		server: context.headscaleUrl,
+		publicServer: context.headscalePublicUrl,
 	}
 }
 
@@ -73,7 +74,10 @@ export default function Page() {
 						</Link>
 					</p>
 				</div>
-				<NewMachine server={data.server} users={data.users} />
+				<NewMachine
+					server={data.publicServer ?? data.server}
+					users={data.users}
+				/>
 			</div>
 			<table className="table-auto w-full rounded-lg">
 				<thead className="text-gray-500 dark:text-gray-400">

app/routes/_data.settings.auth-keys._index/route.tsx

@@ -102,7 +102,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 	return {
 		keys: preAuthKeys.flatMap(keys => keys.preAuthKeys),
 		users: users.users,
-		server: context.headscaleUrl,
+		server: context.headscalePublicUrl ?? context.headscaleUrl,
 	}
 }
 

app/routes/healthz.tsx

@@ -0,0 +1,29 @@
+import { loadContext } from '~/utils/config/headplane'
+import { HeadscaleError, pull } from '~/utils/headscale'
+import log from '~/utils/log'
+
+export async function loader() {
+	const context = await loadContext()
+
+	try {
+		// Doesn't matter, we just need a 401
+		await pull('v1/', 'wrongkey')
+	} catch (e) {
+		if (!(e instanceof HeadscaleError)) {
+			log.debug('Healthz', 'Headscale is not reachable')
+			return new Response('Headscale is not reachable', {
+				status: 500,
+				headers: {
+					'Content-Type': 'text/plain',
+				},
+			})
+		}
+	}
+
+	return new Response('OK', {
+		status: 200,
+		headers: {
+			'Content-Type': 'text/plain',
+		},
+	})
+}

app/utils/config/headplane.ts

@@ -15,6 +15,7 @@ import log from '~/utils/log'
 export interface HeadplaneContext {
 	debug: boolean
 	headscaleUrl: string
+	headscalePublicUrl?: string
 	cookieSecret: string
 	integration: IntegrationFactory | undefined
 
@@ -28,6 +29,7 @@ export interface HeadplaneContext {
 		client: string
 		secret: string
 		rootKey: string
+		method: string
 		disableKeyLogin: boolean
 	}
 }
@@ -55,12 +57,18 @@ export async function loadContext(): Promise<HeadplaneContext> {
 	const { config, contextData } = await checkConfig(path)
 
 	let headscaleUrl = process.env.HEADSCALE_URL
+	let headscalePublicUrl = process.env.HEADSCALE_PUBLIC_URL
+
 	if (!headscaleUrl && !config) {
 		throw new Error('HEADSCALE_URL not set')
 	}
 
 	if (config) {
 		headscaleUrl = headscaleUrl ?? config.server_url
+		if (!headscalePublicUrl) {
+			// Fallback to the config value if the env var is not set
+			headscalePublicUrl = config.public_url
+		}
 	}
 
 	if (!headscaleUrl) {
@@ -75,6 +83,7 @@ export async function loadContext(): Promise<HeadplaneContext> {
 	context = {
 		debug,
 		headscaleUrl,
+		headscalePublicUrl,
 		cookieSecret,
 		integration: await loadIntegration(),
 		config: contextData,
@@ -83,6 +92,10 @@ export async function loadContext(): Promise<HeadplaneContext> {
 
 	log.info('CTXT', 'Starting Headplane with Context')
 	log.info('CTXT', 'HEADSCALE_URL: %s', headscaleUrl)
+	if (headscalePublicUrl) {
+		log.info('CTXT', 'HEADSCALE_PUBLIC_URL: %s', headscalePublicUrl)
+	}
+
 	log.info('CTXT', 'Integration: %s', context.integration?.name ?? 'None')
 	log.info('CTXT', 'Config: %s', contextData.read
 		? `Found ${contextData.write ? '' : '(Read Only)'}`
@@ -143,6 +156,7 @@ async function checkOidc(config?: HeadscaleConfig) {
 	let issuer = process.env.OIDC_ISSUER
 	let client = process.env.OIDC_CLIENT_ID
 	let secret = process.env.OIDC_CLIENT_SECRET
+	let method = process.env.OIDC_CLIENT_SECRET_METHOD ?? 'client_secret_basic'
 
 	log.debug('CTXT', 'Checking OIDC environment variables')
 	log.debug('CTXT', 'Issuer: %s', issuer)
@@ -161,6 +175,7 @@ async function checkOidc(config?: HeadscaleConfig) {
 			issuer,
 			client,
 			secret,
+			method,
 			rootKey,
 			disableKeyLogin,
 		}
@@ -204,6 +219,7 @@ async function checkOidc(config?: HeadscaleConfig) {
 		client,
 		secret,
 		rootKey,
+		method,
 		disableKeyLogin,
 	}
 }

app/utils/headscale.ts

@@ -20,9 +20,6 @@ export class FatalError extends Error {
 
 export async function pull<T>(url: string, key: string) {
 	if (!key || key === 'undefined' || key.length === 0) {
-		log.error('APIC', 'Missing API key, could this be a cookie setting issue?')
-		log.error('APIC', 'Check that the hp_sess cookie is being set correctly')
-		log.error('APIC', 'If you are running without HTTPs, make sure the Secure flag is false')
 		throw new Error('Missing API key, could this be a cookie setting issue?')
 	}
 
@@ -46,9 +43,6 @@ export async function pull<T>(url: string, key: string) {
 
 export async function post<T>(url: string, key: string, body?: unknown) {
 	if (!key || key === 'undefined' || key.length === 0) {
-		log.error('APIC', 'Missing API key, could this be a cookie setting issue?')
-		log.error('APIC', 'Check that the hp_sess cookie is being set correctly')
-		log.error('APIC', 'If you are running without HTTPs, make sure the Secure flag is false')
 		throw new Error('Missing API key, could this be a cookie setting issue?')
 	}
 
@@ -74,9 +68,6 @@ export async function post<T>(url: string, key: string, body?: unknown) {
 
 export async function put<T>(url: string, key: string, body?: unknown) {
 	if (!key || key === 'undefined' || key.length === 0) {
-		log.error('APIC', 'Missing API key, could this be a cookie setting issue?')
-		log.error('APIC', 'Check that the hp_sess cookie is being set correctly')
-		log.error('APIC', 'If you are running without HTTPs, make sure the Secure flag is false')
 		throw new Error('Missing API key, could this be a cookie setting issue?')
 	}
 
@@ -102,9 +93,6 @@ export async function put<T>(url: string, key: string, body?: unknown) {
 
 export async function del<T>(url: string, key: string) {
 	if (!key || key === 'undefined' || key.length === 0) {
-		log.error('APIC', 'Missing API key, could this be a cookie setting issue?')
-		log.error('APIC', 'Check that the hp_sess cookie is being set correctly')
-		log.error('APIC', 'If you are running without HTTPs, make sure the Secure flag is false')
 		throw new Error('Missing API key, could this be a cookie setting issue?')
 	}
 

app/utils/oidc.ts

@@ -36,7 +36,7 @@ export async function startOidc(oidc: OidcConfig, req: Request) {
 	const issuerUrl = new URL(oidc.issuer)
 	const oidcClient = {
 		client_id: oidc.client,
-		token_endpoint_auth_method: 'client_secret_basic',
+		token_endpoint_auth_method: oidc.method,
 	} satisfies Client
 
 	const response = await discoveryRequest(issuerUrl)
@@ -91,7 +91,7 @@ export async function finishOidc(oidc: OidcConfig, req: Request) {
 	const oidcClient = {
 		client_id: oidc.client,
 		client_secret: oidc.secret,
-		token_endpoint_auth_method: 'client_secret_basic',
+		token_endpoint_auth_method: oidc.method,
 	} satisfies Client
 
 	const response = await discoveryRequest(issuerUrl)

docs/Basic-Integration.md

@@ -29,7 +29,7 @@ Here is a simple Docker Compose deployment:
 services:
   headplane:
     container_name: headplane
-    image: ghcr.io/tale/headplane:0.3.2
+    image: ghcr.io/tale/headplane:0.3.5
     restart: unless-stopped
     ports:
       - '3000:3000'

docs/Configuration.md

@@ -9,6 +9,7 @@ You can configure Headplane using environment variables.
 
 #### Optional Variables
 
+- **`HEADSCALE_PUBLIC_URL`**: The public URL of your Headscale server (if different from `HEADSCALE_URL`).
 - **`DEBUG`**: Enable debug logging (default: `false`).
 - **`HOST`**: The host to bind the server to (default: `0.0.0.0`).
 - **`PORT`**: The port to bind the server to (default: `3000`).
@@ -34,6 +35,7 @@ If you use the Headscale configuration integration, these are not required.
 - **`OIDC_ISSUER`**: The issuer URL of your OIDC provider.
 - **`OIDC_CLIENT_ID`**: The client ID of your OIDC provider.
 - **`OIDC_CLIENT_SECRET`**: The client secret of your OIDC provider.
+- **`OIDC_CLIENT_SECRET_METHOD`**: The method used to send the client secret (default: `client_secret_basic`).
 - **`ROOT_API_KEY`**: An API key used to issue new ones for sessions (keep expiry fairly long).
 - **`DISABLE_API_KEY_LOGIN`**: If you want to disable API key login, set this to `true`.
 

docs/integration/Docker.md

@@ -50,7 +50,7 @@ services:
       TZ: 'America/New_York'
   headplane:
     container_name: headplane
-    image: ghcr.io/tale/headplane:0.3.2
+    image: ghcr.io/tale/headplane:0.3.5
     restart: unless-stopped
     volumes:
       - './data:/var/lib/headscale'

docs/integration/Kubernetes.md

@@ -88,7 +88,7 @@ spec:
       serviceAccountName: default
       containers:
       - name: headplane
-        image: ghcr.io/tale/headplane:0.3.2
+        image: ghcr.io/tale/headplane:0.3.5
         env:
         - name: COOKIE_SECRET
           value: 'abcdefghijklmnopqrstuvwxyz'

server.mjs

@@ -8,6 +8,7 @@ import { access, constants } from 'node:fs/promises'
 import { createReadStream, existsSync, statSync } from 'node:fs'
 import { createServer } from 'node:http'
 import { join, resolve } from 'node:path'
+import { env } from 'node:process'
 
 function log(level, message) {
 	const date = new Date().toISOString()
@@ -42,9 +43,9 @@ const {
 } = await import('@remix-run/node')
 const { default: mime } = await import('mime')
 
-const port = process.env.PORT || 3000
+const port = env.PORT || 3000
-const host = process.env.HOST || '0.0.0.0'
+const host = env.HOST || '0.0.0.0'
-const buildPath = process.env.BUILD_PATH || './build'
+const buildPath = env.BUILD_PATH || './build'
 
 // Because this is a dynamic import without an easily discernable path
 // we gain the "deoptimization" we want so that Vite doesn't bundle this