Merge pull request #5849 from edx/alasdair/logistration-form-order-update

ECOM-587 and ECOM-585 Switched tab order based on url and on selection o...

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

@@ -29,7 +29,7 @@ var edx = edx || {};
              * (all but include, contains, and reverse) into the
              * Underscore namespace
              */
-            _.mixin(_.str.exports())
+            _.mixin( _.str.exports() );
 
             this.tpl = $(this.tpl).html();
             this.activeForm = obj.mode || 'login';
@@ -132,7 +132,8 @@ var edx = edx || {};
 
         toggleForm: function( e ) {
             var type = $(e.currentTarget).val(),
-                $form = $('#' + type + '-form');
+                $form = $('#' + type + '-form'),
+                $anchor = $('#' + type + '-anchor');
 
             if ( !this.form.isLoaded( $form ) ) {
                 this.loadForm( type );
@@ -140,6 +141,11 @@ var edx = edx || {};
 
             this.element.hide( $(this.el).find('.form-wrapper') );
             this.element.show( $form );
+
+            // Scroll to top of selected form
+            $('html,body').animate({
+                scrollTop: $anchor.offset().top
+            },'slow');
         },
 
         form: {

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

@@ -73,9 +73,6 @@ var edx = edx || {};
 
             if (providerUrl) {
                 window.location.href = providerUrl;
-            } else {
-                // TODO -- error handling here
-                console.log('No URL available for third party auth provider');
             }
         },
 

lms/static/js/student_account/views/RegisterView.js

@@ -28,8 +28,9 @@ var edx = edx || {};
             var fields = html || '';
 
             $(this.el).html( _.template( this.tpl, {
-                // We pass the context object to the template so that
-                // we can perform variable interpolation using sprintf
+                /* We pass the context object to the template so that
+                 * we can perform variable interpolation using sprintf
+                 */
                 context: {
                     fields: fields,
                     currentProvider: this.currentProvider,
@@ -46,11 +47,8 @@ var edx = edx || {};
         thirdPartyAuth: function( event ) {
             var providerUrl = $(event.target).data('provider-url') || '';
 
-            if (providerUrl) {
+            if ( providerUrl ) {
                 window.location.href = providerUrl;
-            } else {
-                // TODO -- error handling here
-                console.log('No URL available for third party auth provider');
             }
         }
     });

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

@@ -130,6 +130,7 @@
     .form-field {
         @include clearfix;
         clear: both;
+        position: relative;
         width: 100%;
         margin: 0 0 $baseline 0;
 
@@ -166,7 +167,6 @@
 
         .field-link {
             position: relative;
-            float: right;
             color: $link-color-d1;
             font-weight: $font-regular;
             text-decoration: none !important; // needed but nasty
@@ -371,6 +371,12 @@
                 @extend %inline-form-field-tablet;
                 width: calc( 50% - 10px );
             }
+
+            .field-link {
+                position: absolute;
+                top: 0;
+                right: 0;
+            }
         }
     }
 
@@ -412,6 +418,12 @@
                 @extend %inline-form-field-desktop;
                 width: 100px;
             }
+
+            .field-link {
+                position: absolute;
+                top: 0;
+                right: 0;
+            }
         }
 
         .login-provider {

lms/templates/student_account/access.underscore

@@ -3,7 +3,17 @@
     <p class="tagline"><%- gettext("Log in or register to take courses from the world's best universities.") %></p>
 </header>
 
-<section class="form-type">
+<% if ( mode === 'login' ) { %>
+    <section id="register-anchor" class="form-type">
+        <h2>
+            <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>
+        </h2>
+        <div id="register-form" class="form-wrapper <% if ( mode !== 'register' ) { %>hidden" aria-hidden="true<% } %>"></div>
+    </section>
+<% } %>
+
+<section id="login-anchor" class="form-type">
     <h2>
         <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>
@@ -11,12 +21,14 @@
     <div id="login-form" class="form-wrapper <% if ( mode !== 'login' ) { %>hidden" aria-hidden="true<% } %>"></div>
 </section>
 
-<section class="form-type">
-    <h2>
-        <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>
-    </h2>
-    <div id="register-form" class="form-wrapper <% if ( mode !== 'register' ) { %>hidden" aria-hidden="true<% } %>"></div>
-</section>
+<% if ( mode === 'register' ) { %>
+    <section id="register-anchor" class="form-type">
+        <h2>
+            <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>
+        </h2>
+        <div id="register-form" class="form-wrapper <% if ( mode !== 'register' ) { %>hidden" aria-hidden="true<% } %>"></div>
+    </section>
+<% } %>
 
 <div id="password-reset-wrapper"></div>

lms/templates/student_account/form_field.underscore

@@ -6,10 +6,6 @@
         </label>
     <% } %>
 
-    <% if( form === 'login' && name === 'password' ) { %>
-        <a href="#" class="forgot-password field-link"><%- gettext("Forgot password?") %></a>
-    <% } %>
-
     <% if ( type === 'select' ) { %>
         <select id="<%= form %>-<%= name %>"
             name="<%= name %>"
@@ -59,5 +55,9 @@
         </label>
     <% } %>
 
+    <% 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

@@ -17,8 +17,10 @@
     <button class="action action-primary action-update js-login"><%- gettext("Log in") %></button>
 </form>
 
-<% _.each( context.providers, function( provider ) { %>
-    <button type="submit"class="button button-primary button-<%- provider.name %> login-provider" data-provider-url="<%- provider.loginUrl %>">
-        <span class="icon <%- provider.iconClass %>"></span><%- _.sprintf(gettext("Log in using %(name)s"), provider) %>
-    </button>
-<% }); %>
+<% _.each( context.providers, function( provider ) {
+    if ( provider.loginUrl ) { %>
+        <button type="submit"class="button button-primary button-<%- provider.name %> login-provider" data-provider-url="<%- provider.loginUrl %>">
+            <span class="icon <%- provider.iconClass %>"></span><%- _.sprintf(gettext("Log in using %(name)s"), provider) %>
+        </button>
+    <% }
+}); %>

lms/templates/student_account/register.underscore

@@ -6,11 +6,13 @@
         </p>
     </div>
 <% } else {
-    _.each( context.providers, function( provider) { %>
-        <button type="submit"class="button button-primary button-<%- provider.name %> login-provider" data-provider-url="<%- provider.registerUrl %>">
-            <span class="icon <%- provider.iconClass %>"></span><%- _.sprintf(gettext("Register using %(name)s"), provider) %>
-        </button>
-    <% });
+    _.each( context.providers, function( provider) {
+        if ( provider.registerUrl ) { %>
+            <button type="submit"class="button button-primary button-<%- provider.name %> login-provider" data-provider-url="<%- provider.registerUrl %>">
+                <span class="icon <%- provider.iconClass %>"></span><%- _.sprintf(gettext("Register using %(name)s"), provider) %>
+            </button>
+    <%  }
+    });
 } %>
 
 <form id="register" autocomplete="off">