943dd9704e
- Make email field in forgot password modal aria-required = true - Added Transcript skip links to both before and after the transcript - Add language code to main.html so that screenreaders know what language/region to speak for
88 lines
3.4 KiB
HTML
88 lines
3.4 KiB
HTML
<%! from django.utils.translation import ugettext as _ %>
|
|
|
|
<%! from django.core.urlresolvers import reverse %>
|
|
<section id="forgot-password-modal" class="modal" role="dialog" aria-label="${_('Password Reset')}">
|
|
<div class="inner-wrapper">
|
|
<button class="close-modal">✕ <span class="sr">${_('Close Modal')}</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=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);
|
|
$("#forgot-password-modal").focus()
|
|
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>
|