131 lines
4.1 KiB
TypeScript
131 lines
4.1 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
import Link from 'next/link'
|
||
import { useRouter } from 'next/navigation'
|
||
|
||
export default function LoginPage() {
|
||
const [formData, setFormData] = useState({
|
||
email: '',
|
||
password: ''
|
||
})
|
||
const [isLoading, setIsLoading] = useState(false)
|
||
const [error, setError] = useState('')
|
||
const router = useRouter()
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
setIsLoading(true)
|
||
setError('')
|
||
|
||
try {
|
||
const response = await fetch('/api/auth/login', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(formData),
|
||
})
|
||
|
||
const data = await response.json()
|
||
|
||
if (response.ok) {
|
||
localStorage.setItem('token', data.token)
|
||
localStorage.setItem('user', JSON.stringify(data.user))
|
||
// 触发用户更新事件
|
||
window.dispatchEvent(new Event('user-updated'))
|
||
router.push('/')
|
||
} else {
|
||
setError(data.message || '登录失败')
|
||
}
|
||
} catch (error) {
|
||
setError('网络错误，请稍后重试')
|
||
} finally {
|
||
setIsLoading(false)
|
||
}
|
||
}
|
||
|
||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
setFormData({
|
||
...formData,
|
||
[e.target.name]: e.target.value
|
||
})
|
||
}
|
||
|
||
return (
|
||
<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="/register" className="font-medium text-blue-600 hover:text-blue-500">
|
||
创建新账户
|
||
</Link>
|
||
</p>
|
||
</div>
|
||
|
||
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
|
||
{error && (
|
||
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
|
||
邮箱地址
|
||
</label>
|
||
<input
|
||
id="email"
|
||
name="email"
|
||
type="email"
|
||
required
|
||
value={formData.email}
|
||
onChange={handleChange}
|
||
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||
placeholder="请输入邮箱地址"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label htmlFor="password" className="block text-sm font-medium text-gray-700">
|
||
密码
|
||
</label>
|
||
<input
|
||
id="password"
|
||
name="password"
|
||
type="password"
|
||
required
|
||
value={formData.password}
|
||
onChange={handleChange}
|
||
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||
placeholder="请输入密码"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<button
|
||
type="submit"
|
||
disabled={isLoading}
|
||
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
|
||
>
|
||
{isLoading ? '登录中...' : '登录'}
|
||
</button>
|
||
</div>
|
||
|
||
<div className="text-center">
|
||
<p className="text-sm text-gray-600">
|
||
测试账号：admin@pcdiy.com，密码：admin123
|
||
</p>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|