@plone/volto 17.0.0-alpha.21 → 17.0.0-alpha.22

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

@@ -1,17 +1,10 @@
-/**
- * RequestPasswordReset component.
- * @module components/theme/RequestPasswordReset/RequestPasswordReset
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { withRouter } from 'react-router-dom';
-import { Helmet } from '@plone/volto/helpers';
+import { useState, useEffect, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
 import { Container } from 'semantic-ui-react';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
+import { Helmet, usePrevious } from '@plone/volto/helpers';
 import { Form } from '@plone/volto/components';
 import { resetPassword } from '@plone/volto/actions';
 import config from '@plone/volto/registry';
@@ -56,178 +49,110 @@ const messages = defineMessages({
   },
 });
 
-/**
- * RequestPasswordReset class.
- * @class RequestPasswordReset
- * @extends Component
- */
-class RequestPasswordReset extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    loading: PropTypes.bool.isRequired,
-    loaded: PropTypes.bool.isRequired,
-    error: PropTypes.string,
-    resetPassword: PropTypes.func.isRequired,
-  };
+const useUsers = () => {
+  const loading = useSelector((state) => state.users.reset.loading);
+  const loaded = useSelector((state) => state.users.reset.loaded);
+  const error = useSelector((state) => state.users.reset.error);
 
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    error: null,
-  };
+  return { loading, loaded, 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.identifierField = config.settings.useEmailAsLogin
-      ? 'email'
-      : 'username';
+const RequestPasswordReset = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const [error, setError] = useState(null);
+  const [isSuccessful, setisSuccessful] = useState(false);
+  const history = useHistory();
+  const identifierTitle = useRef();
+  const identifierRequiredMessage = useRef();
+  const { loaded, loading, error: props_error } = useUsers();
+  const prevloading = usePrevious(loading);
 
-    if (this.identifierField === 'email') {
-      this.identifierTitle = this.props.intl.formatMessage(messages.emailTitle);
-      this.identifierRequiredMessage = this.props.intl.formatMessage(
-        messages.emailRequired,
-      );
-    } else {
-      this.identifierTitle = this.props.intl.formatMessage(
-        messages.usernameTitle,
-      );
-      this.identifierRequiredMessage = this.props.intl.formatMessage(
-        messages.usernameRequired,
-      );
-    }
+  const identifierField = config.settings.useEmailAsLogin
+    ? 'email'
+    : 'username';
 
-    this.state = {
-      error: null,
-      isSuccessful: false,
-    };
+  if (identifierField === 'email') {
+    identifierTitle.current = intl.formatMessage(messages.emailTitle);
+    identifierRequiredMessage.current = intl.formatMessage(
+      messages.emailRequired,
+    );
+  } else {
+    identifierTitle.current = intl.formatMessage(messages.usernameTitle);
+    identifierRequiredMessage.current = intl.formatMessage(
+      messages.usernameRequired,
+    );
   }
 
-  /**
-   * 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 (prevloading && loaded) setisSuccessful(true);
+  }, [prevloading, loaded]);
 
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {object} data Form data.
-   * @param {object} event Form data.
-   * @returns {undefined}
-   */
-  onSubmit(data) {
-    if (data[this.identifierField]) {
-      this.props.resetPassword(data[this.identifierField]);
-      this.setState({
-        error: null,
-      });
+  const onSubmit = (data) => {
+    if (data[identifierField]) {
+      dispatch(resetPassword(data[identifierField]));
+      setError(null);
     } else {
-      this.setState({
-        error: {
-          message: this.identifierRequiredMessage,
-        },
+      setError({
+        message: identifierRequiredMessage.current,
       });
     }
-  }
-
-  /**
-   * Cancel handler
-   * @method onCancel
-   * @returns {undefined}
-   */
-  onCancel() {
-    this.props.history.goBack();
-  }
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    if (this.state.isSuccessful) {
-      return (
-        <Container>
-          <h1 className="documentFirstHeading">
-            <FormattedMessage
-              id="heading_sent_password"
-              defaultMessage="Password reset confirmation sent"
-            />
-          </h1>
-          <p className="description">
-            <FormattedMessage
-              id="description_sent_password"
-              defaultMessage="Your password reset request has been mailed. It should arrive in your mailbox shortly. When you receive the message, visit the address it contains to reset your password."
-            />
-          </p>
-        </Container>
-      );
-    }
+  const onCancel = () => {
+    history.goBack();
+  };
 
+  if (isSuccessful) {
     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 || this.props.error}
-            schema={{
-              fieldsets: [
-                {
-                  id: 'default',
-                  title: this.props.intl.formatMessage(messages.default),
-                  fields: [this.identifierField],
-                },
-              ],
-              properties: {
-                [this.identifierField]: {
-                  type: 'string',
-                  title: this.identifierTitle,
-                },
-              },
-              submitLabel: this.props.intl.formatMessage(messages.sendEmail),
-              required: [this.identifierField],
-            }}
+      <Container>
+        <h1 className="documentFirstHeading">
+          <FormattedMessage
+            id="heading_sent_password"
+            defaultMessage="Password reset confirmation sent"
+          />
+        </h1>
+        <p className="description">
+          <FormattedMessage
+            id="description_sent_password"
+            defaultMessage="Your password reset request has been mailed. It should arrive in your mailbox shortly. When you receive the message, visit the address it contains to reset your password."
           />
-        </Container>
-      </div>
+        </p>
+      </Container>
     );
   }
-}
 
-export default compose(
-  withRouter,
-  injectIntl,
-  connect(
-    (state) => ({
-      loading: state.users.reset.loading,
-      loaded: state.users.reset.loaded,
-      error: state.users.reset.error,
-    }),
-    { resetPassword },
-  ),
-)(RequestPasswordReset);
+  return (
+    <div id="page-password-reset">
+      <Helmet title={intl.formatMessage(messages.passwordReset)} />
+      <Container>
+        <Form
+          title={intl.formatMessage(messages.title)}
+          description={intl.formatMessage(messages.description)}
+          onSubmit={onSubmit}
+          onCancel={onCancel}
+          error={error || props_error}
+          schema={{
+            fieldsets: [
+              {
+                id: 'default',
+                title: intl.formatMessage(messages.default),
+                fields: [identifierField],
+              },
+            ],
+            properties: {
+              [identifierField]: {
+                type: 'string',
+                title: identifierTitle.current,
+              },
+            },
+            submitLabel: intl.formatMessage(messages.sendEmail),
+            required: [identifierField],
+          }}
+        />
+      </Container>
+    </div>
+  );
+};
+
+export default RequestPasswordReset;

package/src/config/Components.jsx

@@ -1,5 +1,6 @@
 import { App, PreviewImage, Image } from '@plone/volto/components';
 
+// Register components.
 export const components = {
   PreviewImage: { component: PreviewImage },
   App: { component: App },

package/src/config/index.js~

@@ -0,0 +1,223 @@
+/**
+ * Config.
+ * @module config
+ */
+import { parse as parseUrl } from 'url';
+import { defaultWidget, widgetMapping } from './Widgets';
+import {
+  layoutViews,
+  contentTypesViews,
+  defaultView,
+  errorViews,
+  layoutViewsNamesMapping,
+} from './Views';
+import { nonContentRoutes } from './NonContentRoutes';
+import {
+  groupBlocksOrder,
+  requiredBlocks,
+  blocksConfig,
+  initialBlocks,
+  initialBlocksFocus,
+} from './Blocks';
+import { components } from './Components';
+import { loadables } from './Loadables';
+import { workflowMapping } from './Workflows';
+
+import { contentIcons } from './ContentIcons';
+import { styleClassNameConverters, styleClassNameExtenders } from './Style';
+import {
+  controlPanelsIcons,
+  filterControlPanels,
+  filterControlPanelsSchema,
+} from './ControlPanels';
+
+import { richtextEditorSettings, richtextViewSettings } from './RichTextEditor';
+
+import applyAddonConfiguration, { addonsInfo } from 'load-volto-addons';
+
+import ConfigRegistry from '@plone/volto/registry';
+
+const host = process.env.HOST || 'localhost';
+const port = process.env.PORT || '3000';
+
+const apiPath =
+  process.env.RAZZLE_API_PATH ||
+  (__DEVELOPMENT__ ? `http://${host}:${port}` : '');
+
+const getServerURL = (url) => {
+  if (!url) return;
+  const apiPathURL = parseUrl(url);
+  return `${apiPathURL.protocol}//${apiPathURL.hostname}${
+    apiPathURL.port ? `:${apiPathURL.port}` : ''
+  }`;
+};
+
+// Sensible defaults for publicURL
+// if RAZZLE_PUBLIC_URL is present, use it
+// if in DEV, use the host/port combination by default
+// if in PROD, assume it's RAZZLE_API_PATH server name (no /api or alikes) or fallback
+// to DEV settings if RAZZLE_API_PATH is not present
+const publicURL =
+  process.env.RAZZLE_PUBLIC_URL ||
+  (__DEVELOPMENT__
+    ? `http://${host}:${port}`
+    : getServerURL(process.env.RAZZLE_API_PATH) || `http://${host}:${port}`);
+
+const serverConfig =
+  typeof __SERVER__ !== 'undefined' && __SERVER__
+    ? require('./server').default
+    : {};
+
+let config = {
+  settings: {
+    host,
+    port,
+    // The URL Volto is going to be served (see sensible defaults above)
+    publicURL,
+    apiPath,
+    apiExpanders: [
+      // Add the following expanders for only issuing a single request.
+      // https://6.docs.plone.org/volto/configuration/settings-reference.html#term-apiExpanders
+      // {
+      //   match: '',
+      //   GET_CONTENT: ['breadcrumbs', 'navigation', 'actions', 'types'],
+      // },
+    ],
+    // Internal proxy to bypass CORS *while developing*. NOT intended for production use.
+    // In production is recommended you use a Seamless mode deployment using a web server in
+    // front of both the frontend and the backend so you can bypass CORS safely.
+    // https://6.docs.plone.org/volto/deploying/seamless-mode.html
+    devProxyToApiPath:
+      process.env.RAZZLE_DEV_PROXY_API_PATH ||
+      process.env.RAZZLE_INTERNAL_API_PATH ||
+      process.env.RAZZLE_API_PATH ||
+      'http://localhost:8080/Plone', // Set it to '' for disabling the proxy
+    // proxyRewriteTarget Set it for set a custom target for the proxy or overide the internal VHM rewrite
+    // proxyRewriteTarget: '/VirtualHostBase/http/localhost:8080/Plone/VirtualHostRoot/_vh_api'
+    // proxyRewriteTarget: 'https://myvoltositeinproduction.com'
+    proxyRewriteTarget: process.env.RAZZLE_PROXY_REWRITE_TARGET || undefined,
+    // apiPath: process.env.RAZZLE_API_PATH || 'http://localhost:8000', // for Volto reference
+    // apiPath: process.env.RAZZLE_API_PATH || 'http://localhost:8081/db/web', // for guillotina
+    actions_raising_api_errors: ['GET_CONTENT', 'UPDATE_CONTENT'],
+    internalApiPath: process.env.RAZZLE_INTERNAL_API_PATH || undefined,
+    websockets: process.env.RAZZLE_WEBSOCKETS || false,
+    // TODO: legacyTraverse to be removed when the use of the legacy traverse is deprecated.
+    legacyTraverse: process.env.RAZZLE_LEGACY_TRAVERSE || false,
+    cookieExpires: 15552000, //in seconds. Default is 6 month (15552000)
+    nonContentRoutes,
+    richtextEditorSettings, // Part of draftjs support, to be removed
+    richtextViewSettings, // Part of draftjs support, to be removed
+    imageObjects: ['Image'],
+    reservedIds: ['login', 'layout', 'plone', 'zip', 'properties'],
+    downloadableObjects: ['File'], //list of content-types for which the direct download of the file will be carried out if the user is not authenticated
+    viewableInBrowserObjects: [], //ex: ['File']. List of content-types for which the file will be displayed in browser if the user is not authenticated
+    listingPreviewImageField: 'image', // deprecated from Volto 14 onwards
+    openExternalLinkInNewTab: false,
+    notSupportedBrowsers: ['ie'],
+    defaultPageSize: 25,
+    isMultilingual: false,
+    supportedLanguages: ['en'],
+    defaultLanguage: 'en',
+    navDepth: 1,
+    expressMiddleware: serverConfig.expressMiddleware, // BBB
+    defaultBlockType: 'slate',
+    verticalFormTabs: false,
+    useEmailAsLogin: false,
+    persistentReducers: ['blocksClipboard'],
+    initialReducersBlacklist: [], // reducers in this list won't be hydrated in windows.__data
+    asyncPropsExtenders: [], // per route asyncConnect customizers
+    contentIcons: contentIcons,
+    loadables,
+    lazyBundles: {
+      cms: [
+        'prettierStandalone',
+        'prettierParserHtml',
+        'prismCore',
+        'toastify',
+        'reactSelect',
+        'reactBeautifulDnd',
+        // 'diffLib',
+      ],
+      draftEditor: [
+        'immutableLib',
+        'draftJs',
+        'draftJsLibIsSoftNewlineEvent',
+        'draftJsFilters',
+        'draftJsInlineToolbarPlugin',
+        'draftJsImportHtml',
+        'draftJsBlockBreakoutPlugin',
+      ],
+    },
+    appExtras: [],
+    maxResponseSize: 2000000000, // This is superagent default (200 mb)
+    serverConfig,
+    storeExtenders: [],
+    showTags: true,
+    controlpanels: [],
+    controlPanelsIcons,
+    filterControlPanels,
+    filterControlPanelsSchema,
+    externalRoutes: [
+      // URL to be considered as external
+      // {
+      //   match: {
+      //     path: '/news',
+      //     exact: false,
+      //     strict: false,
+      //   },
+      //   url(payload) {
+      //     return payload.location.pathname;
+      //   },
+      // },
+    ],
+    showSelfRegistration: false,
+    contentMetadataTagsImageField: 'image',
+    hasWorkingCopySupport: false,
+    maxUndoLevels: 200, // undo history size for the main form
+    addonsInfo: addonsInfo,
+    workflowMapping,
+    errorHandlers: [], // callables for unhandled errors
+    styleClassNameConverters,
+    hashLinkSmoothScroll: false,
+    styleClassNameExtenders,
+    querystringSearchGet: false,
+  },
+  experimental: {
+    addBlockButton: {
+      enabled: false,
+    },
+  },
+  widgets: {
+    ...widgetMapping,
+    default: defaultWidget,
+  },
+  views: {
+    layoutViews,
+    contentTypesViews,
+    defaultView,
+    errorViews,
+    layoutViewsNamesMapping,
+  },
+  blocks: {
+    requiredBlocks,
+    blocksConfig,
+    groupBlocksOrder,
+    initialBlocks,
+    initialBlocksFocus,
+    showEditBlocksInBabelView: false,
+  },
+  addonRoutes: [],
+  addonReducers: {},
+  components,
+};
+
+ConfigRegistry.settings = config.settings;
+ConfigRegistry.experimental = config.experimental;
+ConfigRegistry.blocks = config.blocks;
+ConfigRegistry.views = config.views;
+ConfigRegistry.widgets = config.widgets;
+ConfigRegistry.addonRoutes = config.addonRoutes;
+ConfigRegistry.addonReducers = config.addonReducers;
+ConfigRegistry.components = config.components;
+
+applyAddonConfiguration(ConfigRegistry);

package/src/express-middleware/files.js

@@ -2,11 +2,13 @@ import express from 'express';
 import { getAPIResourceWithAuth } from '@plone/volto/helpers';
 
 const HEADERS = [
-  'Accept-Ranges',
-  'Cache-Control',
-  'Content-Disposition',
-  'Content-Range',
-  'Content-Type',
+  'accept-ranges',
+  'cache-control',
+  'content-disposition',
+  'content-range',
+  'content-type',
+  'x-sendfile',
+  'x-accel-redirect',
 ];
 
 function filesMiddlewareFn(req, res, next) {
@@ -14,7 +16,7 @@ function filesMiddlewareFn(req, res, next) {
     .then((resource) => {
       // Just forward the headers that we need
       HEADERS.forEach((header) => {
-        if (resource.get(header)) {
+        if (resource.headers[header]) {
           res.set(header, resource.get(header));
         }
       });

package/src/express-middleware/images.js

@@ -1,7 +1,13 @@
 import express from 'express';
 import { getAPIResourceWithAuth } from '@plone/volto/helpers';
 
-const HEADERS = ['content-type', 'content-disposition', 'cache-control'];
+const HEADERS = [
+  'content-type',
+  'content-disposition',
+  'cache-control',
+  'x-sendfile',
+  'x-accel-redirect',
+];
 
 function imageMiddlewareFn(req, res, next) {
   getAPIResourceWithAuth(req)

package/src/helpers/MessageLabels/MessageLabels.js

@@ -312,6 +312,12 @@ export const messages = defineMessages({
     id: 'flush intIds and rebuild relations',
     defaultMessage: 'flush intIds and rebuild relations',
   },
+  flushAndRebuildRelationsHints: {
+    id: 'flushAndRebuildRelationsHints',
+    defaultMessage:
+      '<ul><li>Regenerate intIds (tokens of relations in relation catalog)</li><li>Rebuild relations</li></ul><p>Check the log for details!</p><p><b>Warning</b>: If you have add-ons relying on intIds, you should not flush them.</p>',
+  },
+
   addPotentialTargetsPath: {
     id: 'target path',
     defaultMessage: 'target path',

package/src/reducers/relations/relations.js

@@ -103,7 +103,7 @@ export default function relations(state = initialState, action = {}) {
                 error: null,
                 relations: action.result.relations
                   ? action.result.relations
-                  : state.relations,
+                  : [],
                 stats: null,
               },
             },

package/theme/themes/pastanaga/extras/blocks.less

@@ -22,7 +22,7 @@
 
 .block .block:not(.inner)::before {
   position: absolute;
-  z-index: -1;
+  z-index: auto;
   top: -9px;
   left: -9px;
   width: ~'calc(100% + 18px)';