Skip to content

E
edx-platform
Commit 13b74175 by Brian Talbot
Options

edx.org - basic styling of password reset form

parent f5010008
Showing with 110 additions and 84 deletions
lms/static/sass/multicourse/_account.scss
......@@ -273,7 +273,7 @@
input, textarea {
width: 100%;
margin: 0;
padding: $baseline ($baseline*.75);
padding: $baseline ($baseline*.75);
&.long {
width: 100%;
......@@ -338,7 +338,7 @@
&.is-focused {
label {
color: $m-blue-s1;
color: $m-blue-s1;
}
.tip {
......@@ -464,7 +464,7 @@
padding: 0 $baseline/4;
}
#register-form, #login-form {
#register-form, #login-form, #passwordreset-form {
.status.message {
display: none;
......@@ -512,9 +512,26 @@
// password reset
.view-passwordreset {
background: $m-gray-l2;
header.global {
h1 {
float: none;
}
}
.introduction {
width: auto;
padding: 0;
header h1 {
margin: 0;
}
}
.content {
margin-top: 0;
}
}
......@@ -586,7 +603,7 @@
width: 100%;
}
}
}
}
}
.modal-form-error {
......@@ -599,4 +616,4 @@
border-bottom: 3px solid shade($red, 10%);
background: tint($red,95%);
}
}
\ No newline at end of file
}
lms/templates/registration/password_reset_confirm.html
......@@ -38,84 +38,94 @@
</head>
<body>
<section class="passwordreset container">
<section class="introduction">
<header>
<h1>Reset Your edX Password</h1>
</header>
</section>
<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="">{% csrf_token %}
<!-- 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>
<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>
<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>
<body class="view-passwordreset">
<header class="global">
<nav>
<h1 class="logo">
<a href="/"><img src="/static/images/header-logo.png"></a>
</h1>
</nav>
</header>
<section class="content-wrapper">
<section class="passwordreset container">
<section class="introduction">
<header>
<h1>Reset Your edX Password</h1>
</header>
</section>
<section role="main" class="content">
{% if validlink %}
<header>
<h2 class="sr">Password Reset Form</h2>
</header>
<form role="form" id="passwordreset-form" method="post" data-remote="true" action="">{% csrf_token %}
<!-- status messages -->
<div role="alert" class="status message">
<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>
<div role="alert" class="status message submission-error">
<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>
<div role="alert" class="status message system-error">
<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>
<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="sr">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>
<h2 class="sr">Your Password Reset Was Unsuccessful</h2>
</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>
{% endif %}
</section>
<aside role="complementary">
<header>
<h3 class="sr">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>
<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>
<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 <a href="" class="action action-forgotpw" rel="modal">request a new password reset</a>.</p>
{% endif %}
</aside>
</section>
<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>
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