ECOM-369 Styled third party auth buttons and cleaned up third party auth messaging

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

@@ -24,6 +24,8 @@ var edx = edx || {};
         preRender: function( data ) {
             this.providers = data.thirdPartyAuth.providers || [];
             this.currentProvider = data.thirdPartyAuth.currentProvider || '';
+
+            console.log(data);
         },
 
         render: function( html ) {
@@ -64,6 +66,7 @@ var edx = edx || {};
 
         thirdPartyAuth: function( event ) {
             var providerUrl = $(event.target).data('provider-url') || '';
+
             if (providerUrl) {
                 window.location.href = providerUrl;
             } else {
@@ -73,8 +76,9 @@ var edx = edx || {};
         },
 
         saveError: function( error ) {
-            console.log(error.status, ' error: ', error.responseText);
+            // console.log(error.status, ' error: ', error.responseText);
             this.errors = ['<li>' + error.responseText + '</li>'];
+            this.setErrors();
 
             /* If we've gotten a 403 error, it means that we've successfully
              * authenticated with a third-party provider, but we haven't
@@ -89,7 +93,6 @@ var edx = edx || {};
                 // TODO -- display the error
             }
 
-            this.setErrors();
         }
     });
 

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

@@ -220,6 +220,45 @@
         text-transform: none;
     }
 
+    .login-provider {
+      @extend %btn-secondary-blue-outline;
+      width: 100%;
+      margin-top: 20px;
+
+      .icon {
+        color: inherit;
+        margin-right: $baseline/2;
+      }
+
+      &.button-Google:hover, &.button-Google:focus {
+        background-color: #dd4b39;
+        border: 1px solid #A5382B;
+      }
+
+      &.button-Google:hover {
+        box-shadow: 0 2px 1px 0 #8D3024;
+      }
+
+      &.button-Facebook:hover, &.button-Facebook:focus {
+        background-color: #3b5998;
+        border: 1px solid #263A62;
+      }
+
+      &.button-Facebook:hover {
+        box-shadow: 0 2px 1px 0 #30487C;
+      }
+
+      &.button-LinkedIn:hover , &.button-LinkedIn:focus {
+        background-color: #0077b5;
+        border: 1px solid #06527D;
+      }
+
+      &.button-LinkedIn:hover {
+        box-shadow: 0 2px 1px 0 #005D8E;
+      }
+
+    }
+
     /** Error Container - from _account.scss **/
     .status {
         @include box-sizing(border-box);
@@ -348,5 +387,17 @@
                 width: 100px;
             }
         }
+
+        .login-provider {
+            width: calc( 50% - 12px );
+
+            &:nth-child(odd) {
+                margin-left: 10px;
+            }
+
+            &:nth-child(even) {
+                margin-right: 10px;
+            }
+        }
     }
 }

lms/templates/student_account/login.underscore

@@ -3,11 +3,6 @@
         <h4 class="message-title">We couldn't log you in.</h4>
         <ul class="message-copy"></ul>
     </div>
-    <div class="already-authenticated-msg hidden" aria-hidden="true">
-        <% if (currentProvider) { %>
-            <p class="instructions">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>
     <%= fields %>
     <button class="action action-primary action-update js-login">Log in</button>
 </form>

lms/templates/student_account/register.underscore

@@ -1,8 +1,10 @@
 <% if (currentProvider) { %>
-    <p class="instructions">
-      You've successfully signed in with <strong><%- currentProvider %></strong>.<br />
-      We just need a little more information before you start learning with edX.
-    </p>
+    <div class="status submission-success" aria-hidden="false">
+        <h4 class="message-title">You've successfully signed in with <strong><%- currentProvider %></strong>.</h4>
+        <ul class="message-copy">
+          <li>We just need a little more information before you start learning with edX.</li>
+        </ul>
+    </div>
 <% } else {
     _.each( providers, function( provider) { %>
         <button type="submit"class="button button-primary button-<%- provider.name %> login-provider" data-provider-url="<%- provider.registerUrl %>">