mars
f20988b90c
- 更新 DashboardLayout 组件，统一使用演示模式布局 - 实现仪表盘页面的完整演示数据和功能 - 完成用户管理页面的演示模式，包含搜索、过滤、分页等功能 - 实现通话记录页面的演示数据和录音播放功能 - 完成翻译员管理页面的演示模式 - 实现订单管理页面的完整功能 - 完成发票管理页面的演示数据 - 更新文档管理页面 - 添加 utils.ts 工具函数库 - 完善 API 路由和数据库结构 - 修复各种 TypeScript 类型错误 - 统一界面风格和用户体验
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
|