drupal integration - plumbing in password reset UI updates - wip
This commit is contained in:
Brian Talbot
committed by
John Jarvis
John Jarvis
parent
2019af4170
commit
de4f35df77
@@ -2,7 +2,7 @@
|
||||
// =====
|
||||
|
||||
// page-level
|
||||
.view-register, .view-login {
|
||||
.view-register, .view-login, .view-passwordreset {
|
||||
|
||||
.content-wrapper {
|
||||
background: $m-gray-l;
|
||||
@@ -24,7 +24,7 @@
|
||||
}
|
||||
|
||||
// shared
|
||||
.login, .register {
|
||||
.login, .register, .passwordreset {
|
||||
padding: ($baseline*1.5);
|
||||
@include clearfix;
|
||||
|
||||
@@ -422,4 +422,9 @@
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// password reset
|
||||
.passwordreset {
|
||||
|
||||
}
|
||||
@@ -75,7 +75,7 @@
|
||||
<li class="field required password" id="field-password">
|
||||
<label for="password">Password</label>
|
||||
<input id="password" type="password" name="password" value="" placeholder="*****" />
|
||||
<span class="tip tip-input"><a href="#" class="action action-forgotpw">Forgot password?</a></span>
|
||||
<span class="tip tip-input"><a href="#" rel="modal" class="action action-forgotpw">Forgot password?</a></span>
|
||||
</li>
|
||||
</ol>
|
||||
</fieldset>
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
</div>
|
||||
|
||||
<div role="alert" class="status message system-error is-hidden">
|
||||
<h3 class="message-title">We're sorry, our systems seem to be having trouble processing your registration now.</h3>
|
||||
<h3 class="message-title">We're sorry, our systems seem to be having trouble processing your registration</h3>
|
||||
<p class="message-copy">Someone has been made aware of this issue. Please try again shortly. Please <a href="">contact us</a> about any concerns you have.</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,66 +1,111 @@
|
||||
{% load compressed %}
|
||||
{% load staticfiles %}
|
||||
<%inherit file="main.html" />
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reset password - MITx 6.002x</title>
|
||||
<%namespace name='static' file='static_content.html'/>
|
||||
|
||||
{% compressed_css 'application' %}
|
||||
<%block name="title"><title>Reset Your edX Password</title></%block>
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="{% static 'js/html5shiv.js' %}"></script>
|
||||
<![endif]-->
|
||||
<%block name="js_extra">
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
|
||||
</head>
|
||||
var view_name = 'view-passwordreset';
|
||||
|
||||
<body>
|
||||
// adding js class for styling with accessibility in mind
|
||||
$('body').addClass('js').addClass(view_name);
|
||||
|
||||
<header class="global" aria-label="Global Navigation">
|
||||
<nav>
|
||||
<h1 class="logo"><a href="${reverse('root')}"></a></h1>
|
||||
</nav>
|
||||
</header>
|
||||
// new window/tab opening
|
||||
$('a[rel="external"], a[class="new-vp"]')
|
||||
.click( function() {
|
||||
window.open( $(this).attr('href') );
|
||||
return false;
|
||||
});
|
||||
|
||||
{% block content %}
|
||||
<section class="password-reset">
|
||||
|
||||
{% if validlink %}
|
||||
// form field label styling on focus
|
||||
$("form :input").focus(function() {
|
||||
$("label[for='" + this.id + "']").parent().addClass("is-focused");
|
||||
}).blur(function() {
|
||||
$("label").parent().removeClass("is-focused");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</%block>
|
||||
|
||||
<section class="passwordreset container">
|
||||
<section class="introduction">
|
||||
<header>
|
||||
<h2>Enter new password</h2>
|
||||
<hr>
|
||||
<h1>Reset Your edX Password</h1>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<p>Please enter your new password twice so we can verify you typed it in correctly.</p>
|
||||
<section role="main" class="content">
|
||||
{% if validlink %}
|
||||
<header>
|
||||
<h2 class="is-hidden">Password Reset Form</h2>
|
||||
</header>
|
||||
|
||||
<form role="form" id="passwordreset-form" method="post" data-remote="true" action="">
|
||||
<!-- status messages -->
|
||||
<div role="alert" class="status message is-hidden">
|
||||
<h3 class="message-title">We're sorry, edX enrollment is not available in your region</h3>
|
||||
<p class="message-copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
|
||||
</div>
|
||||
|
||||
<form action="" method="post">{% csrf_token %}
|
||||
{{ form.new_password1.errors }}
|
||||
<label for="id_new_password1">New password:</label>
|
||||
{{ form.new_password1 }}
|
||||
<div role="alert" class="status message submission-error is-hidden">
|
||||
<h3 class="message-title">The following errors occured while processing your registration: </h3>
|
||||
<ul class="message-copy">
|
||||
<li>You must complete all fields.</li>
|
||||
<li>The two password fields didn't match.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{{ form.new_password2.errors }}
|
||||
<label for="id_new_password2">Confirm password:</label>
|
||||
{{ form.new_password2 }}
|
||||
<div role="alert" class="status message system-error is-hidden">
|
||||
<h3 class="message-title">We're sorry, our systems seem to be having trouble processing your password reset</h3>
|
||||
<p class="message-copy">Someone has been made aware of this issue. Please try again shortly. Please <a href="">contact us</a> about any concerns you have.</p>
|
||||
</div>
|
||||
|
||||
<div class="submit">
|
||||
<input type="submit" value="Change my password" />
|
||||
<p class="instructions">
|
||||
Please enter your new password twice so we can verify you typed it in correctly. <br />
|
||||
Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>.
|
||||
</p>
|
||||
|
||||
<fieldset class="group group-form group-form-requiredinformation">
|
||||
<legend class="is-hidden">Required Information</legend>
|
||||
|
||||
<ol class="list-input">
|
||||
<li class="field required password" id="field-password-initial">
|
||||
<label for="password-initial">Your New Password</label>
|
||||
<input class="" id="password-initial" type="password" name="password-initial" value="" placeholder="*****" />
|
||||
</li>
|
||||
<li class="field required password" id="field-password-repeat">
|
||||
<label for="password-repeat">Your New Password Again</label>
|
||||
<input class="" id="password-repeat" type="password" name="password-repeat" value="" placeholder="*****" />
|
||||
</li>
|
||||
</ol>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-actions">
|
||||
<button name="submit" type="submit" id="submit" class="action action-primary action-update">Change My Password</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{% else %}
|
||||
|
||||
<header>
|
||||
<h1>Password reset unsuccessful</h1>
|
||||
<hr>
|
||||
<h2 class="is-hidden">Your Password Reset Was Unsuccessful</h2>
|
||||
</header>
|
||||
|
||||
<p>The password reset link was invalid, possibly because the link has already been used. Please request a new password reset.</p>
|
||||
<p>The password reset link was invalid, possibly because the link has already been used. Please <a href="" class="action action-forgotpw" rel="modal">request a new password reset</a>.</p>
|
||||
|
||||
{% endif %}
|
||||
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<aside role="complementary">
|
||||
<header>
|
||||
<h3 class="is-hidden">Password Reset Help</h3>
|
||||
</header>
|
||||
|
||||
<div class="cta cta-help">
|
||||
<h3>Need Help?</h3>
|
||||
<p>View our <a href="#">help section for contact information and answers to commonly asked questions</a></p>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
Reference in New Issue
Block a user