forked from datawhale/whale-town-end
51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
import { Button, Card, Form, Input, Typography, message } from 'antd';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { api } from '../lib/api';
|
|
import { setToken } from '../lib/adminAuth';
|
|
|
|
type LoginValues = {
|
|
identifier: string;
|
|
password: string;
|
|
};
|
|
|
|
export function LoginPage() {
|
|
const navigate = useNavigate();
|
|
const [form] = Form.useForm<LoginValues>();
|
|
|
|
const onFinish = async (values: LoginValues) => {
|
|
try {
|
|
const res = await api.adminLogin(values.identifier, values.password);
|
|
if (!res?.success || !res?.data?.access_token) {
|
|
throw new Error(res?.message || '登录失败');
|
|
}
|
|
|
|
setToken(res.data.access_token);
|
|
message.success('登录成功');
|
|
navigate('/users');
|
|
} catch (e: any) {
|
|
message.error(e?.message || '登录失败');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div style={{ minHeight: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
|
<Card style={{ width: 420 }}>
|
|
<Typography.Title level={4} style={{ marginTop: 0 }}>
|
|
管理员登录
|
|
</Typography.Title>
|
|
<Form form={form} layout="vertical" onFinish={onFinish}>
|
|
<Form.Item name="identifier" label="用户名/邮箱/手机号" rules={[{ required: true }]}>
|
|
<Input placeholder="admin" autoComplete="username" />
|
|
</Form.Item>
|
|
<Form.Item name="password" label="密码" rules={[{ required: true }]}>
|
|
<Input.Password placeholder="请输入密码" autoComplete="current-password" />
|
|
</Form.Item>
|
|
<Button type="primary" htmlType="submit" block>
|
|
登录
|
|
</Button>
|
|
</Form>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|