feat: redesign login and splash screen with playful visual lift
This commit is contained in:
@@ -1,7 +1,6 @@
|
||||
import { Button, Container, Group, Stack, Text, Title } from '@mantine/core'
|
||||
import { Button, Box, Center, Stack, Text, Title } from '@mantine/core'
|
||||
import { Link, createFileRoute } from '@tanstack/react-router'
|
||||
import { SiBun } from 'react-icons/si'
|
||||
import { TbBrandReact, TbLogin, TbRocket } from 'react-icons/tb'
|
||||
import { TbLogin } from 'react-icons/tb'
|
||||
|
||||
export const Route = createFileRoute('/')({
|
||||
component: HomePage,
|
||||
@@ -9,28 +8,67 @@ export const Route = createFileRoute('/')({
|
||||
|
||||
function HomePage() {
|
||||
return (
|
||||
<Container size="sm" py="xl">
|
||||
<Stack align="center" gap="lg">
|
||||
<Group gap="lg">
|
||||
<SiBun size={64} color="#fbf0df" />
|
||||
<TbBrandReact size={64} color="#61dafb" />
|
||||
</Group>
|
||||
<Box style={{ minHeight: '100vh', background: '#1a1a2e', position: 'relative', overflow: 'hidden' }}>
|
||||
{/* background blobs */}
|
||||
<Box style={{
|
||||
position: 'absolute', top: '-15%', left: '-10%',
|
||||
width: 500, height: 500, borderRadius: '50%',
|
||||
background: 'radial-gradient(circle, rgba(124,58,237,0.25) 0%, transparent 70%)',
|
||||
pointerEvents: 'none',
|
||||
}} />
|
||||
<Box style={{
|
||||
position: 'absolute', bottom: '-20%', right: '-10%',
|
||||
width: 600, height: 600, borderRadius: '50%',
|
||||
background: 'radial-gradient(circle, rgba(79,70,229,0.2) 0%, transparent 70%)',
|
||||
pointerEvents: 'none',
|
||||
}} />
|
||||
<Box style={{
|
||||
position: 'absolute', top: '50%', left: '60%',
|
||||
width: 300, height: 300, borderRadius: '50%',
|
||||
background: 'radial-gradient(circle, rgba(168,85,247,0.1) 0%, transparent 70%)',
|
||||
pointerEvents: 'none',
|
||||
}} />
|
||||
|
||||
<Title order={1}>Bun + Elysia + Vite + React</Title>
|
||||
<Center mih="100vh" style={{ position: 'relative', zIndex: 1 }}>
|
||||
<Stack align="center" gap="xl">
|
||||
<img
|
||||
src="/src/logo.svg"
|
||||
width={72}
|
||||
height={72}
|
||||
alt="logo"
|
||||
style={{ borderRadius: 20, boxShadow: '0 4px 32px rgba(124,58,237,0.5)', display: 'block' }}
|
||||
/>
|
||||
|
||||
<Text c="dimmed" ta="center" maw={480}>
|
||||
Full-stack starter template with Mantine UI, TanStack Router, and session-based auth.
|
||||
</Text>
|
||||
<Stack align="center" gap={8}>
|
||||
<Title
|
||||
order={1}
|
||||
c="white"
|
||||
fw={800}
|
||||
ta="center"
|
||||
style={{ fontSize: '2.6rem', letterSpacing: '-0.5px', lineHeight: 1.15 }}
|
||||
>
|
||||
Monitoring System
|
||||
</Title>
|
||||
<Text c="dimmed" ta="center" size="md" maw={320} lh={1.6}>
|
||||
Pantau semua aplikasi dalam satu tempat, real-time.
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Group>
|
||||
<Button component={Link} to="/login" leftSection={<TbLogin size={18} />} variant="filled">
|
||||
Login
|
||||
<Button
|
||||
component={Link}
|
||||
to="/login"
|
||||
leftSection={<TbLogin size={18} />}
|
||||
size="md"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #4f46e5, #7c3aed)',
|
||||
border: 'none',
|
||||
paddingInline: 32,
|
||||
}}
|
||||
>
|
||||
Masuk
|
||||
</Button>
|
||||
<Button component={Link} to="/dashboard" leftSection={<TbRocket size={18} />} variant="light">
|
||||
Dashboard
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Container>
|
||||
</Stack>
|
||||
</Center>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { useLogin } from '@/frontend/hooks/useAuth'
|
||||
import {
|
||||
Alert,
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Divider,
|
||||
Paper,
|
||||
PasswordInput,
|
||||
Stack,
|
||||
Text,
|
||||
@@ -38,6 +38,14 @@ export const Route = createFileRoute('/login')({
|
||||
component: LoginPage,
|
||||
})
|
||||
|
||||
const OAUTH_ERRORS: Record<string, string> = {
|
||||
google_denied: 'Login dengan Google dibatalkan.',
|
||||
invalid_state: 'Sesi OAuth tidak valid, silakan coba lagi.',
|
||||
token_failed: 'Gagal menukar token Google, silakan coba lagi.',
|
||||
userinfo_failed: 'Gagal mengambil info akun Google, silakan coba lagi.',
|
||||
account_disabled: 'Akun Anda telah dinonaktifkan. Hubungi admin untuk informasi lebih lanjut.',
|
||||
}
|
||||
|
||||
function LoginPage() {
|
||||
const login = useLogin()
|
||||
const { error: searchError } = Route.useSearch()
|
||||
@@ -49,69 +57,117 @@ function LoginPage() {
|
||||
login.mutate({ email, password })
|
||||
}
|
||||
|
||||
const errorMessage = login.isError
|
||||
? login.error.message
|
||||
: searchError
|
||||
? (OAUTH_ERRORS[searchError] ?? 'Login dengan Google gagal, silakan coba lagi.')
|
||||
: null
|
||||
|
||||
return (
|
||||
<Center mih="100vh">
|
||||
<Paper shadow="md" p="xl" radius="md" w={400} withBorder>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Stack gap="md">
|
||||
<Title order={2} ta="center">
|
||||
Login
|
||||
</Title>
|
||||
<Box style={{ minHeight: '100vh', background: '#1a1a2e', position: 'relative', overflow: 'hidden' }}>
|
||||
{/* background blobs */}
|
||||
<Box style={{
|
||||
position: 'absolute', top: '-15%', left: '-10%',
|
||||
width: 500, height: 500, borderRadius: '50%',
|
||||
background: 'radial-gradient(circle, rgba(124,58,237,0.25) 0%, transparent 70%)',
|
||||
pointerEvents: 'none',
|
||||
}} />
|
||||
<Box style={{
|
||||
position: 'absolute', bottom: '-20%', right: '-10%',
|
||||
width: 600, height: 600, borderRadius: '50%',
|
||||
background: 'radial-gradient(circle, rgba(79,70,229,0.2) 0%, transparent 70%)',
|
||||
pointerEvents: 'none',
|
||||
}} />
|
||||
<Box style={{
|
||||
position: 'absolute', top: '50%', left: '60%',
|
||||
width: 300, height: 300, borderRadius: '50%',
|
||||
background: 'radial-gradient(circle, rgba(168,85,247,0.1) 0%, transparent 70%)',
|
||||
pointerEvents: 'none',
|
||||
}} />
|
||||
|
||||
{(login.isError || searchError) && (
|
||||
<Alert icon={<TbAlertCircle size={16} />} color="red" variant="light">
|
||||
{login.isError ? login.error.message : (
|
||||
{
|
||||
google_denied: 'Login dengan Google dibatalkan.',
|
||||
invalid_state: 'Sesi OAuth tidak valid, silakan coba lagi.',
|
||||
token_failed: 'Gagal menukar token Google, silakan coba lagi.',
|
||||
userinfo_failed: 'Gagal mengambil info akun Google, silakan coba lagi.',
|
||||
account_disabled: 'Akun Anda telah dinonaktifkan. Hubungi admin untuk informasi lebih lanjut.',
|
||||
}[searchError ?? ''] ?? 'Login dengan Google gagal, silakan coba lagi.'
|
||||
)}
|
||||
</Alert>
|
||||
)}
|
||||
<Center mih="100vh" style={{ position: 'relative', zIndex: 1 }}>
|
||||
<Box
|
||||
p="xl"
|
||||
w={400}
|
||||
style={{
|
||||
background: 'rgba(36,36,36,0.75)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
borderRadius: 20,
|
||||
border: '1px solid rgba(124,58,237,0.35)',
|
||||
boxShadow: '0 0 0 1px rgba(124,58,237,0.1), 0 8px 32px rgba(0,0,0,0.4), 0 0 60px rgba(124,58,237,0.12)',
|
||||
}}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Stack gap="md">
|
||||
{/* header */}
|
||||
<Stack gap={8} align="center" mb={4}>
|
||||
<img
|
||||
src="/src/logo.svg"
|
||||
width={56}
|
||||
height={56}
|
||||
alt="logo"
|
||||
style={{ borderRadius: 14, boxShadow: '0 4px 20px rgba(124,58,237,0.45)', display: 'block' }}
|
||||
/>
|
||||
<Title order={2} fw={700} ta="center" c="white">
|
||||
Monitoring System
|
||||
</Title>
|
||||
<Text c="dimmed" size="sm" ta="center">
|
||||
Masuk untuk melanjutkan
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<TextInput
|
||||
label="Email"
|
||||
placeholder="email@example.com"
|
||||
leftSection={<TbMail size={16} />}
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
{errorMessage && (
|
||||
<Alert icon={<TbAlertCircle size={16} />} color="red" variant="light">
|
||||
{errorMessage}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<PasswordInput
|
||||
label="Password"
|
||||
placeholder="Password"
|
||||
leftSection={<TbLock size={16} />}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
<TextInput
|
||||
label="Email"
|
||||
placeholder="email@example.com"
|
||||
leftSection={<TbMail size={16} />}
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
leftSection={<TbLogin size={18} />}
|
||||
loading={login.isPending}
|
||||
>
|
||||
Sign in
|
||||
</Button>
|
||||
<PasswordInput
|
||||
label="Password"
|
||||
placeholder="Password"
|
||||
leftSection={<TbLock size={16} />}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<Divider label="or" labelPosition="center" />
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
leftSection={<TbLogin size={18} />}
|
||||
loading={login.isPending}
|
||||
mt={4}
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #4f46e5, #7c3aed)',
|
||||
border: 'none',
|
||||
}}
|
||||
>
|
||||
Sign in
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="default"
|
||||
fullWidth
|
||||
leftSection={<FcGoogle size={18} />}
|
||||
onClick={() => { window.location.href = '/api/auth/google' }}
|
||||
>
|
||||
Continue with Google
|
||||
</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
</Paper>
|
||||
</Center>
|
||||
<Divider label="atau" labelPosition="center" />
|
||||
|
||||
<Button
|
||||
variant="default"
|
||||
fullWidth
|
||||
leftSection={<FcGoogle size={18} />}
|
||||
onClick={() => { window.location.href = '/api/auth/google' }}
|
||||
>
|
||||
Continue with Google
|
||||
</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
</Box>
|
||||
</Center>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user