Incorrect flow of events using FlightJS

I am trying to figure out an issue where a specific div is showing up before an event being fired, specified by FlightJs functions.

define([
  'flight',
  'mixins/form'
], function(flight, formMixin) {

  function forgotPasswordForm() {
    this.attributes({
      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.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 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(this.showSuccessMessage(email))
            .done(this.showSuccessMessage(email));
      } else {
        this.select('errorSelector').show();
      }
    };

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

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

As you can see, after detecting initialization, I specified the on click event for onSubmitButtonClicked.

In the onSubmitButtonClicked function I collect the field value and pass it to Request handler specified in the mixin 'form' which looks like this:

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

  function formMixin() {
    /*
     *   Use an existing form to post data asynchronously, in order to avoid
     * hard coding URLs and data transformation on Javascript.
     */
    this.postForm = function($form) {
      return $.ajax({
        type: $form.attr('method'),
        url: $form.attr('action'),
        data: $form.serialize()
      });
    };
  }

  return formMixin;
});

The issue is that the showSuccessMessage() function is being fired off right after initialization rather that after waiting for Submitbuttonclicked. Is the chaining of the callbacks of error and done incorrect or is there something else wrong with the code ?

Assuming that you have a working require.js / webpack config somewhere, you are not using any CSS class to hide the message elements and your markup looks something like this:

<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>

I would say you are only missing to hide the message elements in the initialize event.

It should look something like this:

// ...
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();
});
// ...

I made a fiddle where you can have a look.