53 lines
1.6 KiB
React
53 lines
1.6 KiB
React
|
import { LockOutlined, UserOutlined } from "@ant-design/icons";
|
||
|
|
import { Button, Flex, Form, Input, message } from "antd";
|
||
|
|
import { useDispatch } from "react-redux";
|
||
|
|
import { useNavigate } from "react-router-dom";
|
||
|
|
import { login } from "../features/auth/authThunk";
|
||
|
|
|
||
|
|
export default function Login() {
|
||
|
|
const dispatch = useDispatch();
|
||
|
|
const navigate = useNavigate();
|
||
|
|
|
||
|
|
const onFinish = async (values) => {
|
||
|
|
const res = await dispatch(login(values)).unwrap();
|
||
|
|
message.success("登录成功");
|
||
|
|
navigate("/user/reserve");
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="w-screen h-screen flex justify-center items-center flex-col">
|
||
|
|
<h1 className="m-6 text-gray-800 font-mono text-4xl">xxxx设备预约系统</h1>
|
||
|
|
<Form
|
||
|
|
name="login"
|
||
|
|
autoComplete="off"
|
||
|
|
initialValues={{ size: "large" }}
|
||
|
|
size="large"
|
||
|
|
onFinish={onFinish}
|
||
|
|
className="w-1/4"
|
||
|
|
>
|
||
|
|
<Form.Item
|
||
|
|
name="username"
|
||
|
|
rules={[{ required: true, message: "请输入用户名" }]}
|
||
|
|
>
|
||
|
|
<Input prefix={<UserOutlined />} placeholder="请输入用户名" />
|
||
|
|
</Form.Item>
|
||
|
|
|
||
|
|
<Form.Item
|
||
|
|
name="password"
|
||
|
|
rules={[{ required: true, message: "请输入密码" }]}
|
||
|
|
>
|
||
|
|
<Input.Password prefix={<LockOutlined />} placeholder="请输入密码" />
|
||
|
|
</Form.Item>
|
||
|
|
|
||
|
|
<Flex justify="flex-end">
|
||
|
|
<Form.Item label={null}>
|
||
|
|
<Button type="primary" htmlType="submit">
|
||
|
|
登录
|
||
|
|
</Button>
|
||
|
|
</Form.Item>
|
||
|
|
</Flex>
|
||
|
|
</Form>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|