Updates combined Register, Login, and Password Reset views as per new design

* Reorders form fields, and updates labels, placeholders, and tip text
* Increases clickable area for links and labels.
* Removes "*" markers from required fields, and instead adds
  "(optional)" labels to visible optional fields.
* Updates font colors and sizes, and removes box shadows
* Adds custom drop-down styles
* Improves responsive design scaling for small screens
* Make Terms of Service and Honor Code open in new window to avoid losing form
  field values.

common/test/acceptance/pages/lms/login_and_register.py

@@ -220,7 +220,7 @@ class CombinedLoginAndRegisterPage(PageObject):
         if favorite_movie:
             self.q(css="#register-favorite_movie").fill(favorite_movie)
         if terms_of_service:
-            self.q(css="#register-honor_code").click()
+            self.q(css="label[for='register-honor_code']").click()
 
         # Submit it
         self.q(css=".register-button").click()

common/test/acceptance/tests/lms/test_lms.py

@@ -341,7 +341,7 @@ class RegisterFromCombinedPageTest(UniqueCourseTest):
 
         # Verify that the expected errors are displayed.
         errors = self.register_page.wait_for_errors()
-        self.assertIn(u'Please enter your Public username.', errors)
+        self.assertIn(u'Please enter your Public Username.', errors)
         self.assertIn(
             u'You must agree to the édX Terms of Service and Honor Code',
             errors

lms/envs/common.py

@@ -2446,13 +2446,13 @@ REGISTRATION_EXTRA_FIELDS = {
 }
 
 REGISTRATION_FIELD_ORDER = [
-    "email",
-    "confirm_email",
     "name",
-    "username",
-    "password",
     "first_name",
     "last_name",
+    "username",
+    "email",
+    "confirm_email",
+    "password",
     "city",
     "state",
     "country",

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

@@ -205,7 +205,8 @@
                 toggleForm: function(e) {
                     var type = $(e.currentTarget).data('type'),
                         $form = $('#' + type + '-form'),
-                        $anchor = $('#' + type + '-anchor'),
+                        scrollX = window.scrollX,
+                        scrollY = window.scrollY,
                         queryParams = url('?'),
                         queryStr = queryParams.length > 0 ? '?' + queryParams : '';
 
@@ -224,7 +225,6 @@
                     this.element.hide($(this.el).find('.submission-success'));
                     this.element.hide($(this.el).find('.form-wrapper'));
                     this.element.show($form);
-                    this.element.scrollTop($anchor);
 
                 // Update url without reloading page
                     if (type != 'institution_login') {
@@ -234,6 +234,9 @@
 
                 // Focus on the form
                     $('#' + type).focus();
+
+               // Maintain original scroll position
+                    window.scrollTo(scrollX, scrollY);
                 },
 
             /**

lms/static/js/student_account/views/FormView.js

@@ -35,7 +35,13 @@
                 fields: [],
 
             // String to append to required label fields
-                requiredStr: '*',
+                requiredStr: '',
+
+            /*
+            Translators: This string is appended to optional field labels on the student login, registration, and
+            profile forms.
+            */
+                optionalStr: gettext('(optional)'),
 
                 submitButton: '',
 
@@ -94,6 +100,7 @@
                         html.push(_.template(fieldTpl)($.extend(data[i], {
                             form: this.formType,
                             requiredStr: this.requiredStr,
+                            optionalStr: this.optionalStr,
                             supplementalText: data[i].supplementalText || '',
                             supplementalLink: data[i].supplementalLink || ''
                         })));

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

@@ -20,6 +20,7 @@
                 },
                 formType: 'login',
                 requiredStr: '',
+                optionalStr: '',
                 submitButton: '.js-login',
                 formSuccessTpl: formSuccessTpl,
                 formStatusTpl: formStatusTpl,

lms/static/js/student_account/views/PasswordResetView.js

@@ -17,6 +17,7 @@
                 formType: 'password-reset',
 
                 requiredStr: '',
+                optionalStr: '',
 
                 submitButton: '.js-reset',
 

lms/static/sass/course/layout/_courseware_header.scss

@@ -66,7 +66,7 @@
   box-shadow: 0 1px 2px $shadow-l1;
   height: auto;
   padding: ($baseline/4) 0 ($baseline/2) 0;
-  border-bottom: 1px solid $outer-border-color;
+  border-bottom: 1px solid $header-border-color;
   background: $header-bg;
   line-height: 1.4;
 

lms/static/sass/elements/_controls.scss

@@ -76,6 +76,7 @@
   border: none;
   padding: ($baseline*0.75) $baseline;
   text-align: center;
+  text-shadow: none;
 
   &:hover, &:active, &:focus {
 
@@ -142,7 +143,6 @@
 // blue primary button
 %btn-primary-blue {
   @extend %btn-primary;
-  box-shadow: 0 2px 1px 0 $m-blue-d4;
   background: $m-blue-d3;
   color: $white;
 
@@ -152,12 +152,10 @@
   }
 
   &.current, &.active {
-    box-shadow: inset 0 2px 1px 1px $m-blue-d2;
     background: $m-blue;
     color: $m-blue-d2;
 
     &:hover, &:active, &:focus {
-      box-shadow: inset 0 2px 1px 1px $m-blue-d3;
       color: $m-blue-d3;
     }
   }
@@ -473,3 +471,20 @@
         box-shadow: none !important;
     }
 }
+
+// enlarge the clickable area of a control.
+%expand-clickable-area {
+    position: relative;
+
+    &, &:link, &:visited, &:hover, &:active, &:focus {
+        &:after {
+            content: " ";
+            position: absolute;
+            left: 0;
+            top: calc( 50% - #{($baseline * 1.1)});
+            min-height: ($baseline * 2.2);
+            width: 100%;
+            cursor: pointer;
+        }
+    }
+}

lms/static/sass/partials/base/_variables.scss

@@ -466,6 +466,7 @@ $container-bg: $white !default;
 // header
 $header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9)) !default;
 $header-bg: $white !default;
