fix: display error message (#647)

display error message on login page if staff user try to login through password.

VAN-1082

src/login/LoginFailure.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { getConfig } from '@edx/frontend-platform';
 import { getAuthService } from '@edx/frontend-platform/auth';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Alert, Hyperlink } from '@edx/paragon';
@@ -9,6 +10,7 @@ import PropTypes from 'prop-types';
 import ChangePasswordPrompt from './ChangePasswordPrompt';
 import {
   ACCOUNT_LOCKED_OUT,
+  ALLOWED_DOMAIN_LOGIN_ERROR,
   FAILED_LOGIN_ATTEMPT,
   FORBIDDEN_REQUEST,
   INACTIVE_USER,
@@ -68,6 +70,25 @@ const LoginFailureMessage = (props) => {
       );
       break;
     }
+    case ALLOWED_DOMAIN_LOGIN_ERROR: {
+      const url = `${getConfig().LMS_BASE_URL}/dashboard/?tpa_hint=${context.tpaHint}`;
+      const tpaLink = (
+        <a href={url}>
+          {intl.formatMessage(messages['tpa.account.link'], { provider: context.provider })}
+        </a>
+      );
+      errorList = (
+        <p>
+          <FormattedMessage
+            id="allowed.domain.login.error"
+            description="Display this error message when staff user try to login through password"
+            defaultMessage="As {allowedDomain} user, You must login with your {allowedDomain} {tpaLink}."
+            values={{ allowedDomain: context.allowedDomain, tpaLink }}
+          />
+        </p>
+      );
+      break;
+    }
     case INVALID_FORM:
       errorList = <p>{intl.formatMessage(messages['login.form.invalid.error.message'])}</p>;
       break;

src/login/data/constants.js

@@ -9,6 +9,7 @@ export const ACCOUNT_LOCKED_OUT = 'account-locked-out';
 export const INCORRECT_EMAIL_PASSWORD = 'incorrect-email-or-password';
 export const NUDGE_PASSWORD_CHANGE = 'nudge-password-change';
 export const REQUIRE_PASSWORD_CHANGE = 'require-password-change';
+export const ALLOWED_DOMAIN_LOGIN_ERROR = 'allowed-domain-login-error';
 
 // Account Activation Message
 export const ACCOUNT_ACTIVATION_MESSAGE = {

src/login/messages.jsx

@@ -170,6 +170,11 @@ const messages = defineMessages({
     defaultMessage: 'contact support',
     description: 'Link text used in account activation error message to go to learner help center',
   },
+  'tpa.account.link': {
+    id: 'tpa.account.link',
+    defaultMessage: '{provider} account',
+    description: 'Link text error message used to go to SSO when staff user try to login through password.',
+  },
   // Email Confirmation Strings
   'account.confirmation.success.message.title': {
     id: 'account.confirmation.success.message.title',

src/login/tests/LoginFailure.test.jsx

@@ -6,6 +6,7 @@ import { mount } from 'enzyme';
 import { MemoryRouter } from 'react-router-dom';
 
 import {
+  ALLOWED_DOMAIN_LOGIN_ERROR,
   FAILED_LOGIN_ATTEMPT,
   FORBIDDEN_REQUEST,
   INACTIVE_USER,
@@ -261,4 +262,30 @@ describe('LoginFailureMessage', () => {
                + 'Change your password so that your account stays secure.',
     );
   });
+
+  it('should show message if staff user try to login through password', () => {
+    props = {
+      loginError: {
+        email: 'text@example.com',
+        errorCode: ALLOWED_DOMAIN_LOGIN_ERROR,
+        context: {
+          allowedDomain: 'edx.org',
+          provider: 'Google',
+          tpaHint: 'google-auth2',
+        },
+      },
+    };
+
+    const loginFailureMessage = mount(
+      <IntlProvider locale="en">
+        <IntlLoginFailureMessage {...props} />
+      </IntlProvider>,
+    );
+
+    const errorMessage = "We couldn't sign you in.As edx.org user, You must login with your edx.org Google account.";
+    const url = 'http://localhost:18000/dashboard/?tpa_hint=google-auth2';
+
+    expect(loginFailureMessage.find('#login-failure-alert').first().text()).toEqual(errorMessage);
+    expect(loginFailureMessage.find('#login-failure-alert').find('a').props().href).toEqual(url);
+  });
 });