chore: v0.3.7

CHANGELOG.md

@@ -1,3 +1,13 @@
+### 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.

app/components/Code.tsx

@@ -1,12 +1,45 @@
-import clsx from 'clsx'
-import { type HTMLProps } from 'react'
+import { useState, 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>
+		<>
+			<code className={cn(
+				'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/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/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`.