+$header-border-color: $blue !default;
 $header-graphic-super-color: $m-blue-d1 !default;
 $header-graphic-sub-color: $m-gray-d2 !default;
 $header-sans-serif: 'Open Sans', Arial, Helvetica, sans-serif !default;

lms/static/sass/shared/_header.scss

@@ -3,7 +3,7 @@
 
 .header-global {
   @extend %ui-depth1;
-  border-bottom: 1px solid $gray-l1;
+  border-bottom: 2px solid $header-border-color;
   box-shadow: 0 1px 5px 0 $shadow-l1;
   background: $header-bg;
   position: relative;

lms/static/sass/views/_login-register.scss

@@ -10,13 +10,29 @@
     background: $white;
     min-height: 100%;
     width: 100%;
+    padding-left: ($baseline/2);
+    padding-right: ($baseline/2);
     $third-party-button-height: ($baseline*1.75);
 
     h2 {
-        @extend %t-title5;
+        @extend %t-title4;
+        margin-top: $baseline;
+        letter-spacing: normal;
+        font-family: $sans-serif;
+        color: $uxpl-blue-hover-active;
+    }
+
+    h3 {
+        @extend %t-title6;
+        @extend %t-light;
         margin: 0;
         letter-spacing: normal;
         font-family: $sans-serif;
+        color: $gray-d4;
+    }
+
+    a, label {
+        @extend %expand-clickable-area;
     }
 
     .instructions {
@@ -68,27 +84,22 @@
         }
     }
 
