79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
import type { FC } from 'react'
|
|
import { Anchor } from '@pikku/mantine/core'
|
|
import { Link, useNavigate } from '@tanstack/react-router'
|
|
import { useMutation } from '@tanstack/react-query'
|
|
import { m } from '@/i18n/messages'
|
|
import { useLocale } from '@/i18n/config'
|
|
import { AuthCard, type AuthFormValues } from '@/components/AuthCard'
|
|
import {
|
|
DEV_LOGIN,
|
|
INVALID_CREDENTIALS,
|
|
devQuickLogin,
|
|
signInWithGoogle,
|
|
signInWithPassword,
|
|
} from '@/lib/auth'
|
|
|
|
export const LoginPage: FC = () => {
|
|
useLocale()
|
|
const navigate = useNavigate()
|
|
const appName = m.app__name()
|
|
// Dev builds (sandboxes run `vite dev`) prefill the test account and expose a
|
|
// one-click quick-login; production builds strip both (import.meta.env.DEV).
|
|
const isDev = import.meta.env.DEV
|
|
|
|
const signIn = useMutation({
|
|
mutationFn: (values: AuthFormValues) =>
|
|
signInWithPassword(values.email, values.password, '/app'),
|
|
onSuccess: () => navigate({ to: '/app' }),
|
|
})
|
|
const google = useMutation({ mutationFn: () => signInWithGoogle('/app') })
|
|
const quick = useMutation({
|
|
mutationFn: () => devQuickLogin(),
|
|
onSuccess: () => navigate({ to: '/app' }),
|
|
})
|
|
|
|
const error = signIn.isError
|
|
? signIn.error instanceof Error && signIn.error.message === INVALID_CREDENTIALS
|
|
? m.auth__login__invalid_credentials()
|
|
: m.auth__login__error()
|
|
: google.isError
|
|
? m.auth__google_error()
|
|
: quick.isError
|
|
? m.auth__login__error()
|
|
: null
|
|
|
|
return (
|
|
<AuthCard
|
|
appName={appName}
|
|
title={m.auth__login__title()}
|
|
description={m.auth__login__description({ name: appName })}
|
|
cta={m.auth__login__cta()}
|
|
passwordAutoComplete="current-password"
|
|
busy={signIn.isPending}
|
|
googleBusy={google.isPending}
|
|
error={error}
|
|
initialValues={isDev ? { email: DEV_LOGIN.email, password: DEV_LOGIN.password } : undefined}
|
|
quickLogin={
|
|
isDev
|
|
? {
|
|
label: m.auth__dev_quick_login(),
|
|
hint: m.auth__dev_quick_login_hint(),
|
|
onClick: () => quick.mutate(),
|
|
busy: quick.isPending,
|
|
}
|
|
: null
|
|
}
|
|
onAuthSubmit={(values) => signIn.mutate(values)}
|
|
onGoogle={() => google.mutate()}
|
|
footer={
|
|
<>
|
|
{m.auth__login__footer_prompt()}{' '}
|
|
<Anchor component={Link} to="/signup">
|
|
{m.auth__login__footer_action()}
|
|
</Anchor>
|
|
</>
|
|
}
|
|
/>
|
|
)
|
|
}
|