component

component.js

import React, { useState } from 'react';
import styles from './index.less';
import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useIntl, connect, FormattedMessage } from 'umi';
import { Login as Log } from '@/models/user';

const LoginMessage = ({ content }) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
);

const Login = (props) => {
  const loading = props.loading;
  const onFinish = (values) => {
    props.login(values);
  };

  return (
    <div className={styles.main}>
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
      >
        <Form.Item
          name="username"
          rules={[
            {
              required: true,
              message: 'Please input your Username!',
            },
          ]}
        >
          <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: 'Please input your Password!',
            },
          ]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="Password"
          />
        </Form.Item>

        <Form.Item >
          <Button
            loading={loading}
            block
            type="primary"
            htmlType="submit"
            className="login-form-button"
          >
            Login
          </Button>

        </Form.Item>
      </Form>

      <div className={styles.btnsContainer}>
        <a href="/user/register" className={styles.btn}>
          <Button
            block
            htmlType="submit"
          >
            Signup
        </Button>
        </a>
        <a href="/user/resetPassword">
          <Button type="link" className={styles.forgetBtn}>
            Forget Password?
          </Button>
        </a>
      </div>
    </div>
  );
};

export default connect(
  ({ user, loading }) => ({
    loading: user.loading.login,
  }),
  { login: Log },
)(Login);