Adding duplicate user accounts (by name) detection and confirmation in create user form (for super-admins).

krulis-martin · krulis-martin · commit 903111b2d622 · 2025-04-16T22:38:49.000+02:00
diff --git a/src/components/forms/CreateUserForm/CreateUserForm.js b/src/components/forms/CreateUserForm/CreateUserForm.js
@@ -1,15 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
+import { Table } from 'react-bootstrap';
 import { reduxForm, Field, change } from 'redux-form';
 import isEmail from 'validator/lib/isEmail.js';
 
 import SubmitButton from '../SubmitButton';
 import Callout from '../../widgets/Callout';
+import Explanation from '../../widgets/Explanation';
+import UsersName from '../../Users/UsersName';
+import { WarningIcon } from '../../icons';
 import { validateRegistrationData } from '../../../redux/modules/users.js';
-import { TextField, PasswordField, PasswordStrength } from '../Fields';
+import { TextField, PasswordField, PasswordStrength, CheckboxField } from '../Fields';
 
 const CreateUserForm = ({
+  matchingUsers,
   submitting,
   handleSubmit,
   onSubmit,
@@ -19,6 +24,7 @@ const CreateUserForm = ({
   asyncValidating,
   invalid,
   reset,
+  change,
 }) => (
   <div>
     <Field
@@ -69,6 +75,54 @@ const CreateUserForm = ({
       label={<FormattedMessage id="app.changePasswordForm.passwordCheck" defaultMessage="New Password (again):" />}
     />
 
+    {matchingUsers && matchingUsers.length > 0 && (
+      <>
+        <hr />
+        <h5>
+          <WarningIcon className="text-warning" gapRight={2} />
+          <FormattedMessage
+            id="app.inviteUserForm.matchingUsers"
+            defaultMessage="There are existing users of the same name"
+          />
+          :
+        </h5>
+
+        <Table bordered>
+          <tbody>
+            {matchingUsers.map(user => (
+              <tr key={user.id}>
+                <td>
+                  <UsersName {...user} showEmail="full" showExternalIdentifiers showRoleIcon />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+
+        <Field
+          name="ignoreNameCollision"
+          component={CheckboxField}
+          onOff
+          label={
+            <span>
+              <FormattedMessage
+                id="app.inviteUserForm.ignoreNameCollision"
+                defaultMessage="The user I am inviting does not match any of the existing users"
+              />
+              <Explanation id="ignoreNameCollisionExplanation">
+                <FormattedMessage
+                  id="app.inviteUserForm.ignoreNameCollisionExplanation"
+                  defaultMessage="Please, make sure the listed students are not the same person as the one you are inviting to prevent duplicate accounts in the system."
+                />
+              </Explanation>
+            </span>
+          }
+        />
+      </>
+    )}
+
+    <hr />
+
     {submitFailed && (
       <Callout variant="danger">
         <FormattedMessage id="generic.operationFailed" defaultMessage="Operation failed. Please try again later." />
@@ -78,7 +132,17 @@ const CreateUserForm = ({
     <div className="text-center">
       <SubmitButton
         id="createUser"
-        handleSubmit={handleSubmit(data => onSubmit(data).then(reset))}
+        handleSubmit={handleSubmit(data =>
+          onSubmit(data).then(success => {
+            if (success) {
+              reset();
+            } else {
+              // a hack so the change takes place after the whole submit process is completed
+              window.setTimeout(() => change('ignoreNameCollision', false), 0);
+            }
+          })
+        )}
+        resetTimeout={0}
         submitting={submitting}
         dirty={dirty}
         invalid={invalid}
@@ -88,14 +152,14 @@ const CreateUserForm = ({
         messages={{
           submit: <FormattedMessage id="generic.create" defaultMessage="Create" />,
           submitting: <FormattedMessage id="generic.creating" defaultMessage="Creating..." />,
-          success: <FormattedMessage id="generic.created" defaultMessage="Created" />,
         }}
       />
     </div>
   </div>
 );
 
 CreateUserForm.propTypes = {
+  matchingUsers: PropTypes.array,
   handleSubmit: PropTypes.func.isRequired,
   onSubmit: PropTypes.func.isRequired,
   asyncValidate: PropTypes.func.isRequired,
@@ -107,9 +171,13 @@ CreateUserForm.propTypes = {
   invalid: PropTypes.bool,
   pristine: PropTypes.bool,
   reset: PropTypes.func,
+  change: PropTypes.func,
 };
 
-const validate = ({ firstName, lastName, email, password, passwordConfirm }) => {
+const validate = (
+  { firstName, lastName, email, password, passwordConfirm, ignoreNameCollision },
+  { matchingUsers }
+) => {
   const errors = {};
 
   if (!firstName) {
@@ -188,40 +256,40 @@ const validate = ({ firstName, lastName, email, password, passwordConfirm }) =>
     );
   }
 
+  if (matchingUsers && matchingUsers.length > 0 && !ignoreNameCollision) {
+    errors.ignoreNameCollision = (
+      <FormattedMessage
+        id="app.inviteUserForm.validation.ignoreNameCollision"
+        defaultMessage="Please check the list of existing users and confirm that the invited user is a new user."
+      />
+    );
+  }
   return errors;
 };
 
 const asyncValidate = ({ email, password = '' }, dispatch) => {
-  if (password === '') {
-    dispatch(change('create-user', 'passwordStrength', null));
-    return Promise.resolve();
+  if (!password) {
+    dispatch(change('create-user', 'passwordStrength', undefined));
   }
 
-  return new Promise((resolve, reject) =>
-    dispatch(validateRegistrationData(email, password))
-      .then(res => res.value)
-      .then(({ usernameIsFree, passwordScore }) => {
-        const errors = {};
-        if (!usernameIsFree) {
-          errors.email = (
+  return dispatch(validateRegistrationData(email, password))
+    .then(res => res.value)
+    .then(({ usernameIsFree, passwordScore }) => {
+      dispatch(change('create-user', 'passwordStrength', passwordScore));
+
+      if (!usernameIsFree) {
+        const errors = {
+          email: (
             <FormattedMessage
               id="app.createUserForm.validation.emailTaken"
               defaultMessage="This email address is already taken by someone else."
             />
-          );
-        }
-
-        dispatch(change('create-user', 'passwordStrength', passwordScore));
-
-        if (Object.keys(errors).length > 0) {
-          throw errors;
-        }
-      })
-      .then(resolve())
-      .catch(errors => reject(errors))
-  );
+          ),
+        };
+        throw errors;
+      }
+    });
 };
-
 export default reduxForm({
   form: 'create-user',
   validate,
diff --git a/src/locales/cs.json b/src/locales/cs.json
@@ -2105,6 +2105,7 @@
   "app.userName.userDeactivated": "Uživatelský účet byl deaktivován. Uživatel se nemůže přihlásit.",
   "app.userSwitching.loginAs": "Přihlásit jako",
   "app.users.createUser": "Vytvořit uživatele",
+  "app.users.createUser.userCreated": "Uživatelský účet byl vytvořen.",
   "app.users.listTitle": "Uživatelé",
   "app.users.takeOver": "Přihlásit jako",
   "app.users.title": "Seznam všech uživatelů",
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -2105,6 +2105,7 @@
   "app.userName.userDeactivated": "The user account was deactivated. The user may not sign in.",
   "app.userSwitching.loginAs": "Login as",
   "app.users.createUser": "Create User",
+  "app.users.createUser.userCreated": "The user account was created.",
   "app.users.listTitle": "Users",
   "app.users.takeOver": "Login as",
   "app.users.title": "List of All Users",
diff --git a/src/pages/Users/Users.js b/src/pages/Users/Users.js
@@ -7,7 +7,7 @@ import { Row, Col, Modal } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { lruMemoize } from 'reselect';
 
-import { SettingsIcon, TransferIcon, BanIcon, UserIcon } from '../../components/icons';
+import { SettingsIcon, TransferIcon, BanIcon, SuccessIcon, UserIcon } from '../../components/icons';
 import Button, { TheButtonGroup } from '../../components/widgets/TheButton';
 import DeleteUserButtonContainer from '../../containers/DeleteUserButtonContainer';
 import AllowUserButtonContainer from '../../containers/AllowUserButtonContainer';
@@ -32,6 +32,7 @@ import { knownRoles, isSupervisorRole, isStudentRole, isSuperadminRole } from '.
 import withLinks from '../../helpers/withLinks.js';
 import { withRouterProps } from '../../helpers/withRouter.js';
 import { suspendAbortPendingRequestsOptimization } from '../../pages/routes.js';
+import { EMPTY_ARRAY } from '../../helpers/common.js';
 
 const filterInitialValues = lruMemoize(({ search = '', roles = [] }) => {
   const initials = { search, roles: {} };
@@ -57,15 +58,16 @@ const createUserInitialValues = {
   email: '',
   password: '',
   passwordConfirm: '',
+  ignoreNameCollision: undefined,
 };
 
 const PAGINATION_CONTAINER_ID = 'users-all';
 const PAGINATION_CONTAINER_ENDPOINT = 'users';
 
 class Users extends Component {
-  state = { dialogOpen: false };
+  state = { dialogOpen: false, userCreated: false, matchingUsers: EMPTY_ARRAY };
 
-  openDialog = () => this.setState({ dialogOpen: true });
+  openDialog = () => this.setState({ dialogOpen: true, userCreated: false, matchingUsers: EMPTY_ARRAY });
 
   closeDialog = () => this.setState({ dialogOpen: false });
 
@@ -147,9 +149,15 @@ class Users extends Component {
       intl: { locale },
     } = this.props;
 
-    return createUser(data, instanceId).then(() => {
-      this.closeDialog();
-      return reloadPagination(locale);
+    return createUser(data, instanceId).then(({ value: { user, usersWithSameName = null } }) => {
+      if (user) {
+        this.setState({ userCreated: true, matchingUsers: EMPTY_ARRAY });
+        reloadPagination(locale);
+        return true;
+      } else {
+        this.setState({ matchingUsers: usersWithSameName });
+        return false;
+      }
     });
   };
 
@@ -195,10 +203,28 @@ class Users extends Component {
                           </Modal.Title>
                         </Modal.Header>
                         <Modal.Body>
-                          <CreateUserForm
-                            onSubmit={this.createNewUserAccount}
-                            initialValues={createUserInitialValues}
-                          />
+                          {this.state.userCreated ? (
+                            <Callout variant="success" className="mb-4">
+                              <p>
+                                <FormattedMessage
+                                  id="app.users.createUser.userCreated"
+                                  defaultMessage="The user account was created."
+                                />
+                              </p>
+                              <div className="text-end">
+                                <Button onClick={this.closeDialog} variant="success">
+                                  <SuccessIcon gapRight={2} />
+                                  <FormattedMessage id="generic.close" defaultMessage="Close" />
+                                </Button>
+                              </div>
+                            </Callout>
+                          ) : (
+                            <CreateUserForm
+                              onSubmit={this.createNewUserAccount}
+                              initialValues={createUserInitialValues}
+                              matchingUsers={this.state.matchingUsers}
+                            />
+                          )}
                         </Modal.Body>
                       </Modal>
                     </div>
@@ -263,8 +289,13 @@ export default withLinks(
     },
     dispatch => ({
       takeOver: userId => dispatch(takeOver(userId)),
-      createUser: ({ firstName, lastName, email, password, passwordConfirm }, instanceId) =>
-        dispatch(createAccount(firstName, lastName, email, password, passwordConfirm, instanceId, true)), // true = skip auth changes
+      createUser: ({ firstName, lastName, email, password, passwordConfirm, ignoreNameCollision }, instanceId) =>
+        dispatch(
+          createAccount(
+            { firstName, lastName, email, password, passwordConfirm, ignoreNameCollision, instanceId },
+            true // create by superadmin
+          )
+        ), // true = skip auth changes
       reloadPagination: locale =>
         dispatch(fetchPaginated(PAGINATION_CONTAINER_ID, PAGINATION_CONTAINER_ENDPOINT)(locale, null, null, true)), // true = force invalidate
     })
diff --git a/src/redux/modules/registration.js b/src/redux/modules/registration.js
@@ -20,21 +20,13 @@ export const statusTypes = {
  * Actions
  */
 
-export const createAccount = (
-  firstName,
-  lastName,
-  email,
-  password,
-  passwordConfirm,
-  instanceId,
-  createdBySuperadmin = false
-) =>
+export const createAccount = (body, createdBySuperadmin = false) =>
   createApiAction({
     type: actionTypes.CREATE_ACCOUNT,
     method: 'POST',
     endpoint: '/users',
-    body: { firstName, lastName, email, password, passwordConfirm, instanceId },
-    meta: { instanceId, createdBySuperadmin },
+    body,
+    meta: { instanceId: body.instanceId, createdBySuperadmin },
   });
 
 export const createExternalAccount = (instanceId, serviceId, credentials, authType = 'secondary') =>
