@plone/volto 19.0.0-alpha.8 → 19.0.0

package/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx

@@ -13,6 +13,7 @@ import { listRoles } from '@plone/volto/actions/roles/roles';
 import { listGroups, updateGroup } from '@plone/volto/actions/groups/groups';
 import { getControlpanel } from '@plone/volto/actions/controlpanels/controlpanels';
 import { getUserSchema } from '@plone/volto/actions/userschema/userschema';
+import { asyncConnect } from '@plone/volto/helpers/AsyncConnect';
 import jwtDecode from 'jwt-decode';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import Toast from '@plone/volto/components/manage/Toast/Toast';
@@ -25,6 +26,7 @@ import { Link } from 'react-router-dom';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import { messages } from '@plone/volto/helpers/MessageLabels/MessageLabels';
 import { isManager, canAssignGroup } from '@plone/volto/helpers/User/User';
+import { getErrorMessage } from '@plone/volto/helpers/Utils/Utils';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import addUserSvg from '@plone/volto/icons/add-user.svg';
 import saveSVG from '@plone/volto/icons/save.svg';
@@ -33,13 +35,13 @@ import find from 'lodash/find';
 import map from 'lodash/map';
 import pull from 'lodash/pull';
 import difference from 'lodash/difference';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { FormattedMessage, injectIntl } from 'react-intl';
