content: import React from 'react'
  import { Redirect } from 'react-router'
  import PropTypes from 'prop-types'
  import { FormattedMessage, injectIntl } from 'react-intl'
  import MetaHelper from '../../utils/MetaHelper'
  
  function isAlreadyLoggedIn() {
    const user = localStorage.getItem('user')
    return user !== undefined && user !== null
  }
  
  @MetaHelper({
    title: 'Login'
  })
  class Login extends React.Component {
    static contextTypes = {
      store: PropTypes.object.isRequired,
      isAlreadyLoggedIn: PropTypes.func
    }
    constructor(props, context) {
      super(props, context)
      this.state = {
        email: '',
        password: '',
        message: '',
        isAlreadyLoggedIn: false
      }
      this.login = this.login.bind(this)
    }
  
    onEmailChanged = e => {
      this.setState({ email: e.target.value, password: this.state.password })
    }
    onPasswordChanged = e => {
      this.setState({ email: this.state.email, password: e.target.value })
    }
    login = e => {
      const { auth } = this.context.store.firebase
      e.preventDefault()
      const email = this.state.email
      var password = this.state.password
      auth()
        .signInWithEmailAndPassword(email, password)
        .then(response => {
          this.notifyLogin(true)
        })
        .catch(error => {
          console.error(error)
          this.notifyLogin(false)
        })
    }
    notifyLogin(success, message) {
      const form = this.form
      if (success) {
        this.setState({ message: message || 'Login success' })
        const icon = form.querySelector(`.submit i`)
        icon.removeAttribute('class')
        icon.setAttribute('class', 'fa fa-check')
        const submit = form.querySelector(`.submit`)
        submit.blur()
        form.setAttribute(
          'style',
          `
          --submit-icon-color:#FFF;
          --submit-background:#2ecc71;
          --submit-border-color:#2ecc71;
          --input-border-color: #2ecc71;
        `
        )
        this.message.classList.add('animated')
        setTimeout(() => {
          this.setState({ isAlreadyLoggedIn: true })
        }, 2000)
      } else {
        this.setState({ message: message || 'Login fail' })
        const icon = form.querySelector(`.submit i`)
        const submit = form.querySelector(`.submit`)
        icon.removeAttribute('class')
        icon.setAttribute('class', 'fa fa-times')
        form.setAttribute(
          'style',
          `
          --submit-icon-color:#FFF;
          --input-border-color: #FF7052;
        `
        )
        this.message.classList.add('animated')
        setTimeout(() => {
          icon.removeAttribute('class')
          icon.setAttribute('class', 'fa fa-long-arrow-right')
          submit.blur()
          form.removeAttribute('style')
          this.message.classList.remove('animated')
        }, 3000)
      }
    }
    render() {
      let user = localStorage.getItem('user')
      if (user !== null || isAlreadyLoggedIn()) {
        return <Redirect to="/admin" from="/login" />
      }
      return (
        <div className="login">
          <form
            className="container"
            onSubmit={this.login}
            id="login"
            ref={form => {
              this.form = form
            }}>
            <fieldset>
              <legend className="legend">
                <FormattedMessage id="login" defaultMessage="Login" />
              </legend>
              <div className="input">
                <input
                  autoComplete="email"
                  onChange={this.onEmailChanged}
                  type="text"
                  placeholder="Email"
                  required
                />
                <span>
                  <i className="fa fa-envelope-o" />
                </span>
              </div>
              <div className="input">
                <input
                  autoComplete="password"
                  onChange={this.onPasswordChanged}
                  type="password"
                  placeholder="Password"
                  required
                />
                <span>
                  <i className="fa fa-key" />
                </span>
              </div>
              <button
                ref={el => (this.submit = el)}
                type="submit"
                className="submit"
                onClick={this.login}>
                <i className="fa fa-long-arrow-right" />
              </button>
            </fieldset>
  
            <div ref={el => (this.message = el)} className="feedback">
              {this.state.message}
            </div>
          </form>
          <ul className="bg-bubbles">
            <li />
            <li />
            <li />
            <li />
            <li />
            <li />
            <li />
            <li />
            <li />
            <li />
          </ul>
        </div>
      )
    }
  }
  
  export default injectIntl(Login)
  