import React, { PropTypes }from 'react';
import {Route, IndexRouter} from 'react-router';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { login } from '../actions/userActions';
import {Form, FormGroup, Col, Checkbox, Button, ControlLabel, Label, FormControl, Panel, Nav, Navbar} from 'react-bootstrap';
import '../styles/loginpage.css'

class LoginPage extends React.Component {
  constructor(props) {
    super(props);
    this.onLoginClicked = this.onLoginClicked.bind(this);
  }

  onLoginClicked(event) {
    event.preventDefault();
    const { login } = this.props;
    const username = ReactDOM.findDOMNode(this.refs.username).value;
    const password = ReactDOM.findDOMNode(this.refs.password).value;
    login({ username, password });
  }

  render() {
    return (
      <div style={{width: '650px', margin: '0 auto'}}>
        <Panel>
          <h3>登录主考方账号</h3>
            <div style={{width: '500px', margin: '0 auto'}}>
              <Form horizontal>
                <FormGroup controlId="formHorizontalEmail">
                  <Col componentClass={ControlLabel} sm={2}>
                    登录账号
                  </Col>
                  <Col sm={8}>
                    <FormControl type="text" ref="username" placeholder="请输入您的用户名"/>
                  </Col>
                </FormGroup>

                <FormGroup controlId="formHorizontalPassword">
                  <Col componentClass={ControlLabel} sm={2}>
                    登录密码
                  </Col>
                  <Col sm={8}>
                    <FormControl type="password" ref="password" placeholder="请输入您的密码"/>
                  </Col>
                </FormGroup>

                <FormGroup controlId = "formHorizontalError">
                  <h4>
                    <Label bsStyle="warning">
                      {(this.props.wrongPassword === true) ? "账号或密码错误！" : ""}
                    </Label>
                  </h4>
                </FormGroup>

                <FormGroup>
                  <Col smOffset={2} sm={8}>
                    <Button bsStyle="primary" type="submit" onClick = {this.onLoginClicked}>
                      登录
                    </Button>
                  </Col>
                </FormGroup>
              </Form>
            </div>
        </Panel>
      </div>
    );
  }
}

LoginPage.propTypes = {
  isLogin: PropTypes.bool.isRequired,
  login: PropTypes.func.isRequired,
  wrongPassword: PropTypes.bool.isRequired
};

function mapStateToProps(state) {
  return {
    isLogin : state.user.isLogin,
    wrongPassword: state.user.wrongPassword
  };
}

export default connect(mapStateToProps, {login})(LoginPage);


@@ -38,57 +38,8 @@
 t';%0A
-import %7BRoute, IndexRouter%7D from 'react-router';%0A
 impo
@@ -68,16 +68,16 @@
 t-dom';%0A
+
 import %7B
@@ -188,18 +188,8 @@
 Col,
- Checkbox,
  But
@@ -236,21 +236,8 @@
 anel
-, Nav, Navbar
 %7D fr
@@ -261,41 +261,8 @@
 ap';
-%0Aimport '../styles/loginpage.css'
 %0A%0Acl

Clean warnings.