import React, {PropTypes} from 'react';

var LoginView = React.createClass({
  getInitialState : function(){
    return {type: 'basic', email: '', password: ''}
  },
  update_password(event){
    this.setState({password: event.target.value})
  },
  update_email(event){
    this.setState({email: event.target.value})
  },
  handleSubmit(ev){
    ev.preventDefault()
    if ($(this.refs.el).form('validate form')){
      this.props._onSubmit(this.state)
    }
    else{
      this.props._onInvalidForm();
    }
  },
  componentDidMount( ){
    self=this
    $(this.refs.el).form({
      on: 'blur',
      fields: {
        email: 'email',
        password: 'minLength[6]'
      }
    })
    $(self.refs.el).find('[type=email]').focus()
  },
  render: function(){
    return (
      <form ref="el" className="ui form" method="POST" onSubmit={this.handleSubmit}>
        <div className="ui small modal active" id="login">
          <div className="header">
            Login
          </div>

          <div className="content">
            <div className="field">
              <label>Email</label>
              <input type="email" name="email" placeholder="user@company.com"
                onChange={this.update_email} value={this.state.email}
                />
            </div>

            <div className="field">
              <label>Password</label>
              <input type="password" name="password" placeholder="*******"
                onChange={this.update_password} value={this.state.password}
                />
            </div>
            <div className="ui error message"></div>
          </div>

          <div className="actions">
            <span className="ui checkbox action left" style={{float: "left"}}>
                <input type="checkbox" name="keep_logged_in"/>
                <label>
                Keep logged login
              </label>
            </span>
            <button type="button" className="ui positive right labeled icon button"
              onClick={this.handleSubmit}>
              Login
              <i className="caret right icon"></i>
            </button>
          </div>
        </div>
      </form>
    )
  },
  propTypes: {
    _onSubmit: PropTypes.func.isRequired
  }
})


export default LoginView

@@ -76,318 +76,152 @@
 %7B%0A  
-getInitialState : function(
+handleSubmit(ev
 )%7B%0A    
-return %7Btype: 'basic', email: '', password: ''%7D%0A  %7D,%0A  update_password(event)%7B%0A    this.setState(%7Bpassword: event.target.value%7D)%0A  %7D,%0A  update_email(event)%7B%0A    this.setState(%7Bemail: event.target.
+let $form = $(this.refs.el)%0A    let fields = $form.form('get 
 value
-%7D)%0A  %7D,%0A  handleSubmit(ev)%7B%0A    ev.preventDefault()%0A    if ($(this.refs.el)
+s')%0A%0A    console.log(%22%25o %25o%22, ev, fields);%0A    if ($form
 .for
@@ -272,76 +272,93 @@
 mit(
-this.state)%0A
+%0A        Object.assign(%7Btype: 'basic'%7D, fields)%0A  
     
-%7D
+)
 %0A    
-else%7B%0A      this.props._onInvalidForm();%0A    %7D
+%7D%0A    ev.preventDefault()
 %0A  %7D
@@ -397,16 +397,17 @@
 lf=this%0A
+%0A
     $(th
@@ -530,16 +530,49 @@
 %7D%0A    %7D)
+.on('submit', self.handleSubmit)%0A
 %0A    $(s
@@ -711,37 +711,8 @@
 OST%22
- onSubmit=%7Bthis.handleSubmit%7D
 %3E%0A  
@@ -1028,78 +1028,8 @@
 om%22%0A
-                onChange=%7Bthis.update_email%7D value=%7Bthis.state.email%7D%0A
     
@@ -1216,84 +1216,8 @@
 **%22%0A
-                onChange=%7Bthis.update_password%7D value=%7Bthis.state.password%7D%0A
     
@@ -1626,22 +1626,22 @@
 n type=%22
-button
+submit
 %22 classN
@@ -1687,50 +1687,8 @@
 ton%22
-%0A              onClick=%7Bthis.handleSubmit%7D
 %3E%0A  

Fix login better use of semantic forms, and submit on enter