309 lines
11 KiB
TypeScript
309 lines
11 KiB
TypeScript
'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>
|
|
)
|
|
}
|