106 lines
4.0 KiB
HTML
106 lines
4.0 KiB
HTML
<%page expression_filter="h" />
|
|
<%namespace name='static' file='static_content.html'/>
|
|
|
|
<%!
|
|
from django.utils.translation import ugettext as _
|
|
from openedx.core.djangolib.js_utils import js_escaped_string
|
|
from django.urls 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">
|
|
<span class="icon fa fa-remove" aria-hidden="true"></span>
|
|
<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=static.get_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").text(json.value);
|
|
} else {
|
|
if($('#pwd_error').length == 0) {
|
|
var msg = "${_("Email is incorrect.") | n, js_escaped_string}";
|
|
var error_msg = HtmlUtils.interpolateHtml(
|
|
edx.HtmlUtils.HTML('<div id="pwd_error" class="modal-form-error">{error_msg}</div>'),
|
|
{
|
|
error_msg: msg,
|
|
});
|
|
$('#pwd_reset_form').prepend(edx.HtmlUtils.ensureHtml(error_msg).toString());
|
|
}
|
|
$('#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>
|