Update sign in email address for continued access

lms/static/js/student_account/components/PasswordResetConfirmation.jsx

@@ -85,7 +85,7 @@ class PasswordResetConfirmation extends React.Component {
           <form id="passwordreset-form" method="post" action="">
             <h2 className="section-title lines">
               <span className="text">
-                {gettext('Reset Your Password')}
+                {this.props.formTitle}
               </span>
             </h2>
 
@@ -121,7 +121,7 @@ class PasswordResetConfirmation extends React.Component {
             <Button
               type="submit"
               className={['action', 'action-primary', 'action-update', 'js-reset']}
-              label={gettext('Reset My Password')}
+              label={this.props.primaryActionButtonLabel}
             />
           </form>
         </div>
@@ -133,10 +133,14 @@ class PasswordResetConfirmation extends React.Component {
 PasswordResetConfirmation.propTypes = {
   csrfToken: PropTypes.string.isRequired,
   errorMessage: PropTypes.string,
+  primaryActionButtonLabel: PropTypes.string,
+  formTitle: PropTypes.string,
 };
 
 PasswordResetConfirmation.defaultProps = {
   errorMessage: '',
+  primaryActionButtonLabel: gettext('Reset My Password'),
+  formTitle: gettext('Reset Your Password'),
 };
 
 export { PasswordResetConfirmation }; // eslint-disable-line import/prefer-default-export

lms/static/js/student_account/views/AccessView.js

@@ -59,6 +59,7 @@
 
                     // Account activation messages
                     this.accountActivationMessages = options.account_activation_messages || [];
+                    this.accountRecoveryMessages = options.account_recovery_messages || [];
 
                     if (options.login_redirect_url) {
                         this.nextUrl = options.login_redirect_url;
@@ -99,9 +100,10 @@
                 // there is no need to show it again, if the user changes mode:
                     this.thirdPartyAuth.errorMessage = null;
 
-                    // Once the account activation messages have been shown once,
+                    // Once the account activation/account recovery messages have been shown once,
                     // there is no need to show it again, if the user changes mode:
                     this.accountActivationMessages = [];
+                    this.accountRecoveryMessages = [];
                 },
 
                 render: function() {
@@ -148,6 +150,7 @@
                             accountRecoveryModel: this.accountRecoveryModel,
                             thirdPartyAuth: this.thirdPartyAuth,
                             accountActivationMessages: this.accountActivationMessages,
+                            accountRecoveryMessages: this.accountRecoveryMessages,
                             platformName: this.platformName,
                             supportURL: this.supportURL,
                             passwordResetSupportUrl: this.passwordResetSupportUrl,

lms/static/js/student_account/views/LoginView.js

@@ -51,6 +51,7 @@
                 this.passwordResetSupportUrl = data.passwordResetSupportUrl;
                 this.createAccountOption = data.createAccountOption;
                 this.accountActivationMessages = data.accountActivationMessages;
+                this.accountRecoveryMessages = data.accountRecoveryMessages;
                 this.hideAuthWarnings = data.hideAuthWarnings;
                 this.pipelineUserDetails = data.pipelineUserDetails;
                 this.enterpriseName = data.enterpriseName;
@@ -111,13 +112,18 @@
 
                 // Display account activation success or error messages.
                 this.renderAccountActivationMessages();
+                this.renderAccountRecoveryMessages();
             },
 
             renderAccountActivationMessages: function() {
-                _.each(this.accountActivationMessages, this.renderAccountActivationMessage, this);
+                _.each(this.accountActivationMessages, this.renderMessage, this);
             },
 
-            renderAccountActivationMessage: function(message) {
+            renderAccountRecoveryMessages: function() {
+                _.each(this.accountRecoveryMessages, this.renderMessage, this);
+            },
+
+            renderMessage: function(message) {
                 this.renderFormFeedback(this.formStatusTpl, {
                     jsHook: message.tags,
                     message: HtmlUtils.HTML(message.message)

lms/templates/account_recovery/password_create_confirm.html

@@ -0,0 +1,56 @@
+## mako
+
+<%page expression_filter="h"/>
+
+<%!
+from django.utils.translation import ugettext as _
+from openedx.core.djangolib.js_utils import js_escaped_string
+from openedx.core.djangolib.markup import HTML, Text
+%>
+
+<%inherit file="../main.html"/>
+<%namespace name='static' file='../static_content.html'/>
+
+<%block name="title">
+    <title>${_("Create Your {platform_name} Password").format(platform_name=platform_name)}</title>
+</%block>
+
+<%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-content login-register">
+    % if validlink:
+        ${static.renderReact(
+	        component="PasswordResetConfirmation",
+	        id="password-reset-confirm-react",
+	        props={
+                'csrfToken': csrf_token,
+                'errorMessage': js_escaped_string(err_msg) if err_msg else '',
+                'primaryActionButtonLabel': 'Create My Password',
+                'formTitle': 'Create Your Password',
+            },
+        )}
+    % else:
+        <div class="status submission-error">
+            <h4 class="message-title">${_("Invalid Password Create Link")}</h4>
+            <ul class="message-copy">
+                ${Text(_((
+                    "This password create link is invalid. It may have been used already. "
+                    "To create your password, go to the {start_link}sign-in{end_link} page and "
+                    "select {start_strong}Recovery your account{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>
+</%block>