JSFiddle - React, Tailwind, and code Playground

by frncsdrk

HTML

<!-- https://stackoverflow.com/questions/44140249/incorrect-flow-of-events-using-flightjs -->
<div class="forgot-password-form">
  <form id="forgot-password" method="GET" action="https://jsonplaceholder.typicode.com/comments">
    <input id="email">
    
    <div class="error-message">
      Error!
    </div>
  </form>
  <button class="btn-submit">
    Submit
  </button>
  
  <div class="success-message">
    Success!
  </div>
</div>

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.js"></script>

JavaScript

define('form', [
  'flight',
  'ajax' // 'mixins/form'
], function(defineComponent, formMixin) {
  function forgotPasswordForm() {
    this.defaultAttrs({
      submitButtonSelector: '.btn-submit',
      formSelector: '#forgot-password',
      successMessageSelector: '.success-message',
      successMessageEmailSelector: '.success-message span.success-email',
      emailInputSelector: '#forgot-password #email',
      errorSelector: '#forgot-password .error-message'
    });

    this.after('initialize', function() {
      this.on('click', {
        'submitButtonSelector': this.onSubmitButtonClicked
      });
      this.on('keyup keypress', {
        'formSelector': this.onFormKeyUp
      });
      this.select('successMessageSelector').hide();
      this.select('errorSelector').hide();
    });

    this.onFormKeyUp = function(event) {
      // Capture and deal with "Enter" key being pressed.
      var keyCode = event.keyCode || event.which;
      if (keyCode == 13) {
        event.preventDefault();
        this.onSubmitButtonClicked();
        return false;
      }
    };

    this.onSubmitButtonClicked = function(event) {
    	var that = this;
      var email = this.select('emailInputSelector').val();
      if (email.length > 0) {
        this.select('errorSelector').hide();
        this.postForm(this.select('formSelector'))
        // Show success message on error to hide malicious password resetting.
            .error(function() {that.showSuccessMessage(email)})
            .done(function() {that.showSuccessMessage(email)});
      } else {
        this.select('errorSelector').show();
      }
    };

    this.showSuccessMessage = function(email) {
      this.select('successMessageSelector').show();
      this.select('successMessageEmailSelector').text(email);
    };
  }

  return flight.component(forgotPasswordForm, formMixin); // .attachTo('.forgot-password-form')
});

define('ajax', [], function() {
  'use strict';

  function formMixin() {
    /*
     *   Use...