feat: add sign in via api key

app/routes/login.tsx

@@ -1,10 +1,22 @@
-import { type LoaderFunctionArgs } from '@remix-run/node'
-import { Link, useLoaderData } from '@remix-run/react'
+import { type ActionFunctionArgs, json, type LoaderFunctionArgs, redirect } from '@remix-run/node'
+import { Form, Link, useActionData, useLoaderData } from '@remix-run/react'
 import { useMemo } from 'react'
 
+import { pull } from '~/utils/headscale'
 import { startOidc } from '~/utils/oidc'
+import { commitSession, getSession } from '~/utils/sessions'
 
 export async function loader({ request }: LoaderFunctionArgs) {
+	const session = await getSession(request.headers.get('Cookie'))
+	if (session.has('hsApiKey')) {
+		return redirect('/machines', {
+			headers: {
+				// eslint-disable-next-line @typescript-eslint/naming-convention
+				'Set-Cookie': await commitSession(session)
+			}
+		})
+	}
+
 	const issuer = process.env.OIDC_ISSUER
 	const id = process.env.OIDC_CLIENT_ID
 	const secret = process.env.OIDC_CLIENT_SECRET
@@ -31,8 +43,33 @@ export async function loader({ request }: LoaderFunctionArgs) {
 	return data
 }
 
+export async function action({ request }: ActionFunctionArgs) {
+	const formData = await request.formData()
+	const apiKey = String(formData.get('api-key'))
+	const session = await getSession(request.headers.get('Cookie'))
+
+	// Test the API key
+	try {
+		await pull('v1/apikey', apiKey)
+	} catch (error) {
+		console.error(error)
+		return json({
+			error: 'Invalid API key'
+		})
+	}
+
+	session.set('hsApiKey', apiKey)
+	return redirect('/machines', {
+		headers: {
+			// eslint-disable-next-line @typescript-eslint/naming-convention
+			'Set-Cookie': await commitSession(session)
+		}
+	})
+}
+
 export default function Page() {
 	const data = useLoaderData<typeof loader>()
+	const actionData = useActionData<typeof action>()
 	const showOr = useMemo(() => data.oidc && data.apiKey, [data])
 
 	return (
@@ -40,7 +77,7 @@ export default function Page() {
 			<div className='w-1/3 border p-4 rounded-lg'>
 				<h1 className='text-2xl mb-8'>Login</h1>
 				{data.apiKey ? (
-					<>
+					<Form method='post'>
 						<p className='text-sm text-gray-500 mb-4'>
 							Enter an API key to authenticate with Headplane. You can generate
 							one by running
@@ -52,13 +89,25 @@ export default function Page() {
 							in your terminal.
 						</p>
 
+						{actionData?.error ? (
+							<p className='text-red-500 text-sm mb-2'>{actionData.error}</p>
+						) : undefined}
 						<input
+							required
 							type='text'
+							name='api-key'
 							id='api-key'
 							className='border rounded-md p-2 w-full'
 							placeholder='API Key'
 						/>
-					</>
+
+						<button
+							type='submit'
+							className='bg-gray-800 text-white rounded-md p-2 w-full mt-4'
+						>
+							Login
+						</button>
+					</Form>
 				) : undefined}
 				{showOr ? (
 					<div className='flex items-center gap-x-2 py-2'>