223 lines
8.1 KiB
TypeScript
223 lines
8.1 KiB
TypeScript
|
import React, { useState } from 'react'
|
|||
|
|
import { useRouter } from 'next/router'
|
|||
|
|
import Head from 'next/head'
|
|||
|
|
import Link from 'next/link'
|
|||
|
|
|
|||
|
|
const RegisterPage = () => {
|
|||
|
|
const router = useRouter()
|
|||
|
|
const [formData, setFormData] = useState({
|
|||
|
|
email: '',
|
|||
|
|
password: '',
|
|||
|
|
confirmPassword: '',
|
|||
|
|
name: '',
|
|||
|
|
phone: '',
|
|||
|
|
user_type: 'individual' as 'individual' | 'enterprise'
|
|||
|
|
})
|
|||
|
|
const [loading, setLoading] = useState(false)
|
|||
|
|
const [error, setError] = useState('')
|
|||
|
|
const [success, setSuccess] = useState('')
|
|||
|
|
|
|||
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
|||
|
|
setFormData({
|
|||
|
|
...formData,
|
|||
|
|
[e.target.name]: e.target.value
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|||
|
|
e.preventDefault()
|
|||
|
|
setLoading(true)
|
|||
|
|
setError('')
|
|||
|
|
setSuccess('')
|
|||
|
|
|
|||
|
|
// 验证密码匹配
|
|||
|
|
if (formData.password !== formData.confirmPassword) {
|
|||
|
|
setError('密码不匹配')
|
|||
|
|
setLoading(false)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const { confirmPassword, ...registerData } = formData
|
|||
|
|
|
|||
|
|
const response = await fetch('/api/auth/register', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json'
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify(registerData)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const data = await response.json()
|
|||
|
|
|
|||
|
|
if (data.success) {
|
|||
|
|
if (data.data.needEmailVerification) {
|
|||
|
|
setSuccess('注册成功！请检查您的邮箱并验证账户后登录。')
|
|||
|
|
} else {
|
|||
|
|
setSuccess('注册成功！正在跳转到登录页面...')
|
|||
|
|
setTimeout(() => {
|
|||
|
|
router.push('/auth/login')
|
|||
|
|
}, 2000)
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
setError(data.error || '注册失败')
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Register error:', error)
|
|||
|
|
setError('网络错误，请稍后重试')
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<Head>
|
|||
|
|
<title>注册 - 口译服务管理平台</title>
|
|||
|
|
</Head>
|
|||
|
|
|
|||
|
|
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
|||
|
|
<div className="max-w-md w-full space-y-8">
|
|||
|
|
<div>
|
|||
|
|
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
|||
|
|
注册新账户
|
|||
|
|
</h2>
|
|||
|
|
<p className="mt-2 text-center text-sm text-gray-600">
|
|||
|
|
或{' '}
|
|||
|
|
<Link href="/auth/login" className="font-medium text-indigo-600 hover:text-indigo-500">
|
|||
|
|
登录现有账户
|
|||
|
|
</Link>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div>
|
|||
|
|
<label htmlFor="name" className="block text-sm font-medium text-gray-700">
|
|||
|
|
姓名
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
id="name"
|
|||
|
|
name="name"
|
|||
|
|
type="text"
|
|||
|
|
required
|
|||
|
|
className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
|||
|
|
placeholder="请输入您的姓名"
|
|||
|
|
value={formData.name}
|
|||
|
|
onChange={handleChange}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
|
|||
|
|
邮箱地址
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
id="email"
|
|||
|
|
name="email"
|
|||
|
|
type="email"
|
|||
|
|
autoComplete="email"
|
|||
|
|
required
|
|||
|
|
className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
|||
|
|
placeholder="请输入邮箱地址"
|
|||
|
|
value={formData.email}
|
|||
|
|
onChange={handleChange}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label htmlFor="phone" className="block text-sm font-medium text-gray-700">
|
|||
|
|
手机号码
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
id="phone"
|
|||
|
|
name="phone"
|
|||
|
|
type="tel"
|
|||
|
|
className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
|||
|
|
placeholder="请输入手机号码（可选）"
|
|||
|
|
value={formData.phone}
|
|||
|
|
onChange={handleChange}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label htmlFor="user_type" className="block text-sm font-medium text-gray-700">
|
|||
|
|
用户类型
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
id="user_type"
|
|||
|
|
name="user_type"
|
|||
|
|
required
|
|||
|
|
className="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
|||
|
|
value={formData.user_type}
|
|||
|
|
onChange={handleChange}
|
|||
|
|
>
|
|||
|
|
<option value="individual">个人用户</option>
|
|||
|
|
<option value="enterprise">企业用户</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label htmlFor="password" className="block text-sm font-medium text-gray-700">
|
|||
|
|
密码
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
id="password"
|
|||
|
|
name="password"
|
|||
|
|
type="password"
|
|||
|
|
autoComplete="new-password"
|
|||
|
|
required
|
|||
|
|
className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
|||
|
|
placeholder="请输入密码（至少6位）"
|
|||
|
|
value={formData.password}
|
|||
|
|
onChange={handleChange}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700">
|
|||
|
|
确认密码
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
id="confirmPassword"
|
|||
|
|
name="confirmPassword"
|
|||
|
|
type="password"
|
|||
|
|
autoComplete="new-password"
|
|||
|
|
required
|
|||
|
|
className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
|||
|
|
placeholder="请再次输入密码"
|
|||
|
|
value={formData.confirmPassword}
|
|||
|
|
onChange={handleChange}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{error && (
|
|||
|
|
<div className="rounded-md bg-red-50 p-4">
|
|||
|
|
<div className="text-sm text-red-700">{error}</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{success && (
|
|||
|
|
<div className="rounded-md bg-green-50 p-4">
|
|||
|
|
<div className="text-sm text-green-700">{success}</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<button
|
|||
|
|
type="submit"
|
|||
|
|
disabled={loading}
|
|||
|
|
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
|||
|
|
>
|
|||
|
|
{loading ? '注册中...' : '注册'}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default RegisterPage
|