react-admin-lte/lib/LoginBox.js

简单封装的 AdminLTE react 类库，并包含一个编译配置。

import React from 'react';

export default class LoginBox extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.login = this.login.bind(this);
  }

  login() {
    var passport   = $("#passport").val();
    var password   = $("#password").val();
    var rememberMe = $("#remeberMe:checked").val() ? true : false;
    if (this.props.onLogin) {
      this.props.onLogin(passport, password, rememberMe);
    }
  }

  render() {
    return <div className="login-box">
      <div className="login-logo">
        {this.props.title}
      </div>
      <div className="login-box-body">
        <p className="login-box-msg">{this.props.vtitle}</p>

        <form method="post" id="tForm">
          <div className="form-group has-feedback">
            <input className="form-control" placeholder="手机/邮箱/昵称" name="passport" id="passport"/>
            <span className="glyphicon glyphicon-user form-control-feedback"/>
          </div>
          <div className="form-group has-feedback">
            <input type="password" className="form-control" placeholder="密码" name="password" id="password"/>
            <span className="glyphicon glyphicon-lock form-control-feedback"/>
          </div>
          <div className="row">
            <div className="col-xs-8">
              <div className="checkbox form-group">
                <label>
                  <input type="checkbox" name="remeberMe" id="remeberMe"/> 记住我
                </label>
              </div>
            </div>
            <div className="col-xs-4">
              <button type="button" id="btnLogin"
                      className="btn btn-primary btn-block btn-flat" onClick={this.login}>现在登录
              </button>
            </div>
          </div>
        </form>
        <br />
        {this.props.children}

      </div>
    </div>;
  }
}