+
+import { useState, useEffect, useCallback } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { createPortal } from 'react-dom';
-import { connect } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import { useLocation } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import { bindActionCreators, compose } from 'redux';
 import {
   Confirm,
   Container,
@@ -53,151 +55,137 @@ import {
 } from 'semantic-ui-react';
 
 /**
- * UsersControlpanel class.
- * @class UsersControlpanel
- * @extends Component
+ * UsersControlpanel functional component.
+ * @function UsersControlpanel
  */
-class UsersControlpanel extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    listRoles: PropTypes.func.isRequired,
-    listUsers: PropTypes.func.isRequired,
-    updateUser: PropTypes.func,
-    listGroups: PropTypes.func.isRequired,
-    pathname: PropTypes.string.isRequired,
-    roles: PropTypes.arrayOf(
-      PropTypes.shape({
-        '@id': PropTypes.string,
-        '@type': PropTypes.string,
-        id: PropTypes.string,
-      }),
-    ).isRequired,
-    users: PropTypes.arrayOf(
-      PropTypes.shape({
-        username: PropTypes.string,
-        fullname: PropTypes.string,
-        roles: PropTypes.arrayOf(PropTypes.string),
-      }),
-    ).isRequired,
-    user: PropTypes.shape({
-      '@id': PropTypes.string,
-      id: PropTypes.string,
-      description: PropTypes.string,
-      email: PropTypes.string,
-      fullname: PropTypes.string,
-      groups: PropTypes.object,
-      location: PropTypes.string,
-      portrait: PropTypes.string,
-      home_page: PropTypes.string,
-      roles: PropTypes.arrayOf(PropTypes.string),
-      username: PropTypes.string,
-    }).isRequired,
-  };
+const UsersControlpanel = (props) => {
+  const { staticContext } = props;
+  const intl = useIntl();
+  const dispatch = useDispatch();
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Sharing
-   */
-  constructor(props) {
-    super(props);
-    this.onChangeSearch = this.onChangeSearch.bind(this);
-    this.onSearch = this.onSearch.bind(this);
-    this.delete = this.delete.bind(this);
-
-    this.onDeleteOk = this.onDeleteOk.bind(this);
-    this.onDeleteCancel = this.onDeleteCancel.bind(this);
-    this.onAddUserSubmit = this.onAddUserSubmit.bind(this);
-    this.onAddUserError = this.onAddUserError.bind(this);
-    this.onAddUserSuccess = this.onAddUserSuccess.bind(this);
-    this.updateUserRole = this.updateUserRole.bind(this);
-    this.state = {
-      search: '',
-      isLoading: false,
-      showAddUser: false,
-      showAddUserErrorConfirm: false,
-      addUserError: '',
-      showDelete: false,
-      userToDelete: undefined,
-      entries: [],
-      isClient: false,
-      currentPage: 0,
-      pageSize: 10,
-      loginUsingEmail: false,
-    };
-  }
+  // Redux state selectors
+  const roles = useSelector((state) => state.roles.roles);
+  const users = useSelector((state) => state.users.users);
+  const user = useSelector((state) => state.users.user);
+  const userId = useSelector((state) =>
+    state.userSession.token ? jwtDecode(state.userSession.token).sub : '',
+  );
+  const groups = useSelector((state) => state.groups.groups);
+  const many_users = useSelector(
+    (state) => state.controlpanels?.controlpanel?.data?.many_users,
+  );
 
-  fetchData = async () => {
-    await this.props.getControlpanel('usergroup');
-    await this.props.listRoles();
-    if (!this.props.many_users) {
-      this.props.listGroups();
-      await this.props.listUsers();
-      this.setState({
-        entries: this.props.users,
-      });
-    }
-    await this.props.getUserSchema();
-    await this.props.getUser(this.props.userId);
-  };
+  const location = useLocation();
+  const pathname = location.pathname;
+  const deleteRequest = useSelector((state) => state.users.delete);
+  const createRequest = useSelector((state) => state.users.create);
+  const loadRolesRequest = useSelector((state) => state.roles);
+  const inheritedRole = useSelector(
+    (state) => state.authRole.authenticatedRole,
+  );
+  const userschema = useSelector((state) => state.userschema);
+  const controlPanelData = useSelector(
+    (state) => state.controlpanels?.controlpanel,
+  );
 
-  // Because username field needs to be disabled if email login is enabled!
-  checkLoginUsingEmailStatus = async () => {
-    await this.props.getControlpanel('security');
-    this.setState({
-      loginUsingEmail: this.props.controlPanelData?.data.use_email_as_login,
-    });
-  };
+  // Action creators
+  const listRolesAction = useCallback(() => dispatch(listRoles()), [dispatch]);
+  const listUsersAction = useCallback(
+    (params) => dispatch(listUsers(params)),
+    [dispatch],
+  );
+  const listGroupsAction = useCallback(
+    () => dispatch(listGroups()),
+    [dispatch],
+  );
+  const getControlpanelAction = useCallback(
+    (panel) => dispatch(getControlpanel(panel)),
+    [dispatch],
+  );
+  const deleteUserAction = useCallback(
+    (userId) => dispatch(deleteUser(userId)),
+    [dispatch],
+  );
+  const updateUserAction = useCallback(
+    (userId, data) => dispatch(updateUser(userId, data)),
+    [dispatch],
+  );
+  const updateGroupAction = useCallback(
+    (groupId, data) => dispatch(updateGroup(groupId, data)),
+    [dispatch],
+  );
+  const getUserSchemaAction = useCallback(
+    () => dispatch(getUserSchema()),
+    [dispatch],
+  );
+  const getUserAction = useCallback(
+    (userId) => dispatch(getUser(userId)),
+    [dispatch],
+  );
 
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    this.setState({
-      isClient: true,
-    });
-    this.fetchData();
-    this.checkLoginUsingEmailStatus();
-  }
+  const [search, setSearch] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [showAddUser, setShowAddUser] = useState(false);
+  const [addUserError, setAddUserError] = useState('');
+  const [showDelete, setShowDelete] = useState(false);
+  const [userToDelete, setUserToDelete] = useState(undefined);
+  const [entries, setEntries] = useState([]);
+  const [isClient, setIsClient] = useState(false);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [pageSize] = useState(10);
+  // eslint-disable-next-line no-unused-vars
+  const [loginUsingEmail, setLoginUsingEmail] = useState(false); // Reserved for future use to disable username field when email login is enabled
+  const [error, setError] = useState(null);
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (
-      (this.props.deleteRequest.loading && nextProps.deleteRequest.loaded) ||
-      (this.props.createRequest.loading && nextProps.createRequest.loaded)
-    ) {
-      this.props.listUsers({
-        search: this.state.search,
-      });
+  const fetchData = useCallback(async () => {
+    await getControlpanelAction('usergroup');
+    await listRolesAction();
+    if (!many_users) {
+      listGroupsAction();
+      await listUsersAction();
+      setEntries(users);
     }
-    if (this.props.deleteRequest.loading && nextProps.deleteRequest.loaded) {
-      this.onDeleteUserSuccess();
+    // Only fetch user schema if it hasn't been loaded yet (e.g. by asyncConnect SSR)
+    if (!userschema?.loaded) {
+      await getUserSchemaAction();
     }
-    if (this.props.createRequest.loading && nextProps.createRequest.loaded) {
-      this.onAddUserSuccess();
-    }
-    if (this.props.createRequest.loading && nextProps.createRequest.error) {
-      this.onAddUserError(nextProps.createRequest.error);
-    }
-    if (
-      this.props.loadRolesRequest.loading &&
-      nextProps.loadRolesRequest.error
-    ) {
-      this.setState({
-        error: nextProps.loadRolesRequest.error,
-      });
+    await getUserAction(userId);
+  }, [
+    getControlpanelAction,
+    listRolesAction,
+    many_users,
+    listGroupsAction,
+    listUsersAction,
+    users,
+    userschema,
+    getUserSchemaAction,
+    getUserAction,
+    userId,
+  ]);
+
+  /**
+   * Check login using email status from security control panel
+   * @method checkLoginUsingEmailStatus
+   * @returns {undefined}
+   */
+  const checkLoginUsingEmailStatus = useCallback(async () => {
+    try {
+      await getControlpanelAction('security');
+      if (controlPanelData?.data?.use_email_as_login) {
+        setLoginUsingEmail(controlPanelData.data.use_email_as_login);
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Error fetching security control panel', error);
     }
-  }
+  }, [getControlpanelAction, controlPanelData]);
 
-  getUserFromProps(value) {
-    return find(this.props.users, ['@id', value]);
-  }
+  const getUserFromProps = useCallback(
+    (value) => {
+      return find(users, ['@id', value]);
+    },
+    [users],
+  );
 
   /**
    * Search handler
@@ -205,22 +193,24 @@ class UsersControlpanel extends Component {
    * @param {object} event Event object.
    * @returns {undefined}
    */
-  onSearch(event) {
-    event.preventDefault();
-    this.setState({ isLoading: true });
-    this.props
-      .listUsers({
-        search: this.state.search,
-      })
-      .then(() => {
-        this.setState({ isLoading: false });
+  const onSearch = useCallback(
+    (event) => {
+      event.preventDefault();
+      setIsLoading(true);
+      listUsersAction({
+        search: search,
       })
-      .catch((error) => {
-        this.setState({ isLoading: false });
-        // eslint-disable-next-line no-console
-        console.error('Error searching users', error);
-      });
-  }
+        .then(() => {
+          setIsLoading(false);
+        })
+        .catch((error) => {
+          setIsLoading(false);
+          // eslint-disable-next-line no-console
+          console.error('Error searching users', error);
+        });
+    },
+    [listUsersAction, search],
+  );
 
   /**
    * On change search handler
@@ -228,67 +218,94 @@ class UsersControlpanel extends Component {
    * @param {object} event Event object.
    * @returns {undefined}
    */
-  onChangeSearch(event) {
-    this.setState({
-      search: event.target.value,
-    });
-  }
+  const onChangeSearch = (event) => {
+    setSearch(event.target.value);
+  };
 
   /**
-   * Delete a user
-   * @method delete
+   * Handle delete user click
+   * @method handleDeleteUser
    * @param {object} event Event object.
    * @param {string} value username.
    * @returns {undefined}
    */
-  delete(event, { value }) {
-    if (value) {
-      this.setState({
-        showDelete: true,
-        userToDelete: this.getUserFromProps(value),
-      });
-    }
-  }
+  const handleDeleteUser = useCallback(
+    (event, data) => {
+      // Handle both formats: direct value from event target or object with value
+      const value =
+        data?.value || event?.target?.value || event?.currentTarget?.value;
+      if (value) {
+        setShowDelete(true);
+        setUserToDelete(getUserFromProps(value));
+      }
+    },
+    [getUserFromProps],
+  );
 
   /**
    * On delete ok
    * @method onDeleteOk
    * @returns {undefined}
    */
-  onDeleteOk() {
-    if (this.state.userToDelete) {
-      this.props.deleteUser(this.state.userToDelete.id);
+  const onDeleteOk = useCallback(() => {
+    if (userToDelete) {
+      const deleteAction = deleteUserAction(userToDelete.id);
+      if (deleteAction && typeof deleteAction.then === 'function') {
+        deleteAction
+          .then(() => {
+            // Handle success
+            setUserToDelete(undefined);
+            setShowDelete(false);
+
+            // Refresh users list
+            listUsersAction({ search: search });
+
+            // Show success message
+            toast.success(
+              <Toast
+                success
+                title={intl.formatMessage(messages.success)}
+                content={intl.formatMessage(messages.userDeleted)}
+              />,
+            );
+          })
+          .catch((error) => {
+            // Handle error
+            // eslint-disable-next-line no-console
+            console.error('Error deleting user', error);
+          });
+      }
     }
-  }
+  }, [userToDelete, deleteUserAction, listUsersAction, search, intl]);
 
   /**
    * On delete cancel
    * @method onDeleteCancel
    * @returns {undefined}
    */
-  onDeleteCancel() {
-    this.setState({
-      showDelete: false,
-      itemsToDelete: [],
-      userToDelete: undefined,
-    });
-  }
+  const onDeleteCancel = () => {
+    setShowDelete(false);
+    setUserToDelete(undefined);
+  };
 
   /**
    *@param {object} user
    *@returns {undefined}
    *@memberof UsersControlpanel
    */
-  addUserToGroup = (user) => {
-    const { groups, username } = user;
-    groups.forEach((group) => {
-      this.props.updateGroup(group, {
-        users: {
-          [username]: true,
-        },
+  const addUserToGroup = useCallback(
+    (user) => {
+      const { groups: userGroups, username } = user;
+      userGroups.forEach((group) => {
+        updateGroupAction(group, {
+          users: {
+            [username]: true,
+          },
+        });
       });
-    });
-  };
+    },
+    [updateGroupAction],
+  );
 
   /**
    * Callback to be called by the ModalForm when the form is submitted.
@@ -297,131 +314,120 @@ class UsersControlpanel extends Component {
    * @param {func} callback to set new form data in the ModalForm
    * @returns {undefined}
    */
-  onAddUserSubmit(data, callback) {
-    const { groups, sendPasswordReset, password } = data;
-    if (
-      sendPasswordReset !== undefined &&
-      sendPasswordReset === true &&
-      password !== undefined
-    ) {
-      toast.error(
-        <Toast
-          error
-          title={this.props.intl.formatMessage(messages.error)}
-          content={this.props.intl.formatMessage(
-            messages.addUserFormPasswordAndSendPasswordTogetherNotAllowed,
-          )}
-        />,
-      );
-    } else {
-      if (groups && groups.length > 0) this.addUserToGroup(data);
-      this.props.createUser(data, sendPasswordReset);
-      this.setState({
-        addUserSetFormDataCallback: callback,
-      });
-    }
-  }
+  const onAddUserSubmit = useCallback(
+    (data, callback) => {
+      const { groups: userGroups, sendPasswordReset, password } = data;
+      if (
+        sendPasswordReset !== undefined &&
+        sendPasswordReset === true &&
+        password !== undefined
+      ) {
+        toast.error(
+          <Toast
+            error
+            title={intl.formatMessage(messages.error)}
+            content={intl.formatMessage(
+              messages.addUserFormPasswordAndSendPasswordTogetherNotAllowed,
+            )}
+          />,
+        );
+      } else {
+        if (userGroups && userGroups.length > 0) addUserToGroup(data);
 
-  /**
-   * Handle Success after createUser()
-   *
-   * @returns {undefined}
-   */
-  onAddUserSuccess() {
-    this.state.addUserSetFormDataCallback({});
-    this.setState({
-      showAddUser: false,
-      addUserError: undefined,
-      addUserSetFormDataCallback: undefined,
-    });
-    toast.success(
-      <Toast
-        success
-        title={this.props.intl.formatMessage(messages.success)}
-        content={this.props.intl.formatMessage(messages.userCreated)}
-      />,
-    );
-  }
+        const createUserAction = createUser(data, sendPasswordReset);
+        dispatch(createUserAction)
+          .then(() => {
+            // Handle success
+            if (callback) {
+              callback({});
+            }
+            setShowAddUser(false);
+            setAddUserError(undefined);
+
+            // Refresh users list
+            listUsersAction({ search: search });
+
+            // Show success message
+            toast.success(
+              <Toast
+                success
+                title={intl.formatMessage(messages.success)}
+                content={intl.formatMessage(messages.userCreated)}
+              />,
+            );
+          })
+          .catch((error) => {
+            // Handle error
+            setAddUserError(getErrorMessage(error));
+          });
+      }
+    },
+    [intl, addUserToGroup, dispatch, search, listUsersAction],
+  );
 
   /**
-   * Handle Success after deleteUser()
-   *
-   * @returns {undefined}
-   */
-  onDeleteUserSuccess() {
-    this.setState({
-      userToDelete: undefined,
-      showDelete: false,
-    });
-    toast.success(
-      <Toast
-        success
-        title={this.props.intl.formatMessage(messages.success)}
-        content={this.props.intl.formatMessage(messages.userDeleted)}
-      />,
-    );
-  }
-  /**
-   *
-   *
-   * @param {*} data
-   * @param {*} callback
-   * @memberof UsersControlpanel
+   * Update user role
+   * @param {*} name
+   * @param {*} value
    */
-  updateUserRole(name, value) {
-    this.setState({
-      entries: map(this.state.entries, (entry) => ({
-        ...entry,
-        roles:
-          entry.id === name && !entry.roles.includes(value)
-            ? [...entry.roles, value]
-            : entry.id !== name
-              ? entry.roles
-              : pull(entry.roles, value),
-      })),
-    });
-  }
+  const updateUserRole = useCallback(
+    (name, value) => {
+      setEntries(
+        map(entries, (entry) => ({
+          ...entry,
+          roles:
+            entry.id === name && !entry.roles.includes(value)
+              ? [...entry.roles, value]
+              : entry.id !== name
+                ? entry.roles
+                : pull(entry.roles, value),
+        })),
+      );
+    },
+    [entries],
+  );
+
   /**
-   *
+   * Update user role submit
    * @param {*} event
-   * @memberof UsersControlpanel
    */
-  updateUserRoleSubmit = (e) => {
-    e.stopPropagation();
+  const updateUserRoleSubmit = useCallback(
+    (e) => {
+      e.stopPropagation();
 
-    const roles = this.props.roles.map((item) => item.id);
-    this.state.entries.forEach((item) => {
-      const userData = { roles: {} };
-      const removedRoles = difference(roles, item.roles);
+      const roleIds = roles.map((item) => item.id);
+      entries.forEach((item) => {
+        const userData = { roles: {} };
+        const removedRoles = difference(roleIds, item.roles);
 
-      removedRoles.forEach((role) => {
-        userData.roles[role] = false;
+        removedRoles.forEach((role) => {
+          userData.roles[role] = false;
+        });
+        item.roles.forEach((role) => {
+          userData.roles[role] = true;
+        });
+        updateUserAction(item.id, userData);
       });
-      item.roles.forEach((role) => {
-        userData.roles[role] = true;
-      });
-      this.props.updateUser(item.id, userData);
-    });
-    toast.success(
-      <Toast
-        success
-        title={this.props.intl.formatMessage(messages.success)}
-        content={this.props.intl.formatMessage(messages.updateRoles)}
-      />,
-    );
-  };
+      toast.success(
+        <Toast
+          success
+          title={intl.formatMessage(messages.success)}
+          content={intl.formatMessage(messages.updateRoles)}
+        />,
+      );
+    },
+    [roles, entries, updateUserAction, intl],
+  );
 
   /**
    * Handle Errors after createUser()
    *
-   * @param {object} error object. Requires the property .message
+   * @param {object} error object
    * @returns {undefined}
    */
-  onAddUserError(error) {
-    this.setState({
-      addUserError: error.response.body.error.message,
-    });
-  }
+  const onAddUserError = useCallback((error) => {
+    setAddUserError(getErrorMessage(error));
+  }, []);
 
   /**
    * On change page
@@ -430,359 +436,350 @@ class UsersControlpanel extends Component {
    * @param {string} value Page value.
    * @returns {undefined}
    */
-  onChangePage = (event, { value }) => {
-    this.setState({
-      currentPage: value,
-    });
+  const onChangePage = (event, { value }) => {
+    setCurrentPage(value);
   };
 
-  componentDidUpdate(prevProps, prevState) {
-    if (this.props.users !== prevProps.users) {
-      this.setState({
-        entries: this.props.users,
-      });
-    }
-  }
-
   /**
    * Filters the roles a user can assign when adding a user.
    * @method canAssignAdd
    * @returns {arry}
    */
-  canAssignAdd(isManager) {
-    if (isManager) return this.props.roles;
-    return this.props.user?.roles
-      ? this.props.roles.filter((role) =>
-          this.props.user.roles.includes(role.id),
-        )
-      : [];
-  }
+  const canAssignAdd = useCallback(
+    (isManager) => {
+      if (isManager) return roles;
+      return user?.roles
+        ? roles.filter((role) => user.roles.includes(role.id))
+        : [];
+    },
+    [roles, user],
+  );
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    if (this.state.error) {
-      return <Error error={this.state.error} />;
+  useEffect(() => {
+    setIsClient(true);
+    // Skip fetching if the store already has an error.
+    if (loadRolesRequest?.error) return;
+    fetchData();
+    checkLoginUsingEmailStatus();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    setEntries(users);
+  }, [users]);
+
+  useEffect(() => {
+    if (createRequest?.error && !createRequest?.loading) {
+      onAddUserError(createRequest.error);
     }
-    /*let fullnameToDelete = this.state.userToDelete
-        ? this.state.userToDelete.fullname
-        : '';*/
-    let usernameToDelete = this.state.userToDelete
-      ? this.state.userToDelete.username
-      : '';
-    // Copy the userschema using JSON serialization/deserialization
-    // this is really ugly, but if we don't do this the original value
-    // of the userschema is changed and it is used like that through
-    // the lifecycle of the application
-    let adduserschema = {};
-    let isUserManager = false;
-    if (this.props?.userschema?.loaded) {
-      isUserManager = isManager(this.props.user);
-      adduserschema = JSON.parse(
-        JSON.stringify(this.props?.userschema?.userschema),
-      );
-      adduserschema.properties['username'] = {
-        title: this.props.intl.formatMessage(messages.addUserFormUsernameTitle),
-        type: 'string',
-        description: this.props.intl.formatMessage(
-          messages.addUserFormUsernameDescription,
-        ),
-      };
-      adduserschema.properties['password'] = {
-        title: this.props.intl.formatMessage(messages.addUserFormPasswordTitle),
-        type: 'password',
-        description: this.props.intl.formatMessage(
-          messages.addUserFormPasswordDescription,
-        ),
-        widget: 'password',
-      };
-      adduserschema.properties['sendPasswordReset'] = {
-        title: this.props.intl.formatMessage(
-          messages.addUserFormSendPasswordResetTitle,
-        ),
-        type: 'boolean',
-      };
-      adduserschema.properties['roles'] = {
-        title: this.props.intl.formatMessage(messages.addUserFormRolesTitle),
-        type: 'array',
-        choices: this.canAssignAdd(isUserManager).map((role) => [
-          role.id,
-          role.title,
-        ]),
-        noValueOption: false,
-      };
-      adduserschema.properties['groups'] = {
-        title: this.props.intl.formatMessage(messages.addUserGroupNameTitle),
-        type: 'array',
-        choices: this.props.groups
-          .filter((group) => canAssignGroup(isUserManager, group))
-          .map((group) => [group.id, group.id]),
-        noValueOption: false,
-      };
-      if (
-        adduserschema.fieldsets &&
-        adduserschema.fieldsets.length > 0 &&
-        !adduserschema.fieldsets[0]['fields'].includes('username')
-      ) {
-        adduserschema.fieldsets[0]['fields'] = adduserschema.fieldsets[0][
-          'fields'
-        ].concat([
+  }, [createRequest?.error, createRequest?.loading, onAddUserError]);
+
+  useEffect(() => {
+    if (loadRolesRequest?.error && !loadRolesRequest?.loading) {
+      setError(loadRolesRequest.error);
+    }
+  }, [loadRolesRequest?.error, loadRolesRequest?.loading]);
+
+  const effectiveError =
+    error ||
+    (loadRolesRequest?.error && !loadRolesRequest?.loading
+      ? loadRolesRequest.error
+      : null);
+
+  if (effectiveError) {
+    return <Error error={effectiveError} staticContext={staticContext} />;
+  }
+
+  const usernameToDelete = userToDelete ? userToDelete.username : '';
+
+  // Copy the userschema using JSON serialization/deserialization
+  // this is really ugly, but if we don't do this the original value
+  // of the userschema is changed and it is used like that through
+  // the lifecycle of the application
+  let adduserschema = {};
+  let isUserManager = false;
+  if (userschema?.loaded) {
+    isUserManager = isManager(user);
+    adduserschema = JSON.parse(JSON.stringify(userschema?.userschema));
+
+    // Add custom form fields to the schema
+    adduserschema.properties.username = {
+      title: intl.formatMessage(messages.addUserFormUsernameTitle),
+      type: 'string',
+      description: intl.formatMessage(messages.addUserFormUsernameDescription),
+    };
+
+    adduserschema.properties.password = {
+      title: intl.formatMessage(messages.addUserFormPasswordTitle),
+      type: 'password',
+      description: intl.formatMessage(messages.addUserFormPasswordDescription),
+      widget: 'password',
+    };
+
+    adduserschema.properties.sendPasswordReset = {
+      title: intl.formatMessage(messages.addUserFormSendPasswordResetTitle),
+      type: 'boolean',
+    };
+
+    adduserschema.properties.roles = {
+      title: intl.formatMessage(messages.addUserFormRolesTitle),
+      type: 'array',
+      choices: canAssignAdd(isUserManager).map((role) => [role.id, role.title]),
+      noValueOption: false,
+    };
+
+    adduserschema.properties.groups = {
+      title: intl.formatMessage(messages.addUserGroupNameTitle),
+      type: 'array',
+      choices: groups
+        .filter((group) => canAssignGroup(isUserManager, group))
+        .map((group) => [group.id, group.id]),
+      noValueOption: false,
+    };
+    // Add custom fields to the first fieldset if they don't already exist
+    if (
+      adduserschema.fieldsets &&
+      adduserschema.fieldsets.length > 0 &&
+      !adduserschema.fieldsets[0].fields.includes('username')
+    ) {
+      adduserschema.fieldsets[0].fields =
+        adduserschema.fieldsets[0].fields.concat([
           'username',
           'password',
           'sendPasswordReset',
           'roles',
           'groups',
         ]);
-      }
     }
+  }
 
-    return (
-      <Container className="users-control-panel">
-        <Helmet title={this.props.intl.formatMessage(messages.users)} />
-        <div className="container">
-          <Confirm
-            open={this.state.showDelete}
-            header={this.props.intl.formatMessage(
-              messages.deleteUserConfirmTitle,
-            )}
-            content={
-              <div className="content">
-                <Dimmer active={this.props?.deleteRequest?.loading}>
-                  <Loader>
-                    <FormattedMessage id="Loading" defaultMessage="Loading." />
-                  </Loader>
-                </Dimmer>
-
-                <ul className="content">
-                  <FormattedMessage
-                    id="Do you really want to delete the user {username}?"
-                    defaultMessage="Do you really want to delete the user {username}?"
-                    values={{
-                      username: <b>{usernameToDelete}</b>,
-                    }}
-                  />
-                </ul>
-              </div>
-            }
-            onCancel={this.onDeleteCancel}
-            onConfirm={this.onDeleteOk}
-            size={null}
-          />
-          {this.props?.userschema?.loaded && this.state.showAddUser ? (
-            <ModalForm
-              open={this.state.showAddUser}
-              className="modal"
-              onSubmit={this.onAddUserSubmit}
-              submitError={this.state.addUserError}
-              onCancel={() =>
-                this.setState({ showAddUser: false, addUserError: undefined })
-              }
-              title={this.props.intl.formatMessage(messages.addUserFormTitle)}
-              loading={this.props.createRequest.loading}
-              schema={adduserschema}
-            />
-          ) : null}
-        </div>
-        <Segment.Group raised>
-          <Segment className="primary">
-            <FormattedMessage id="Users" defaultMessage="Users" />
-          </Segment>
-          <Segment secondary>
-            <FormattedMessage
-              id="Note that roles set here apply directly to a user. The symbol{plone_svg}indicates a role inherited from membership in a group."
-              defaultMessage="Note that roles set here apply directly to a user. The symbol{plone_svg}indicates a role inherited from membership in a group."
-              values={{
-                plone_svg: (
-                  <Icon
-                    name={ploneSVG}
-                    size="20px"
-                    color="#007EB1"
-                    title={'plone-svg'}
-                  />
-                ),
-              }}
-            />
-          </Segment>
-          <Segment>
-            <Form onSubmit={this.onSearch}>
-              <Form.Field>
-                <Input
-                  name="SearchableText"
-                  action={{
-                    icon: 'search',
-                    loading: this.state.isLoading,
-                    disabled: this.state.isLoading,
+  return (
+    <Container className="users-control-panel">
+      <Helmet title={intl.formatMessage(messages.users)} />
+      <div className="container">
+        <Confirm
+          open={showDelete}
+          header={intl.formatMessage(messages.deleteUserConfirmTitle)}
+          content={
+            <div className="content">
+              <Dimmer active={deleteRequest?.loading}>
+                <Loader>
+                  <FormattedMessage id="Loading" defaultMessage="Loading." />
+                </Loader>
+              </Dimmer>
+
+              <ul className="content">
+                <FormattedMessage
+                  id="Do you really want to delete the user {username}?"
+                  defaultMessage="Do you really want to delete the user {username}?"
+                  values={{
+                    username: <b>{usernameToDelete}</b>,
                   }}
-                  placeholder={this.props.intl.formatMessage(
-                    messages.searchUsers,
-                  )}
-                  onChange={this.onChangeSearch}
-                  id="user-search-input"
                 />
-              </Form.Field>
-            </Form>
-          </Segment>
-          <Form>
-            {((this.props.many_users && this.state.entries.length > 0) ||
-              !this.props.many_users) && (
-              <Table padded striped attached unstackable>
-                <Table.Header>
-                  <Table.Row>
-                    <Table.HeaderCell>
-                      <FormattedMessage
-                        id="User name"
-                        defaultMessage="User name"
-                      />
-                    </Table.HeaderCell>
-                    {this.props.roles.map((role) => (
-                      <Table.HeaderCell key={role.id}>
-                        {role.title}
-                      </Table.HeaderCell>
-                    ))}
-                    <Table.HeaderCell>
-                      <FormattedMessage id="Actions" defaultMessage="Actions" />
-                    </Table.HeaderCell>
-                  </Table.Row>
-                </Table.Header>
-                <Table.Body data-user="users">
-                  {this.state.entries
-                    .slice(
-                      this.state.currentPage * 10,
-                      this.state.pageSize * (this.state.currentPage + 1),
-                    )
-                    .map((user) => (
-                      <RenderUsers
-                        key={user.id}
-                        onDelete={this.delete}
-                        roles={this.props.roles}
-                        user={user}
-                        updateUser={this.updateUserRole}
-                        inheritedRole={this.props.inheritedRole}
-                        userschema={this.props.userschema}
-                        listUsers={this.props.listUsers}
-                        isUserManager={isUserManager}
-                      />
-                    ))}
-                </Table.Body>
-              </Table>
-            )}
-            {this.state.entries.length === 0 && this.state.search && (
-              <Segment>
-                {this.props.intl.formatMessage(messages.userSearchNoResults)}
-              </Segment>
-            )}
-            <div className="contents-pagination">
-              <Pagination
-                current={this.state.currentPage}
-                total={Math.ceil(
-                  this.state.entries?.length / this.state.pageSize,
-                )}
-                onChangePage={this.onChangePage}
-              />
+              </ul>
             </div>
+          }
+          onCancel={onDeleteCancel}
+          onConfirm={onDeleteOk}
+          size={null}
+        />
+        {userschema?.loaded && showAddUser ? (
+          <ModalForm
+            open={showAddUser}
+            className="modal"
+            onSubmit={onAddUserSubmit}
+            submitError={addUserError}
+            onCancel={() => {
+              setShowAddUser(false);
+              setAddUserError(undefined);
+            }}
+            title={intl.formatMessage(messages.addUserFormTitle)}
+            loading={createRequest?.loading}
+            schema={adduserschema}
+          />
+        ) : null}
+      </div>
+      <Segment.Group raised>
+        <Segment className="primary">
+          <FormattedMessage id="Users" defaultMessage="Users" />
+        </Segment>
+        <Segment secondary>
+          <FormattedMessage
+            id="Note that roles set here apply directly to a user. The symbol{plone_svg}indicates a role inherited from membership in a group."
+            defaultMessage="Note that roles set here apply directly to a user. The symbol{plone_svg}indicates a role inherited from membership in a group."
+            values={{
+              plone_svg: (
+                <Icon
+                  name={ploneSVG}
+                  size="20px"
+                  color="#007EB1"
+                  title={'plone-svg'}
+                />
+              ),
+            }}
+          />
+        </Segment>
+        <Segment>
+          <Form onSubmit={onSearch}>
+            <Form.Field>
+              <Input
+                name="SearchableText"
+                action={{
+                  icon: 'search',
+                  loading: isLoading,
+                  disabled: isLoading,
+                }}
+                placeholder={intl.formatMessage(messages.searchUsers)}
+                onChange={onChangeSearch}
+                id="user-search-input"
+              />
+            </Form.Field>
           </Form>
-        </Segment.Group>
-        {this.state.isClient &&
-          createPortal(
-            <Toolbar
-              pathname={this.props.pathname}
-              hideDefaultViewButtons
-              inner={
-                <>
-                  <Button
-                    id="toolbar-save"
-                    className="save"
-                    aria-label={this.props.intl.formatMessage(messages.save)}
-                    onClick={this.updateUserRoleSubmit}
-                    loading={this.props.createRequest.loading}
-                  >
-                    <Icon
-                      name={saveSVG}
-                      className="circled"
-                      size="30px"
-                      title={this.props.intl.formatMessage(messages.save)}
+        </Segment>
+        <Form>
+          {((many_users && entries.length > 0) || !many_users) && (
+            <Table padded striped attached unstackable>
+              <Table.Header>
+                <Table.Row>
+                  <Table.HeaderCell>
+                    <FormattedMessage
+                      id="User name"
+                      defaultMessage="User name"
                     />
-                  </Button>
-                  <Link to="/controlpanel" className="cancel">
-                    <Icon
-                      name={clearSVG}
-                      className="circled"
-                      aria-label={this.props.intl.formatMessage(
-                        messages.cancel,
-                      )}
-                      size="30px"
-                      title={this.props.intl.formatMessage(messages.cancel)}
-                    />
-                  </Link>
-                  <Button
-                    id="toolbar-add"
-                    aria-label={this.props.intl.formatMessage(
-                      messages.addUserButtonTitle,
-                    )}
-                    onClick={() => {
-                      this.setState({ showAddUser: true });
-                    }}
-                    loading={this.props.createRequest.loading}
-                  >
-                    <Icon
-                      name={addUserSvg}
-                      size="45px"
-                      color="#826A6A"
-                      title={this.props.intl.formatMessage(
-                        messages.addUserButtonTitle,
-                      )}
+                  </Table.HeaderCell>
+                  {roles.map((role) => (
+                    <Table.HeaderCell key={role.id}>
+                      {role.title}
+                    </Table.HeaderCell>
+                  ))}
+                  <Table.HeaderCell>
+                    <FormattedMessage id="Actions" defaultMessage="Actions" />
+                  </Table.HeaderCell>
+                </Table.Row>
+              </Table.Header>
+              <Table.Body data-user="users">
+                {entries
+                  .slice(currentPage * 10, pageSize * (currentPage + 1))
+                  .map((userItem) => (
+                    <RenderUsers
+                      key={userItem.id}
+                      onDelete={handleDeleteUser}
+                      roles={roles}
+                      user={userItem}
+                      updateUser={updateUserRole}
+                      inheritedRole={inheritedRole}
+                      userschema={userschema}
+                      listUsers={listUsersAction}
+                      isUserManager={isUserManager}
                     />
-                  </Button>
-                </>
-              }
-            />,
-            document.getElementById('toolbar'),
+                  ))}
+              </Table.Body>
+            </Table>
           )}
-      </Container>
-    );
-  }
-}
-
-export default compose(
-  injectIntl,
-  connect(
-    (state, props) => ({
-      roles: state.roles.roles,
-      users: state.users.users,
-      user: state.users.user,
-      userId: state.userSession.token
-        ? jwtDecode(state.userSession.token).sub
-        : '',
-      groups: state.groups.groups,
-      many_users: state.controlpanels?.controlpanel?.data?.many_users,
-      many_groups: state.controlpanels?.controlpanel?.data?.many_groups,
-      description: state.description,
-      pathname: props.location.pathname,
-      deleteRequest: state.users.delete,
-      createRequest: state.users.create,
-      loadRolesRequest: state.roles,
-      inheritedRole: state.authRole.authenticatedRole,
-      userschema: state.userschema,
-      controlPanelData: state.controlpanels?.controlpanel,
-    }),
-    (dispatch) =>
-      bindActionCreators(
-        {
-          listRoles,
-          listUsers,
-          listGroups,
-          getControlpanel,
-          deleteUser,
-          createUser,
-          updateUser,
-          updateGroup,
-          getUserSchema,
-          getUser,
-        },
-        dispatch,
-      ),
-  ),
-)(UsersControlpanel);
+          {entries.length === 0 && search && (
+            <Segment>
+              {intl.formatMessage(messages.userSearchNoResults)}
+            </Segment>
+          )}
+          <div className="contents-pagination">
+            <Pagination
+              current={currentPage}
+              total={Math.ceil(entries?.length / pageSize)}
+              onChangePage={onChangePage}
+            />
+          </div>
+        </Form>
+      </Segment.Group>
+      {isClient &&
+        createPortal(
+          <Toolbar
+            pathname={pathname}
+            hideDefaultViewButtons
+            inner={
+              <>
+                <Button
+                  id="toolbar-save"
+                  className="save"
+                  aria-label={intl.formatMessage(messages.save)}
+                  onClick={updateUserRoleSubmit}
+                  loading={createRequest?.loading}
+                >
+                  <Icon
+                    name={saveSVG}
+                    className="circled"
+                    size="30px"
+                    title={intl.formatMessage(messages.save)}
+                  />
+                </Button>
+                <Link to="/controlpanel" className="cancel">
+                  <Icon
+                    name={clearSVG}
+                    className="circled"
+                    aria-label={intl.formatMessage(messages.cancel)}
+                    size="30px"
+                    title={intl.formatMessage(messages.cancel)}
+                  />
+                </Link>
+                <Button
+                  id="toolbar-add"
+                  aria-label={intl.formatMessage(messages.addUserButtonTitle)}
+                  onClick={() => {
+                    setShowAddUser(true);
+                  }}
+                  loading={createRequest?.loading}
+                >
+                  <Icon
+                    name={addUserSvg}
+                    size="45px"
+                    color="#826A6A"
+                    title={intl.formatMessage(messages.addUserButtonTitle)}
+                  />
+                </Button>
+              </>
+            }
+          />,
+          document.getElementById('toolbar'),
+        )}
+    </Container>
+  );
+};
+
+export default asyncConnect([
+  {
+    key: 'controlpanels',
+    promise: ({ store: { dispatch, getState } }) => {
+      return dispatch(getControlpanel('usergroup')).then(() => {
+        const state = getState();
+        const many_users = state.controlpanels?.controlpanel?.data?.many_users;
+        if (!many_users) {
+          dispatch(listUsers());
+          dispatch(listGroups());
+        }
+      });
+    },
+  },
+  {
+    key: 'roles',
+    promise: ({ store: { dispatch } }) => {
+      return dispatch(listRoles());
+    },
+  },
+  {
+    key: 'userschema',
+    promise: ({ store: { dispatch } }) => {
+      return dispatch(getUserSchema());
+    },
+  },
+  {
+    key: 'user',
+    promise: ({ store: { dispatch, getState } }) => {
+      const state = getState();
+      const token = state.userSession.token;
+      if (token) {
+        const userId = jwtDecode(token).sub;
+        if (userId) {
+          return dispatch(getUser(userId));
+        }
+      }
+    },
+  },
+])(UsersControlpanel);