Merge pull request #41 from edx/douglashall/ARCH-802

Display duplicate TPA provider message.

src/account-settings/AccountSettingsPage.jsx

@@ -73,6 +73,27 @@ class AccountSettingsPage extends React.Component {
     this.props.saveSettings(formId, values);
   }
 
+  renderDuplicateTpaProviderMessage() {
+    if (!this.props.duplicateTpaProvider) {
+      return null;
+    }
+
+    return (
+      <div>
+        <Alert className="alert alert-danger" role="alert">
+          <FormattedMessage
+            id="account.settings.message.duplicate.tpa.provider"
+            defaultMessage="The {provider} account you selected is already linked to another edX account."
+            description="alert message informing the user that the third-party account they attempted to link is already linked to another edX account"
+            values={{
+              provider: <b>{this.props.duplicateTpaProvider}</b>,
+            }}
+          />
+        </Alert>
+      </div>
+    );
+  }
+
   renderManagedProfileMessage() {
     if (!this.props.profileDataManager) {
       return null;
@@ -303,6 +324,7 @@ class AccountSettingsPage extends React.Component {
 
     return (
       <div className="page__account-settings container-fluid py-5">
+        {this.renderDuplicateTpaProviderMessage()}
         <h1>
           {this.props.intl.formatMessage(messages['account.settings.page.heading'])}
         </h1>
@@ -369,6 +391,7 @@ AccountSettingsPage.propTypes = {
   updateDraft: PropTypes.func.isRequired,
   saveSettings: PropTypes.func.isRequired,
   fetchSettings: PropTypes.func.isRequired,
+  duplicateTpaProvider: PropTypes.string,
 };
 
 AccountSettingsPage.defaultProps = {
@@ -384,6 +407,7 @@ AccountSettingsPage.defaultProps = {
   profileDataManager: null,
   staticFields: [],
   hiddenFields: ['secondary_email'],
+  duplicateTpaProvider: null,
 };
 
 

src/account-settings/selectors.js

@@ -16,6 +16,8 @@ export const userRolesSelector = state => state.authentication.roles || [];
 
 export const accountSettingsSelector = state => ({ ...state[storeName] });
 
+const duplicateTpaProviderSelector = state => state.errors.duplicateTpaProvider;
+
 const editableFieldNameSelector = (state, props) => props.name;
 
 const valuesSelector = createSelector(
@@ -184,6 +186,7 @@ export const accountSettingsPageSelector = createSelector(
   hiddenFieldsSelector,
   timeZonesSelector,
   countryTimeZonesSelector,
+  duplicateTpaProviderSelector,
   (
     accountSettings,
     siteLanguageOptions,
@@ -196,6 +199,7 @@ export const accountSettingsPageSelector = createSelector(
     hiddenFields,
     timeZoneOptions,
     countryTimeZoneOptions,
+    duplicateTpaProvider,
   ) => ({
     siteLanguageOptions,
     siteLanguage,
@@ -210,5 +214,6 @@ export const accountSettingsPageSelector = createSelector(
     profileDataManager,
     staticFields,
     hiddenFields,
+    duplicateTpaProvider,
   }),
 );

src/index.jsx

@@ -39,7 +39,17 @@ const apiClient = getAuthenticatedAPIClient({
  * so that we can hand it all to the redux store's initializer.
  */
 function createInitialState() {
-  return Object.assign({}, { configuration }, apiClient.getAuthenticationState());
+  const errors = {};
+  const url = new URL(window.location.href);
+
+  // Extract duplicate third-party auth provider message from query string
+  errors.duplicateTpaProvider = url.searchParams.get('duplicate_provider');
+  if (errors.duplicateTpaProvider) {
+    // Remove the duplicate_provider query param to avoid bookmarking.
+    window.history.replaceState(null, '', `${url.protocol}//${url.host}${url.pathname}`);
+  }
+
+  return Object.assign({}, { configuration }, apiClient.getAuthenticationState(), { errors });
 }
 
 function configure() {

src/reducers.js

@@ -25,6 +25,7 @@ const createRootReducer = history =>
     // creating the store in data/store.js.
     authentication: identityReducer,
     configuration: identityReducer,
+    errors: identityReducer,
     i18n: i18nReducer,
     userAccount,
     [accountSettingsStoreName]: accountSettingsReducer,