From 8a62991ff9efd107f695b0f7e9166bbaa4679588 Mon Sep 17 00:00:00 2001
From: AlasdairSwan <alasdair_swan@hotmail.com>
Date: Wed, 5 Nov 2014 11:07:32 -0500
Subject: [PATCH] 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

---
 .../js/student_account/views/AccessView.js    | 10 +++++--
 .../js/student_account/views/LoginView.js     |  3 --
 .../js/student_account/views/RegisterView.js  | 10 +++----
 lms/static/sass/views/_login-register.scss    | 14 +++++++++-
 .../student_account/access.underscore         | 28 +++++++++++++------
 .../student_account/form_field.underscore     |  8 +++---
 .../student_account/login.underscore          | 12 ++++----
 .../student_account/register.underscore       | 12 ++++----
 8 files changed, 63 insertions(+), 34 deletions(-)

diff --git a/lms/static/js/student_account/views/AccessView.js b/lms/static/js/student_account/views/AccessView.js
index 3465d333bc..f9939c46a1 100644
--- a/lms/static/js/student_account/views/AccessView.js
+++ b/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: {
diff --git a/lms/static/js/student_account/views/LoginView.js b/lms/static/js/student_account/views/LoginView.js
index 2812d0c3c1..0480731c40 100644
--- a/lms/static/js/student_account/views/LoginView.js
+++ b/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');
             }
         },
 
diff --git a/lms/static/js/student_account/views/RegisterView.js b/lms/static/js/student_account/views/RegisterView.js
index 872f42ae76..ec3b4ff287 100644
--- a/lms/static/js/student_account/views/RegisterView.js
+++ b/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');
             }
         }
     });
diff --git a/lms/static/sass/views/_login-register.scss b/lms/static/sass/views/_login-register.scss
index e2e0d6ada1..fd11e73b5a 100644
--- a/lms/static/sass/views/_login-register.scss
+++ b/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 {
diff --git a/lms/templates/student_account/access.underscore b/lms/templates/student_account/access.underscore
index 959ee6ec06..5eb739fd67 100644
--- a/lms/templates/student_account/access.underscore
+++ b/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>
diff --git a/lms/templates/student_account/form_field.underscore b/lms/templates/student_account/form_field.underscore
index 0287b9957f..24dac82d3a 100644
--- a/lms/templates/student_account/form_field.underscore
+++ b/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>
diff --git a/lms/templates/student_account/login.underscore b/lms/templates/student_account/login.underscore
index f22513a525..ddfc9ce7d9 100644
--- a/lms/templates/student_account/login.underscore
+++ b/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>
+    <% }
+}); %>
diff --git a/lms/templates/student_account/register.underscore b/lms/templates/student_account/register.underscore
index ae2f00a787..7bb2050dd3 100644
--- a/lms/templates/student_account/register.underscore
+++ b/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">