ECOM-369 merged and resolved issues with third party auth error messaging

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

@@ -90,13 +90,17 @@ var edx = edx || {};
          */
         element: {
             hide: function( $el ) {
-                $el.addClass('hidden')
-                   .attr('aria-hidden', true);
+                if ( $el ) {
+                    $el.addClass('hidden')
+                       .attr('aria-hidden', true);
+                }
             },
 
             show: function( $el ) {
-                $el.removeClass('hidden')
-                   .attr('aria-hidden', false);
+                if ( $el ) {
+                    $el.removeClass('hidden')
+                       .attr('aria-hidden', false);
+                }
             }
         },
 

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

@@ -24,8 +24,6 @@ var edx = edx || {};
         preRender: function( data ) {
             this.providers = data.thirdPartyAuth.providers || [];
             this.currentProvider = data.thirdPartyAuth.currentProvider || '';
-
-            console.log(data);
         },
 
         render: function( html ) {
@@ -43,10 +41,11 @@ var edx = edx || {};
         },
 
         postRender: function() {
-            var $container = $(this.el);
+            this.$container = $(this.el);
 
-            this.$form = $container.find('form');
-            this.$errors = $container.find('.submission-error');
+            this.$form = this.$container.find('form');
+            this.$errors = this.$container.find('.submission-error');
+            this.$authError = this.$container.find('.already-authenticated-msg');
 
             /* If we're already authenticated with a third-party
              * provider, try logging in.  The easiest way to do this
@@ -87,10 +86,11 @@ var edx = edx || {};
             if ( error.status === 403 &&
                  error.responseText === 'third-party-auth' &&
                  this.currentProvider ) {
-                this.element.show( this.$alreadyAuthenticatedMsg );
+                this.element.show( this.$authError );
+                this.element.hide( this.$errors );
             } else {
-                this.element.hide( this.$alreadyAuthenticatedMsg );
-                // TODO -- display the error
+                this.element.hide( this.$authError );
+                this.element.show( this.$errors );
             }
         }
     });

lms/templates/student_account/login.underscore

 <form id="login">
+    <div class="status already-authenticated-msg hidden" aria-hidden="true">
+        <% if (currentProvider) { %>
+            <p class="message-copy">You've successfully logged into <%- currentProvider %>, but you need to link your account.  Please click "I am a returning user" to create an EdX account.</p>
+        <% } %>
+    </div>
+
     <div class="status submission-error hidden" aria-hidden="true">
         <h4 class="message-title">We couldn't log you in.</h4>
         <ul class="message-copy"></ul>
     </div>
+
     <%= fields %>
     <button class="action action-primary action-update js-login">Log in</button>
 </form>

lms/templates/student_account/register.underscore

 <% if (currentProvider) { %>
-    <div class="status submission-success" aria-hidden="false">
+    <div class="status" aria-hidden="false">
         <h4 class="message-title">You've successfully signed in with <strong><%- currentProvider %></strong>.</h4>
-        <ul class="message-copy"></ul>
+        <p class="message-copy">You've successfully signed in with <strong><%- currentProvider %></strong>. We just need a little more information before you start learning with edX.</p>
     </div>
 <% } else {
     _.each( providers, function( provider) { %>