initial commit
This commit is contained in:
Kar k1
308
components/auth/RegisterForm.tsx
Normal file
308
components/auth/RegisterForm.tsx
Normal file
@@ -0,0 +1,308 @@
|
||||
'use client'
|
||||
import { useState } from 'react'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { z } from 'zod'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import { useAuth } from '@/contexts/AuthContext'
|
||||
import { GoogleSignInButton } from './GoogleSignInButton'
|
||||
import { GitHubSignInButton } from './GitHubSignInButton'
|
||||
import { User, Mail, Phone, Lock, Eye, EyeOff, Check, X } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
|
||||
const RegisterSchema = z
|
||||
.object({
|
||||
name: z.string().min(1, 'Name is required'),
|
||||
email: z.string().email('Invalid email format'),
|
||||
phone: z.string().optional(),
|
||||
password: z
|
||||
.string()
|
||||
.min(6, 'Password must be at least 6 characters')
|
||||
.regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
|
||||
.regex(/[0-9!@#$%^&*]/, 'Password must contain at least one number or special character'),
|
||||
confirmPassword: z.string().min(1, 'Please confirm your password'),
|
||||
agreeTerms: z.boolean().refine((val) => val === true, {
|
||||
message: 'You must agree to the Terms of Service and Privacy Policy',
|
||||
}),
|
||||
})
|
||||
.refine((data) => data.password === data.confirmPassword, {
|
||||
message: "Passwords don't match",
|
||||
path: ['confirmPassword'],
|
||||
})
|
||||
|
||||
type RegisterFormData = z.infer<typeof RegisterSchema>
|
||||
|
||||
interface RegisterFormProps {
|
||||
onSwitchToLogin?: () => void
|
||||
}
|
||||
|
||||
export function RegisterForm({ onSwitchToLogin }: RegisterFormProps) {
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false)
|
||||
const [password, setPassword] = useState('')
|
||||
const { register: registerUser, loading } = useAuth()
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
watch,
|
||||
setValue,
|
||||
getValues,
|
||||
trigger,
|
||||
} = useForm<RegisterFormData>({
|
||||
resolver: zodResolver(RegisterSchema),
|
||||
})
|
||||
|
||||
const watchPassword = watch('password', '')
|
||||
|
||||
// Password strength validation
|
||||
const passwordRequirements = {
|
||||
minLength: watchPassword.length >= 6,
|
||||
hasUppercase: /[A-Z]/.test(watchPassword),
|
||||
hasNumberOrSpecial: /[0-9!@#$%^&*]/.test(watchPassword),
|
||||
}
|
||||
|
||||
const onSubmit = async (data: RegisterFormData) => {
|
||||
try {
|
||||
setError(null)
|
||||
await registerUser(data.email, data.name, data.password)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Registration failed')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="w-full max-w-md mx-auto">
|
||||
<CardHeader>
|
||||
<CardTitle>Create Account</CardTitle>
|
||||
<CardDescription>Fill in your details to create a new account</CardDescription>
|
||||
</CardHeader>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<CardContent className="space-y-4">
|
||||
{error && (
|
||||
<div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Full Name</Label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
placeholder="Enter your full name"
|
||||
className="pl-10"
|
||||
{...register('name')}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
{errors.name && <p className="text-sm text-red-600">{errors.name.message}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email Address</Label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
className="pl-10"
|
||||
{...register('email')}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
{errors.email && <p className="text-sm text-red-600">{errors.email.message}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="phone">Phone Number (Optional)</Label>
|
||||
<div className="relative">
|
||||
<Phone className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="phone"
|
||||
type="tel"
|
||||
placeholder="+1 (123) 456-7890"
|
||||
className="pl-10"
|
||||
{...register('phone')}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
{errors.phone && <p className="text-sm text-red-600">{errors.phone.message}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Create Password</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
placeholder="At least 6 characters"
|
||||
className="pl-10 pr-10"
|
||||
{...register('password')}
|
||||
disabled={loading}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
disabled={loading}
|
||||
>
|
||||
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
<span className="sr-only">{showPassword ? 'Hide password' : 'Show password'}</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Password strength indicators */}
|
||||
{watchPassword && (
|
||||
<div className="space-y-2 mt-2">
|
||||
<div className="flex items-center space-x-2 text-sm">
|
||||
{passwordRequirements.minLength ? (
|
||||
<Check className="h-3 w-3 text-green-600" />
|
||||
) : (
|
||||
<X className="h-3 w-3 text-red-500" />
|
||||
)}
|
||||
<span
|
||||
className={passwordRequirements.minLength ? 'text-green-600' : 'text-red-500'}
|
||||
>
|
||||
Minimum 6 characters
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 text-sm">
|
||||
{passwordRequirements.hasUppercase ? (
|
||||
<Check className="h-3 w-3 text-green-600" />
|
||||
) : (
|
||||
<X className="h-3 w-3 text-red-500" />
|
||||
)}
|
||||
<span
|
||||
className={
|
||||
passwordRequirements.hasUppercase ? 'text-green-600' : 'text-red-500'
|
||||
}
|
||||
>
|
||||
One uppercase letter
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 text-sm">
|
||||
{passwordRequirements.hasNumberOrSpecial ? (
|
||||
<Check className="h-3 w-3 text-green-600" />
|
||||
) : (
|
||||
<X className="h-3 w-3 text-red-500" />
|
||||
)}
|
||||
<span
|
||||
className={
|
||||
passwordRequirements.hasNumberOrSpecial ? 'text-green-600' : 'text-red-500'
|
||||
}
|
||||
>
|
||||
One number or special character
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{errors.password && <p className="text-sm text-red-600">{errors.password.message}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">Confirm Password</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type={showConfirmPassword ? 'text' : 'password'}
|
||||
placeholder="Confirm your password"
|
||||
className="pl-10 pr-10"
|
||||
{...register('confirmPassword')}
|
||||
disabled={loading}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
|
||||
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
||||
disabled={loading}
|
||||
>
|
||||
{showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
<span className="sr-only">
|
||||
{showConfirmPassword ? 'Hide password' : 'Show password'}
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
{errors.confirmPassword && (
|
||||
<p className="text-sm text-red-600">{errors.confirmPassword.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="agreeTerms"
|
||||
checked={getValues('agreeTerms') || false}
|
||||
onCheckedChange={(checked) => {
|
||||
setValue('agreeTerms', checked as boolean)
|
||||
trigger('agreeTerms')
|
||||
}}
|
||||
/>
|
||||
<Label htmlFor="agreeTerms" className="text-sm font-normal">
|
||||
I agree to the{' '}
|
||||
<Link href="/terms" className="text-primary hover:underline">
|
||||
Terms of Service
|
||||
</Link>{' '}
|
||||
and{' '}
|
||||
<Link href="/privacy" className="text-primary hover:underline">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</Label>
|
||||
</div>
|
||||
{errors.agreeTerms && <p className="text-sm text-red-600">{errors.agreeTerms.message}</p>}
|
||||
</CardContent>
|
||||
<CardFooter className="flex flex-col space-y-4">
|
||||
<Button type="submit" className="w-full" disabled={loading}>
|
||||
{loading ? 'Creating Account...' : 'Create Account'}
|
||||
</Button>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<span className="w-full border-t" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs uppercase">
|
||||
<span className="bg-background px-2 text-muted-foreground">Or continue with</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<GoogleSignInButton disabled={loading} />
|
||||
<GitHubSignInButton disabled={loading} />
|
||||
</div>
|
||||
</CardFooter>
|
||||
</form>
|
||||
|
||||
<div className="text-center text-sm text-muted-foreground mt-4">
|
||||
Already have an account?{' '}
|
||||
{onSwitchToLogin ? (
|
||||
<button onClick={onSwitchToLogin} className="text-primary hover:underline cursor-pointer">
|
||||
Sign in
|
||||
</button>
|
||||
) : (
|
||||
<span className="text-primary">Sign in</span>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user