41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import { FC } from "react"
|
|
import { useForm, SubmitHandler } from "react-hook-form"
|
|
|
|
import FormField from "../common/form/FormField"
|
|
import InlineLink from "../common/InlineLink"
|
|
import SubmitButton from "../common/form/SubmitButton"
|
|
|
|
interface LoginFormValues {
|
|
username: string
|
|
password: string
|
|
}
|
|
|
|
const LoginForm: FC = () => {
|
|
const { register, handleSubmit } = useForm<LoginFormValues>()
|
|
const onSubmit: SubmitHandler<LoginFormValues> = (data) => console.log(data)
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
|
<FormField
|
|
label="Username"
|
|
className="py-2 px-2 outline-2 w-full"
|
|
{...register("username")}
|
|
/>
|
|
<FormField
|
|
label="Password"
|
|
type="password"
|
|
{...register("password")}
|
|
className="py-2 px-2 outline-2 w-full"
|
|
bottomElement={
|
|
<InlineLink to="#" className="block mt-2">
|
|
Trouble logging in?
|
|
</InlineLink>
|
|
}
|
|
/>
|
|
<SubmitButton className="w-full" value="Log In" />
|
|
</form>
|
|
)
|
|
}
|
|
|
|
export default LoginForm
|