71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
'use client'
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
|
|
export default function LoginPage() {
|
|
const [username, setUsername] = useState('')
|
|
const [password, setPassword] = useState('')
|
|
const [error, setError] = useState('')
|
|
const router = useRouter()
|
|
const [loading, setLoading] = useState(false) // 新增加载状态
|
|
|
|
const handleLogin = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setLoading(true) // 开始加载
|
|
fetch(`${process.env.NEXT_PUBLIC_BASE_API_URL}/login`, {
|
|
method: 'post',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ username, password }),
|
|
}).then(res => res.json()).then(data => {
|
|
if (data.code === 200) {
|
|
localStorage.setItem('token', data.token)
|
|
document.cookie = `username=${username}; path=/` // 新增cookie设置
|
|
router.push('/')
|
|
} else {
|
|
setError('登录失败，请检查凭证')
|
|
setLoading(false)
|
|
}
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
|
|
<div className="bg-white p-8 rounded-lg shadow-md w-96">
|
|
<h1 className="text-2xl font-bold mb-6 text-center">Login</h1>
|
|
<form onSubmit={handleLogin}>
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium mb-1">Username</label>
|
|
<input
|
|
type="text"
|
|
className="w-full px-3 py-2 border rounded-md"
|
|
value={username}
|
|
onChange={e => setUsername(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="mb-6">
|
|
<label className="block text-sm font-medium mb-1">Password</label>
|
|
<input
|
|
type="password"
|
|
className="w-full px-3 py-2 border rounded-md"
|
|
value={password}
|
|
onChange={e => setPassword(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
{error && <p className="text-red-500 text-sm mb-4">{error}</p>}
|
|
<button
|
|
type="submit"
|
|
disabled={loading} // 禁用按钮
|
|
className={`w-full bg-blue-500 text-white py-2 px-4 rounded-md transition-colors ${!loading && 'hover:bg-blue-600'}`}
|
|
>
|
|
{loading ? 'Loading...' : 'Sign In'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|