Initial commit
This commit is contained in:
Zhongwei Li
285
templates/basic-form.tsx
Normal file
285
templates/basic-form.tsx
Normal file
@@ -0,0 +1,285 @@
|
||||
/**
|
||||
* Basic Form Example - Login/Signup Form
|
||||
*
|
||||
* Demonstrates:
|
||||
* - Simple form with email and password validation
|
||||
* - useForm hook with zodResolver
|
||||
* - Error display
|
||||
* - Type-safe form data with z.infer
|
||||
* - Accessible error messages
|
||||
*/
|
||||
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { z } from 'zod'
|
||||
|
||||
// 1. Define Zod validation schema
|
||||
const loginSchema = z.object({
|
||||
email: z.string()
|
||||
.min(1, 'Email is required')
|
||||
.email('Invalid email address'),
|
||||
password: z.string()
|
||||
.min(8, 'Password must be at least 8 characters')
|
||||
.regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
|
||||
.regex(/[a-z]/, 'Password must contain at least one lowercase letter')
|
||||
.regex(/[0-9]/, 'Password must contain at least one number'),
|
||||
rememberMe: z.boolean().optional(),
|
||||
})
|
||||
|
||||
// 2. Infer TypeScript type from schema
|
||||
type LoginFormData = z.infer<typeof loginSchema>
|
||||
|
||||
export function BasicLoginForm() {
|
||||
// 3. Initialize form with zodResolver
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors, isSubmitting, isValid },
|
||||
reset,
|
||||
} = useForm<LoginFormData>({
|
||||
resolver: zodResolver(loginSchema),
|
||||
mode: 'onBlur', // Validate on blur for better UX
|
||||
defaultValues: {
|
||||
email: '',
|
||||
password: '',
|
||||
rememberMe: false,
|
||||
},
|
||||
})
|
||||
|
||||
// 4. Handle form submission
|
||||
const onSubmit = async (data: LoginFormData) => {
|
||||
try {
|
||||
console.log('Form data:', data)
|
||||
|
||||
// Make API call
|
||||
const response = await fetch('/api/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Login failed')
|
||||
}
|
||||
|
||||
const result = await response.json()
|
||||
console.log('Login successful:', result)
|
||||
|
||||
// Reset form after successful submission
|
||||
reset()
|
||||
} catch (error) {
|
||||
console.error('Login error:', error)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4 max-w-md mx-auto">
|
||||
<h2 className="text-2xl font-bold">Login</h2>
|
||||
|
||||
{/* Email Field */}
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium mb-1">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
{...register('email')}
|
||||
aria-invalid={errors.email ? 'true' : 'false'}
|
||||
aria-describedby={errors.email ? 'email-error' : undefined}
|
||||
className={`w-full px-3 py-2 border rounded-md ${
|
||||
errors.email ? 'border-red-500' : 'border-gray-300'
|
||||
}`}
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
{errors.email && (
|
||||
<span
|
||||
id="email-error"
|
||||
role="alert"
|
||||
className="text-sm text-red-600 mt-1 block"
|
||||
>
|
||||
{errors.email.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Password Field */}
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium mb-1">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
{...register('password')}
|
||||
aria-invalid={errors.password ? 'true' : 'false'}
|
||||
aria-describedby={errors.password ? 'password-error' : undefined}
|
||||
className={`w-full px-3 py-2 border rounded-md ${
|
||||
errors.password ? 'border-red-500' : 'border-gray-300'
|
||||
}`}
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
{errors.password && (
|
||||
<span
|
||||
id="password-error"
|
||||
role="alert"
|
||||
className="text-sm text-red-600 mt-1 block"
|
||||
>
|
||||
{errors.password.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Remember Me Checkbox */}
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
id="rememberMe"
|
||||
type="checkbox"
|
||||
{...register('rememberMe')}
|
||||
className="h-4 w-4 rounded"
|
||||
/>
|
||||
<label htmlFor="rememberMe" className="ml-2 text-sm">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isSubmitting ? 'Logging in...' : 'Login'}
|
||||
</button>
|
||||
|
||||
{/* Form Status */}
|
||||
<div className="text-sm text-gray-600">
|
||||
{isValid && !isSubmitting && (
|
||||
<span className="text-green-600">Form is valid ✓</span>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Signup Form Variant
|
||||
*/
|
||||
const signupSchema = loginSchema.extend({
|
||||
confirmPassword: z.string(),
|
||||
name: z.string().min(2, 'Name must be at least 2 characters'),
|
||||
}).refine((data) => data.password === data.confirmPassword, {
|
||||
message: "Passwords don't match",
|
||||
path: ['confirmPassword'],
|
||||
})
|
||||
|
||||
type SignupFormData = z.infer<typeof signupSchema>
|
||||
|
||||
export function BasicSignupForm() {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm<SignupFormData>({
|
||||
resolver: zodResolver(signupSchema),
|
||||
defaultValues: {
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
rememberMe: false,
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit = async (data: SignupFormData) => {
|
||||
console.log('Signup data:', data)
|
||||
// API call
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4 max-w-md mx-auto">
|
||||
<h2 className="text-2xl font-bold">Sign Up</h2>
|
||||
|
||||
{/* Name Field */}
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium mb-1">
|
||||
Full Name
|
||||
</label>
|
||||
<input
|
||||
id="name"
|
||||
{...register('name')}
|
||||
className="w-full px-3 py-2 border rounded-md"
|
||||
placeholder="John Doe"
|
||||
/>
|
||||
{errors.name && (
|
||||
<span role="alert" className="text-sm text-red-600 mt-1 block">
|
||||
{errors.name.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Email Field */}
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium mb-1">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
{...register('email')}
|
||||
className="w-full px-3 py-2 border rounded-md"
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
{errors.email && (
|
||||
<span role="alert" className="text-sm text-red-600 mt-1 block">
|
||||
{errors.email.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Password Field */}
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium mb-1">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
{...register('password')}
|
||||
className="w-full px-3 py-2 border rounded-md"
|
||||
/>
|
||||
{errors.password && (
|
||||
<span role="alert" className="text-sm text-red-600 mt-1 block">
|
||||
{errors.password.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Confirm Password Field */}
|
||||
<div>
|
||||
<label htmlFor="confirmPassword" className="block text-sm font-medium mb-1">
|
||||
Confirm Password
|
||||
</label>
|
||||
<input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
{...register('confirmPassword')}
|
||||
className="w-full px-3 py-2 border rounded-md"
|
||||
/>
|
||||
{errors.confirmPassword && (
|
||||
<span role="alert" className="text-sm text-red-600 mt-1 block">
|
||||
{errors.confirmPassword.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400"
|
||||
>
|
||||
{isSubmitting ? 'Creating account...' : 'Sign Up'}
|
||||
</button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user