91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
import { useRef, useState, FormEvent } from 'react'
|
|
import SingleColumnLayout from '../../../layouts/SingleColumnLayout.tsx'
|
|
import TextInput from '../../../components/TextInput.tsx'
|
|
import PrimaryButton from '../../../components/PrimaryButton.tsx'
|
|
import { AuthService } from '../authService.ts'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import SecondaryNavButton from '../../../components/SecondaryNavButton.tsx'
|
|
|
|
interface LoginPageProps {
|
|
authService: AuthService
|
|
}
|
|
|
|
export default function LoginPage({ authService }: LoginPageProps) {
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
const [username, setUsername] = useState('')
|
|
const [password, setPassword] = useState('')
|
|
const [error, setError] = useState<string | null>(null)
|
|
const usernameInputRef = useRef<HTMLInputElement | null>(null)
|
|
const passwordInputRef = useRef<HTMLInputElement | null>(null)
|
|
const navigate = useNavigate()
|
|
|
|
const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault()
|
|
|
|
if (!username) {
|
|
setError("you didn't username D:<")
|
|
return
|
|
}
|
|
|
|
if (!password) {
|
|
setError("you didn't password D:<")
|
|
return
|
|
}
|
|
|
|
setError(null)
|
|
|
|
setIsSubmitting(true)
|
|
|
|
try {
|
|
await authService.login(username, password)
|
|
navigate('/')
|
|
} catch (error: unknown) {
|
|
setError(error instanceof Error ? error.message : 'something went terribly wrong')
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<SingleColumnLayout>
|
|
<main className="w-full mx-auto p-4">
|
|
<div className="mt-12">
|
|
<form className="flex flex-col gap-4 max-w-md" onSubmit={onSubmit}>
|
|
<div className="flex flex-col gap-1">
|
|
<label htmlFor="username" className="text-sm text-gray-600">
|
|
username
|
|
</label>
|
|
<TextInput
|
|
ref={usernameInputRef}
|
|
id="username"
|
|
value={username}
|
|
onInput={setUsername}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1">
|
|
<label htmlFor="password" className="text-sm text-gray-600">
|
|
password
|
|
</label>
|
|
<TextInput
|
|
ref={passwordInputRef}
|
|
type="password"
|
|
id="password"
|
|
value={password}
|
|
onInput={setPassword}
|
|
/>
|
|
</div>
|
|
|
|
<PrimaryButton className="mt-4" disabled={isSubmitting} type="submit">
|
|
{isSubmitting ? 'wait...' : 'make login pls'}
|
|
</PrimaryButton>
|
|
|
|
<SecondaryNavButton to={'/signup'}>register instead?</SecondaryNavButton>
|
|
|
|
<span className="text-xs h-3 text-red-500">{error}</span>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
</SingleColumnLayout>
|
|
)
|
|
}
|