'use strict'

import React from 'react'
import {connect} from 'react-redux'
import {login, login_google} from '../actions/auth'

export const Login = React.createClass({
  componentDidMount () {},

  do_login (event) {
    event.preventDefault()

    const {email, pass} = this.refs
    const {dispatch} = this.props

    dispatch(login(email.value, pass.value))

    email.value = ''
    pass.value = ''
  },

  do_login_google (event) {
    event.preventDefault()

    const {email, pass} = this.refs
    const {dispatch} = this.props

    email.value = ''
    pass.value = ''

    dispatch(login_google())
  },

  render () {
    const {hasError, niceError} = this.props
    let heading = hasError ? niceError : 'Login'

    let msgClass = 'alert mt0 has-icon'
    let iconClass = 'icon icon-signin'

    if (hasError) {
      msgClass = `mt0 has-icon alert alert-error`
    }

    return (
      <main className="page page-login" role="main">
        <div className="container-fluid">
          <div className="row middle-xs center-xs vertical-center">
            <form className="login-form col-xs-12 col-md-6 col-lg-4 txt-left form-full-width form-panel">

              <h2 className={msgClass}>
                <span className={iconClass}></span>
                <span>{heading}</span>
              </h2>

              <input ref="email" type="email" placeholder="Email" className="input-large" required />
              <input ref="pass" type="password" placeholder="Password" className="input-large" required />
              <button type="submit" className="btn btn-large submit" onClick={this.do_login}>Submit</button>
              <a href="/auth/login_google">Google</a>
            </form>
          </div>
        </div>
      </main>
    )
  }
})

export default connect((state) => {
  const {hasError, niceError} = state.auth

  return {
    hasError: hasError,
    niceError: niceError
  }
})(Login)

'use strict'

import React from 'react'
import {connect} from 'react-redux'
import {login, login_google} from '../actions/auth'

export const Login = React.createClass({
  componentDidMount () {},

  do_login (event) {
    event.preventDefault()

    const {email, pass} = this.refs
    const {dispatch} = this.props

    dispatch(login(email.value, pass.value))

    email.value = ''
    pass.value = ''
  },

  do_login_google (event) {
    event.preventDefault()

    const {email, pass} = this.refs
    const {dispatch} = this.props

    email.value = ''
    pass.value = ''

    dispatch(login_google())
  },

  render () {
    const {hasError, niceError} = this.props
    let heading = hasError ? niceError : 'Login'

    let msgClass = 'alert mt0 has-icon'
    let iconClass = 'icon icon-signin'

    if (hasError) {
      msgClass = `mt0 has-icon alert alert-error`
    }

    return (
      <main className="page page-login" role="main">
        <div className="container-fluid">
          <div className="row middle-xs center-xs vertical-center">
            <form className="login-form col-xs-12 col-md-6 col-lg-4 txt-left form-full-width form-panel">

              <h2 className={msgClass}>
                <span className={iconClass}></span>
                <span>{heading}</span>
              </h2>

              <input ref="email" type="email" placeholder="Email" className="input-large" required />
              <input ref="pass" type="password" placeholder="Password" className="input-large" required />
              <button type="submit" className="btn btn-large submit" onClick={this.do_login}>Submit</button>
              <a href="/auth/login_google">Google Login</a>
            </form>
          </div>
        </div>
      </main>
    )
  }
})

export default connect((state) => {
  const {hasError, niceError} = state.auth

  return {
    hasError: hasError,
    niceError: niceError
  }
})(Login)

change for Google login