chore: cleanup login page

app/routes/login.tsx

@@ -18,8 +18,8 @@ export async function loader({ request }: LoaderFunctionArgs) {
 		return redirect('/machines', {
 			headers: {
 				// eslint-disable-next-line @typescript-eslint/naming-convention
-				'Set-Cookie': await commitSession(session)
+				'Set-Cookie': await commitSession(session),
-			}
+			},
 		})
 	}
 
@@ -35,7 +35,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
 	const data = {
 		oidc: issuer,
-		apiKey: normal === undefined
+		apiKey: normal === undefined,
 	}
 
 	if (!data.oidc && !data.apiKey) {
@@ -82,21 +82,21 @@ export async function action({ request }: ActionFunctionArgs) {
 		session.set('hsApiKey', apiKey)
 		session.set('user', {
 			name: key.prefix,
-			email: `${expiresDays} days`
+			email: `${expiresDays.toString()} days`,
 		})
 
 		return redirect('/machines', {
 			headers: {
 				// eslint-disable-next-line @typescript-eslint/naming-convention
 				'Set-Cookie': await commitSession(session, {
-					maxAge: expiresIn
+					maxAge: expiresIn,
-				})
+				}),
-			}
+			},
 		})
 	} catch (error) {
 		console.error(error)
 		return json({
-			error: 'Invalid API key'
+			error: 'Invalid API key',
 		})
 	}
 }
@@ -107,61 +107,69 @@ export default function Page() {
 	const showOr = useMemo(() => data.oidc && data.apiKey, [data])
 
 	return (
-		<div className='flex min-h-screen items-center justify-center'>
+		<div className="flex min-h-screen items-center justify-center">
-			<Card className='max-w-sm m-4 sm:m-0 rounded-2xl'>
+			<Card className="max-w-sm m-4 sm:m-0 rounded-2xl">
 				<Card.Title>
 					Welcome to Headplane
 				</Card.Title>
-				{data.apiKey ? (
+				{data.apiKey
-					<Form method='post'>
+					? (
-						<Card.Text className='mb-8 text-sm'>
+						<Form method="post">
-							Enter an API key to authenticate with Headplane. You can generate
+							<Card.Text className="mb-8 text-sm">
-							one by running
+								Enter an API key to authenticate with Headplane. You can generate
-							{' '}
+								one by running
-							<Code>
+								{' '}
-								headscale apikeys create
+								<Code>
-							</Code>
+									headscale apikeys create
-							{' '}
+								</Code>
-							in your terminal.
+								{' '}
-						</Card.Text>
+								in your terminal.
+							</Card.Text>
 
-						{actionData?.error ? (
+							{actionData?.error
-							<p className='text-red-500 text-sm mb-2'>{actionData.error}</p>
+								? (
-						) : undefined}
+									<p className="text-red-500 text-sm mb-2">{actionData.error}</p>
-						<TextField
+									)
-							isRequired
+								: undefined}
-							label='API Key'
+							<TextField
-							name='api-key'
+								isRequired
-							placeholder='API Key'
+								label="API Key"
-						/>
+								name="api-key"
-						<Button
+								placeholder="API Key"
-							className='w-full mt-2.5'
+							/>
-							variant='heavy'
+							<Button
-							type='submit'
+								className="w-full mt-2.5"
-						>
+								variant="heavy"
-							Login
+								type="submit"
-						</Button>
+							>
-					</Form>
+								Login
-				) : undefined}
+							</Button>
-				{showOr ? (
+						</Form>
-					<div className='flex items-center gap-x-1.5 py-1'>
+						)
-						<hr className='flex-1 border-ui-300 dark:border-ui-800'/>
+					: undefined}
-						<span className='text-gray-500 text-sm'>or</span>
+				{showOr
-						<hr className='flex-1 border-ui-300 dark:border-ui-800'/>
+					? (
-					</div>
+						<div className="flex items-center gap-x-1.5 py-1">
-				) : undefined}
+							<hr className="flex-1 border-ui-300 dark:border-ui-800" />
-				{data.oidc ? (
+							<span className="text-gray-500 text-sm">or</span>
-					<Form method='POST'>
+							<hr className="flex-1 border-ui-300 dark:border-ui-800" />
-						<input type='hidden' name='oidc-start' value='true'/>
+						</div>
-						<Button
+						)
-							className='w-full'
+					: undefined}
-							variant='heavy'
+				{data.oidc
-							type='submit'
+					? (
-						>
+						<Form method="POST">
-							Login with SSO
+							<input type="hidden" name="oidc-start" value="true" />
-						</Button>
+							<Button
-					</Form>
+								className="w-full"
-				) : undefined}
+								variant="heavy"
+								type="submit"
+							>
+								Login with SSO
+							</Button>
+						</Form>
+						)
+					: undefined}
 			</Card>
 		</div>
 	)