import { useState } from "react";
|
import { Button, Card, Form, Input, message } from "antd";
|
import { useNavigate } from "react-router-dom";
|
import { api, setToken } from "../api";
|
import type { UserMe } from "../App";
|
import "./LoginPage.css";
|
import SystemBrand from "../components/SystemBrand";
|
|
export default function LoginPage({ onLogin }: { onLogin: (u: UserMe) => void }) {
|
const nav = useNavigate();
|
const [loading, setLoading] = useState(false);
|
return (
|
<div className="login-page">
|
<div className="login-page__brand login-glass">
|
<SystemBrand size="lg" />
|
</div>
|
<Card title="登录" className="login-page__card">
|
<Form
|
layout="vertical"
|
onFinish={async (v) => {
|
setLoading(true);
|
try {
|
const { data } = await api.post<{ access_token: string }>("/api/auth/login", v);
|
setToken(data.access_token);
|
const me = await api.get<UserMe>("/api/auth/me");
|
onLogin(me.data);
|
nav("/scores");
|
} catch {
|
message.error("登录失败");
|
} finally {
|
setLoading(false);
|
}
|
}}
|
>
|
<Form.Item name="username" label="账号" rules={[{ required: true }]}>
|
<Input />
|
</Form.Item>
|
<Form.Item name="password" label="密码" rules={[{ required: true }]}>
|
<Input.Password />
|
</Form.Item>
|
<Button type="primary" htmlType="submit" block loading={loading}>
|
登录
|
</Button>
|
</Form>
|
</Card>
|
</div>
|
);
|
}
|
