81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
import { type LoaderFunctionArgs } from '@remix-run/node'
|
|
import { Link, useLoaderData } from '@remix-run/react'
|
|
import { useMemo } from 'react'
|
|
|
|
import { startOidc } from '~/utils/oidc'
|
|
|
|
export async function loader({ request }: LoaderFunctionArgs) {
|
|
const issuer = process.env.OIDC_ISSUER
|
|
const id = process.env.OIDC_CLIENT_ID
|
|
const secret = process.env.OIDC_CLIENT_SECRET
|
|
const normal = process.env.DISABLE_API_KEY_LOGIN
|
|
|
|
if (issuer && (!id || !secret)) {
|
|
throw new Error('An invalid OIDC configuration was provided')
|
|
}
|
|
|
|
const data = {
|
|
oidc: issuer,
|
|
apiKey: normal === undefined
|
|
}
|
|
|
|
if (!data.oidc && !data.apiKey) {
|
|
throw new Error('No authentication method is enabled')
|
|
}
|
|
|
|
if (data.oidc && !data.apiKey) {
|
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
return startOidc(data.oidc, id!, request)
|
|
}
|
|
|
|
return data
|
|
}
|
|
|
|
export default function Page() {
|
|
const data = useLoaderData<typeof loader>()
|
|
const showOr = useMemo(() => data.oidc && data.apiKey, [data])
|
|
|
|
return (
|
|
<div className='flex min-h-screen items-center justify-center'>
|
|
<div className='w-1/3 border p-4 rounded-lg'>
|
|
<h1 className='text-2xl mb-8'>Login</h1>
|
|
{data.apiKey ? (
|
|
<>
|
|
<p className='text-sm text-gray-500 mb-4'>
|
|
Enter an API key to authenticate with Headplane. You can generate
|
|
one by running
|
|
{' '}
|
|
<code className='bg-gray-100 p-1 rounded-md'>
|
|
headscale apikeys create
|
|
</code>
|
|
{' '}
|
|
in your terminal.
|
|
</p>
|
|
|
|
<input
|
|
type='text'
|
|
id='api-key'
|
|
className='border rounded-md p-2 w-full'
|
|
placeholder='API Key'
|
|
/>
|
|
</>
|
|
) : undefined}
|
|
{showOr ? (
|
|
<div className='flex items-center gap-x-2 py-2'>
|
|
<hr className='flex-1'/>
|
|
<span className='text-gray-500'>or</span>
|
|
<hr className='flex-1'/>
|
|
</div>
|
|
) : undefined}
|
|
{data.oidc ? (
|
|
<Link to='/oidc/start'>
|
|
<button className='bg-gray-800 text-white rounded-md p-2 w-full' type='button'>
|
|
Login with SSO
|
|
</button>
|
|
</Link>
|
|
) : undefined}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|