Updating registration and login error messages.

Author: Martin Krulis

src/components/forms/RegistrationCAS/RegistrationCAS.js

@@ -1,35 +1,49 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage, FormattedHTMLMessage } from 'react-intl';
+import { FormattedMessage, FormattedHTMLMessage, intlShape, injectIntl } from 'react-intl';
 import { Alert, FormControl, ControlLabel, Well } from 'react-bootstrap';
 
 import Box from '../../widgets/Box';
 import AuthenticationButtonContainer from '../../../containers/CAS/AuthenticationButtonContainer';
 import { safeGet } from '../../../helpers/common';
 import { getConfigVar } from '../../../helpers/config';
+import { getErrorMessage } from '../../../locales/apiErrorMessages';
 
 const casHelpdeskUrl = getConfigVar('CAS_HELPDESK_URL');
 
 class RegistrationCAS extends Component {
-  state = { instanceId: null, failed: false };
+  state = { instanceId: null, lastError: null };
 
   changeInstance = ev => {
     this.setState({ instanceId: ev.target.value });
   };
 
   ticketObtainedHandler = (ticket, clientUrl) => {
-    const { instances, onSubmit } = this.props;
-    this.setState({ failed: false });
+    const {
+      instances,
+      onSubmit,
+      intl: { formatMessage },
+    } = this.props;
+    this.setState({ lastError: null });
     onSubmit({
       instanceId: this.state.instanceId || safeGet(instances, [0, 'id']),
       serviceId: 'cas-uk',
       clientUrl,
       ticket,
-    });
+    }).catch(err =>
+      err.json().then(body => this.setState({ lastError: getErrorMessage(formatMessage)(body && body.error) }))
+    );
   };
 
   failedHandler = () => {
-    this.setState({ failed: true });
+    this.setState({
+      lastError: (
+        <FormattedMessage
+          id="app.externalRegistrationForm.uiFailure"
+          defaultMessage="Unexpected UI failure. Communication between frontend and external registrator has been disrupted."
+        />
+      ),
+    });
   };
 
   render() {
@@ -40,26 +54,21 @@ class RegistrationCAS extends Component {
         footer={
           <div className="text-center">
             <AuthenticationButtonContainer
-              retry={this.state.failed}
+              retry={this.state.lastError !== null}
               onTicketObtained={this.ticketObtainedHandler}
               onFailed={this.failedHandler}
             />
           </div>
         }>
         <div>
-          {this.state.failed && (
+          {this.state.lastError !== null && (
             <Alert bsStyle="danger">
-              <p>
-                <FormattedMessage
-                  id="app.externalRegistrationForm.failed"
-                  defaultMessage="Registration failed. Please check the notification message for more details."
-                />
-              </p>
+              <p>{this.state.lastError}</p>
               {casHelpdeskUrl && casHelpdeskUrl.startsWith('mailto:') && (
                 <p>
                   <FormattedHTMLMessage
                     id="app.externalRegistrationForm.failedHelpdeskMail"
-                    defaultMessage=" If the problems prevail, please, contact the <a href='{casHelpdeskUrl}'>technical support</a>."
+                    defaultMessage=" If the problem prevails, please, contact the <a href='{casHelpdeskUrl}'>technical support</a>."
                     values={{ casHelpdeskUrl }}
                   />
                 </p>
@@ -68,7 +77,7 @@ class RegistrationCAS extends Component {
                 <p>
                   <FormattedHTMLMessage
                     id="app.externalRegistrationForm.failedHelpdeskPage"
-                    defaultMessage=" If the problems prevail, please, visit the <a href='{casHelpdeskUrl}'>help page</a>."
+                    defaultMessage=" If the problem prevails, please, visit the <a href='{casHelpdeskUrl}'>help page</a>."
                     values={{ casHelpdeskUrl }}
                   />
                 </p>
@@ -102,6 +111,7 @@ class RegistrationCAS extends Component {
 RegistrationCAS.propTypes = {
   instances: PropTypes.array.isRequired,
   onSubmit: PropTypes.func.isRequired,
+  intl: intlShape,
 };
 
-export default RegistrationCAS;
+export default injectIntl(RegistrationCAS);

src/containers/CAS/LoginBox.js

@@ -45,7 +45,9 @@ export default connect(
     login: (ticket, clientUrl, popupWindow = null) => {
       const login = externalLogin(loginServices.external.CAS_UK_TICKET);
       const promise = dispatch(login({ ticket, clientUrl }, popupWindow));
-      return afterLogin ? promise.then(afterLogin) : promise;
+      return (afterLogin ? promise.then(afterLogin) : promise).catch(_ => {
+        /* intentionally ignoring the error */
+      });
     },
   })
 )(LoginBox);

src/locales/apiErrorMessages.js

@@ -1,16 +1,37 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, defineMessages } from 'react-intl';
 
-const apiErrorCodes = {
-  '400-101': <FormattedMessage id="app.apiErrorCodes.400-101" defaultMessage="The credentials are not valid." />,
-  '403-001': <FormattedMessage id="app.apiErrorCodes.403-001" defaultMessage="The user account does not exist." />,
-  '403-002': <FormattedMessage id="app.apiErrorCodes.403-002" defaultMessage="The user account has been disabled." />,
-};
+const apiErrorCodes = defineMessages({
+  '400-001': {
+    id: 'app.apiErrorCodes.400-001',
+    defaultMessage:
+      'The user has multiple e-mail addresses and multiple matching accounts already exist. Accounts cannot be associated due to ambiguity.',
+  },
+  '400-101': { id: 'app.apiErrorCodes.400-101', defaultMessage: 'The credentials are not valid.' },
+  '400-106': { id: 'app.apiErrorCodes.400-106', defaultMessage: 'The user is already registered.' },
+  '403-001': { id: 'app.apiErrorCodes.403-001', defaultMessage: 'The user account does not exist.' },
+  '403-002': { id: 'app.apiErrorCodes.403-002', defaultMessage: 'The user account has been disabled.' },
+  '409_100': {
+    id: 'app.apiErrorCodes.409_100',
+    defaultMessage:
+      'The user data received from the CAS contain no affiliation attributes that would match current registration policies.',
+  },
+  '409_101': {
+    id: 'app.apiErrorCodes.409_101',
+    defaultMessage: 'The user attributes received from the CAS do not contain an email address, which is required.',
+  },
+  '409_102': {
+    id: 'app.apiErrorCodes.409_102',
+    defaultMessage: 'The user attributes received from the CAS are incomplete.',
+  },
+  '500-000': { id: 'app.apiErrorCodes.500-000', defaultMessage: 'Unexpected internal error.' },
+});
 
-export const getErrorMessage = error => {
+export const getErrorMessage = formatMessage => error => {
   const code = error && error.code;
+  const parameters = (error && error.parameters) || {};
   if (code && apiErrorCodes[code]) {
-    return apiErrorCodes[code];
+    return formatMessage(apiErrorCodes[code], parameters);
   } else {
     return (
       (error && error.message) || (

src/locales/cs.json

@@ -30,9 +30,15 @@
   "app.addUserContainer.emptyQuery": "Žádné výsledky. Zadejte vyhledávací dotaz...",
   "app.allowUserButton.confirmAllow": "Uživatel mohl být zablokován z dobrého důvodu. Opravdu si přejete povolit účet?",
   "app.allowUserButton.confirmDisallow": "Pokud zakážete tento uživatelský účet, uživatel nebude moci provést žádnou operaci ani vidět žádná data. Opravdu si přejete účet zakázat?",
+  "app.apiErrorCodes.400-001": "Uživatel má více registrovaných e-malových adres, které odpovídají více než jednomu existujícímu účtu. Asociace účtů není možná z důvodu nejednoznačnosti.",
   "app.apiErrorCodes.400-101": "Nesprávné přihlašovací údaje.",
+  "app.apiErrorCodes.400-106": "Uživatel je již registrován.",
   "app.apiErrorCodes.403-001": "Uživatelský účet neexistuje.",
   "app.apiErrorCodes.403-002": "Uživatelský účet byl zablokován.",
+  "app.apiErrorCodes.409_100": "Uživatelská data získaná z CASu neobsahují údaje o vztahu k instituci, které by odpovídaly povoleným registračním pravidlům.",
+  "app.apiErrorCodes.409_101": "Uživatelská data získaná z CASu neobsahují e-mailovou adresu, což je vyžadováno.",
+  "app.apiErrorCodes.409_102": "Uživatelská data získaná z CASu jsou neúplná.",
+  "app.apiErrorCodes.500-000": "Neočekávaná vnitřní chyba.",
   "app.apiErrorCodes.unknown": "Neznámá chyba API.",
   "app.archive.archivedGroups": "Všechny skupiny včetně archivních",
   "app.archive.description": "Seznam archivních skupin.",
@@ -699,6 +705,7 @@
   "app.externalRegistrationForm.instance": "Instance:",
   "app.externalRegistrationForm.password": "Heslo:",
   "app.externalRegistrationForm.title": "Vytvořit ReCodEx účet s použitím CAS",
+  "app.externalRegistrationForm.uiFailure": "Neočekávaná chyba v uživatelském rozhraní. Komunikace mezi frontendem a externím registrátorem byla přerušena.",
   "app.externalRegistrationForm.username": "Uživatelské jméno CAS (UKČO):",
   "app.externalRegistrationForm.validation.emptyPassword": "Heslo nemůže být prázdné.",
   "app.externalRegistrationForm.validation.emptyUsername": "Uživatelské jméno nemůže být prázdné.",

src/locales/en.json

@@ -30,9 +30,15 @@
   "app.addUserContainer.emptyQuery": "No results. Enter a search query...",
   "app.allowUserButton.confirmAllow": "The user may have been disabled for a reason. Do you really wish to enable the account?",
   "app.allowUserButton.confirmDisallow": "If you disable the account, the user will not be able to perform any operation nor access any data. Do you wish to disable it?",
+  "app.apiErrorCodes.400-001": "The user has multiple e-mail addresses and multiple matching accounts already exist. Accounts cannot be associated due to ambiguity.",
   "app.apiErrorCodes.400-101": "The credentials are not valid.",
+  "app.apiErrorCodes.400-106": "The user is already registered.",
   "app.apiErrorCodes.403-001": "The user account does not exist.",
   "app.apiErrorCodes.403-002": "The user account has been disabled.",
+  "app.apiErrorCodes.409_100": "The user data received from the CAS contain no affiliation attributes that would match current registration policies.",
+  "app.apiErrorCodes.409_101": "The user attributes received from the CAS do not contain an email address, which is required.",
+  "app.apiErrorCodes.409_102": "The user attributes received from the CAS are incomplete.",
+  "app.apiErrorCodes.500-000": "Unexpected internal error.",
   "app.apiErrorCodes.unknown": "Unknown API error.",
   "app.archive.archivedGroups": "All Groups Including Archived",
   "app.archive.description": "List of archived groups.",
@@ -693,12 +699,13 @@
   "app.externalLinkPreview.showAsMarkdown": "Show as markdown",
   "app.externalLinkPreview.title": "Preview",
   "app.externalRegistrationForm.failed": "Registration failed. Please check the notification message for more details.",
-  "app.externalRegistrationForm.failedHelpdeskMail": "If the problems prevail, please, contact the <a href='{casHelpdeskUrl}'>technical support</a>.",
-  "app.externalRegistrationForm.failedHelpdeskPage": "If the problems prevail, please, visit the <a href='{casHelpdeskUrl}'>help page</a>.",
+  "app.externalRegistrationForm.failedHelpdeskMail": "If the problem prevails, please, contact the <a href='{casHelpdeskUrl}'>technical support</a>.",
+  "app.externalRegistrationForm.failedHelpdeskPage": "If the problem prevails, please, visit the <a href='{casHelpdeskUrl}'>help page</a>.",
   "app.externalRegistrationForm.gdprConfirm": "I agree that my personal data will be processed by ReCodEx in accordance with GDPR policy.",
   "app.externalRegistrationForm.instance": "Instance:",
   "app.externalRegistrationForm.password": "Password:",
   "app.externalRegistrationForm.title": "Create ReCodEx account using CAS",
+  "app.externalRegistrationForm.uiFailure": "Unexpected UI failure. Communication between frontend and external registrator has been disrupted.",
   "app.externalRegistrationForm.username": "CAS login (UKČO):",
   "app.externalRegistrationForm.validation.emptyPassword": "Password cannot be empty.",
   "app.externalRegistrationForm.validation.emptyUsername": "Username cannot be empty.",

src/locales/whitelist_en.json

@@ -30,9 +30,15 @@
   "app.addUserContainer.emptyQuery",
   "app.allowUserButton.confirmAllow",
   "app.allowUserButton.confirmDisallow",
+  "app.apiErrorCodes.400-001",
   "app.apiErrorCodes.400-101",
+  "app.apiErrorCodes.400-106",
   "app.apiErrorCodes.403-001",
   "app.apiErrorCodes.403-002",
+  "app.apiErrorCodes.409_100",
+  "app.apiErrorCodes.409_101",
+  "app.apiErrorCodes.409_102",
+  "app.apiErrorCodes.500-000",
   "app.apiErrorCodes.unknown",
   "app.archive.archivedGroups",
   "app.archive.description",
@@ -699,6 +705,7 @@
   "app.externalRegistrationForm.instance",
   "app.externalRegistrationForm.password",
   "app.externalRegistrationForm.title",
+  "app.externalRegistrationForm.uiFailure",
   "app.externalRegistrationForm.username",
   "app.externalRegistrationForm.validation.emptyPassword",
   "app.externalRegistrationForm.validation.emptyUsername",

src/pages/Login/Login.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { reset, SubmissionError } from 'redux-form';
@@ -70,13 +70,16 @@ class Login extends Component {
    * Log the user in (by given credentials) and then perform the redirect.
    */
   loginAndRedirect = credentials => {
-    const { login } = this.props;
+    const {
+      login,
+      intl: { formatMessage },
+    } = this.props;
     return login(credentials)
       .then(this.redirectAfterLogin)
       .catch(e =>
         // Translate fetch response error into form error message...
         e.json().then(body => {
-          throw new SubmissionError({ _error: getErrorMessage(body && body.error) });
+          throw new SubmissionError({ _error: getErrorMessage(formatMessage)(body && body.error) });
         })
       );
   };
@@ -178,6 +181,7 @@ Login.propTypes = {
   loggedInUser: ImmutablePropTypes.map,
   reset: PropTypes.func.isRequired,
   links: PropTypes.object.isRequired,
+  intl: intlShape,
 };
 
 export default withLinks(
@@ -193,5 +197,5 @@ export default withLinks(
         dispatch(reset('login'));
       },
     })
-  )(Login)
+  )(injectIntl(Login))
 );