Infrastructure/zipline
1
Fork 0
Code Issues Pull requests Activity

feat: new login page

Browse source
This commit is contained in:
diced 2023-03-04 18:33:30 -08:00
parent 3af3ba69f5
commit 1e37f06ab6
No known key found for this signature in database
GPG key ID: 370BD1BA142842D1
2 changed files with 58 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/icons/DiscordIcon.tsx
View file

@ -2,7 +2,12 @@
export default function DiscordIcon({ ...props }) {
return (
<svg width='24' height='24' viewBox='0 0 71 55' xmlns='http://www.w3.org/2000/svg'>
<svg
width={props.width ?? '24'}
height={props.height ?? '24'}
viewBox='0 0 71 55'
xmlns='http://www.w3.org/2000/svg'
>
<g clipPath='url(#clip0)'>
<path
fill={props.colorScheme === 'manage' ? '#ffffff' : '#5865F2'}

88
src/pages/auth/login.tsx
View file

@ -1,8 +1,11 @@
import {
Anchor,
Button,
Card,
Center,
CheckIcon,
Divider,
Group,
Modal,
NumberInput,
PasswordInput,
@ -148,53 +151,66 @@ export default function Login({ title, user_registration, oauth_registration, oa
</Button>
</Modal>
<Center sx={{ height: '100vh' }}>
<div>
<Title size={70} align='center'>
<Card radius='md'>
<Title size={30} align='left'>
{title}
</Title>
{oauth_registration && (
<>
<Group grow>
{oauth_providers.map(({ url, name, Icon }, i) => (
<Link key={i} href={url} passHref legacyBehavior>
<Button
size='sm'
variant='outline'
radius='md'
fullWidth
leftIcon={<Icon height={'15'} width={'15'} colorScheme='dark' />}
component='a'
my='xs'
>
{name}
</Button>
</Link>
))}
</Group>
<Divider my='xs' label='or' labelPosition='center' />
</>
)}
<form onSubmit={form.onSubmit((v) => onSubmit(v))}>
<TextInput my='sm' size='lg' id='username' label='Username' {...form.getInputProps('username')} />
<TextInput
my='xs'
radius='md'
size='md'
id='username'
label='Username'
{...form.getInputProps('username')}
/>
<PasswordInput
my='sm'
size='lg'
my='xs'
radius='md'
size='md'
id='password'
label='Password'
{...form.getInputProps('password')}
/>
<Button size='lg' my='sm' fullWidth type='submit' loading={loading}>
Login
</Button>
</form>
<Group position='apart'>
{user_registration && (
<Anchor size='xs' href='/auth/register' component={Link}>
Don&apos;t have an account? Register
</Anchor>
)}
{user_registration && (
<>
<Divider my='sm' label='or' labelPosition='center'>
or
</Divider>
<Link href='/auth/register' passHref legacyBehavior>
<Button size='lg' fullWidth component='a'>
Register
</Button>
</Link>
</>
)}
{oauth_registration && (
<>
<Divider my='sm' label='or' labelPosition='center'>
or
</Divider>
{oauth_providers.map(({ url, name, Icon }, i) => (
<Link key={i} href={url} passHref legacyBehavior>
<Button size='lg' fullWidth leftIcon={<Icon colorScheme='manage' />} component='a' my='sm'>
Login with {name}
</Button>
</Link>
))}
</>
)}
</div>
<Button size='sm' p='xs' radius='md' my='xs' type='submit' loading={loading}>
Login
</Button>
</Group>
</form>
</Card>
</Center>
</>
);