import React, { PropTypes, Component }        from 'react';
import { TextField, RaisedButton, FontIcon }  from 'material-ui';

/*jshint esnext: true */
export default class Login extends Component {
  constructor() {
    super();
  }

  handleSubmit (e) {
    e.preventDefault();
    let formData = {
      username: this.refs.username.getValue().trim(),
      password: this.refs.password.getValue().trim()
    };

    this.props.postApiData('/auth/local', formData);

    this.refs.username.setValue('');
    this.refs.password.setValue('');
  }

	render() {
		return (
    <div>
      <div className = "row">
        <div className = "col-md-4 col-md-offset-4 text-center">
        	<h1 id="heading">{'Login'}</h1>
        	<form 
            action="" 
            onSubmit={this.handleSubmit.bind(this)}
          >
            <div>
              <TextField 
                  floatingLabelText={
                    <span>
                      <i 
                          className="material-icons" 
                          style={{"vertical-align": 'middle'}}
                      >{'person'}
                      </i>{'Username'}
                    </span>} 
                  hintText="" 
                  ref="username"
                  style={{
                    width: 'auto',
                    display: 'absolute'
                  }}
              />
            </div>
            <div>
              <TextField 
                  floatingLabelText={
                    <span>
                      <i 
                          className="material-icons" 
                          style={{"vertical-align": 'middle'}}
                      >{'lock'}
                      </i>{'Password'}
                    </span>} 
                  hintText="" 
                  ref="password"
                  style={{
                      width: 'auto',
                      display: 'absolute'
                  }}
                  type="password" 
              />
            </div>

            <div className="form-group">
              <RaisedButton 
                  label="Login" 
                  style={{
                      width: 'auto',
                      display: 'absolute'
                  }}
                  type="submit" 
              />
            </div>

            <div className="form-group">
              <RaisedButton 
                  href="auth/facebook" 
                  label="Login with Facebook" 
                  style={{
                      width: 'auto',
                      display: 'absolute'
                  }}
              />
            </div>
        	</form>
        </div>
      </div>
    </div>
		);
	}
};

Login.propTypes = {
  postApiData: PropTypes.func.isRequired
}

@@ -120,16 +120,112 @@
 l-ui';%0A%0A
+import %7B connect %7D from 'react-redux';%0Aimport %7B fetchApiData, postApiData %7D from '../actions';%0A%0A
 /*jshint
@@ -558,16 +558,68 @@
 mData);%0A
+    this.props.fetchApiData('/api/user/profile/me');
 %0A    thi
@@ -1186,34 +1186,33 @@
 tyle=%7B%7B%22vertical
--a
+A
 lign%22: 'middle'%7D
@@ -2869,45 +2869,271 @@
 %7B%0A  
-postApiData: PropTypes.func.isRequired%0A%7D
+fetchApiData: PropTypes.func.isRequired, %0A  postApiData: PropTypes.func.isRequired%0A%7D%0A%0Afunction mapStateToProperties(state) %7B%0A  const %7B profile %7D = state;%0A  return %7B profile %7D;%0A%7D%0A%0Aexport default connect(mapStateToProperties, %7B%0A  fetchApiData,%0A  postApiData%0A%7D)(Login);
 %0A

Refactor Login into smart component and add automatic retrieval of profile after logging in