41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
import { FC } from 'react';
|
|
import { useForm, SubmitHandler } from 'react-hook-form';
|
|
|
|
import FormField from './FormField';
|
|
import InlineLink from './InlineLink';
|
|
import SubmitButton from './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;
|