79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { RegisterInput, RegisterInputSchema } from '@mono/auth-core';
|
|
|
|
interface RegisterFormProps {
|
|
onSubmit: (data: RegisterInput) => Promise<void>;
|
|
error?: string;
|
|
}
|
|
|
|
export const RegisterForm: React.FC<RegisterFormProps> = ({ onSubmit, error }) => {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors, isSubmitting },
|
|
} = useForm<RegisterInput>({
|
|
resolver: zodResolver(RegisterInputSchema),
|
|
});
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium">
|
|
Email
|
|
</label>
|
|
<input
|
|
{...register('email')}
|
|
type="email"
|
|
id="email"
|
|
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
|
|
/>
|
|
{errors.email && (
|
|
<p className="mt-1 text-sm text-red-600">{errors.email.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="name" className="block text-sm font-medium">
|
|
Name
|
|
</label>
|
|
<input
|
|
{...register('name')}
|
|
type="text"
|
|
id="name"
|
|
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
|
|
/>
|
|
{errors.name && (
|
|
<p className="mt-1 text-sm text-red-600">{errors.name.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="password" className="block text-sm font-medium">
|
|
Password
|
|
</label>
|
|
<input
|
|
{...register('password')}
|
|
type="password"
|
|
id="password"
|
|
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
|
|
/>
|
|
{errors.password && (
|
|
<p className="mt-1 text-sm text-red-600">{errors.password.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
{error && <p className="text-sm text-red-600">{error}</p>}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="w-full rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 disabled:opacity-50"
|
|
>
|
|
{isSubmitting ? 'Creating account...' : 'Create account'}
|
|
</button>
|
|
</form>
|
|
);
|
|
};
|