41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import { Card, Form, Input, Button, message } from 'antd';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { useAuth } from '../context/AuthContext';
|
||
|
||
const LoginPage = () => {
|
||
const { login } = useAuth();
|
||
const navigate = useNavigate();
|
||
|
||
const onFinish = async (values: any) => {
|
||
try {
|
||
await login(values.username, values.password);
|
||
message.success('登录成功');
|
||
navigate('/admin/products');
|
||
} catch (error: any) {
|
||
message.error(error?.response?.data?.message || '登录失败');
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Card title="商家后台登录" style={{ maxWidth: 420, margin: '0 auto' }}>
|
||
<Form layout="vertical" onFinish={onFinish} initialValues={{ username: 'demo', password: 'demo123' }}>
|
||
<Form.Item name="username" label="账号" rules={[{ required: true }]}
|
||
extra="演示账号：demo / demo123">
|
||
<Input placeholder="请输入账号" />
|
||
</Form.Item>
|
||
<Form.Item name="password" label="密码" rules={[{ required: true }]}>
|
||
<Input.Password placeholder="请输入密码" />
|
||
</Form.Item>
|
||
<Button type="primary" htmlType="submit" block>
|
||
登录
|
||
</Button>
|
||
<Button type="link" block onClick={() => navigate('/register')}>
|
||
没有账号？立即注册
|
||
</Button>
|
||
</Form>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
export default LoginPage;
|