import { useState } from 'react' import { GetServerSideProps } from 'next' import { getServerSession } from 'next-auth/next' import { signIn } from 'next-auth/react' import Head from 'next/head' import Link from 'next/link' import { useRouter } from 'next/router' import { authOptions } from '../api/auth/[...nextauth]' import Layout from '@/components/layout' export default function SignUp() { const router = useRouter() const { callbackUrl } = router.query const [formData, setFormData] = useState({ name: '', email: '', password: '', confirmPassword: '', }) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const [success, setSuccess] = useState(false) const handleChange = (e: React.ChangeEvent) => { setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value, })) } const validateForm = (): string | null => { if (!formData.email || !formData.password) { return 'Email and password are required' } if (formData.password.length < 8) { return 'Password must be at least 8 characters long' } const hasUpperCase = /[A-Z]/.test(formData.password) const hasLowerCase = /[a-z]/.test(formData.password) const hasNumbers = /\d/.test(formData.password) if (!hasUpperCase || !hasLowerCase || !hasNumbers) { return 'Password must contain uppercase, lowercase, and numbers' } if (formData.password !== formData.confirmPassword) { return 'Passwords do not match' } return null } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError(null) const validationError = validateForm() if (validationError) { setError(validationError) setIsLoading(false) return } try { const response = await fetch('/api/auth/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: formData.name, email: formData.email, password: formData.password, }), }) const data = await response.json() if (!response.ok) { setError(data.message || 'Registration failed') return } setSuccess(true) // Auto sign in after successful registration setTimeout(async () => { const result = await signIn('credentials', { email: formData.email, password: formData.password, redirect: false, }) if (result?.ok) { router.push((callbackUrl as string) || '/') } else { router.push('/auth/signin') } }, 1500) } catch (err) { setError('An unexpected error occurred') } finally { setIsLoading(false) } } if (success) { return ( Registration Successful | LocalGreenChain

Registration Successful!

Your account has been created. Signing you in...

 ) } return ( Sign Up | LocalGreenChain

Create your account

Already have an account?{' '} Sign in

{error && (
{error}
)}

Must contain uppercase, lowercase, and numbers

By creating an account, you agree to our{' '} Terms of Service {' '} and{' '} Privacy Policy

) } export const getServerSideProps: GetServerSideProps = async (context) => { const session = await getServerSession(context.req, context.res, authOptions) if (session) { return { redirect: { destination: '/', permanent: false, }, } } return { props: {}, } }