@plone/volto 18.32.1 → 18.32.3

package/src/components/theme/PasswordReset/PasswordReset.jsx

@@ -3,14 +3,12 @@
  * @module components/theme/PasswordReset/PasswordReset
  */
 
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { Link, withRouter } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { Link, useHistory, useParams } from 'react-router-dom';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import { Container } from 'semantic-ui-react';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { Form } from '@plone/volto/components/manage/Form';
 import { setInitialPassword } from '@plone/volto/actions/users/users';
@@ -90,220 +88,139 @@ const messages = defineMessages({
 });
 
 /**
- * PasswordReset class.
- * @class PasswordReset
- * @extends Component
+ * @function PasswordReset
+ * @returns {JSX.Element}
  */
-class PasswordReset extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    loading: PropTypes.bool.isRequired,
-    loaded: PropTypes.bool.isRequired,
-    error: PropTypes.string,
-    token: PropTypes.string.isRequired,
-    setInitialPassword: PropTypes.func.isRequired,
-  };
+function PasswordReset() {
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const { token } = useParams();
 
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    error: null,
-  };
+  const loading = useSelector((state) => state.users.initial.loading);
+  const loaded = useSelector((state) => state.users.initial.loaded);
+  const error = useSelector((state) => state.users.initial.error);
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Controlpanel
-   */
-  constructor(props) {
-    super(props);
-    this.onCancel = this.onCancel.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.state = {
-      error: null,
-      isSuccessful: false,
-    };
+  const [localError, setLocalError] = useState(null);
+  const [isSuccessful, setIsSuccessful] = useState(false);
+  const intl = useIntl();
 
-    this.identifierField = config.settings.useEmailAsLogin
-      ? 'email'
-      : 'username';
+  const identifierField = config.settings.useEmailAsLogin
+    ? 'email'
+    : 'username';
 
-    this.identifierTitle =
-      this.identifierField === 'email'
-        ? this.props.intl.formatMessage(messages.emailTitle)
-        : this.props.intl.formatMessage(messages.usernameTitle);
+  const identifierTitle =
+    identifierField === 'email'
+      ? intl.formatMessage(messages.emailTitle)
+      : intl.formatMessage(messages.usernameTitle);
 
-    this.identifierDescription =
-      this.identifierField === 'email'
-        ? this.props.intl.formatMessage(messages.emailDescription)
-        : this.props.intl.formatMessage(messages.usernameDescription);
-  }
+  const identifierDescription =
+    identifierField === 'email'
+      ? intl.formatMessage(messages.emailDescription)
+      : intl.formatMessage(messages.usernameDescription);
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.loading && nextProps.loaded) {
-      this.setState({ isSuccessful: true });
+  useEffect(() => {
+    if (!loading && loaded) {
+      setIsSuccessful(true);
     }
-  }
+  }, [loading, loaded]);
 
   /**
    * Submit handler
    * @method onSubmit
    * @param {object} data Form data.
-   * @param {object} event Form data.
    * @returns {undefined}
    */