-    form,
-    .wrapper-other-login {
-        border: 1px solid $gray-l4;
-        border-radius: ($baseline/4);
-        padding: 0 ($baseline*1.25) $baseline ($baseline*1.25);
-    }
-
     .section-title {
         position: relative;
-        margin: 20px 0 10px;
+        margin: $baseline 0 ($baseline/2);
 
         &.lines {
-            margin-bottom: 20px;
+            margin-bottom: $baseline;
+            margin-top: $baseline;
+            text-align: center;
 
             &:after {
                 position: absolute;
                 left: 0;
-                top: 12px;
+                top: ($baseline/2);
                 width: 100%;
                 height: 1px;
-                background: $gray-l4;
+                background: $gray-l3;
                 content: '';
                 z-index: 5;
             }
@@ -125,18 +136,13 @@
     .form-type,
     .toggle-form {
         @include box-sizing(border-box);
-        max-width: 650px;
+        max-width: 600px;
         min-width: 250px;
         margin: 0 auto;
-        padding: {
-            left: $baseline; // Don't want to override any top or bottom (CR)
-            right: $baseline; // Don't want to override any top or bottom (CR)
-            bottom: ($baseline/2);
-        }
     }
 
     .toggle-form {
-        text-align: center // Centers the text and buttons
+        @extend %t-action1;
     }
 
     .note {
@@ -149,7 +155,8 @@
 
     /** The forms **/
     .form-wrapper {
-        padding-top: ($baseline + 5);
+        padding-top: $baseline;
+        padding-bottom: $baseline;
 
         form {
             @include clearfix();
@@ -161,22 +168,8 @@
         }
     }
 
-    .login-form {
-        margin-bottom: $baseline;
-
-        &:focus {
-            outline: none;
-        }
-    }
-
-    .password-reset-form {
-        padding-bottom: ($baseline + 5);
-
-        &:focus {
-            outline: none;
-        }
-    }
-
+    .login-form,
+    .password-reset-form,
     .register-form {
         &:focus {
             outline: none;
@@ -204,7 +197,7 @@
         clear: both;
         position: relative;
         width: 100%;
-        margin: ($baseline/2) 0 ($baseline/4) 0;
+        margin: ($baseline/2) 0 0 0;
 
         &.select-year_of_birth {
             @include margin-left(15px);
@@ -219,6 +212,7 @@
         /** FROM _accounts.scss - start **/
         label,
         input,
+        select,
         textarea {
             height: auto;
             line-height: 1.5em;
@@ -235,7 +229,8 @@
 
         label {
             display: block;
-            margin: 0 0 6px 0;
+            margin: 0;
+            color: $black;
 
             &.inline {
                 display: inline;
@@ -244,13 +239,12 @@
             &.error {
                 color: $red;
             }
-            
+
             &[for="register-data_sharing_consent"],
             &[for="register-honor_code"],
             &[for="register-terms_of_service"] {
                 display: inline-block;
                 margin: 5px 5px 0 0;
-                width: 90%;
                 vertical-align: top;
             }
 
@@ -275,7 +269,7 @@
             text-decoration: none;
             text-shadow: none;
             font-family: $sans-serif;
-            
+
             &:hover,
             &:focus {
                 text-decoration: underline;
@@ -286,6 +280,7 @@
         select,
         textarea {
             display: block;
+            height: 32px;
             width: 100%;
             margin: 0 0 ($baseline/4);
             padding: 0 ($baseline/2);
@@ -301,7 +296,12 @@
             &.checkbox {
                 display: inline;
                 width: auto;
+                height: auto;
                 margin-right: ($baseline/4);
+
+                & + label {
+                    display: inline;
+                }
             }
 
             &.error {
@@ -309,31 +309,29 @@
             }
         }
 
-        input {
-            height: 32px;
-        }
-
         textarea {
             resize: none;
-
-            &.long {
-                height: ($baseline*5);
-            }
+            height: ($baseline*5);
         }
 
         select {
-            width: 100%;
+            background: transparent;
+            opacity: 0.85;
+            border: none;
+            outline: solid 1px $gray-l3;
+            cursor: pointer;
 
-            &.error {
-                border-color: tint($red,50%);
+            &:active, &:focus {
+                outline: auto;
             }
         }
 
+        .tip, .label-optional {
+            @extend %t-copy-sub1;
+            color: $gray-d2;
+        }
         .tip {
-            @extend %t-copy-sub2;
             display: block;
-            margin: 0 0 ($baseline/2) 0;
-            color: $base-font-color;
         }
         /** FROM _accounts.scss - end **/
     }
@@ -356,12 +354,11 @@
 
     .action-primary {
         @extend %btn-primary-blue;
-        width: 100%;
-        margin-top: 1em;
-        padding: ($baseline/2);
+        padding: 1ex 1em;
         text-transform: none;
         font-weight: 600;
         letter-spacing: normal;
+        margin-top: $baseline;
 
         .icon {
             @extend %sso-icon;
@@ -377,7 +374,7 @@
 
         position: relative;
         margin-right: ($baseline/4);
-        margin-bottom: $baseline;
+        margin-bottom: ($baseline/4);
         border-color: $lightGrey1;
         width: $baseline*6.5;
         height: $third-party-button-height;
@@ -426,10 +423,6 @@
                 border: 1px solid #A5382B;
                 color: $white;
             }
-
-            &:hover {
-                box-shadow: 0 2px 1px 0 #8D3024;
-            }
         }
 
         &.button-oa2-facebook {
@@ -445,10 +438,6 @@
                 border: 1px solid #263A62;
                 color: $white;
             }
-
-            &:hover {
-                box-shadow: 0 2px 1px 0 #30487C;
-            }
         }
 
         &.button-oa2-linkedin-oauth2 {
@@ -464,10 +453,6 @@
                 border: 1px solid #06527D;
                 color: $white;
             }
-
-            &:hover {
-                box-shadow: 0 2px 1px 0 #005D8E;
-            }
         }
 
         &.button-oa2-azuread-oauth2 {
@@ -483,10 +468,6 @@
                 border: 1px solid $microsoft-blue;
                 color: $white;
             }
-
-            &:hover {
-                box-shadow: 0 2px 1px 0 darken($microsoft-blue, 10%);
-            }
         }
 
     }

lms/templates/navigation.html

@@ -151,11 +151,11 @@ site_status_msg = get_site_status_msg(course_id)
             %endif
             % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
               <li class="item nav-global-04">
-                <a class="btn-neutral" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
+                <a class="btn-neutral btn-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
               </li>
             % elif static.get_value('ALLOW_PUBLIC_ACCOUNT_CREATION', settings.FEATURES.get('ALLOW_PUBLIC_ACCOUNT_CREATION')):
               <li class="item nav-global-04">
-                <a class="btn-neutral" href="/register${login_query()}">${_("Register")}</a>
+                <a class="btn-neutral btn-register" href="/register${login_query()}">${_("Register")}</a>
               </li>
             % endif
           % endif

lms/templates/student_account/form_field.underscore

 <div class="form-field <%=type%>-<%= name %>">
     <% if ( type !== 'checkbox' ) { %>
         <label for="<%= form %>-<%= name %>">
-            <%= label %>
-            <% if ( required && requiredStr ) { %> <%= requiredStr %></label><% } %>
+            <span class="label-text"><%= label %></span>
+            <% if ( required && requiredStr && (type !== 'hidden') ) { %><span class="label-required"><%= requiredStr %></span><% } %>
+            <% if ( !required && optionalStr && (type !== 'hidden') ) { %><span class="label-optional"><%= optionalStr %></span><% } %>
         </label>
         <% if (supplementalLink && supplementalText) { %>
             <div class="supplemental-link">
-                <a href="<%- supplementalLink %>"><%- supplementalText %></a>
+                <a href="<%- supplementalLink %>" target="_blank"><%- supplementalText %></a>
             </div>
         <% } %>
     <% } %>
@@ -31,7 +32,7 @@
         <% if ( instructions ) { %> <span class="tip tip-input" id="<%= form %>-<%= name %>-desc"><%= instructions %></span><% } %>
         <% if (supplementalLink && supplementalText) { %>
             <div class="supplemental-link">
-                <a href="<%- supplementalLink %>"><%- supplementalText %></a>
+                <a href="<%- supplementalLink %>" target="_blank"><%- supplementalText %></a>
             </div>
         <% } %>
     <% } else if ( type === 'textarea' ) { %>
@@ -53,10 +54,17 @@
             <% if ( instructions ) { %> <span class="tip tip-input" id="<%= form %>-<%= name %>-desc"><%= instructions %></span><% } %>
             <% if (supplementalLink && supplementalText) { %>
                 <div class="supplemental-link">
-                    <a href="<%- supplementalLink %>"><%- supplementalText %></a>
+                    <a href="<%- supplementalLink %>" target="_blank"><%- supplementalText %></a>
                 </div>
             <% } %>
     <% } else { %>
+        <% if ( type === 'checkbox' ) { %>
+            <% if (supplementalLink && supplementalText) { %>
+                <div class="supplemental-link">
+                    <a href="<%- supplementalLink %>" target="_blank"><%- supplementalText %></a>
+                </div>
+            <% } %>
+        <% } %>
         <input id="<%= form %>-<%= name %>"
            type="<%= type %>"
            name="<%= name %>"
@@ -75,16 +83,12 @@
         />
         <% if ( type === 'checkbox' ) { %>
             <label for="<%= form %>-<%= name %>">
-                <%= label %>
-                <% if ( required && requiredStr ) { %> <%= requiredStr %><% } %>
+                <span class="label-text"><%= label %></span>
+                <% if ( required && requiredStr ) { %><span class="label-required"><%= requiredStr %></span><% } %>
+                <% if ( !required && optionalStr ) { %><span class="label-optional"><%= optionalStr %></span><% } %>
             </label>
         <% } %>
         <% if ( instructions ) { %> <span class="tip tip-input" id="<%= form %>-<%= name %>-desc"><%= instructions %></span><% } %>
-        <% if (supplementalLink && supplementalText) { %>
-            <div class="supplemental-link">
-                <a href="<%- supplementalLink %>"><%- supplementalText %></a>
-            </div>
-        <% } %>
     <% } %>
 
     <% if( form === 'login' && name === 'password' ) { %>

lms/templates/student_account/login.underscore

 <div class="js-form-feedback" aria-live="assertive" tabindex="-1">
 </div>
 
-<form id="login" class="login-form" tabindex="-1" method="POST">
+<% if ( context.createAccountOption !== false ) { %>
+<div class="toggle-form">
+    <span class="text"><%- gettext("First time here?") %></span>
+    <a href="#login" class="form-toggle" data-type="register"><%- gettext("Create an Account.") %></a>
+</div>
+<% } %>
 
-    <div class="section-title lines">
-        <h2>
-            <span class="text"><%- gettext("Sign in") %></span>
-        </h2>
-    </div>
+<h2><%- gettext("Sign In") %></h2>
+
+<form id="login" class="login-form" tabindex="-1" method="POST">
 
     <p class="sr">
         <% if ( context.providers.length > 0 && !context.currentProvider || context.hasSecondaryProviders ) { %>
@@ -25,9 +28,9 @@
     <% if ( context.providers.length > 0 && !context.currentProvider || context.hasSecondaryProviders ) { %>
     <div class="login-providers">
         <div class="section-title lines">
-            <h2>
+            <h3>
                 <span class="text"><%- gettext("or sign in with") %></span>
-            </h2>
+            </h3>
         </div>
 
         <% _.each( context.providers, function( provider ) {
@@ -53,13 +56,3 @@
     <% } %>
 </form>
 
-<% if ( context.createAccountOption !== false ) { %>
-    <div class="toggle-form">
-        <div class="section-title">
-            <h2>
-                <span class="text"><%- _.sprintf( gettext("New to %(platformName)s?"), context ) %></span>
-            </h2>
-        </div>
-        <button class="nav-btn form-toggle" data-type="register"><%- gettext("Create an account") %></button>
-    </div>
-<% } %>

lms/templates/student_account/password_reset.underscore

 <div class="js-form-feedback" aria-live="assertive" tabindex="-1">
 </div>
 
-<form id="password-reset" class="password-reset-form" tabindex="-1" method="POST">
+<h2><%- gettext("Password assistance") %></h2>
 
-    <div class="section-title lines">
-        <h2>
-            <span class="text"><%- gettext("Password assistance") %></span>
-        </h2>
-    </div>
+<form id="password-reset" class="password-reset-form" tabindex="-1" method="POST">
 
     <p class="action-label"><%- gettext("Please enter your email address below and we will send you instructions for setting a new password.") %></p>
 

lms/templates/student_account/register.underscore

 <div class="js-form-feedback" aria-live="assertive" tabindex="-1">
 </div>
 
+<div class="toggle-form">
+    <span class="text"><%- gettext("Already have an account?") %></span>
+    <a href="#login" class="form-toggle" data-type="login"><%- gettext("Sign in.") %></a>
+</div>
+
+<h2><%- gettext("Create an Account") %></h2>
+
 <form id="register" class="register-form" autocomplete="off" tabindex="-1" method="POST">
+
     <% if (!context.currentProvider) { %>
         <% if (context.providers.length > 0 || context.hasSecondaryProviders) { %>
             <div class="login-providers">
                 <div class="section-title lines">
-                    <h2>
+                    <h3>
                         <span class="text"><%- gettext("Create an account using") %></span>
-                    </h2>
+                    </h3>
                 </div>
                 <%
                 _.each( context.providers, function( provider) {
@@ -32,30 +40,14 @@
                 <% } %>
             </div>
             <div class="section-title lines">
-                <h2>
+                <h3>
                     <span class="text"><%- gettext("or create a new one here") %></span>
-                </h2>
-            </div>
-        <% } else { %>
-            <div class="section-title lines">
-                <h2>
-                    <span class="text"><%- gettext("Create a new account") %></span>
-                </h2>
+                </h3>
             </div>
         <% } %>
     <% } %>
 
     <%= context.fields %>
 
-    <button type="submit" class="action action-primary action-update js-register register-button"><%- gettext("Create your account") %></button>
-    <p class="note">* <%- gettext("Required field") %></p>
+    <button type="submit" class="action action-primary action-update js-register register-button"><%- gettext("Create account") %></button>
 </form>
-
-<div class="toggle-form">
-    <div class="section-title">
-        <h2>
-            <span class="text"><%- gettext("Already have an account?") %></span>
-        </h2>
-    </div>
-    <button class="nav-btn form-toggle" data-type="login"><%- gettext("Sign in") %></button>
-</div>

openedx/core/djangoapps/user_api/tests/test_views.py

@@ -822,6 +822,7 @@ class RegistrationViewTest(ThirdPartyAuthTestMixin, UserAPITestCase):
                 u"required": True,
                 u"label": u"Email",
                 u"placeholder": u"username@domain.com",
+                u"instructions": u"This is what you will use to login.",
                 u"restrictions": {
                     "min_length": EMAIL_MIN_LENGTH,
                     "max_length": EMAIL_MAX_LENGTH
@@ -835,9 +836,9 @@ class RegistrationViewTest(ThirdPartyAuthTestMixin, UserAPITestCase):
                 u"name": u"name",
                 u"type": u"text",
                 u"required": True,
-                u"label": u"Full name",
-                u"placeholder": u"Jane Doe",
-                u"instructions": u"Your legal name, used for any certificates you earn.",
+                u"label": u"Full Name",
+                u"placeholder": u"Jane Q. Learner",
+                u"instructions": u"This name will be used on any certificates that you earn.",
                 u"restrictions": {
                     "max_length": 255
                 },
@@ -850,9 +851,10 @@ class RegistrationViewTest(ThirdPartyAuthTestMixin, UserAPITestCase):
                 u"name": u"username",
                 u"type": u"text",
                 u"required": True,
-                u"label": u"Public username",
-                u"placeholder": u"JaneDoe",
-                u"instructions": u"The name that will identify you in your courses - <strong>(cannot be changed later)</strong>",  # pylint: disable=line-too-long
+                u"label": u"Public Username",
+                u"placeholder": u"Jane_Q_Learner",
+                u"instructions": u"The name that will identify you in your courses. "
+                                 u"It cannot be changed later.",
                 u"restrictions": {
                     "min_length": USERNAME_MIN_LENGTH,
                     "max_length": USERNAME_MAX_LENGTH
@@ -890,6 +892,7 @@ class RegistrationViewTest(ThirdPartyAuthTestMixin, UserAPITestCase):
                 u"required": True,
                 u"label": u"Email",
                 u"placeholder": u"username@domain.com",
+                u"instructions": u"This is what you will use to login.",
                 u"restrictions": {
                     "min_length": EMAIL_MIN_LENGTH,
                     "max_length": EMAIL_MAX_LENGTH
@@ -973,6 +976,7 @@ class RegistrationViewTest(ThirdPartyAuthTestMixin, UserAPITestCase):
                     u"required": True,
                     u"label": u"Email",
                     u"placeholder": u"username@domain.com",
+                    u"instructions": u"This is what you will use to login.",
                     u"restrictions": {
                         "min_length": EMAIL_MIN_LENGTH,
                         "max_length": EMAIL_MAX_LENGTH
@@ -980,7 +984,7 @@ class RegistrationViewTest(ThirdPartyAuthTestMixin, UserAPITestCase):
                 }
             )
 
-            # Full name should be filled in
+            # Full Name should be filled in
             self._assert_reg_field(
                 no_extra_fields_setting,
                 {
@@ -988,9 +992,9 @@ class RegistrationViewTest(ThirdPartyAuthTestMixin, UserAPITestCase):
                     u"defaultValue": u"Bob",
                     u"type": u"text",
                     u"required": True,
-                    u"label": u"Full name",
-                    u"placeholder": u"Jane Doe",
-                    u"instructions": u"Your legal name, used for any certificates you earn.",
+                    u"label": u"Full Name",
+                    u"placeholder": u"Jane Q. Learner",
+                    u"instructions": u"This name will be used on any certificates that you earn.",
                     u"restrictions": {
                         "max_length": NAME_MAX_LENGTH,
                     }
@@ -1005,9 +1009,10 @@ class RegistrationViewTest(ThirdPartyAuthTestMixin, UserAPITestCase):
                     u"defaultValue": u"Bob123",
                     u"type": u"text",
                     u"required": True,
-                    u"label": u"Public username",
-                    u"placeholder": u"JaneDoe",
-                    u"instructions": u"The name that will identify you in your courses - <strong>(cannot be changed later)</strong>",  # pylint: disable=line-too-long
+                    u"label": u"Public Username",
+                    u"placeholder": u"Jane_Q_Learner",
+                    u"instructions": u"The name that will identify you in your courses. "
+                                     u"It cannot be changed later.",
                     u"restrictions": {
                         "min_length": USERNAME_MIN_LENGTH,
                         "max_length": USERNAME_MAX_LENGTH
@@ -1197,7 +1202,7 @@ class RegistrationViewTest(ThirdPartyAuthTestMixin, UserAPITestCase):
                 "required": True,
                 "label": "Confirm Email",
                 "errorMessages": {
-                    "required": "Please confirm your email.",
+                    "required": "Please confirm your email address.",
                 }
             }
         )

openedx/core/djangoapps/user_api/views.py

@@ -396,11 +396,16 @@ class RegistrationView(APIView):
         # a field on the registration form meant to hold the user's email address.
         email_placeholder = _(u"username@domain.com")
 
+        # Translators: These instructions appear on the registration form, immediately
+        # below a field meant to hold the user's email address.
+        email_instructions = _(u"This is what you will use to login.")
+
         form_desc.add_field(
             "email",
             field_type="email",
             label=email_label,
             placeholder=email_placeholder,
+            instructions=email_instructions,
             restrictions={
                 "min_length": EMAIL_MIN_LENGTH,
                 "max_length": EMAIL_MAX_LENGTH,
@@ -421,7 +426,7 @@ class RegistrationView(APIView):
         # Translators: This label appears above a field on the registration form
         # meant to confirm the user's email address.
         email_label = _(u"Confirm Email")
-        error_msg = _(u"Please confirm your email.")
+        error_msg = _(u"Please confirm your email address.")
 
         form_desc.add_field(
             "confirm_email",
@@ -444,15 +449,15 @@ class RegistrationView(APIView):
         """
         # Translators: This label appears above a field on the registration form
         # meant to hold the user's full name.
-        name_label = _(u"Full name")
+        name_label = _(u"Full Name")
 
         # Translators: This example name is used as a placeholder in
         # a field on the registration form meant to hold the user's name.
-        name_placeholder = _(u"Jane Doe")
+        name_placeholder = _(u"Jane Q. Learner")
 
         # Translators: These instructions appear on the registration form, immediately
         # below a field meant to hold the user's full name.
-        name_instructions = _(u"Your legal name, used for any certificates you earn.")
+        name_instructions = _(u"This name will be used on any certificates that you earn.")
 
         form_desc.add_field(
             "name",
@@ -477,18 +482,18 @@ class RegistrationView(APIView):
         """
         # Translators: This label appears above a field on the registration form
         # meant to hold the user's public username.
-        username_label = _(u"Public username")
+        username_label = _(u"Public Username")
 
         username_instructions = _(
             # Translators: These instructions appear on the registration form, immediately
             # below a field meant to hold the user's public username.
-            u"The name that will identify you in your courses - "
-            u"{bold_start}(cannot be changed later){bold_end}"
-        ).format(bold_start=u'<strong>', bold_end=u'</strong>')
+            u"The name that will identify you in your courses. "
+            u"It cannot be changed later."
+        )
 
         # Translators: This example username is used as a placeholder in
         # a field on the registration form meant to hold the user's username.
-        username_placeholder = _(u"JaneDoe")
+        username_placeholder = _(u"Jane_Q_Learner")
 
         form_desc.add_field(
             "username",