import React, { Component } from 'react'
import t from 't-component'
import FormAsync from 'lib/site/form-async'

export default class Reset extends Component {
  constructor (props) {
    super(props)
    this.state = {
      loading: false,
      errors: [],
      msg: '',
      email: ''
    }
    this.onSuccess = this.onSuccess.bind(this)
    this.onFail = this.onFail.bind(this)
    this.onSubmit = this.onSubmit.bind(this)
  }

  onSubmit (data) {
    this.setState({ loading: true })
  }

  onSuccess (res) {
    this.setState({ loading: false, errors: [], msg: t('settings.password-updated') })
  }

  onFail (err) {
    this.setState({ loading: false, errors: err })
  }

  render () {
    return (
      <div className='center-container'>
        <div id='reset-form'>
          <div className='title-page'>
            <div className='circle'>
              <i className='icon-energy' />
            </div>
            <h1>{t('forgot.reset')}</h1>
          </div>
          <FormAsync
            action='/api/forgot/reset'
            className='form'
            onSuccess={this.onSuccess.bind(this)}
            onFail={this.onFail.bind(this)}
            onSubmit={this.onSubmit.bind(this)}>
            <input
              type='hidden'
              name='token'
              defaultValue={this.props.params.token} />
            {
              !!this.state.errors.length &&
              (
                <ul
                  className='form-errors'>
                  {
                    this.state.errors && this.state.errors
                      .map((error, key) => (<li key={key}>{error}</li>))
                  }
                </ul>
              )
            }
            {
              !!this.state.msg &&
              (
                <div className='alert alert-success'>
                  {this.state.msg}
                </div>
              )
            }
            <div className='form-group'>
              <label htmlFor='pass-reset'>{t('password.new')}</label>
              <input
                id='reset-pass'
                type='password'
                className='form-control'
                name='password'
                tabIndex={1}
                placeholder={t('password')}
                pattern='.{6,}'
                required />
            </div>
            <div className='form-group'>
              <label htmlFor='pass-reset-re'>{t('password.retype')}</label>
              <input
                type='password'
                className='form-control'
                name='re_password'
                tabIndex={2}
                data-same-as='#reset-pass'
                placeholder={t('password.repeat')}
                required />
            </div>
            <div className='form-group'>
              <button
                className={!this.state.loading ? 'btn btn-primary btn-block' : 'hide'}
                type='submit'
                tabIndex={3}>
                {t('form.send')}
              </button>
              <button
                className={this.state.loading ? 'loader-btn btn btn-default btn-block' : 'hide'}>
                <div className='loader' />
                {t('form.send')}
              </button>
            </div>
          </FormAsync>
        </div>
      </div>
    )
  }
}

@@ -676,16 +676,588 @@
 %7D)%0A  %7D%0A%0A
+  validatePass (e) %7B%0A    const inputs = e.target.parentNode.parentNode.getElementsByTagName('input')%0A    const pass = inputs%5B1%5D%0A    if (pass.value.length %3C 6) %7B%0A    const rePass = inputs%5B2%5D%0A      pass.setCustomValidity(t('validators.min-length.plural', %7B n: 6 %7D))%0A      pass.checkValidity()%0A    %7D else %7B%0A      if (pass.value !== rePass.value) %7B%0A        rePass.setCustomValidity(t('common.pass-match-error'))%0A        pass.checkValidity()%0A      %7D else %7B%0A        rePass.setCustomValidity('')%0A        pass.setCustomValidity('')%0A        pass.checkValidity()%0A      %7D%0A    %7D%0A  %7D%0A%0A
   render
@@ -2818,40 +2818,8 @@
 ')%7D%0A
-                pattern='.%7B6,%7D'%0A
     
@@ -3140,51 +3140,8 @@
 %7B2%7D%0A
-                data-same-as='#reset-pass'%0A
     
@@ -3384,16 +3384,60 @@
 'hide'%7D%0A
+                onClick=%7Bthis.validatePass%7D%0A
         

fix reset pass validation