58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { useState } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import client, { TOKEN_KEY } from '../api/client.ts'
|
|
|
|
export default function Login() {
|
|
const nav = useNavigate()
|
|
const [username, setUsername] = useState('admin')
|
|
const [password, setPassword] = useState('')
|
|
const [err, setErr] = useState('')
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const submit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setErr('')
|
|
setLoading(true)
|
|
try {
|
|
const { data } = await client.post('/login', { username, password })
|
|
localStorage.setItem(TOKEN_KEY, data.token)
|
|
nav('/', { replace: true })
|
|
} catch (e: any) {
|
|
setErr(e?.response?.data?.error || '登录失败')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
height: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<form className="card" style={{ width: 340 }} onSubmit={submit}>
|
|
<h2 style={{ marginTop: 0 }}>🥕 CarrotAssistant</h2>
|
|
<div className="field">
|
|
<label>用户名</label>
|
|
<input value={username} onChange={(e) => setUsername(e.target.value)} autoFocus />
|
|
</div>
|
|
<div className="field">
|
|
<label>密码</label>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
</div>
|
|
{err && <div style={{ color: 'var(--danger)', marginBottom: 10 }}>{err}</div>}
|
|
<button className="primary" style={{ width: '100%' }} disabled={loading}>
|
|
{loading ? '登录中…' : '登录'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|