import { useState, FormEvent } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { useAuthStore } from '@/stores/authStore'
export default function Register() {
const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [confirmPassword, setConfirmPassword] = useState('')
const [showPassword, setShowPassword] = useState(false)
const [errors, setErrors] = useState<Record<string, string>>({})
const { register, isLoading, error, clearError } = useAuthStore()
const navigate = useNavigate()
const validateForm = () => {
const newErrors: Record<string, string> = {}
if (!name.trim()) {
newErrors.name = 'Name is required'
}
if (!email.trim()) {
newErrors.email = 'Email is required'
} else if (!/\S+@\S+\.\S+/.test(email)) {
newErrors.email = 'Email is invalid'
}
if (!password) {
newErrors.password = 'Password is required'
} else if (password.length < 6) {
newErrors.password = 'Password must be at least 6 characters'
}
if (password !== confirmPassword) {
newErrors.confirmPassword = 'Passwords do not match'
}
setErrors(newErrors)
return Object.keys(newErrors).length === 0
}
const handleSubmit = async (e: FormEvent) => {
e.preventDefault()
clearError()
if (!validateForm()) {
return
}
await register({ name, email, password })
// Navigate to dashboard on successful registration
const { user } = useAuthStore.getState()
if (user) {
navigate('/')
}
}
return (
<div className="min-h-screen flex items-center justify-center bg-gray-900 px-4">
<div className="max-w-md w-full space-y-8">
{/* Header */}
<div className="text-center">
<h1 className="text-3xl font-bold text-white mb-2">
Clean Cut Video
</h1>
<p className="text-gray-400">
Create your free account
</p>
</div>
{/* Register Form */}
<div className="card">
<div className="card-header">
<h2 className="card-title">Create your account</h2>
</div>
{error && (
<div className="mb-4 p-3 bg-red-900/50 border border-red-700 rounded-lg text-red-200 text-sm">
{error}
</div>
)}
<form onSubmit={handleSubmit} className="space-y-6">
{/* Name */}
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-300 mb-2">
Full Name
</label>
<input
id="name"
type="text"
required
value={name}
onChange={(e) => setName(e.target.value)}
className={`input ${errors.name ? 'border-red-500' : ''}`}
placeholder="Enter your full name"
/>
{errors.name && (
<p className="mt-1 text-sm text-red-400">{errors.name}</p>
)}
</div>
{/* Email */}
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
Email address
</label>
<input
id="email"
type="email"
required
value={email}
onChange={(e) => setEmail(e.target.value)}
className={`input ${errors.email ? 'border-red-500' : ''}`}
placeholder="Enter your email"
/>
{errors.email && (
<p className="mt-1 text-sm text-red-400">{errors.email}</p>
)}
</div>
{/* Password */}
<div>
<label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-2">
Password
</label>
<div className="relative">
<input
id="password"
type={showPassword ? 'text' : 'password'}
required
value={password}
onChange={(e) => setPassword(e.target.value)}
className={`input pr-10 ${errors.password ? 'border-red-500' : ''}`}
placeholder="Create a password"
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-300"
>
{showPassword ? 'Hide' : 'Show'}
</button>
</div>
{errors.password && (
<p className="mt-1 text-sm text-red-400">{errors.password}</p>
)}
</div>
{/* Confirm Password */}
<div>
<label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-300 mb-2">
Confirm Password
</label>
<input
id="confirmPassword"
type="password"
required
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
className={`input ${errors.confirmPassword ? 'border-red-500' : ''}`}
placeholder="Confirm your password"
/>
{errors.confirmPassword && (
<p className="mt-1 text-sm text-red-400">{errors.confirmPassword}</p>
)}
</div>
{/* Submit Button */}
<button
type="submit"
disabled={isLoading}
className="btn btn-primary w-full py-3 text-base disabled:opacity-50 disabled:cursor-not-allowed"
>
{isLoading ? (
<div className="flex items-center justify-center">
<div className="loading-spinner mr-2"></div>
Creating account...
</div>
) : (
'Create Account'
)}
</button>
</form>
{/* Footer */}
<div className="mt-6 text-center">
<p className="text-gray-400">
Already have an account?{' '}
<Link
to="/login"
className="text-primary-400 hover:text-primary-300 font-medium"
>
Sign in
</Link>
</p>
</div>
</div>
</div>
</div>
)
}
