login.js

import React from 'react'
import './login.css'
import * as actions from './actions';

import { Form, Icon, Input, Button, Layout } from 'antd';
const { Header } = Layout;
class NormalLoginForm extends React.Component {
    componentDidMount() {
        if (localStorage.getItem("status") === 'true') {
            this.props.history.push('./navbar')
        }
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields(async (err, values) => {
            if (!err) {
                const data = await actions.handleLogin(values.userName, values.password).catch(e => console.log(e))
                if (data.data === true) {
                    localStorage.setItem("status", data.data)
                    localStorage.setItem("user", values.userName)
                    this.props.history.push('./navbar')
                } else {
                    alert("Invalid Username or Password!")
                }
            }
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div>

                <Header className="header">
                    <div className="logo" />
                </Header>
                <div className="container">
                    <img src={require('./logo.png')} style={{ paddingBottom: '20px' }} className="form-container" />
                    <Form onSubmit={this.handleSubmit} className="login-form">
                        <Form.Item className="form-container">
                            {getFieldDecorator('userName', {
                                rules: [{ required: true, message: 'Please input your username!' }],
                            })(
                                <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
                            )}
                        </Form.Item>
                        <Form.Item className="form-container">
                            {getFieldDecorator('password', {
                                rules: [{ required: true, message: 'Please input your Password!' }],
                            })(
                                <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
                            )}
                        </Form.Item>
                        <Form.Item className="form-container">
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                Log in
                            </Button>

                        </Form.Item>
                    </Form>
                </div>
            </div>
        );
    }
}

const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm);

export default WrappedNormalLoginForm