forgot_password_modal.html

<%! from django.utils.translation import ugettext as _ %>
<%! from microsite_configuration import microsite %>

<%! from django.core.urlresolvers import reverse %>
<section id="forgot-password-modal" class="modal" role="dialog" tabindex="-1" aria-label="${_('Password Reset')}">
  <div class="inner-wrapper">
    <button class="close-modal">
      <i class="icon fa fa-remove"></i>
      <span class="sr">
        ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
        ${_('Close')}
      </span>
    </button>

    <div id="password-reset">
      <header>
        <h2>${_("Password Reset")}</h2>
      </header>

      <div class="instructions">
        <p>${_("Please enter your e-mail address below, and we will e-mail instructions for setting a new password.")}</p>
      </div>

      <form id="pwd_reset_form" action="${reverse('password_reset')}" method="post" data-remote="true">
        <fieldset class="group group-form group-form-requiredinformation">
          <legend class="is-hidden">${_("Required Information")}</legend>

          <ol class="list-input">
            <li class="field required text" id="forgot-password-modal-field-email">
              <label for="pwd_reset_email">${_("Your E-mail Address")}</label>
              <input class="" id="pwd_reset_email" type="email" name="email" value="" placeholder="example: username@domain.com" aria-describedby="pwd_reset_email-tip" aria-required="true" />
              <span class="tip tip-input" id="pwd_reset_email-tip">${_("This is the e-mail address you used to register with {platform}").format(platform=microsite.get_value('platform_name', settings.PLATFORM_NAME))}</span>
            </li>
          </ol>
        </fieldset>

        <div class="form-actions">
          <button name="submit" type="submit" id="pwd_reset_button" class="action action-primary action-update">${_("Reset My Password")}</button>
        </div>
      </form>
    </div>
  </div>
</section>

<script type="text/javascript">
  (function() {
    $(document).delegate('#pwd_reset_form', 'ajax:success', function(data, json, xhr) {
      if(json.success) {
        $("#password-reset").html(json.value);
      } else {
        if($('#pwd_error').length == 0) {
          $('#pwd_reset_form').prepend('<div id="pwd_error" class="modal-form-error">${_("Email is incorrect.")}</div>');
        }
        $('#pwd_error').stop().css("display", "block");
      }
    });

    // removing close link's default behavior
    $('#login-modal .close-modal').click(function(e) {
     e.preventDefault();
    });

    var onModalClose = function() {
      $("#forgot-password-modal").attr("aria-hidden", "true");
      $("#forgot-password-link").focus();
    };

    var cycle_modal_tab = function(from_element_name, to_element_name) {
      $(from_element_name).on('keydown', function(e) {
          var keyCode = e.keyCode || e.which;
          var TAB_KEY = 9;  // 9 corresponds to the tab key
          if (keyCode === TAB_KEY) {
              e.preventDefault();
              $(to_element_name).focus();
          }
      });
    };
    $("#forgot-password-modal .close-modal").click(onModalClose);
    cycle_modal_tab("#forgot-password-modal .close-modal", "#pwd_reset_email");
    cycle_modal_tab("#pwd_reset_email", "#pwd_reset_button");
    cycle_modal_tab("#pwd_reset_button", "#forgot-password-modal .close-modal");

    // Hitting the ESC key will exit the modal
    $("#forgot-password-modal").on("keydown", function(e) {
        var keyCode = e.keyCode || e.which;
        // 27 is the ESC key
        if (keyCode === 27) {
            e.preventDefault();
            $("#forgot-password-modal .close-modal").click();
        }
    });

  })(this)
</script>