'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { UserPlus, Mail, Lock, User, Calendar, Briefcase } from 'lucide-react';
import Link from 'next/link';
export default function RegisterPage() {
const router = useRouter();
const [formData, setFormData] = useState({
username: '',
email: '',
password: '',
confirmPassword: '',
firstName: '',
lastName: '',
dob: '',
gender: 'prefer_not_to_say',
expertiseLevel: '0-1',
});
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState(false);
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
});
setError(null);
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setError(null);
// Validate passwords match
if (formData.password !== formData.confirmPassword) {
setError('Passwords do not match');
setLoading(false);
return;
}
try {
const response = await fetch('/api/register', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
username: formData.username,
email: formData.email,
password: formData.password,
firstName: formData.firstName,
lastName: formData.lastName,
dob: formData.dob,
gender: formData.gender,
expertiseLevel: formData.expertiseLevel,
}),
});
const data = await response.json();
if (data.success) {
setSuccess(true);
setTimeout(() => {
router.push('/login');
}, 3000);
} else {
setError(data.error);
}
} catch (err: any) {
setError('Registration failed. Please try again.');
} finally {
setLoading(false);
}
};
if (success) {
return (
<div className="flex min-h-screen flex-col items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="w-full max-w-md">
<div className="bg-white rounded-lg shadow p-8 text-center">
<div className="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-green-100 mb-4">
<Mail className="h-6 w-6 text-green-600" />
</div>
<h2 className="text-2xl font-bold text-gray-900 mb-4">
Registration Successful!
</h2>
<p className="text-gray-700 mb-4">
Please check your email to verify your account.
</p>
<p className="text-sm text-gray-700">
Redirecting to login page...
</p>
</div>
</div>
</div>
);
}
return (
<div className="flex min-h-screen flex-col items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="w-full max-w-2xl">
<div className="text-center mb-8">
<div className="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-blue-100">
<UserPlus className="h-6 w-6 text-blue-600" />
</div>
<h2 className="mt-6 text-3xl font-bold tracking-tight text-gray-900">
Create your account
</h2>
<p className="mt-2 text-sm text-gray-700">
Already have an account?{' '}
<Link href="/login" className="font-medium text-blue-600 hover:text-blue-700">
Sign in
</Link>
</p>
</div>
<div className="bg-white rounded-lg shadow p-8">
<form onSubmit={handleSubmit} className="space-y-6">
{error && (
<div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
{error}
</div>
)}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label htmlFor="firstName" className="block text-sm font-medium text-gray-800 mb-2">
First Name *
</label>
<input
type="text"
id="firstName"
name="firstName"
required
value={formData.firstName}
onChange={handleChange}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 placeholder:text-gray-500"
/>
</div>
<div>
<label htmlFor="lastName" className="block text-sm font-medium text-gray-800 mb-2">
Last Name *
</label>
<input
type="text"
id="lastName"
name="lastName"
required
value={formData.lastName}
onChange={handleChange}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 placeholder:text-gray-500"
/>
</div>
</div>
<div>
<label htmlFor="username" className="block text-sm font-medium text-gray-800 mb-2">
Username *
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<User className="h-5 w-5 text-gray-600" />
</div>
<input
type="text"
id="username"
name="username"
required
value={formData.username}
onChange={handleChange}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 placeholder:text-gray-500"
placeholder="johndoe"
/>
</div>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-800 mb-2">
Email Address *
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<Mail className="h-5 w-5 text-gray-600" />
</div>
<input
type="email"
id="email"
name="email"
required
value={formData.email}
onChange={handleChange}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 placeholder:text-gray-500"
placeholder="john@example.com"
/>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label htmlFor="password" className="block text-sm font-medium text-gray-800 mb-2">
Password *
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<Lock className="h-5 w-5 text-gray-600" />
</div>
<input
type="password"
id="password"
name="password"
required
minLength={6}
value={formData.password}
onChange={handleChange}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 placeholder:text-gray-500"
placeholder="Min. 6 characters"
/>
</div>
</div>
<div>
<label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-800 mb-2">
Confirm Password *
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<Lock className="h-5 w-5 text-gray-600" />
</div>
<input
type="password"
id="confirmPassword"
name="confirmPassword"
required
minLength={6}
value={formData.confirmPassword}
onChange={handleChange}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 placeholder:text-gray-500"
placeholder="Re-enter password"
/>
</div>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label htmlFor="dob" className="block text-sm font-medium text-gray-800 mb-2">
Date of Birth *
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<Calendar className="h-5 w-5 text-gray-600" />
</div>
<input
type="date"
id="dob"
name="dob"
required
value={formData.dob}
onChange={handleChange}
max={new Date().toISOString().split('T')[0]}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
/>
</div>
</div>
<div>
<label htmlFor="gender" className="block text-sm font-medium text-gray-800 mb-2">
Gender *
</label>
<select
id="gender"
name="gender"
required
value={formData.gender}
onChange={handleChange}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
<option value="prefer_not_to_say">Prefer not to say</option>
</select>
</div>
</div>
<div>
<label htmlFor="expertiseLevel" className="block text-sm font-medium text-gray-800 mb-2">
Market Experience *
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<Briefcase className="h-5 w-5 text-gray-600" />
</div>
<select
id="expertiseLevel"
name="expertiseLevel"
required
value={formData.expertiseLevel}
onChange={handleChange}
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
>
<option value="0-1">0-1 years (Beginner)</option>
<option value="1-5">1-5 years (Intermediate)</option>
<option value="5-10">5-10 years (Advanced)</option>
<option value="10+">10+ years (Expert)</option>
</select>
</div>
</div>
<div>
<button
type="submit"
disabled={loading}
className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:bg-gray-400 disabled:cursor-not-allowed"
>
{loading ? 'Creating account...' : 'Create Account'}
</button>
</div>
</form>
</div>
</div>
</div>
);
}
