98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
import { useLogin } from '@/frontend/hooks/useAuth'
|
|
import {
|
|
Alert,
|
|
Button,
|
|
Center,
|
|
Divider,
|
|
Paper,
|
|
PasswordInput,
|
|
Stack,
|
|
Text,
|
|
TextInput,
|
|
Title,
|
|
} from '@mantine/core'
|
|
import { createFileRoute, redirect } from '@tanstack/react-router'
|
|
import { useState } from 'react'
|
|
import { FcGoogle } from 'react-icons/fc'
|
|
import { TbAlertCircle, TbLock, TbLogin, TbMail } from 'react-icons/tb'
|
|
|
|
export const Route = createFileRoute('/login')({
|
|
validateSearch: (search: Record<string, unknown>): { error?: string } => ({
|
|
error: (search.error as string) || undefined,
|
|
}),
|
|
beforeLoad: async ({ context }) => {
|
|
try {
|
|
const data = await context.queryClient.ensureQueryData({
|
|
queryKey: ['auth', 'session'],
|
|
queryFn: () => fetch('/api/auth/session', { credentials: 'include' }).then((r) => r.json()),
|
|
})
|
|
if (data?.user) {
|
|
throw redirect({ to: '/dashboard' })
|
|
}
|
|
} catch (e) {
|
|
if (e instanceof Error) return
|
|
throw e
|
|
}
|
|
},
|
|
component: LoginPage,
|
|
})
|
|
|
|
function LoginPage() {
|
|
const login = useLogin()
|
|
const { error: searchError } = Route.useSearch()
|
|
const [email, setEmail] = useState('')
|
|
const [password, setPassword] = useState('')
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
login.mutate({ email, password })
|
|
}
|
|
|
|
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>
|
|
|
|
{(login.isError || searchError) && (
|
|
<Alert icon={<TbAlertCircle size={16} />} color="red" variant="light">
|
|
{login.isError ? login.error.message : 'Google login failed, please try again.'}
|
|
</Alert>
|
|
)}
|
|
|
|
<TextInput
|
|
label="Email"
|
|
placeholder="email@example.com"
|
|
leftSection={<TbMail size={16} />}
|
|
value={email}
|
|
onChange={(e) => setEmail(e.currentTarget.value)}
|
|
required
|
|
/>
|
|
|
|
<PasswordInput
|
|
label="Password"
|
|
placeholder="Password"
|
|
leftSection={<TbLock size={16} />}
|
|
value={password}
|
|
onChange={(e) => setPassword(e.currentTarget.value)}
|
|
required
|
|
/>
|
|
|
|
<Button
|
|
type="submit"
|
|
fullWidth
|
|
leftSection={<TbLogin size={18} />}
|
|
loading={login.isPending}
|
|
>
|
|
Sign in
|
|
</Button>
|
|
</Stack>
|
|
</form>
|
|
</Paper>
|
|
</Center>
|
|
)
|
|
}
|