Correct 3rd party auth login page message and styling

common/djangoapps/student/views.py

@@ -883,13 +883,16 @@ def login_user(request, error=""):  # pylint: disable-msg=too-many-statements,un
             AUDIT_LOG.warning(
                 u'Login failed - user with username {username} has no social auth with backend_name {backend_name}'.format(
                     username=username, backend_name=backend_name))
-            return JsonResponse({
-                "success": False,
-                # Translators: provider_name is the name of an external, third-party user authentication service (like
-                # Google or LinkedIn).
-                "value": _('There is no {platform_name} account associated with your {provider_name} account. Please use your {platform_name} credentials or pick another provider.').format(
-                    platform_name=settings.PLATFORM_NAME, provider_name=requested_provider.NAME)
-            })  # TODO: this should be a status code 401  # pylint: disable=fixme
+            return HttpResponseBadRequest(
+                _("You've successfully logged into your {provider_name} account, but this account "
+                  "isn't linked with an {platform_name} account yet. Use your {platform_name} username and "
+                  "password to log into {platform_name} below, and then link your {platform_name} account with "
+                  "{provider_name} from your dashboard.") + "<br/><br/>" + _("If you don't have an {platform_name} "
+                  "account yet, click <strong>Register Now</strong> at the top of the page.").format(
+                      platform_name=settings.PLATFORM_NAME, provider_name=requested_provider.NAME),
+                content_type="text/plain",
+                status=401
+            )
 
     else:
 

common/djangoapps/third_party_auth/tests/specs/base.py

@@ -220,10 +220,8 @@ class IntegrationTest(testutil.TestCase, test.TestCase):
 
     def assert_json_failure_response_is_missing_social_auth(self, response):
         """Asserts failure on /login for missing social auth looks right."""
-        self.assertEqual(200, response.status_code)  # Yes, it's a 200 even though it's a failure.
-        payload = json.loads(response.content)
-        self.assertFalse(payload.get('success'))
-        self.assertIn('associated with your %s account' % self.PROVIDER_CLASS.NAME, payload.get('value'))
+        self.assertEqual(401, response.status_code)
+        self.assertIn("successfully logged into your %s account, but this account isn't linked" % self.PROVIDER_CLASS.NAME, response.content)
 
     def assert_json_failure_response_is_username_collision(self, response):
         """Asserts the json response indicates a username collision."""

lms/static/sass/multicourse/_account.scss

@@ -610,6 +610,14 @@
         display: block;
       }
     }
+
+    .third-party-signin.message {
+      display: none;
+
+      &.is-shown {
+        display: block;
+      }
+    }
   }
 }
 

lms/templates/login.html

@@ -46,8 +46,10 @@
         toggleSubmitButton(false);
       });
 
-      $('#login-form').on('ajax:error', function() {
+      $('#login-form').on('ajax:error', function(event, request, status_string) {
         toggleSubmitButton(true);
+        $('.third-party-signin.message').addClass('is-shown').focus();
+        $('.third-party-signin.message .instructions').html(request.responseText);
       });
 
       $('#login-form').on('ajax:success', function(event, json, xhr) {
@@ -138,12 +140,16 @@
       </div>
 
       <div role="alert" class="status message submission-error" tabindex="-1">
-        <h3 class="message-title">${_("The following errors occurred while logging you in:")} </h3>
+        <h3 class="message-title">${_("We couldn't log you in.")} </h3>
         <ul class="message-copy">
           <li>${_("Your email or password is incorrect")}</li>
         </ul>
       </div>
 
+      <div role="alert" class="third-party-signin message" tabindex="-1">
+        <p class="instructions"> </p>
+      </div>
+
       <p class="instructions sr">
         ${_('Please provide the following information to log into your {platform_name} account. Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>.').format(platform_name=platform_name)}
       </p>

lms/templates/register.html

@@ -146,7 +146,7 @@
         <p class="instructions">
           ## Translators: selected_provider is the name of an external, third-party user authentication service (like Google or LinkedIn).
           ${_("You've successfully signed in with {selected_provider}.").format(selected_provider='<strong>%s</strong>' % selected_provider)}<br />
-          ${_("Finish your account registration below to start learning.")}
+          ${_("We just need a little more information before you start learning with edX.")}
         </p>
 
         % endif