@plone/volto 17.0.0-alpha.3 → 17.0.0-alpha.30

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

@@ -11,6 +11,7 @@ import {
   getControlpanel,
   updateUser,
   updateGroup,
+  getUserSchema,
 } from '@plone/volto/actions';
 import {
   Icon,
@@ -98,6 +99,7 @@ class UsersControlpanel extends Component {
     this.updateUserRole = this.updateUserRole.bind(this);
     this.state = {
       search: '',
+      isLoading: false,
       showAddUser: false,
       showAddUserErrorConfirm: false,
       addUserError: '',
@@ -107,6 +109,7 @@ class UsersControlpanel extends Component {
       isClient: false,
       currentPage: 0,
       pageSize: 10,
+      loginUsingEmail: false,
     };
   }
 
@@ -120,6 +123,15 @@ class UsersControlpanel extends Component {
         entries: this.props.users,
       });
     }
+    await this.props.getUserSchema();
+  };
+
+  // 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,
+    });
   };
 
   /**
@@ -132,6 +144,7 @@ class UsersControlpanel extends Component {
       isClient: true,
     });
     this.fetchData();
+    this.checkLoginUsingEmailStatus();
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -171,9 +184,19 @@ class UsersControlpanel extends Component {
    */
   onSearch(event) {
     event.preventDefault();
-    this.props.listUsers({
-      search: this.state.search,
-    });
+    this.setState({ isLoading: true });
+    this.props
+      .listUsers({
+        search: this.state.search,
+      })
+      .then(() => {
+        this.setState({ isLoading: false });
+      })
+      .catch((error) => {
+        this.setState({ isLoading: false });
+        // eslint-disable-next-line no-console
+        console.error('Error searching users', error);
+      });
   }
 
   /**
@@ -255,12 +278,28 @@ class UsersControlpanel extends Component {
    * @returns {undefined}
    */
   onAddUserSubmit(data, callback) {
-    const { groups, sendPasswordReset } = data;
-    if (groups && groups.length > 0) this.addUserToGroup(data);
-    this.props.createUser(data, sendPasswordReset);
-    this.setState({
-      addUserSetFormDataCallback: 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,
+      });
+    }
   }
 
   /**
@@ -382,6 +421,65 @@ class UsersControlpanel extends Component {
     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 = {};
+    if (this.props?.userschema?.loaded) {
+      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.props.roles.map((role) => [role.id, role.title]),
+        noValueOption: false,
+      };
+      adduserschema.properties['groups'] = {
+        title: this.props.intl.formatMessage(messages.addUserGroupNameTitle),
+        type: 'array',
+        choices: this.props.groups.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([
+          'username',
+          'password',
+          'sendPasswordReset',
+          'roles',
+          'groups',
+        ]);
+      }
+    }
+
     return (
       <Container className="users-control-panel">
         <Helmet title={this.props.intl.formatMessage(messages.users)} />
@@ -408,7 +506,7 @@ class UsersControlpanel extends Component {
             onConfirm={this.onDeleteOk}
             size={null}
           />
-          {this.state.showAddUser ? (
+          {this.props?.userschema?.loaded && this.state.showAddUser ? (
             <ModalForm
               open={this.state.showAddUser}
               className="modal"
@@ -419,92 +517,7 @@ class UsersControlpanel extends Component {
               }
               title={this.props.intl.formatMessage(messages.addUserFormTitle)}
               loading={this.props.createRequest.loading}
-              schema={{
-                fieldsets: [
-                  {
-                    id: 'default',
-                    title: 'FIXME: User Data',
-                    fields: [
-                      'username',
-                      'fullname',
-                      'email',
-                      'password',
-                      'sendPasswordReset',
-                      'roles',
-                      'groups',
-                    ],
-                  },
-                ],
-                properties: {
-                  username: {
-                    title: this.props.intl.formatMessage(
-                      messages.addUserFormUsernameTitle,
-                    ),
-                    type: 'string',
-                    description: this.props.intl.formatMessage(
-                      messages.addUserFormUsernameDescription,
-                    ),
-                  },
-                  fullname: {
-                    title: this.props.intl.formatMessage(
-                      messages.addUserFormFullnameTitle,
-                    ),
-                    type: 'string',
-                    description: this.props.intl.formatMessage(
-                      messages.addUserFormFullnameDescription,
-                    ),
-                  },
-                  email: {
-                    title: this.props.intl.formatMessage(
-                      messages.addUserFormEmailTitle,
-                    ),
-                    type: 'string',
-                    description: this.props.intl.formatMessage(
-                      messages.addUserFormEmailDescription,
-                    ),
-                    widget: 'email',
-                  },
-                  password: {
-                    title: this.props.intl.formatMessage(
-                      messages.addUserFormPasswordTitle,
-                    ),
-                    type: 'password',
-                    description: this.props.intl.formatMessage(
-                      messages.addUserFormPasswordDescription,
-                    ),
-                    widget: 'password',
-                  },
-                  sendPasswordReset: {
-                    title: this.props.intl.formatMessage(
-                      messages.addUserFormSendPasswordResetTitle,
-                    ),
-                    type: 'boolean',
-                  },
-                  roles: {
-                    title: this.props.intl.formatMessage(
-                      messages.addUserFormRolesTitle,
-                    ),
-                    type: 'array',
-                    choices: this.props.roles.map((role) => [
-                      role.id,
-                      role.title,
-                    ]),
-                    noValueOption: false,
-                  },
-                  groups: {
-                    title: this.props.intl.formatMessage(
-                      messages.addUserGroupNameTitle,
-                    ),
-                    type: 'array',
-                    choices: this.props.groups.map((group) => [
-                      group.id,
-                      group.id,
-                    ]),
-                    noValueOption: false,
-                  },
-                },
-                required: ['username', 'email'],
-              }}
+              schema={adduserschema}
             />
           ) : null}
         </div>
@@ -533,7 +546,11 @@ class UsersControlpanel extends Component {
               <Form.Field>
                 <Input
                   name="SearchableText"
-                  action={{ icon: 'search' }}
+                  action={{
+                    icon: 'search',
+                    loading: this.state.isLoading,
+                    disabled: this.state.isLoading,
+                  }}
                   placeholder={this.props.intl.formatMessage(
                     messages.searchUsers,
                   )}
@@ -544,7 +561,8 @@ class UsersControlpanel extends Component {
             </Form>
           </Segment>
           <Form>
-            <div className="table">
+            {((this.props.many_users && this.state.entries.length > 0) ||
+              !this.props.many_users) && (
               <Table padded striped attached unstackable>
                 <Table.Header>
                   <Table.Row>
@@ -578,11 +596,18 @@ class UsersControlpanel extends Component {
                         user={user}
                         updateUser={this.updateUserRole}
                         inheritedRole={this.props.inheritedRole}
+                        userschema={this.props.userschema}
+                        listUsers={this.props.listUsers}
                       />
                     ))}
                 </Table.Body>
               </Table>
-            </div>
+            )}
+            {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}
@@ -670,6 +695,8 @@ export default compose(
       createRequest: state.users.create,
       loadRolesRequest: state.roles,
       inheritedRole: state.authRole.authenticatedRole,
+      userschema: state.userschema,
+      controlPanelData: state.controlpanels?.controlpanel,
     }),
     (dispatch) =>
       bindActionCreators(
@@ -682,6 +709,7 @@ export default compose(
           createUser,
           updateUser,
           updateGroup,
+          getUserSchema,
         },
         dispatch,
       ),

package/src/components/manage/Delete/Delete.jsx

@@ -1,21 +1,14 @@
-/**
- * Delete container.
- * @module components/manage/Delete/Delete
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Helmet } from '@plone/volto/helpers';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { withRouter } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
 import { Portal } from 'react-portal';
 import { Button, Container, List, Segment } from 'semantic-ui-react';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import qs from 'query-string';
 
-import { deleteContent, getContent } from '@plone/volto/actions';
 import { Toolbar } from '@plone/volto/components';
+import { Helmet, usePrevious } from '@plone/volto/helpers';
+import { deleteContent, getContent } from '@plone/volto/actions';
 
 const messages = defineMessages({
   delete: {
@@ -32,172 +25,104 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Delete container class.
- * @class Delete
- * @extends Component
- */
-class Delete extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    deleteContent: PropTypes.func.isRequired,
-    getContent: PropTypes.func.isRequired,
-    deleteRequest: PropTypes.shape({
-      loading: PropTypes.bool,
-      loaded: PropTypes.bool,
-    }).isRequired,
-    pathname: PropTypes.string.isRequired,
-    content: PropTypes.shape({
-      title: PropTypes.string,
-    }),
-    returnUrl: PropTypes.string,
-  };
+const Delete = () => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+  const [isClient, setisClient] = useState(false);
+  const { pathname, search } = useLocation();
+  const history = useHistory();
+  const deleteRequest = useSelector((state) => state.content?.delete);
+  const content = useSelector((state) => state.content?.data, shallowEqual);
 
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    content: null,
-    returnUrl: null,
-  };
+  const prevdeleteRequestLoading = usePrevious(deleteRequest.loading);
+  const returnUrl = qs.parse(search).return_url;
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygEditor
-   */
-  constructor(props) {
-    super(props);
-    this.onCancel = this.onCancel.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.state = { isClient: false };
-  }
+  useEffect(() => {
+    setisClient(true);
+  }, []);
+
+  useEffect(() => {
+    dispatch(getContent(pathname.split('/delete')[0]));
+  }, [dispatch, pathname]);
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.deleteRequest.loading && nextProps.deleteRequest.loaded) {
-      this.props.history.push(
-        this.props.returnUrl ||
-          this.props.pathname.replace('/delete', '').replace(/\/[^/]*$/, ''),
+  useEffect(() => {
+    if (prevdeleteRequestLoading && deleteRequest.loaded) {
+      history.push(
+        returnUrl || pathname.replace('/delete', '').replace(/\/[^/]*$/, ''),
       );
     }
-  }
-
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    this.props.getContent(this.props.pathname.split('/delete')[0]);
-    this.setState({ isClient: true });
-  }
+  }, [
+    history,
+    pathname,
+    returnUrl,
+    prevdeleteRequestLoading,
+    deleteRequest.loaded,
+  ]);
 
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @returns {undefined}
-   */
-  onSubmit() {
-    this.props.deleteContent(this.props.pathname.replace('/delete', ''));
-  }
+  const onSubmit = () => {
+    dispatch(deleteContent(pathname.replace('/delete', '')));
+  };
 
