Skip to content

E
edx-platform
Commit de4f35df by Brian Talbot Committed by John Jarvis
Options

drupal integration - plumbing in password reset UI updates - wip

parent 2019af41
Showing with 97 additions and 45 deletions
lms/static/sass/multicourse/_account.scss
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
// ===== // =====
// page-level // page-level
.view-register, .view-login { .view-register, .view-login, .view-passwordreset {
.content-wrapper { .content-wrapper {
background: $m-gray-l; background: $m-gray-l;
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
} }
// shared // shared
.login, .register { .login, .register, .passwordreset {
padding: ($baseline*1.5); padding: ($baseline*1.5);
@include clearfix; @include clearfix;
...@@ -422,4 +422,9 @@ ...@@ -422,4 +422,9 @@
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
}
// password reset
.passwordreset {
} }
\ No newline at end of file
lms/templates/login.html
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
<li class="field required password" id="field-password"> <li class="field required password" id="field-password">
<label for="password">Password</label> <label for="password">Password</label>
<input id="password" type="password" name="password" value="" placeholder="*****" /> <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> </li>
</ol> </ol>
</fieldset> </fieldset>
......
lms/templates/register.html
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
</div> </div>
<div role="alert" class="status message system-error is-hidden"> <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> <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>
......
lms/templates/registration/password_reset_confirm.html
{% load compressed %} <%inherit file="main.html" />
{% load staticfiles %}
<!DOCTYPE html> <%namespace name='static' file='static_content.html'/>
<html>
<head>
<title>Reset password - MITx 6.002x</title>
{% compressed_css 'application' %} <%block name="title"><title>Reset Your edX Password</title></%block>
<!--[if lt IE 9]> <%block name="js_extra">
<script src="{% static 'js/html5shiv.js' %}"></script> <script type="text/javascript">
<![endif]--> $(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"> // new window/tab opening
<nav> $('a[rel="external"], a[class="new-vp"]')
<h1 class="logo"><a href="${reverse('root')}"></a></h1> .click( function() {
</nav> window.open( $(this).attr('href') );
</header> return false;
});
{% block content %} // form field label styling on focus
<section class="password-reset"> $("form :input").focus(function() {
$("label[for='" + this.id + "']").parent().addClass("is-focused");
{% if validlink %} }).blur(function() {
$("label").parent().removeClass("is-focused");
});
});
</script>
</%block>
<section class="passwordreset container">
<section class="introduction">
<header> <header>
<h2>Enter new password</h2> <h1>Reset Your edX Password</h1>
<hr>
</header> </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 %} <div role="alert" class="status message submission-error is-hidden">
{{ form.new_password1.errors }} <h3 class="message-title">The following errors occured while processing your registration: </h3>
<label for="id_new_password1">New password:</label> <ul class="message-copy">
{{ form.new_password1 }} <li>You must complete all fields.</li>
<li>The two password fields didn't match.</li>
</ul>
</div>
{{ form.new_password2.errors }} <div role="alert" class="status message system-error is-hidden">
<label for="id_new_password2">Confirm password:</label> <h3 class="message-title">We're sorry, our systems seem to be having trouble processing your password reset</h3>
{{ form.new_password2 }} <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"> <p class="instructions">
<input type="submit" value="Change my password" /> 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> </div>
</form> </form>
{% else %} {% else %}
<header> <header>
<h1>Password reset unsuccessful</h1> <h2 class="is-hidden">Your Password Reset Was Unsuccessful</h2>
<hr>
</header> </header>
<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>
<p>The password reset link was invalid, possibly because the link has already been used. Please request a new password reset.</p>
{% endif %} {% endif %}
</section> </section>
{% endblock %}
</body> <aside role="complementary">
</html> <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>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment