danmu-sim/app/signin/page.tsx

33 lines
805 B
TypeScript

'use client'
import { signin } from '@/app/lib/actions'
import { useFormState, useFormStatus } from 'react-dom'
export default function Page() {
const [errorMessage, dispatch] = useFormState(signin, undefined)
return (
<form action={dispatch}>
<input name="account" placeholder="Account" required />
<input type="password" name="password" placeholder="Password" required />
<div>{errorMessage && <p>{errorMessage}</p>}</div>
<LoginButton />
</form>
)
}
function LoginButton() {
const { pending } = useFormStatus()
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
if (pending) {
event.preventDefault()
}
}
return (
<button aria-disabled={pending} type="submit" onClick={handleClick}>
Login
</button>
)
}