import React, {Component} from 'react'; import {Button, Card, Form, Input, Typography} from "antd"; import './Login.css' import request from "../common/request"; import {withRouter} from "react-router-dom"; import {LockOutlined, UserOutlined} from '@ant-design/icons'; const {Title} = Typography; class LoginForm extends Component { formRef = React.createRef(); state = { inLogin: false, height: window.innerHeight, width: window.innerWidth }; componentDidMount() { window.addEventListener('resize', () => { this.setState({ height: window.innerHeight, width: window.innerWidth }) }); } handleSubmit = async params => { this.setState({ inLogin: true }); try { let result = await request.post('/login', params); // 跳转登录 localStorage.setItem('X-Auth-Token', result['token']); // this.props.history.push(); window.location.href = "/" } finally { this.setState({ inLogin: false }); } }; render() { return ( <div className='login-bg' style={{width: this.state.width, height: this.state.height, backgroundColor: '#F0F2F5'}}> <Card className='login-card' title={null}> <div style={{textAlign: "center", margin: '15px auto 30px auto', color: '#1890ff'}}> <Title level={1}>Kafka Map</Title> </div> <Form onFinish={this.handleSubmit} className="login-form"> <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> {/*<Form.Item name='remember' valuePropName='checked' initialValue={false}>*/} {/* <Checkbox>记住登录</Checkbox>*/} {/*</Form.Item>*/} <Form.Item> <Button type="primary" htmlType="submit" className="login-form-button" loading={this.state.inLogin}> 登录 </Button> </Form.Item> </Form> </Card> </div> ); } } export default withRouter(LoginForm);