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

style: facelift the login page

Browse Source
This commit is contained in:
Aarnav Tale 2024-03-30 02:46:21 -04:00
parent 50bcfa9c04
commit 196c4763e5
No known key found for this signature in database
1 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/routes/login.tsx
View File

@ -2,7 +2,10 @@ import { type ActionFunctionArgs, json, type LoaderFunctionArgs, redirect } from
import { Form, useActionData, useLoaderData } from '@remix-run/react' import { Form, useActionData, useLoaderData } from '@remix-run/react'
import { useMemo } from 'react' import { useMemo } from 'react'
import Button from '~/components/Button'
import Card from '~/components/Card'
import Code from '~/components/Code' import Code from '~/components/Code'
import Input from '~/components/Input'
import { type Key } from '~/types' import { type Key } from '~/types'
import { pull } from '~/utils/headscale' import { pull } from '~/utils/headscale'
import { startOidc } from '~/utils/oidc' import { startOidc } from '~/utils/oidc'
@ -97,7 +100,7 @@ export default function Page() {
return ( return (
<div className='flex min-h-screen items-center justify-center'> <div className='flex min-h-screen items-center justify-center'>
<div className='w-1/3 border p-4 rounded-lg'> <Card className='w-96'>
<h1 className='text-2xl mb-8'>Login</h1> <h1 className='text-2xl mb-8'>Login</h1>
{data.apiKey ? ( {data.apiKey ? (
<Form method='post'> <Form method='post'>
@ -115,7 +118,7 @@ export default function Page() {
{actionData?.error ? ( {actionData?.error ? (
<p className='text-red-500 text-sm mb-2'>{actionData.error}</p> <p className='text-red-500 text-sm mb-2'>{actionData.error}</p>
) : undefined} ) : undefined}
<input <Input
required required
type='text' type='text'
name='api-key' name='api-key'
@ -124,30 +127,35 @@ export default function Page() {
placeholder='API Key' placeholder='API Key'
/> />
<button <Button
variant='emphasized'
type='submit' type='submit'
className='bg-gray-800 text-white rounded-md p-2 w-full mt-4' className='bg-gray-800 text-white rounded-md p-2 w-full mt-4'
> >
Login Login
</button> </Button>
</Form> </Form>
) : undefined} ) : undefined}
{showOr ? ( {showOr ? (
<div className='flex items-center gap-x-2 py-2'> <div className='flex items-center gap-x-2 py-2'>
<hr className='flex-1'/> <hr className='flex-1 dark:border-zinc-700'/>
<span className='text-gray-500'>or</span> <span className='text-gray-500'>or</span>
<hr className='flex-1'/> <hr className='flex-1 dark:border-zinc-700'/>
</div> </div>
) : undefined} ) : undefined}
{data.oidc ? ( {data.oidc ? (
<Form method='POST'> <Form method='POST'>
<input type='hidden' name='oidc-start' value='true'/> <input type='hidden' name='oidc-start' value='true'/>
<button className='bg-gray-800 text-white rounded-md p-2 w-full' type='submit'> <Button
variant='emphasized'
type='submit'
className='bg-gray-800 text-white rounded-md p-2 w-full'
>
Login with SSO Login with SSO
</button> </Button>
</Form> </Form>
) : undefined} ) : undefined}
</div> </Card>
</div> </div>
) )
} }