Initial commit: CarrotAssistant admin console (React + Vite + TS)

src/pages/Login.tsx

@@ -0,0 +1,57 @@
+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>
+  )
+}