Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add live validation to password reset

Browse Source 
Adds a new React factory for that page to handle the logic. Also
cleans up the UI a little (centers it, stops using serif font, etc).
This commit is contained in:
Michael Terry
2018-04-02 11:12:44 -04:00
committed by Michael Terry
parent 32f9902f2e
commit c19d01a994
14 changed files with 322 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
lms/templates/registration/password_reset_confirm.html
View File

@@ -8,78 +8,46 @@ from openedx.core.djangolib.markup import HTML, Text
%>
<%inherit file="../main.html"/>
<%namespace name='static' file='../static_content.html'/>
<%block name="title">
<title>${_("Reset Your {platform_name} Password").format(platform_name=platform_name)}</title>
</%block>
<%block name="bodyextra">
<script type="text/javascript" src="${STATIC_URL}js/student_account/password_reset.js"></script>
<%block name="head_extra">
<link type="text/css" rel="stylesheet" href="${STATIC_URL}paragon/static/paragon.min.css">
</%block>
<%block name="bodyclass">view-passwordreset</%block>
<%block name="body">
<div id="password-reset-confirm-container" class="login-register">
<section id="password-reset-confirm-anchor" class="form-type">
<div id="password-reset-confirm-form" class="form-wrapper" aria-live="polite">
<div class="status submission-error ${'hidden' if not err_msg else ''}">
<h4 class="message-title">${_("Error Resetting Password")}</h4>
<ul class="message-copy">
% if err_msg:
<li>${err_msg}</li>
% else:
<li>${_("You must enter and confirm your new password.")}</li>
<li>${_("The text in both password fields must match.")}</li>
% endif
</ul>
</div>
% if validlink:
<form role="form" id="passwordreset-form" method="post" action="">
<div class="section-title lines">
<h2>
<span class="text">
${_("Reset Your Password")}
</span>
</h2>
</div>
<p class="action-label" id="new_password_help_text">
${_("Enter and confirm your new password.")}
</p>
<div class="form-field new_password1-new_password1">
<label for="new_password1">${_("New Password")}</label>
<input id="new_password1" type="password" name="new_password1" aria-describedby="new_password_help_text" />
</div>
<div class="form-field new_password2-new_password2">
<label for="new_password2">${_("Confirm Password")}</label>
<input id="new_password2" type="password" name="new_password2" />
</div>
<input type="hidden" id="csrf_token" name="csrfmiddlewaretoken" value="${csrf_token}">
<button type="submit" class="action action-primary action-update js-reset">${_("Reset My Password")}</button>
</form>
% else:
<div class="status submission-error">
<h4 class="message-title">${_("Invalid Password Reset Link")}</h4>
<ul class="message-copy">
${Text(_((
"This password reset link is invalid. It may have been used already. To reset your password, "
"go to the {start_link}sign-in{end_link} page and select {start_strong}Forgot password{end_strong}."
))).format(
start_link=HTML('<a href="/login">'),
end_link=HTML('</a>'),
start_strong=HTML('<strong>'),
end_strong=HTML('</strong>')
)
}
</ul>
</div>
% endif
<div id="password-reset-confirm-container" class="login-register-content login-register">
% if validlink:
${static.renderReact(
component="PasswordResetConfirmation",
id="password-reset-confirm-react",
props={
'csrfToken': csrf_token,
'errorMessage': err_msg if err_msg else '',
},
)}
% else:
<div class="status submission-error">
<h4 class="message-title">${_("Invalid Password Reset Link")}</h4>
<ul class="message-copy">
${Text(_((
"This password reset link is invalid. It may have been used already. "
"To reset your password, go to the {start_link}sign-in{end_link} page and "
"select {start_strong}Forgot password{end_strong}."
))).format(
start_link=HTML('<a href="/login">'),
end_link=HTML('</a>'),
start_strong=HTML('<strong>'),
end_strong=HTML('</strong>')
)
}
</ul>
</div>
</section>
% endif
</div>
</%block>