react login page demo

1. login form

import React from "react";
import {Row, Col} from "antd";
import {Form, Input, Button} from "antd";

import LoginHeader from "./LoginHeader";
import AppFooter from "page/layout/footer/AppFooter";
import "./index.scss";

const FormItem = Form.Item;

class LoginForm  extends React.Component{

    constructor(props){
        super(props);
    }

loginHandler(e) {
    e.preventDefault();
    let loginInfo = {};
    this.props.form.validateFields((err, values) => {
        if(!err){
            loginInfo = {
                username: values.username,
                password: values.password
            }
        }
    })
}

render() { const {getFieldDecorator} =this.props.form; return ( <div className="app-layout app-login"> <div className="login-header"> <LoginHeader /> </div> <div className="login-body"> <div className="app-layout-container"> <Row type="flex" justify="center"> <Col span={24}> <div className="login-left"> <img src="" alt="欢迎登陆react reducer demo"/> </div> <div className="login-right"> <Form onSubmit={(e) => this.loginHandler(e)} className="login-form"> <FormItem> {getFieldDecorator('username',{ rules: [{ required: true, message: "username not null" }] })(<Input addonBefore="username" placeholder="please enter username"/>)} </FormItem> <FormItem> {getFieldDecorator('password',{ rules: [{ required: true, message: "password not null" }] })(<Input addonBefore="password" placeholder="please enter password"/>)} </FormItem> <FormItem> <Button className="btn-block" type="primary" htmlType="submit">login</Button> </FormItem> </Form> </div> </Col> </Row> </div> </div> <AppFooter /> </div>  ) } } const Login = Form.create()(LoginForm); export default Login;

2. index.scss

@import "../../styles/varibles";
.app-login{
  .login-header {
    background: $bg-color;
    margin-bottom: 20px;
  }
  .login-body {
    background: $bg-color;
    min-height: 550px;

    .login-left {
      width: 58%;
      float: left;
      img {
        width: 600px;
        height: 500px;
      }
    }
    .login-right {
      width: 42%;
      float: right;
      height: 500px;
      border: $border;

      .login-form {
        margin: 65px 0 45px 78px;

        .btn-block {
          width: 320px;
          height: 40px;
          margin-top: 20px;
        }

        .btn, .ant-input {
          height: 40px;
        }

        .ant-input-group-addon {
          width: 82px;
          background-color: $bg-color;
          text-align: center;
        }
        .ant-input {
          padding: 0 20px;
          width: 238px;
        }
      }
    }
  }
}