-  /**
-   * Cancel handler
-   * @method onCancel
-   * @returns {undefined}
-   */
-  onCancel() {
-    this.props.history.push(this.props.pathname.replace('/delete', ''));
-  }
+  const onCancel = () => {
+    history.push(pathname.replace('/delete', ''));
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    if (this.props.content) {
-      return (
-        <div id="page-delete">
-          <Helmet title={this.props.intl.formatMessage(messages.delete)} />
-          <Container>
-            <Segment.Group raised>
-              <Segment className="primary">
-                <FormattedMessage
-                  id="Do you really want to delete this item?"
-                  defaultMessage="Do you really want to delete this item?"
-                />
-              </Segment>
-              <Segment attached>
-                <List bulleted>
-                  <List.Item>{this.props.content.title}</List.Item>
-                </List>
-              </Segment>
-              <Segment className="actions" clearing>
-                <Button
-                  basic
-                  circular
-                  primary
-                  floated="right"
-                  icon="arrow right"
-                  aria-label={this.props.intl.formatMessage(messages.ok)}
-                  title={this.props.intl.formatMessage(messages.ok)}
-                  size="big"
-                  onClick={this.onSubmit}
-                />
-                <Button
-                  basic
-                  circular
-                  secondary
-                  icon="remove"
-                  aria-label={this.props.intl.formatMessage(messages.cancel)}
-                  title={this.props.intl.formatMessage(messages.cancel)}
-                  floated="right"
-                  size="big"
-                  onClick={this.onCancel}
-                />
-              </Segment>
-            </Segment.Group>
-          </Container>
-          {this.state.isClient && (
-            <Portal node={document.getElementById('toolbar')}>
-              <Toolbar
-                pathname={this.props.pathname}
-                hideDefaultViewButtons
-                inner={<span />}
+  if (content) {
+    return (
+      <div id="page-delete">
+        <Helmet title={intl.formatMessage(messages.delete)} />
+        <Container>
+          <Segment.Group raised>
+            <Segment className="primary">
+              <FormattedMessage
+                id="Do you really want to delete this item?"
+                defaultMessage="Do you really want to delete this item?"
               />
-            </Portal>
-          )}
-        </div>
-      );
-    }
-    return <div />;
+            </Segment>
+            <Segment attached>
+              <List bulleted>
+                <List.Item>{content.title}</List.Item>
+              </List>
+            </Segment>
+            <Segment className="actions" clearing>
+              <Button
+                basic
+                circular
+                primary
+                floated="right"
+                icon="arrow right"
+                aria-label={intl.formatMessage(messages.ok)}
+                title={intl.formatMessage(messages.ok)}
+                size="big"
+                onClick={onSubmit}
+              />
+              <Button
+                basic
+                circular
+                secondary
+                icon="remove"
+                aria-label={intl.formatMessage(messages.cancel)}
+                title={intl.formatMessage(messages.cancel)}
+                floated="right"
+                size="big"
+                onClick={onCancel}
+              />
+            </Segment>
+          </Segment.Group>
+        </Container>
+        {isClient && (
+          <Portal node={document.getElementById('toolbar')}>
+            <Toolbar
+              pathname={pathname}
+              hideDefaultViewButtons
+              inner={<span />}
+            />
+          </Portal>
+        )}
+      </div>
+    );
   }
-}
+  return <div />;
+};
 