-  onSubmit(data) {
+  const onSubmit = (data) => {
     if (data.password === data.passwordRepeat) {
-      this.props.setInitialPassword(
-        data[this.identifierField],
-        this.props.token,
-        data.password,
-      );
-      this.setState({
-        error: null,
-      });
+      dispatch(setInitialPassword(data[identifierField], token, data.password));
+      setLocalError(null);
     } else {
-      this.setState({
-        error: {
-          message: this.props.intl.formatMessage(messages.passwordsDoNotMatch),
-        },
+      setLocalError({
+        message: intl.formatMessage(messages.passwordsDoNotMatch),
       });
     }
-  }
+  };
 
   /**
    * Cancel handler
    * @method onCancel
    * @returns {undefined}
    */
-  onCancel() {
-    this.props.history.goBack();
+  const onCancel = () => {
+    history.goBack();
+  };
+
+  if (isSuccessful) {
+    return (
+      <Container>
+        <h1 className="documentFirstHeading">
+          <FormattedMessage {...messages.successRedirectToLoginTitle} />
+        </h1>
+        <p className="description">
+          <FormattedMessage
+            {...messages.successRedirectToLoginBody}
+            values={{
+              link: (
+                <Link to="/login">{intl.formatMessage({ id: 'Log In' })}</Link>
+              ),
+            }}
+          />
+        </p>
+      </Container>
+    );
   }
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    if (this.state.isSuccessful) {
-      return (
+  if (token) {
+    const errmsg = error ? error.response?.body?.error || error : null;
+    return (
+      <div id="page-password-reset">
+        <Helmet title={intl.formatMessage(messages.passwordReset)} />
         <Container>
-          <h1 className="documentFirstHeading">
-            <FormattedMessage
-              id="Account activation completed"
-              defaultMessage="Account activation completed"
-            />
-          </h1>
-          <p className="description">
-            <FormattedMessage
-              id="Your password has been set successfully. You may now {link} with your new password."
-              defaultMessage="Your password has been set successfully. You may now {link} with your new password."
-              values={{
-                link: (
-                  <Link to="/login">
-                    {this.props.intl.formatMessage({ id: 'Log In' })}
-                  </Link>
-                ),
-              }}
-            />
-          </p>
-        </Container>
-      );
-    }
-    if (this.props.token) {
-      const errmsg = this.props.error
-        ? this.props.error.response.body.error
-        : null;
-      return (
-        <div id="page-password-reset">
-          <Helmet
-            title={this.props.intl.formatMessage(messages.passwordReset)}
-          />
-          <Container>
-            <Form
-              title={this.props.intl.formatMessage(messages.title)}
-              description={this.props.intl.formatMessage(messages.description)}
-              onSubmit={this.onSubmit}
-              onCancel={this.onCancel}
-              error={this.state.error || errmsg}
-              schema={{
-                fieldsets: [
-                  {
-                    id: 'default',
-                    title: this.props.intl.formatMessage(messages.default),
-                    fields: [
-                      this.identifierField,
-                      'password',
-                      'passwordRepeat',
-                    ],
-                  },
-                ],
-                properties: {
-                  [this.identifierField]: {
-                    type: 'string',
-                    title: this.identifierTitle,
-                    description: this.identifierDescription,
-                  },
-                  password: {
-                    description: this.props.intl.formatMessage(
-                      messages.passwordDescription,
-                    ),
-                    title: this.props.intl.formatMessage(
-                      messages.passwordTitle,
-                    ),
-                    type: 'string',
-                    widget: 'password',
-                  },
-                  passwordRepeat: {
-                    description: this.props.intl.formatMessage(
-                      messages.passwordRepeatDescription,
-                    ),
-                    title: this.props.intl.formatMessage(
-                      messages.passwordRepeatTitle,
-                    ),
-                    type: 'string',
-                    widget: 'password',
-                  },
+          <Form
+            title={intl.formatMessage(messages.title)}
+            description={intl.formatMessage(messages.description)}
+            onSubmit={onSubmit}
+            onCancel={onCancel}
+            error={localError || errmsg}
+            schema={{
+              fieldsets: [
+                {
+                  id: 'default',
+                  title: intl.formatMessage(messages.default),
+                  fields: [identifierField, 'password', 'passwordRepeat'],
                 },
-                submitLabel: this.props.intl.formatMessage(
-                  messages.setMyPassword,
-                ),
-                required: [this.identifierField, 'password', 'passwordRepeat'],
-              }}
-            />
-          </Container>
-        </div>
-      );
-    }
-    return <div />;
+              ],
+              properties: {
+                [identifierField]: {
+                  type: 'string',
+                  title: identifierTitle,
+                  description: identifierDescription,
+                },
+                password: {
+                  description: intl.formatMessage(messages.passwordDescription),
+                  title: intl.formatMessage(messages.passwordTitle),
+                  type: 'string',
+                  widget: 'password',
+                },
+                passwordRepeat: {
+                  description: intl.formatMessage(
+                    messages.passwordRepeatDescription,
+                  ),
+                  title: intl.formatMessage(messages.passwordRepeatTitle),
+                  type: 'string',
+                  widget: 'password',
+                },
+              },
+              submitLabel: intl.formatMessage(messages.setMyPassword),
+              required: [identifierField, 'password', 'passwordRepeat'],
+            }}
+          />
+        </Container>
+      </div>
+    );
   }
+
+  return <div />;
 }
 
-export default compose(
-  withRouter,
-  injectIntl,
-  connect(
-    (state, props) => ({
-      loading: state.users.initial.loading,
-      loaded: state.users.initial.loaded,
-      error: state.users.initial.error,
-      token: props.match.params.token,
-    }),
-    { setInitialPassword },
-  ),
-)(PasswordReset);
+export default PasswordReset;

package/src/components/theme/View/RenderBlocks.jsx

@@ -5,8 +5,7 @@ import map from 'lodash/map';
 import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
 import {
   applyBlockDefaults,
-  getBlocksFieldname,
-  getBlocksLayoutFieldname,
+  getBlocks,
   hasBlocksData,
 } from '@plone/volto/helpers/Blocks/Blocks';
 import StyleWrapper from '@plone/volto/components/manage/Blocks/Block/StyleWrapper';
@@ -28,26 +27,25 @@ const messages = defineMessages({
 const RenderBlocks = (props) => {
   const { blockWrapperTag, content, location, isContainer, metadata } = props;
   const intl = useIntl();
-  const blocksFieldname = getBlocksFieldname(content);
-  const blocksLayoutFieldname = getBlocksLayoutFieldname(content);
   const blocksConfig = props.blocksConfig || config.blocks.blocksConfig;
   const CustomTag = props.as || React.Fragment;
 
+  const blockList = getBlocks(content);
+
   return hasBlocksData(content) ? (
     <CustomTag>
-      {map(content[blocksLayoutFieldname].items, (block) => {
+      {map(blockList, ([block, rawBlockData]) => {
         const Block =
-          blocksConfig[content[blocksFieldname]?.[block]?.['@type']]?.view ||
-          ViewDefaultBlock;
+          blocksConfig[rawBlockData?.['@type']]?.view || ViewDefaultBlock;
 
         const blockData = applyBlockDefaults({
-          data: content[blocksFieldname][block],
+          data: rawBlockData,
           intl,
           metadata,
           properties: content,
         });
 
-        if (content[blocksFieldname]?.[block]?.['@type'] === 'empty') {
+        if (rawBlockData?.['@type'] === 'empty') {
           return (
             <MaybeWrap
               key={block}
@@ -91,7 +89,7 @@ const RenderBlocks = (props) => {
           return (
             <div key={block}>
               {intl.formatMessage(messages.unknownBlock, {
-                block: content[blocksFieldname]?.[block]?.['@type'],
+                block: rawBlockData?.['@type'],
               })}
             </div>
           );

package/src/components/theme/View/RenderBlocks.test.jsx

@@ -90,14 +90,14 @@ test('Provides path to blocks', () => {
   expect(container).toMatchSnapshot();
 });
 
-test('Renders invalid blocks', () => {
+test('Filters out invalid blocks', () => {
   const store = mockStore({
     intl: {
       locale: 'en',
       messages: {},
     },
   });
-  const { queryAllByText } = render(
+  const { queryAllByText, queryByText } = render(
     <Provider store={store}>
       <RenderBlocks
         blocksConfig={{
@@ -113,7 +113,14 @@ test('Renders invalid blocks', () => {
         }}
         content={{
           blocks_layout: {
-            items: ['MISSING-YOU-1', 'a', 'MISSING-YOU-2'],
+            items: [
+              'MISSING-YOU-1',
+              'a',
+              'MISSING-YOU-2',
+              null,
+              undefined,
+              'undefined',
+            ],
           },
           blocks: {
             a: {
@@ -126,7 +133,10 @@ test('Renders invalid blocks', () => {
       />
     </Provider>,
   );
+  // Invalid blocks (missing from blocks object or invalid IDs) are filtered out and not rendered
   expect(
     queryAllByText('Invalid block - Will be removed on saving'),
-  ).toHaveLength(2);
+  ).toHaveLength(0);
+  // Only valid blocks are rendered
+  expect(queryByText('id: a - text: bar - path: /foo')).not.toBeNull();
 });

package/src/config/index.js

@@ -119,7 +119,7 @@ let config = {
     defaultBlockType: 'slate',
     verticalFormTabs: false,
     useEmailAsLogin: false,
-    persistentReducers: ['blocksClipboard'],
+    persistentReducers: ['blocksClipboard.cut', 'blocksClipboard.copy'],
     initialReducersBlacklist: [], // reducers in this list won't be hydrated in windows.__data
     asyncPropsExtenders: [getSiteAsyncPropExtender], // per route asyncConnect customizers
     contentIcons: contentIcons,

package/src/config/validation.ts

@@ -16,6 +16,7 @@ import {
   endEventDateRangeValidator,
   patternValidator,
   defaultLanguageControlPanelValidator,
+  sizeValidator,
 } from '@plone/volto/helpers/FormValidation/validators';
 
 const registerValidators = (config: ConfigType) => {
@@ -33,6 +34,13 @@ const registerValidators = (config: ConfigType) => {
     method: maxLengthValidator,
   });
 
+  config.registerUtility({
+    name: 'size',
+    type: 'validator',
+    dependencies: { fieldType: 'object' },
+    method: sizeValidator,
+  });
+
   config.registerUtility({
     name: 'pattern',
     type: 'validator',

package/src/helpers/Blocks/Blocks.js

@@ -80,6 +80,14 @@ export function blockHasValue(data) {
   return check(data);
 }
 
+/**
+ * Block id is valid (not undefined/null or the string "undefined" from object[undefined])
+ * @param {*} id Block id
+ * @return {boolean}
+ */
+const isValidBlockId = (id) =>
+  id != null && id !== 'undefined' && (typeof id !== 'string' || id.length > 0);
+
 /**
  * Get block pairs of [id, block] from content properties
  * @function getBlocks
@@ -89,12 +97,26 @@ export function blockHasValue(data) {
 export const getBlocks = (properties) => {
   const blocksFieldName = getBlocksFieldname(properties);
   const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
-  return (
-    properties[blocksLayoutFieldname]?.items?.map((n) => [
-      n,
-      properties[blocksFieldName][n],
-    ]) || []
-  );
+  const blocks = properties?.[blocksFieldName];
+  const items = properties?.[blocksLayoutFieldname]?.items;
+  if (!items) return [];
+  return items
+    .filter((n) => isValidBlockId(n))
+    .map((n) => [n, blocks?.[n]])
+    .filter(([, block]) => block != null);
+};
+
+/**
+ * Get layout item IDs that are valid but have no block data (orphaned refs).
+ * @param {Object} properties Content form properties
+ * @return {string[]} IDs that should be removed from layout
+ */
+export const getInvalidBlockLayoutIds = (properties) => {
+  const blocksFieldName = getBlocksFieldname(properties);
+  const blocksLayoutFieldName = getBlocksLayoutFieldname(properties);
+  const blocks = properties?.[blocksFieldName] ?? {};
+  const layoutItems = properties?.[blocksLayoutFieldName]?.items ?? [];
+  return layoutItems.filter((id) => isValidBlockId(id) && blocks[id] == null);
 };
 
 /**
@@ -129,12 +151,28 @@ export function deleteBlock(formData, blockId, intl) {
 
   let newFormData = {
     ...formData,
-    [blocksLayoutFieldname]: {
-      items: without(formData[blocksLayoutFieldname].items, blockId),
-    },
-    [blocksFieldname]: omit(formData[blocksFieldname], [blockId]),
   };
 
+  let container = findParent(newFormData, {
+    blockId,
+  });
+
+  if (container) {
+    container[blocksLayoutFieldname].items = without(
+      container[blocksLayoutFieldname].items,
+      blockId,
+    );
+    container[blocksFieldname] = omit(container[blocksFieldname], [blockId]);
+  } else {
+    newFormData[blocksLayoutFieldname].items = without(
+      newFormData[blocksLayoutFieldname].items,
+      blockId,
+    );
+    newFormData[blocksFieldname] = omit(newFormData[blocksFieldname], [
+      blockId,
+    ]);
+  }
+
   if (newFormData[blocksLayoutFieldname].items.length === 0) {
     newFormData = addBlock(
       newFormData,
@@ -817,7 +855,9 @@ export const getBlocksHierarchy = (properties) => {
     title: properties[blocksFieldName][n]?.['@type'],
     data: properties[blocksFieldName][n],
     children: isBlockContainer(properties[blocksFieldName][n])
-      ? getBlocksHierarchy(properties[blocksFieldName][n])
+      ? properties[blocksFieldName][n].data
+        ? getBlocksHierarchy(properties[blocksFieldName][n].data)
+        : getBlocksHierarchy(properties[blocksFieldName][n])
       : [],
   }));
 };
@@ -911,8 +951,13 @@ export function moveBlockEnhanced(formData, { source, destination }) {
       const destinationContainer = findContainer(clonedFormData, {
         containerId: destination.parent,
       });
+      const sourceContainer = findContainer(clonedFormData, {
+        containerId: source.parent,
+      });
+
       destinationContainer[blocksFieldName][source.id] =
-        formData[blocksFieldName][source.parent][blocksFieldName][source.id];
+        sourceContainer[blocksFieldName]?.[source.id] ||
+        sourceContainer.data?.[blocksFieldName][source.id];
 
       destinationContainer[blocksLayoutFieldname].items = insertInArray(
         destinationContainer[blocksLayoutFieldname].items,
@@ -921,9 +966,6 @@ export function moveBlockEnhanced(formData, { source, destination }) {
       );
 
       // Remove the source block from the source parent
-      const sourceContainer = findContainer(clonedFormData, {
-        containerId: source.parent,
-      });
       delete sourceContainer[blocksFieldName][source.id];
       sourceContainer[blocksLayoutFieldname].items = removeFromArray(
         sourceContainer[blocksLayoutFieldname].items,
@@ -957,23 +999,25 @@ export function moveBlockEnhanced(formData, { source, destination }) {
  * @returns {object|undefined} - The container object if found, otherwise undefined.
  */
 export const findContainer = (formData, { containerId }) => {
+  const block =
+    formData.blocks[containerId]?.data || formData.blocks[containerId];
   if (
-    formData.blocks[containerId] &&
-    Object.keys(formData.blocks[containerId]).includes('blocks') &&
-    Object.keys(formData.blocks[containerId]).includes('blocks_layout')
+    block &&
+    Object.keys(block).includes('blocks') &&
+    Object.keys(block).includes('blocks_layout')
   ) {
-    return formData.blocks[containerId];
+    return block;
   }
 
   let container;
   Object.keys(formData.blocks).every((blockId) => {
-    const block = formData.blocks[blockId];
+    const subBlock = formData.blocks[blockId].data || formData.blocks[blockId];
     if (
-      formData.blocks[blockId] &&
-      Object.keys(formData.blocks[blockId]).includes('blocks') &&
-      Object.keys(formData.blocks[blockId]).includes('blocks_layout')
+      subBlock &&
+      Object.keys(subBlock).includes('blocks') &&
+      Object.keys(subBlock).includes('blocks_layout')
     ) {
-      container = findContainer(block, { containerId });
+      container = findContainer(subBlock, { containerId });
     }
     if (container) {
       return false;
@@ -985,6 +1029,47 @@ export const findContainer = (formData, { containerId }) => {
   return container;
 };
 
+/**
+ * Finds parent container of the specified blockId in the given formData.
+ *
+ * @param {object} formData - The form data object.
+ * @param {object} options - The options object.
+ * @param {string} options.blockId - The ID of the block to find.
+ * @returns {object|undefined} - The container object if found, otherwise undefined.
+ */
+export const findParent = (formData, { blockId }) => {
+  const block = formData.data || formData;
+
+  if (block && block.blocks && Object.keys(block.blocks).includes(blockId)) {
+    return block;
+  }
+
+  let found = false;
+
+  if (block && block.blocks) {
+    Object.keys(block.blocks).every((subBlockId) => {
+      const subBlock =
+        block.blocks[subBlockId].data || block.blocks[subBlockId];
+      if (subBlock && subBlock.blocks) {
+        if (Object.keys(subBlock.blocks).includes(blockId)) {
+          found = subBlock;
+        }
+        const parent = findParent(subBlock, { blockId });
+        if (parent) {
+          found = parent;
+        }
+      }
+      if (found) {
+        return false;
+      } else {
+        return true;
+      }
+    });
+  }
+
+  return found;
+};
+
 const _dummyIntl = {
   formatMessage() {},
 };