ECOM-783 updated logistration in light of redesign

common/static/js/spec/edx.utils.validate_spec.js

@@ -12,7 +12,7 @@ describe('edx.utils.validate', function () {
         EMAIL_ERROR_FRAGMENT = 'formatted',
         MIN_ERROR_FRAGMENT = 'least',
         MAX_ERROR_FRAGMENT = 'up to',
-        REQUIRED_ERROR_FRAGMENT = 'empty',
+        REQUIRED_ERROR_FRAGMENT = 'Please enter your',
         CUSTOM_MESSAGE = 'custom message';
 
     var createFixture = function( type, name, required, minlength, maxlength, value ) {

common/static/js/utils/edx.utils.validate.js

@@ -19,9 +19,9 @@ var edx = edx || {};
 
                 msg: {
                     email: '<li><%- gettext("The email address you\'ve provided isn\'t formatted correctly.") %></li>',
-                    min: '<li><%- _.sprintf(gettext("%(field)s must have at least %(count)d characters."), context) %></li>',
-                    max: '<li><%- _.sprintf(gettext("%(field)s can only contain up to %(count)d characters."), context) %></li>',
-                    required: '<li><%- _.sprintf(gettext("The %(field)s field cannot be empty."), context) %></li>',
+                    min: '<li><%- _.sprintf( gettext("%(field)s must have at least %(count)d characters."), context ) %></li>',
+                    max: '<li><%- _.sprintf( gettext("%(field)s can only contain up to %(count)d characters."), context ) %></li>',
+                    required: '<li><%- _.sprintf( gettext("Please enter your %(field)s."), context ) %></li>',
                     custom: '<li><%= content %></li>'
                 },
 

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

@@ -120,8 +120,8 @@ class CombinedLoginAndRegisterPage(PageObject):
     def is_browser_on_page(self):
         """Check whether the combined login/registration page has loaded. """
         return (
-            self.q(css="#register-option").is_present() and
-            self.q(css="#login-option").is_present() and
+            self.q(css="#login-anchor").is_present() and
+            self.q(css="#register-anchor").is_present() and
             self.current_form is not None
         )
 
@@ -130,7 +130,10 @@ class CombinedLoginAndRegisterPage(PageObject):
         old_form = self.current_form
 
         # Toggle the form
-        self.q(css=".form-toggle:not(:checked)").click()
+        if old_form == "login":
+            self.q(css=".form-toggle[data-type='register']").click()
+        else:
+            self.q(css=".form-toggle[data-type='login']").click()
 
         # Wait for the form to change before returning
         EmptyPromise(
@@ -157,9 +160,9 @@ class CombinedLoginAndRegisterPage(PageObject):
         """
         # Fill in the form
         self.q(css="#register-email").fill(email)
-        self.q(css="#register-password").fill(password)
-        self.q(css="#register-username").fill(username)
         self.q(css="#register-name").fill(full_name)
+        self.q(css="#register-username").fill(username)
+        self.q(css="#register-password").fill(password)
         if country:
             self.q(css="#register-country option[value='{country}']".format(country=country)).click()
         if (terms_of_service):
@@ -168,7 +171,7 @@ class CombinedLoginAndRegisterPage(PageObject):
         # Submit it
         self.q(css=".register-button").click()
 
-    def login(self, email="", password="", remember_me=True):
+    def login(self, email="", password=""):
         """Fills in and submits the login form.
 
         Requires that the "login" form is visible.
@@ -179,14 +182,11 @@ class CombinedLoginAndRegisterPage(PageObject):
         Keyword Arguments:
             email (unicode): The user's email address.
             password (unicode): The user's password.
-            remember_me (boolean): If True, check the "remember me" box.
 
         """
         # Fill in the form
         self.q(css="#login-email").fill(email)
         self.q(css="#login-password").fill(password)
-        if remember_me:
-            self.q(css="#login-remember").click()
 
         # Submit it
         self.q(css=".login-button").click()
@@ -217,6 +217,8 @@ class CombinedLoginAndRegisterPage(PageObject):
         # Submit it
         self.q(css="button.js-reset").click()
 
+        return CombinedLoginAndRegisterPage(self.browser).wait_for_page()
+
     @property
     @unguarded
     def current_form(self):
@@ -233,7 +235,7 @@ class CombinedLoginAndRegisterPage(PageObject):
             return "register"
         elif self.q(css=".login-button").visible:
             return "login"
-        elif self.q(css=".js-reset").visible or self.q(css=".js-reset-success").visible:
+        elif self.q(css=".js-reset").visible:
             return "password-reset"
 
     @property

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

@@ -218,9 +218,9 @@ class RegisterFromCombinedPageTest(UniqueCourseTest):
 
         # Verify that the expected errors are displayed.
         errors = self.register_page.wait_for_errors()
-        self.assertIn(u'The Username field cannot be empty.', errors)
+        self.assertIn(u'Please enter your Public username.', errors)
         self.assertIn(u'You must agree to the edX Terms of Service and Honor Code.', errors)
-        self.assertIn(u'The Country field cannot be empty.', errors)
+        self.assertIn(u'Please select your Country.', errors)
 
     def test_toggle_to_login_form(self):
         self.register_page.visit().toggle_form()

lms/djangoapps/courseware/features/homepage.feature

 @shard_1
 Feature: LMS.Homepage for web users
   In order to get an idea what edX is about
-  As a an anonymous web user
+  As an anonymous web user
   I want to check the information on the home page
 
-  Scenario: User can see the "Login" button
+  Scenario: User can see the "Sign in" button
     Given I visit the homepage
-    Then I should see a link called "Log in"
+    Then I should see a link called "Sign in"
 
   Scenario: User can see the "Register Now" button
     Given I visit the homepage

lms/djangoapps/courseware/features/login.feature

@@ -8,7 +8,7 @@ Feature: LMS.Login in as a registered user
     Given I am an edX user
     And I am an unactivated user
     And I visit the homepage
-    When I click the link with the text "Log in"
+    When I click the link with the text "Sign in"
     And I submit my credentials on the login form
     Then I should see the login error message "This account has not been activated"
 
@@ -18,15 +18,15 @@ Feature: LMS.Login in as a registered user
     Given I am an edX user
     And I am an activated user
     And I visit the homepage
-    When I click the link with the text "Log in"
+    When I click the link with the text "Sign in"
     And I submit my credentials on the login form
     Then I should be on the dashboard page
 
     Scenario: Logout of a signed in account
     Given I am logged in
     When I click the dropdown arrow
-    And I click the link with the text "Log Out"
-    Then I should see a link with the text "Log in"
+    And I click the link with the text "Sign out"
+    Then I should see a link with the text "Sign in"
     And I should see that the path is "/"
 
     Scenario: Login with valid redirect

lms/static/js/spec/main.js

@@ -56,6 +56,7 @@
             'string_utils': 'xmodule_js/common_static/js/src/string_utils',
 
             // Manually specify LMS files that are not converted to RequireJS
+            'history': 'js/vendor/history',
             'js/verify_student/photocapture': 'js/verify_student/photocapture',
             'js/staff_debug_actions': 'js/staff_debug_actions',
 
@@ -372,6 +373,7 @@
                     'underscore',
                     'backbone',
                     'gettext',
+                    'history',
                     'utility',
                     'js/student_account/views/LoginView',
                     'js/student_account/views/PasswordResetView',

lms/static/js/spec/student_account/access_spec.js

@@ -96,13 +96,13 @@ define([
             var assertForms = function(visibleType, hiddenType) {
                 expect($(visibleType)).not.toHaveClass('hidden');
                 expect($(hiddenType)).toHaveClass('hidden');
-                expect($('#password-reset-wrapper')).toBeEmpty();
+                expect($('#password-reset-form')).toHaveClass('hidden');
             };
 
             var selectForm = function(type) {
                 // Create a fake change event to control form toggling
                 var changeEvent = $.Event('change');
-                changeEvent.currentTarget = $('#' + type + '-option');
+                changeEvent.currentTarget = $('.form-toggle[data-type="' + type + '"]');
 
                 // Load form corresponding to the change event
                 view.toggleForm(changeEvent);
@@ -133,9 +133,7 @@ define([
                 TemplateHelpers.installTemplate('templates/student_account/form_field');
 
                 // Stub analytics tracking
-                // TODO: use RequireJS to ensure that this is loaded correctly
-                window.analytics = window.analytics || {};
-                window.analytics.track = window.analytics.track || function() {};
+                window.analytics = jasmine.createSpyObj('analytics', ['track', 'page', 'pageview', 'trackLink']);
             });
 
             it('can initially display the login form', function() {

lms/static/js/spec/student_account/login_spec.js

@@ -4,12 +4,14 @@ define([
     'js/common_helpers/template_helpers',
     'js/common_helpers/ajax_helpers',
     'js/student_account/models/LoginModel',
-    'js/student_account/views/LoginView'
-], function($, _, TemplateHelpers, AjaxHelpers, LoginModel, LoginView) {
+    'js/student_account/views/LoginView',
+    'js/student_account/models/PasswordResetModel'
+], function($, _, TemplateHelpers, AjaxHelpers, LoginModel, LoginView, PasswordResetModel) {
     'use strict';
     describe('edx.student.account.LoginView', function() {
 
         var model = null,
+            resetModel = null,
             view = null,
             requests = null,
             authComplete = false,
@@ -79,10 +81,17 @@ define([
                 method: FORM_DESCRIPTION.method
             });
 
+            // Initialize the passwordReset model
+            resetModel = new PasswordResetModel({}, {
+                method: 'GET',
+                url: '#'
+            });
+
             // Initialize the login view
             view = new LoginView({
                 fields: FORM_DESCRIPTION.fields,
                 model: model,
+                resetModel: resetModel,
                 thirdPartyAuth: THIRD_PARTY_AUTH,
                 platformName: PLATFORM_NAME
             });

lms/static/js/spec/student_account/password_reset_spec.js

@@ -67,7 +67,7 @@ define([
             };
 
             beforeEach(function() {
-                setFixtures('<div id="password-reset-wrapper"></div>');
+                setFixtures('<div id="password-reset-form" class="form-wrapper hidden"></div>');
                 TemplateHelpers.installTemplate('templates/student_account/password_reset');
                 TemplateHelpers.installTemplate('templates/student_account/form_field');
             });
@@ -90,6 +90,12 @@ define([
 
                 // Verify that the success message is visible
                 expect($('.js-reset-success')).not.toHaveClass('hidden');
+
+                // Verify that login form has loaded
+                expect($('#login-form')).not.toHaveClass('hidden');
+
+                // Verify that password reset view has been removed
+                expect($( view.el ).html().length).toEqual(0);
             });
 
             it('validates the email field', function() {

lms/static/js/student_account/models/PasswordResetModel.js

@@ -21,7 +21,7 @@ var edx = edx || {};
             this.urlRoot = options.url;
         },
 
-        sync: function(method, model) {
+        sync: function( method, model ) {
             var headers = {
                 'X-CSRFToken': $.cookie('csrftoken')
             };

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

@@ -6,13 +6,21 @@ var edx = edx || {};
     edx.student = edx.student || {};
     edx.student.account = edx.student.account || {};
 
+    // Bind to StateChange Event
+    History.Adapter.bind( window, 'statechange', function() {
+        /* Note: We are using History.getState() for legacy browser (IE) support
+         * using History.js plugin instead of the native event.state
+         */
+        var State = History.getState();
+    });
+
     edx.student.account.AccessView = Backbone.View.extend({
         el: '#login-and-registration-container',
 
         tpl: '#access-tpl',
 
         events: {
-            'change .form-toggle': 'toggleForm'
+            'click .form-toggle': 'toggleForm'
         },
 
         subview: {
@@ -37,8 +45,15 @@ var edx = edx || {};
                 currentProvider: null,
                 providers: []
             };
+
             this.platformName = obj.platformName;
 
+            // The login view listens for 'sync' events from the reset model
+            this.resetModel = new edx.student.account.PasswordResetModel({}, {
+                method: 'GET',
+                url: '#'
+            });
+
             this.render();
         },
 
@@ -55,7 +70,6 @@ var edx = edx || {};
         postRender: function() {
             // Load the default form
             this.loadForm( this.activeForm );
-            this.$header = $(this.el).find('.js-login-register-header');
         },
 
         loadForm: function( type ) {
@@ -72,6 +86,7 @@ var edx = edx || {};
                 context.subview.login =  new edx.student.account.LoginView({
                     fields: data.fields,
                     model: model,
+                    resetModel: context.resetModel,
                     thirdPartyAuth: context.thirdPartyAuth,
                     platformName: context.platformName
                 });
@@ -85,15 +100,16 @@ var edx = edx || {};
             },
 
             reset: function( data, context ) {
-                var model = new edx.student.account.PasswordResetModel({}, {
-                    method: data.method,
-                    url: data.submit_url
-                });
+                context.resetModel.ajaxType = data.method;
+                context.resetModel.urlRoot = data.submit_url;
 
                 context.subview.passwordHelp = new edx.student.account.PasswordResetView({
                     fields: data.fields,
-                    model: model
+                    model: context.resetModel
                 });
+
+                // Listen for 'password-email-sent' event to toggle sub-views
+                context.listenTo( context.subview.passwordHelp, 'password-email-sent', context.passwordEmailSent );
             },
 
             register: function( data, context ) {
@@ -133,15 +149,20 @@ var edx = edx || {};
             });
         },
 
+        passwordEmailSent: function() {
+            this.element.hide( $(this.el).find('#password-reset-anchor') );
+            this.element.show( $('#login-anchor') );
+            this.element.scrollTop( $('#login-anchor') );
+        },
+
         resetPassword: function() {
             window.analytics.track('edx.bi.password_reset_form.viewed', {
                 category: 'user-engagement'
             });
 
-            this.element.hide( this.$header );
-            this.element.hide( $(this.el).find('.form-type') );
+            this.element.hide( $(this.el).find('#login-anchor') );
             this.loadForm('reset');
-            this.element.scrollTop( $('#password-reset-wrapper') );
+            this.element.scrollTop( $('#password-reset-anchor') );
         },
 
         showFormError: function() {
@@ -149,10 +170,12 @@ var edx = edx || {};
         },
 
         toggleForm: function( e ) {
-            var type = $(e.currentTarget).val(),
+            var type = $(e.currentTarget).data('type'),
                 $form = $('#' + type + '-form'),
                 $anchor = $('#' + type + '-anchor');
 
+            e.preventDefault();
+
             window.analytics.track('edx.bi.' + type + '_form.toggled', {
                 category: 'user-engagement'
             });
@@ -161,9 +184,14 @@ var edx = edx || {};
                 this.loadForm( type );
             }
 
+            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
+            History.pushState( null, document.title, '/account/' + type + '/' );
+            analytics.page( 'login_and_registration', type );
         },
 
         /**
@@ -291,8 +319,7 @@ var edx = edx || {};
          */
         element: {
             hide: function( $el ) {
-                $el.addClass('hidden')
-                   .attr('aria-hidden', true);
+                $el.addClass('hidden');
             },
 
             scrollTop: function( $el ) {
@@ -303,8 +330,7 @@ var edx = edx || {};
             },
 
             show: function( $el ) {
-                $el.removeClass('hidden')
-                   .attr('aria-hidden', false);
+                $el.removeClass('hidden');
             }
         }
     });

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

@@ -98,8 +98,7 @@ var edx = edx || {};
         element: {
             hide: function( $el ) {
                 if ( $el ) {
-                    $el.addClass('hidden')
-                       .attr('aria-hidden', true);
+                    $el.addClass('hidden');
                 }
             },
 
@@ -112,8 +111,7 @@ var edx = edx || {};
 
             show: function( $el ) {
                 if ( $el ) {
-                    $el.removeClass('hidden')
-                       .attr('aria-hidden', false);
+                    $el.removeClass('hidden');
                 }
             }
         },
@@ -148,7 +146,6 @@ var edx = edx || {};
         },
 
         getFormData: function() {
-
             var obj = {},
                 $form = this.$form,
                 elements = $form[0].elements,
@@ -229,6 +226,15 @@ var edx = edx || {};
             } else {
                 this.toggleErrorMsg( true );
             }
+
+            this.postFormSubmission();
+        },
+
+        /* Allows extended views to add custom
+         * code after form submission
+         */
+        postFormSubmission: function() {
+            return true;
         },
 
         toggleErrorMsg: function( show ) {

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

@@ -27,8 +27,10 @@ var edx = edx || {};
             this.providers = data.thirdPartyAuth.providers || [];
             this.currentProvider = data.thirdPartyAuth.currentProvider || '';
             this.platformName = data.platformName;
+            this.resetModel = data.resetModel;
 
             this.listenTo( this.model, 'sync', this.saveSuccess );
+            this.listenTo( this.resetModel, 'sync', this.resetEmail );
         },
 
         render: function( html ) {
@@ -55,6 +57,7 @@ var edx = edx || {};
 
             this.$form = this.$container.find('form');
             this.$errors = this.$container.find('.submission-error');
+            this.$resetSuccess = this.$container.find('.js-reset-success');
             this.$authError = this.$container.find('.already-authenticated-msg');
             this.$submitButton = this.$container.find(this.submitButton);
 
@@ -71,6 +74,16 @@ var edx = edx || {};
             event.preventDefault();
 
             this.trigger('password-help');
+            this.element.hide( this.$resetSuccess );
+        },
+
+        postFormSubmission: function() {
+            this.element.hide( this.$resetSuccess );
+        },
+
+        resetEmail: function() {
+            this.element.hide( this.$errors );
+            this.element.show( this.$resetSuccess );
         },
 
         thirdPartyAuth: function( event ) {
@@ -81,13 +94,15 @@ var edx = edx || {};
             }
         },
 
-        saveSuccess: function () {
+        saveSuccess: function() {
             this.trigger('auth-complete');
+            this.element.hide( this.$resetSuccess );
         },
 
         saveError: function( error ) {
             this.errors = ['<li>' + error.responseText + '</li>'];
             this.setErrors();
+            this.element.hide( this.$resetSuccess );
 
             /* If we've gotten a 403 error, it means that we've successfully
              * authenticated with a third-party provider, but we haven't

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

@@ -7,7 +7,7 @@ var edx = edx || {};
     edx.student.account = edx.student.account || {};
 
     edx.student.account.PasswordResetView = edx.student.account.FormView.extend({
-        el: '#password-reset-wrapper',
+        el: '#password-reset-form',
 
         tpl: '#password_reset-tpl',
 
@@ -22,6 +22,8 @@ var edx = edx || {};
         submitButton: '.js-reset',
 
         preRender: function() {
+            this.element.show( $( this.el ) );
+            this.element.show( $( this.el ).parent() );
             this.listenTo( this.model, 'sync', this.saveSuccess );
         },
 
@@ -35,12 +37,11 @@ var edx = edx || {};
         },
 
         saveSuccess: function() {
-            var $el = $(this.el),
-                $msg = $el.find('.js-reset-success');
+            this.trigger('password-email-sent');
 
-            this.element.hide( $el.find('#password-reset-form') );
-            this.element.show( $msg );
-            this.element.scrollTop( $msg );
+            // Destroy the view (but not el) and unbind events
+            this.$el.empty().off();
+            this.stopListening();
         }
     });
 

lms/static/sass/base/_base.scss

@@ -3,7 +3,6 @@
 // }
 
 html, body {
-  background: $body-bg;
   font-family: $sans-serif;
   font-size: 1em;
   font-style: normal;
@@ -11,6 +10,14 @@ html, body {
   //-webkit-font-smoothing: antialiased;
 }
 
+html{
+  background: white;
+}
+
+body {
+  background: $body-bg;
+}
+
 h1, h2, h3, h4, h5, h6 {
   color: $base-font-color;
   font: normal 1.2em/1.2em $serif;

lms/static/sass/base/_variables.scss

@@ -68,18 +68,18 @@ $white-t1: rgba($white, 0.25);
 $white-t2: rgba($white, 0.5);
 $white-t3: rgba($white, 0.75);
 
-$gray: rgb(127,127,127);
-$gray-l1: tint($gray,20%);
-$gray-l2: tint($gray,40%);
-$gray-l3: tint($gray,60%); // #cbcbcb;
-$gray-l4: tint($gray,80%); // #e5e5e5;
-$gray-l5: tint($gray,90%); // #f2f2f2;
-$gray-l6: tint($gray,95%); // #f8f8f8;
-$gray-l7: tint($gray,99%);
-$gray-d1: shade($gray,20%);
-$gray-d2: shade($gray,40%);
-$gray-d3: shade($gray,60%);
-$gray-d4: shade($gray,80%);
+$gray: rgb(127,127,127);    // #7f7f7f
+$gray-l1: tint($gray,20%);  // #989898
+$gray-l2: tint($gray,40%);  // #b2b2b2
+$gray-l3: tint($gray,60%);  // #cbcbcb
+$gray-l4: tint($gray,80%);  // #e5e5e5
+$gray-l5: tint($gray,90%);  // #f2f2f2
+$gray-l6: tint($gray,95%);  // #f8f8f8
+$gray-l7: tint($gray,99%);  // #fdfdfd
+$gray-d1: shade($gray,20%); // #656565
+$gray-d2: shade($gray,40%); // #4c4c4c
+$gray-d3: shade($gray,60%); // #323232
+$gray-d4: shade($gray,80%); // #191919
 
 $pink: rgb(182,37,103);
 $pink-l1: tint($pink,20%);
@@ -175,11 +175,13 @@ $m-blue-l2: #42B5E9;
 $m-blue-l3: #59BEEC;
 $m-blue-l4: tint($m-blue,90%);
 $m-blue-l5: tint($m-blue,95%);
+$m-blue-l6: #4bb4fb;
 $m-blue-d1: #1790C7;
 $m-blue-d2: #1580B0;
 $m-blue-d3: #126F9A;
 $m-blue-d4: #0A4A67;
 $m-blue-d5: #009EE7;
+$m-blue-d6: #256A97;
 $m-blue-t0: rgba($m-blue,0.125);
 $m-blue-t1: rgba($m-blue,0.25);
 $m-blue-t2: rgba($m-blue,0.50);

lms/templates/main.html

@@ -97,7 +97,6 @@
     header_extra_file = 'theme-head-extra.html'
     header_file = 'theme-header.html'
     google_analytics_file = 'theme-google-analytics.html'
-    footer_file = 'theme-footer.html'
 
     style_overrides_file = None
 
@@ -111,12 +110,6 @@
 
     google_analytics_file = microsite.get_template_path('google_analytics.html')
 
-    if settings.FEATURES['IS_EDX_DOMAIN'] and not is_microsite():
-        footer_file = microsite.get_template_path('footer-edx-new.html')
-
-    else:
-      footer_file = microsite.get_template_path('footer.html')
-
     style_overrides_file = microsite.get_value('css_overrides_file')
 %>
 
@@ -136,7 +129,6 @@
 
   <%include file="${google_analytics_file}" />
 
-
 % if style_overrides_file:
   <link rel="stylesheet" type="text/css" href="${static.url(style_overrides_file)}" />
 % endif
@@ -149,18 +141,25 @@
 
     <%include file="mathjax_accessible.html" />
 
-  % if not suppress_toplevel_navigation:
     <%include file="${header_file}" />
-  %endif
 
     <div class="content-wrapper" id="content">
       ${self.body()}
       <%block name="bodyextra"/>
     </div>
 
-  % if not suppress_toplevel_navigation:
-    <%include file="${footer_file}" />
-  % endif
+    <%block name="footer">
+      ## Can be overridden by child templates wanting to hide the footer. 
+      <%
+        if theme_enabled() and not is_microsite():
+          footer_file = 'theme-footer.html'
+        elif settings.FEATURES['IS_EDX_DOMAIN'] and not is_microsite():
+          footer_file = microsite.get_template_path('footer-edx-new.html')
+        else:
+          footer_file = microsite.get_template_path('footer.html')
+      %>
+      <%include file="${footer_file}" />
+    </%block>
 
   </div>
 

lms/templates/navigation-edx.html

@@ -80,7 +80,7 @@ site_status_msg = get_site_status_msg(course_id)
               <li><a href="${marketing_link('FAQ')}">${_("Help")}</a></li>
             % endif
           </%block>
-          <li><a href="${reverse('logout')}" role="menuitem">${_("Log Out")}</a></li>
+          <li><a href="${reverse('logout')}" role="menuitem">${_("Sign out")}</a></li>
         </ul>
       </li>
     </ol>
@@ -126,9 +126,9 @@ site_status_msg = get_site_status_msg(course_id)
       <div class="nav-courseware-02">
         % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
             % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
-            <a class="cta cta-login nav-courseware-button" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Log in")}</a>
+            <a class="cta cta-login nav-courseware-button" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
             % else:
-            <a class="cta cta-login nav-courseware-button" href="/login${login_query()}">${_("Log in")}</a>
+            <a class="cta cta-login nav-courseware-button" href="/login${login_query()}">${_("Sign in")}</a>
             % endif
         % endif
       </div>

lms/templates/navigation.html

@@ -75,7 +75,7 @@ site_status_msg = get_site_status_msg(course_id)
               <li><a href="${marketing_link('FAQ')}">${_("Help")}</a></li>
             % endif
           </%block>
-          <li><a href="${reverse('logout')}" role="menuitem">${_("Log Out")}</a></li>
+          <li><a href="${reverse('logout')}" role="menuitem">${_("Sign out")}</a></li>
         </ul>
       </li>
     </ol>
@@ -120,9 +120,9 @@ site_status_msg = get_site_status_msg(course_id)
     <li class="nav-courseware-01">
       % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
           % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
-          <a class="cta cta-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Log in")}</a>
+          <a class="cta cta-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
           % else:
-          <a class="cta cta-login" href="/login${login_query()}">${_("Log in")}</a>
+          <a class="cta cta-login" href="/login${login_query()}">${_("Sign in")}</a>
           % endif
       % endif
     </li>

lms/templates/student_account/access.underscore

-<header class="js-login-register-header header">
-    <h1 class="headline"><%- gettext("Welcome!") %></h1>
-    <p class="tagline"><%- gettext("Log in or register to take courses from the world's best universities.") %></p>
-</header>
-
-<section id="form-load-fail" class="form-type hidden" aria-hidden="true">
+<section id="form-load-fail" class="form-type hidden">
     <div class="status submission-error">
         <p class="message-copy"><%- gettext("Sorry, we're having some technical problems. Wait a few minutes and try again.") %></p>
     </div>
 </section>
 
-<% if ( mode === 'login' ) { %>
-    <section id="register-anchor" class="form-type">
-        <span>
-            <input type="radio" name="form" id="register-option" value="register" class="form-toggle" <% if ( mode === 'register' ) { %>checked<% } %> >
-            <label for="register-option" class="form-label"><%- gettext("I am a new user") %></label>
-        </span>
-        <div id="register-form" class="form-wrapper <% if ( mode !== 'register' ) { %>hidden" aria-hidden="true<% } %>"></div>
-    </section>
-<% } %>
-
 <section id="login-anchor" class="form-type">
-    <span>
-        <input type="radio" name="form" id="login-option" value="login" class="form-toggle" <% if ( mode === 'login' ) { %>checked<% } %>>
-        <label for="login-option" class="form-label"><%- gettext("I am a returning user") %></label>
-    </span>
-    <div id="login-form" class="form-wrapper <% if ( mode !== 'login' ) { %>hidden" aria-hidden="true<% } %>"></div>
+    <div id="login-form" class="form-wrapper <% if ( mode !== 'login' ) { %>hidden<% } %>"></div>
 </section>
 
-<% if ( mode === 'register' ) { %>
-    <section id="register-anchor" class="form-type">
-        <span>
-            <input type="radio" name="form" id="register-option" value="register" class="form-toggle" <% if ( mode === 'register' ) { %>checked<% } %> >
-            <label for="register-option" class="form-label"><%- gettext("I am a new user") %></label>
-        </span>
-        <div id="register-form" class="form-wrapper <% if ( mode !== 'register' ) { %>hidden" aria-hidden="true<% } %>"></div>
-    </section>
-<% } %>
+<section id="register-anchor" class="form-type">
+    <div id="register-form" class="form-wrapper <% if ( mode !== 'register' ) { %>hidden<% } %>"></div>
+</section>
 
-<div id="password-reset-wrapper"></div>
+<section id="password-reset-anchor" class="form-type">
\ No newline at end of file
+    <div id="password-reset-form" class="form-wrapper hidden" aria-hidden="true"></div>
+</section>

lms/templates/student_account/form_field.underscore

@@ -11,6 +11,11 @@
             name="<%= name %>"
             class="input-inline"
             aria-describedby="<%= form %>-<%= name %>-desc"
+            <% if ( typeof errorMessages !== 'undefined' ) {
+                _.each(errorMessages, function( msg, type ) {%>
+                    data-errormsg-<%= type %>="<%= msg %>"
+            <%  });
+            } %>
             <% if ( required ) { %> aria-required="true" required<% } %>>
         <% _.each(options, function(el) { %>
             <option value="<%= el.value%>"<% if ( el.default ) { %> data-isdefault="true"<% } %>><%= el.name %></option>
@@ -49,7 +54,7 @@
     <% } %>
 
     <% if ( type === 'checkbox' ) { %>
-        <label for="<%= form %>-<%= name %>" class="inline">
+        <label for="<%= form %>-<%= name %>">
             <%= label %>
             <% if ( required && requiredStr ) { %> <%= requiredStr %><% } %>
         </label>
@@ -58,6 +63,4 @@
     <% if( form === 'login' && name === 'password' ) { %>
         <a href="#" class="forgot-password field-link"><%- gettext("Forgot password?") %></a>
     <% } %>
-
-    <span id="<%= form %>-<%= name %>-desc" class="desc"><%= instructions %></span>
 </p>

lms/templates/student_account/login.underscore

-<form id="login" class="login-form">
-    <div class="status already-authenticated-msg hidden" aria-hidden="true">
-        <% if (context.currentProvider) { %>
-            <p class="message-copy">
-                <%- _.sprintf(gettext("You've successfully logged into %(currentProvider)s, but your %(currentProvider)s account isn't linked with an %(platformName)s account. To link your accounts, go to your %(platformName)s dashboard."), context) %>
-            </p>
-        <% } %>
+<div class="status already-authenticated-msg hidden">
+    <% if (context.currentProvider) { %>
+        <p class="message-copy">
+            <%- _.sprintf( gettext("You've successfully signed into %(currentProvider)s, but your %(currentProvider)s account isn't linked with an %(platformName)s account. To link your accounts, go to your %(platformName)s dashboard."), context ) %>
+        </p>
+    <% } %>
+</div>
+
+<div class="js-reset-success status submission-success hidden">
+    <h4 class="message-title"><%- gettext("Password Reset Email Sent") %></h4>
+    <div class="message-copy">
+        <p>
+            <%- gettext("We've sent instructions for resetting your password to the email address you provided.") %>
+        </p>
     </div>
+</div>
+
+<div class="status submission-error hidden" aria-live="polite">
+    <h4 class="message-title"><%- gettext("We couldn't sign you in.") %></h4>
+    <ul class="message-copy"></ul>
+</div>
+
+<form id="login" class="login-form">
 
-    <div class="status submission-error hidden" aria-hidden="true" aria-live="polite">
-        <h4 class="message-title"><%- gettext("We couldn't log you in.") %></h4>
-        <ul class="message-copy"></ul>
+    <div class="section-title lines">
+        <h2>
+            <span class="text"><%- gettext("Sign in") %></span>
+        </h2>
     </div>
 
     <%= context.fields %>
 
-    <button class="action action-primary action-update js-login login-button"><%- gettext("Log in") %></button>
+    <button class="action action-primary action-update js-login login-button"><%- gettext("Sign in") %></button>
+
+    <div class="login-providers">
+        <div class="section-title lines">
+            <h2>
+                <span class="text"><%- gettext("or sign in with") %></span>
+            </h2>
+        </div>
+
+        <% _.each( context.providers, function( provider ) {
+            if ( provider.loginUrl ) { %>
+                <button type="submit" class="button button-primary button-<%- provider.name %> login-provider login-<%- provider.name %>" data-provider-url="<%- provider.loginUrl %>">
+                    <div class="icon <%- provider.iconClass %>" aria-hidden="true"></div>
+                    <%- provider.name %>
+                </button>
+            <% }
+        }); %>
+    </div>
 </form>
 
-<% _.each( context.providers, function( provider ) {
-    if ( provider.loginUrl ) { %>
-        <button type="submit" class="button button-primary button-<%- provider.name %> login-provider login-<%- provider.name %>" data-provider-url="<%- provider.loginUrl %>">
-            <span class="icon <%- provider.iconClass %>" aria-hidden="true"></span>
-            <%- _.sprintf(gettext("Log in using %(name)s"), provider) %>
-        </button>
-    <% }
-}); %>
+<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/login_and_register.html

@@ -3,13 +3,14 @@
 
 <%inherit file="../main.html" />
 
-<%block name="pagetitle">${_("Log in or Register")}</%block>
+<%block name="pagetitle">${_("Sign in or Register")}</%block>
 
 <%block name="js_extra">
     <script src="${static.url('js/vendor/underscore-min.js')}"></script>
     <script src="${static.url('js/vendor/underscore.string.min.js')}"></script>
     <script src="${static.url('js/vendor/backbone-min.js')}"></script>
     <script src="${static.url('js/vendor/url.min.js')}"></script>
+    <script src="${static.url('js/vendor/history.js')}"></script>
     <%static:js group='student_account'/>
 </%block>
 
@@ -29,3 +30,10 @@
         data-platform-name='${platform_name}'
     />
 </div>
+
+% if settings.FEATURES.get('ENABLE_COMBINED_LOGIN_REGISTRATION'):
+    ## This overwrites the "footer" block declared in main.html
+    ## with an empty block, effectively hiding the footer
+    ## from logistration pages.
+    <%block name="footer"/>
+% endif

lms/templates/student_account/password_reset.underscore

-<header class="header">
-    <h1 class="headline"><%- gettext("Reset Password") %></h1>
-</header>
+<div class="status submission-error hidden" aria-live="polite">
+    <h4 class="message-title"><%- gettext("An error occurred.") %></h4>
+    <ul class="message-copy"></ul>
+</div>
 
-<section class="form-type">
-    <div id="password-reset-form" class="form-wrapper">
-        <p class="action-label"><%- gettext("Enter the email address you used to create your account. We'll send you a link you can use to reset your password.") %></p>
-        <form id="password-reset-form">
-            <div class="status submission-error hidden" aria-hidden="true" aria-live="polite">
-                <h4 class="message-title"><%- gettext("An error occurred.") %></h4>
-                <ul class="message-copy"></ul>
-            </div>
+<form id="password-reset" class="password-reset-form">
 
-            <%= fields %>
-
-            <button class="action action-primary action-update js-reset"><%- gettext("Reset password") %></button>
-        </form>
+    <div class="section-title lines">
+        <h2>
+            <span class="text"><%- gettext("Password assistance") %></span>
+        </h2>
     </div>
 
-    <div class="js-reset-success status submission-success hidden" aria-hidden="true">
-        <h4 class="message-title"><%- gettext("Password Reset Email Sent") %></h4>
-        <div class="message-copy">
-            <p>
-                <%- gettext("We've sent instructions for resetting your password to the email address you provided.") %>
-            </p>
-        </div>
-    </div>
-</section>
+    <p class="action-label"><%- gettext("Please enter your email address below and we will send you instructions for setting a new password.") %></p>
+
+    <%= fields %>
+
+    <button class="action action-primary action-update js-reset"><%- gettext("Reset my password") %></button>
+</form>

lms/templates/student_account/register.underscore

-<% if (context.currentProvider) { %>
-    <div class="status" aria-hidden="false">
-        <p class="message-copy">
-            <%- _.sprintf(gettext("You've successfully logged into %(currentProvider)s."), context) %>
-            <%- _.sprintf(gettext("We just need a little more information before you start learning with %(platformName)s."), context) %>
-        </p>
-    </div>
-<% } else {
-    _.each( context.providers, function( provider) {
-        if ( provider.registerUrl ) { %>
-            <button type="submit" class="button button-primary button-<%- provider.name %> login-provider register-<%- provider.name %>" data-provider-url="<%- provider.registerUrl %>">
-                <span class="icon <%- provider.iconClass %>" aria-hidden="true"></span>
-                <%- _.sprintf(gettext("Register using %(name)s"), provider) %>
-            </button>
-    <%  }
-    });
-} %>
+<div class="status submission-error hidden" aria-live="polite">
+    <h4 class="message-title"><%- gettext("We couldn't create your account.") %></h4>
+    <ul class="message-copy"></ul>
+</div>
 
 <form id="register" autocomplete="off">
-    <div class="status submission-error hidden" aria-hidden="true" aria-live="polite">
-        <h4 class="message-title"><%- gettext("We couldn't complete your registration.") %></h4>
-        <ul class="message-copy"></ul>
+    <% if (context.currentProvider) { %>
+        <div class="status" aria-hidden="false">
+            <p class="message-copy">
+                <%- _.sprintf( gettext("You've successfully signed into %(currentProvider)s."), context ) %>
+                <%- _.sprintf( gettext("We just need a little more information before you start learning with %(platformName)s."), context ) %>
+            </p>
+        </div>
+    <% } else {  %>
+        <div class="login-providers">
+            <div class="section-title lines">
+                <h2>
+                    <span class="text"><%- gettext("Create an account using") %></span>
+                </h2>
+            </div>
+            <%
+            _.each( context.providers, function( provider) {
+                if ( provider.registerUrl ) { %>
+                    <button type="submit" class="button button-primary button-<%- provider.name %> login-provider register-<%- provider.name %>" data-provider-url="<%- provider.registerUrl %>">
+                        <span class="icon <%- provider.iconClass %>" aria-hidden="true"></span>
+                        <%- provider.name %>
+                    </button>
+            <%  }
+            }); %>
+        </div>
+    <% } %>
+
+    <div class="section-title lines">
+        <h2>
+            <span class="text"><%- gettext("or create a new one here") %></span>
+        </h2>
     </div>
 
     <%= context.fields %>
 
-    <button class="action action-primary action-update js-register register-button"><%- gettext("Register") %></button>
+    <button class="action action-primary action-update js-register register-button"><%- gettext("Create your account") %></button>
     <p class="note">* <%- gettext("Required field") %></p>
 </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

@@ -633,17 +633,6 @@ class LoginSessionViewTest(ApiTestCase):
                     "max_length": account_api.PASSWORD_MAX_LENGTH
                 },
                 "errorMessages": {},
-            },
-            {
-                "name": "remember",
-                "defaultValue": False,
-                "type": "checkbox",
-                "required": False,
-                "label": "Remember me",
-                "placeholder": "",
-                "instructions": "",
-                "restrictions": {},
-                "errorMessages": {},
             }
         ])
 
@@ -847,7 +836,7 @@ class RegistrationViewTest(ApiTestCase):
                 u"name": u"name",
                 u"type": u"text",
                 u"required": True,
-                u"label": u"Full Name",
+                u"label": u"Full name",
                 u"instructions": u"The name that will appear on your certificates",
                 u"restrictions": {
                     "max_length": profile_api.FULL_NAME_MAX_LENGTH,
@@ -861,7 +850,7 @@ class RegistrationViewTest(ApiTestCase):
                 u"name": u"username",
                 u"type": u"text",
                 u"required": True,
-                u"label": u"Username",
+                u"label": u"Public username",
                 u"instructions": u"The name that will identify you in your courses",
                 u"restrictions": {
                     "min_length": account_api.USERNAME_MIN_LENGTH,
@@ -927,7 +916,7 @@ class RegistrationViewTest(ApiTestCase):
                     u"defaultValue": u"Bob",
                     u"type": u"text",
                     u"required": True,
-                    u"label": u"Full Name",
+                    u"label": u"Full name",
                     u"instructions": u"The name that will appear on your certificates",
                     u"restrictions": {
                         "max_length": profile_api.FULL_NAME_MAX_LENGTH
@@ -943,7 +932,7 @@ class RegistrationViewTest(ApiTestCase):
                     u"defaultValue": u"Bob123",
                     u"type": u"text",
                     u"required": True,
-                    u"label": u"Username",
+                    u"label": u"Public username",
                     u"placeholder": u"",
                     u"instructions": u"The name that will identify you in your courses",
                     u"restrictions": {
@@ -960,7 +949,7 @@ class RegistrationViewTest(ApiTestCase):
                 "name": "level_of_education",
                 "type": "select",
                 "required": False,
-                "label": "Highest Level of Education Completed",
+                "label": "Highest level of education completed",
                 "options": [
                     {"value": "", "name": "--", "default": True},
                     {"value": "p", "name": "Doctorate"},
@@ -1007,7 +996,7 @@ class RegistrationViewTest(ApiTestCase):
                 "name": "year_of_birth",
                 "type": "select",
                 "required": False,
-                "label": "Year of Birth",
+                "label": "Year of birth",
                 "options": year_options,
             }
         )
@@ -1019,7 +1008,7 @@ class RegistrationViewTest(ApiTestCase):
                 "name": "mailing_address",
                 "type": "textarea",
                 "required": False,
-                "label": "Mailing Address",
+                "label": "Mailing address",
             }
         )
 
@@ -1030,7 +1019,7 @@ class RegistrationViewTest(ApiTestCase):
                 "name": "goals",
                 "type": "textarea",
                 "required": False,
-                "label": "If you'd like, tell us why you're interested in {platform_name}".format(
+                "label": "Tell us why you're interested in {platform_name}".format(
                     platform_name=settings.PLATFORM_NAME
                 )
             }
@@ -1063,6 +1052,9 @@ class RegistrationViewTest(ApiTestCase):
                 "type": "select",
                 "required": True,
                 "options": country_options,
+                "errorMessages": {
+                    "required": "Please select your Country."
+                },
             }
         )
 
@@ -1222,9 +1214,9 @@ class RegistrationViewTest(ApiTestCase):
             "password",
             "city",
             "country",
-            "level_of_education",
             "gender",
             "year_of_birth",
+            "level_of_education",
             "mailing_address",
             "goals",
             "honor_code",

openedx/core/djangoapps/user_api/views.py

@@ -112,19 +112,6 @@ class LoginSessionView(APIView):
             }
         )
 
-        # Translators: This phrase appears next to a checkbox on the login form
-        # which the user can check in order to remain logged in after their
-        # session ends.
-        remember_label = _(u"Remember me")
-
-        form_desc.add_field(
-            "remember",
-            field_type="checkbox",
-            label=remember_label,
-            default=False,
-            required=False,
-        )
-
         return HttpResponse(form_desc.to_json(), content_type="application/json")
 
     @method_decorator(require_post_params(["email", "password"]))
@@ -171,9 +158,15 @@ class RegistrationView(APIView):
     DEFAULT_FIELDS = ["email", "name", "username", "password"]
 
     EXTRA_FIELDS = [
-        "city", "country", "level_of_education", "gender",
-        "year_of_birth", "mailing_address", "goals",
-        "honor_code", "terms_of_service",
+        "city",
+        "country",
+        "gender",
+        "year_of_birth",
+        "level_of_education",
+        "mailing_address",
+        "goals",
+        "honor_code",
+        "terms_of_service",
     ]
 
     # This end-point is available to anonymous users,
@@ -348,7 +341,7 @@ 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: These instructions appear on the registration form, immediately
         # below a field meant to hold the user's full name.
@@ -376,7 +369,7 @@ 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"Username")
+        username_label = _(u"Public username")
 
         # Translators: These instructions appear on the registration form, immediately
         # below a field meant to hold the user's public username.
@@ -432,7 +425,7 @@ class RegistrationView(APIView):
         """
         # Translators: This label appears above a dropdown menu on the registration
         # form used to select the user's highest completed level of education.
-        education_level_label = _(u"Highest Level of Education Completed")
+        education_level_label = _(u"Highest level of education completed")
 
         form_desc.add_field(
             "level_of_education",
@@ -478,7 +471,7 @@ class RegistrationView(APIView):
         """
         # Translators: This label appears above a dropdown menu on the registration
         # form used to select the user's year of birth.
-        yob_label = _(u"Year of Birth")
+        yob_label = _(u"Year of birth")
 
         options = [(unicode(year), unicode(year)) for year in UserProfile.VALID_YEARS]
         form_desc.add_field(
@@ -502,7 +495,7 @@ class RegistrationView(APIView):
         """
         # Translators: This label appears above a field on the registration form
         # meant to hold the user's mailing address.
-        mailing_address_label = _(u"Mailing Address")
+        mailing_address_label = _(u"Mailing address")
 
         form_desc.add_field(
             "mailing_address",
@@ -524,7 +517,7 @@ class RegistrationView(APIView):
         # Translators: This phrase appears above a field on the registration form
         # meant to hold the user's reasons for registering with edX.
         goals_label = _(
-            u"If you'd like, tell us why you're interested in {platform_name}"
+            u"Tell us why you're interested in {platform_name}"
         ).format(platform_name=settings.PLATFORM_NAME)
 
         form_desc.add_field(
@@ -575,13 +568,19 @@ class RegistrationView(APIView):
             (country_code, unicode(country_name))
             for country_code, country_name in sorted_countries
         ]
+
+        error_msg = _(u"Please select your Country.")
+
         form_desc.add_field(
             "country",
             label=country_label,
             field_type="select",
             options=options,
             include_default_option=True,
-            required=required
+            required=required,
+            error_messages={
+                "required": error_msg
+            }
         )
 
     def _add_honor_code_field(self, form_desc, required=True):