ECOM-585, ECOM-587 and ECOM-588 Changed order of forms based on url, fixed tabbing issue with forgot password link and moved third party quth error message so now does not load buttons if they do not have a url

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">