flora is a fast and secure runtime that lets you write discord bots for your servers, with a rich TypeScript SDK, without worrying about running infrastructure. [mirror]
fix(frontend): rework login page
+47
-58
+47
-58
apps/frontend/src/pages/login-page.tsx
+47
-58
apps/frontend/src/pages/login-page.tsx
···
1
1
import { Button } from '@/components/ui/button'
2
-
import { Card, CardContent } from '@/components/ui/card'
3
-
import { FieldDescription, FieldGroup } from '@/components/ui/field'
2
+
import { FieldDescription } from '@/components/ui/field'
4
3
import { useApp } from '@/contexts/AppContext'
5
4
import { useLoginRedirect } from '@/hooks/use-login-redirect'
6
5
import { Seo } from '@/lib/seo'
···
28
27
29
28
if (sessionLoading || session) {
30
29
return (
31
-
<div className='flex min-h-svh items-center justify-center p-6 text-sm text-muted-foreground'>
30
+
<div className='flex min-h-dvh items-center justify-center p-6 text-sm text-muted-foreground'>
32
31
Loading…
33
32
</div>
34
33
)
···
42
41
path='/login'
43
42
noindex
44
43
/>
45
-
<div className='relative min-h-svh overflow-hidden'>
46
-
<img
47
-
src='/login.png'
48
-
alt='Login background artwork'
49
-
className='absolute inset-0 h-full w-full object-cover'
50
-
/>
51
-
<div className='absolute inset-0 bg-black/40' />
52
-
<div className='relative flex min-h-svh items-center justify-center p-6 md:p-10'>
53
-
<div className='w-full max-w-sm'>
54
-
<LoginForm />
55
-
</div>
56
-
</div>
44
+
<div className='flex min-h-dvh items-center justify-center'>
45
+
<LoginForm className='w-full' />
57
46
</div>
58
47
</>
59
48
)
···
66
55
const redirectToLogin = useLoginRedirect()
67
56
68
57
return (
69
-
<div className={cn('flex flex-col gap-6', className)} {...props}>
70
-
<Card className='border-white/20 bg-background/90 shadow-xl backdrop-blur supports-[backdrop-filter]:bg-background/80'>
71
-
<CardContent className='p-6 md:p-8'>
72
-
<form>
73
-
<FieldGroup>
74
-
<div className='flex flex-col items-center gap-2 text-center'>
75
-
<h1 className='text-2xl font-bold'>Welcome back</h1>
76
-
<p className='text-balance text-muted-foreground'>
77
-
Login to your Discord account
78
-
</p>
79
-
</div>
80
-
<div className='flex justify-center pt-4'>
81
-
<Button
82
-
type='button'
83
-
variant='outline'
84
-
className='w-full'
85
-
onClick={redirectToLogin}
86
-
>
87
-
<svg
88
-
aria-hidden='true'
89
-
viewBox='0 0 127.14 96.36'
90
-
className='size-4'
91
-
fill='currentColor'
92
-
>
93
-
<path d='M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83A97.68 97.68 0 0 0 49 6.83 72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.24 8.1C2.79 32.65-1.71 56.6.54 80.21h.02A105.73 105.73 0 0 0 32.71 96a77.7 77.7 0 0 0 6.89-11.18 68.42 68.42 0 0 1-10.84-5.18c.91-.66 1.8-1.36 2.66-2.09a75.57 75.57 0 0 0 64.3 0c.87.73 1.76 1.43 2.66 2.09a68.68 68.68 0 0 1-10.86 5.19A77.3 77.3 0 0 0 94.43 96a105.25 105.25 0 0 0 32.17-15.74c2.64-27.37-4.5-51.1-18.9-72.2ZM42.45 65.69c-6.27 0-11.42-5.76-11.42-12.85S36.03 40 42.45 40c6.46 0 11.5 5.81 11.42 12.85 0 7.09-5.03 12.85-11.42 12.85Zm42.24 0c-6.27 0-11.42-5.76-11.42-12.85S78.27 40 84.69 40c6.46 0 11.5 5.81 11.42 12.85 0 7.09-5.03 12.85-11.42 12.85Z' />
94
-
</svg>
95
-
Continue with Discord
96
-
</Button>
97
-
</div>
98
-
</FieldGroup>
99
-
</form>
100
-
</CardContent>
101
-
</Card>
102
-
<FieldDescription className='px-6 text-center text-white/90 [&_a]:underline [&_a]:underline-offset-2'>
103
-
flora is currently in{' '}
104
-
<strong>alpha</strong>. Things are subject to change. Please report any bugs, issues, or
105
-
security vulnerabilities to <a href='https://uwu.network/~tasky'>tasky</a>.
106
-
</FieldDescription>
107
-
<FieldDescription className='px-6 text-center text-white/90 [&_a]:underline [&_a]:underline-offset-2'>
108
-
By clicking continue, you agree to our <a href='/terms-of-service'>Terms of Service</a> and
109
-
{' '}
110
-
<a href='/privacy-policy'>Privacy Policy</a>.
111
-
</FieldDescription>
58
+
<div
59
+
className={cn('flex w-full flex-1 flex-col justify-center px-4 py-10 lg:px-6', className)}
60
+
{...props}
61
+
>
62
+
<div className='mx-auto w-full max-w-sm'>
63
+
<h1 className='text-balance text-center text-lg font-semibold text-foreground'>
64
+
Welcome back
65
+
</h1>
66
+
<p className='text-pretty text-center text-sm text-muted-foreground'>
67
+
Sign in with Discord to access the flora guild dashboard.
68
+
</p>
69
+
<form
70
+
className='mt-6 space-y-4'
71
+
onSubmit={(event) => {
72
+
event.preventDefault()
73
+
redirectToLogin()
74
+
}}
75
+
>
76
+
<Button type='submit' className='w-full py-2 font-medium'>
77
+
<svg
78
+
aria-hidden='true'
79
+
viewBox='0 0 127.14 96.36'
80
+
className='size-4'
81
+
fill='currentColor'
82
+
>
83
+
<path d='M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83A97.68 97.68 0 0 0 49 6.83 72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.24 8.1C2.79 32.65-1.71 56.6.54 80.21h.02A105.73 105.73 0 0 0 32.71 96a77.7 77.7 0 0 0 6.89-11.18 68.42 68.42 0 0 1-10.84-5.18c.91-.66 1.8-1.36 2.66-2.09a75.57 75.57 0 0 0 64.3 0c.87.73 1.76 1.43 2.66 2.09a68.68 68.68 0 0 1-10.86 5.19A77.3 77.3 0 0 0 94.43 96a105.25 105.25 0 0 0 32.17-15.74c2.64-27.37-4.5-51.1-18.9-72.2ZM42.45 65.69c-6.27 0-11.42-5.76-11.42-12.85S36.03 40 42.45 40c6.46 0 11.5 5.81 11.42 12.85 0 7.09-5.03 12.85-11.42 12.85Zm42.24 0c-6.27 0-11.42-5.76-11.42-12.85S78.27 40 84.69 40c6.46 0 11.5 5.81 11.42 12.85 0 7.09-5.03 12.85-11.42 12.85Z' />
84
+
</svg>
85
+
Continue with Discord
86
+
</Button>
87
+
</form>
88
+
<div className='mt-6 space-y-3'>
89
+
<FieldDescription className='text-pretty text-center text-xs text-muted-foreground'>
90
+
flora is currently in{' '}
91
+
<strong>alpha</strong>. Things are subject to change. Please report any bugs, issues, or
92
+
security vulnerabilities to <a href='https://uwu.network/~tasky'>tasky</a>.
93
+
</FieldDescription>
94
+
<FieldDescription className='text-pretty text-center text-xs text-muted-foreground'>
95
+
By clicking continue, you agree to our <a href='/terms-of-service'>Terms of Service</a>
96
+
{' '}
97
+
and <a href='/privacy-policy'>Privacy Policy</a>.
98
+
</FieldDescription>
99
+
</div>
100
+
</div>
112
101
</div>
113
102
)
114
103
}