import React, { Component } from 'react';
import $ from 'jquery';
import AlertFlash from './AlertFlash';
import NoticeFlash from './NoticeFlash';
import { TextInput, SubmitButton, Utf8 } from './Form';
import UserLinks from './UserLinks';

class RegistrationForm extends Component {
  render() {
    return (
      <div className="row">
        <div className="col-md-6 col-md-offset-3">
          <div className="well">
            <form onSubmit={this.handleFormSubmit.bind(this)}>
              <Utf8 />

              <div className="form-inputs">
                <TextInput type="email" model="user" attribute="email" label="Email" />
                <TextInput type="password" model="user" attribute="password" label="Password" />
                <TextInput type="password" model="user" attribute="password_confirmation" label="Confirm password" />
              </div>

              <div className="form-actions">
                <SubmitButton label="Register" />
              </div>
            </form>

            <UserLinks />
          </div>
        </div>
      </div>
    );
  }

  handleFormSubmit(e) {
    e.preventDefault();

    const url = '/users';
    const data = $(e.target).serialize();

    $.ajax({
      url: url,
      method: 'POST',
      dataType: 'json',
      data: data
    })
    .done((data) => {
      AlertFlash.clear();
      NoticeFlash.show(
        'Great! Glad you made it!<br>' +
          'You have been subscribed to the <strong>free plan</strong> which ' +
          '<strong>limits</strong> you to have <strong>100 notes</strong>.'
      )
      this.props.onLoginSuccess();
      this.props.history.push('/notes')
    })
    .fail(({ responseJSON }) => {
      const errors = responseJSON.errors.join('<br>');

      AlertFlash.show('Sorry, that did not work. You need to fix your inputs:<br>' + errors)
    });
  }
}

export default RegistrationForm;

@@ -381,16 +381,50 @@
 set-3%22%3E%0A
+          %7B this.renderIntro() %7D%0A%0A
         
@@ -1124,16 +1124,562 @@
 );%0A  %7D%0A%0A
+  renderIntro() %7B%0A    return (%0A      %3Cdiv className=%22jumbotron%22%3E%0A        %3Cp%3E%0A          You can register for a %3Cstrong%3Efree account%3C/strong%3E which %3Cstrong%3Elimits%3C/strong%3E you to %3Cstrong%3E100 notes%3C/strong%3E.%0A          %3Cbr/%3E%0A          This free hosting service is sponsored by %3Ca href=%22https://www.panter.ch%22%3EPanter AG%3C/a%3E.%0A        %3C/p%3E%0A        %3Cp%3E%0A          Alternatively you may %3Ca href=%22https://github.com/panter/mykonote%22%3Eget the source code from%0A          GitHub%3C/a%3E and install it on a server on your own.%0A        %3C/p%3E%0A      %3C/div%3E%0A    );%0A  %7D%0A%0A
   handle

add intro text to register page