-export default compose(
-  withRouter,
-  injectIntl,
-  connect(
-    (state, props) => ({
-      content: state.content.data,
-      deleteRequest: state.content.delete,
-      pathname: props.location.pathname,
-      returnUrl: qs.parse(props.location.search).return_url,
-    }),
-    { deleteContent, getContent },
-  ),
-)(Delete);
+export default Delete;

package/src/components/manage/Diff/DiffField.jsx

@@ -17,6 +17,7 @@ import { useSelector } from 'react-redux';
 import { Api } from '@plone/volto/helpers';
 import configureStore from '@plone/volto/store';
 import { DefaultView } from '@plone/volto/components/';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
 
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
@@ -69,7 +70,7 @@ const DiffField = ({
             .replace('\u202F', ' '),
         );
         break;
-      case 'json':
+      case 'json': {
         const api = new Api();
         const history = createBrowserHistory();
         const store = configureStore(window.__data, history, api);
@@ -90,6 +91,29 @@ const DiffField = ({
           ),
         );
         break;
+      }
+      case 'slate': {
+        const api = new Api();
+        const history = createBrowserHistory();
+        const store = configureStore(window.__data, history, api);
+        parts = diffWords(
+          ReactDOMServer.renderToStaticMarkup(
+            <Provider store={store}>
+              <ConnectedRouter history={history}>
+                {serializeNodes(one)}
+              </ConnectedRouter>
+            </Provider>,
+          ),
+          ReactDOMServer.renderToStaticMarkup(
+            <Provider store={store}>
+              <ConnectedRouter history={history}>
+                {serializeNodes(two)}
+              </ConnectedRouter>
+            </Provider>,
+          ),
+        );
+        break;
+      }
       case 'textarea':
       default:
         parts = diffWords(one, two);