rsp2k/headplane
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: cleanup login page

Browse Source
This commit is contained in:
Aarnav Tale 2024-05-15 21:54:02 -04:00
parent 3deec75715
commit e7c6271322
No known key found for this signature in database
1 changed files with 67 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
app/routes/login.tsx
View File

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