119 lines
3.8 KiB
TypeScript
119 lines
3.8 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { authService } from '@/services/AuthService'
|
|
import FormError from '@/components/FormError'
|
|
|
|
export default function RegisterPage() {
|
|
const router = useRouter()
|
|
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
})
|
|
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
[e.target.name]: e.target.value,
|
|
}))
|
|
}
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
try {
|
|
if (formData.password !== formData.confirmPassword) {
|
|
throw new Error('Passwords do not match.')
|
|
}
|
|
|
|
console.log('Register', formData)
|
|
const result = await authService.register(formData.name, formData.email, formData.password)
|
|
console.log('Registered:', result)
|
|
|
|
router.push('/login') // Redirect after success
|
|
} catch (err: any) {
|
|
console.error(err.message)
|
|
setError(err.message)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="container mt-5" style={{ maxWidth: '400px' }}>
|
|
<h2 className="mb-4 text-center">Register</h2>
|
|
|
|
<FormError message={error} />
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="mb-3">
|
|
<label htmlFor="name" className="form-label">
|
|
Nickname
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
id="name"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-3">
|
|
<label htmlFor="email" className="form-label">
|
|
Email address
|
|
</label>
|
|
<input
|
|
type="email"
|
|
className="form-control"
|
|
id="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-3">
|
|
<label htmlFor="password" className="form-label">
|
|
Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
className="form-control"
|
|
id="password"
|
|
name="password"
|
|
value={formData.password}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<label htmlFor="confirmPassword" className="form-label">
|
|
Confirm Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
className="form-control"
|
|
id="confirmPassword"
|
|
name="confirmPassword"
|
|
value={formData.confirmPassword}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<button type="submit" className="btn btn-primary w-100">
|
|
Register
|
|
</button>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|