@plone/volto 17.0.0-alpha.8 → 17.0.0

package/src/components/theme/NotFound/NotFound.jsx

@@ -1,53 +1,67 @@
-/**
- * Home container.
- * @module components/theme/NotFound/NotFound
- */
-
-import React from 'react';
+import { useEffect } from 'react';
+import { BodyClass, toBackendLang } from '@plone/volto/helpers';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { Container } from 'semantic-ui-react';
 import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
+import { useDispatch, useSelector } from 'react-redux';
+import { getNavigation } from '@plone/volto/actions';
+import config from '@plone/volto/registry';
 
 /**
  * Not found function.
  * @function NotFound
  * @returns {string} Markup of the not found page.
  */
-const NotFound = () => (
-  <Container className="view-wrapper">
-    <h1>
-      <FormattedMessage
-        id="This page does not seem to exist…"
-        defaultMessage="This page does not seem to exist…"
-      />
-    </h1>
-    <p className="description">
-      <FormattedMessage
-        id="We apologize for the inconvenience, but the page you were trying to access is not at this address. You can use the links below to help you find what you are looking for."
-        defaultMessage="We apologize for the inconvenience, but the page you were trying to access is not at this address. You can use the links below to help you find what you are looking for."
-      />
-    </p>
-    <p>
-      <FormattedMessage
-        id="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
-        defaultMessage="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
-        values={{
-          site_admin: (
-            <Link to="/contact-form">
-              <FormattedMessage
-                id="Site Administration"
-                defaultMessage="Site Administration"
-              />
-            </Link>
-          ),
-        }}
-      />
-    </p>
-    <p>
-      <FormattedMessage id="Thank you." defaultMessage="Thank you." />
-    </p>
-  </Container>
-);
+const NotFound = () => {
+  const dispatch = useDispatch();
+  const lang = useSelector((state) => state.intl.locale);
+
+  useEffect(() => {
+    dispatch(
+      getNavigation(
+        config.settings.isMultilingual ? `/${toBackendLang(lang)}` : '/',
+        config.settings.navDepth,
+      ),
+    );
+  }, [dispatch, lang]);
+
+  return (
+    <Container className="view-wrapper">
+      <BodyClass className="page-not-found" />
+      <h1>
+        <FormattedMessage
+          id="This page does not seem to exist…"
+          defaultMessage="This page does not seem to exist…"
+        />
+      </h1>
+      <p className="description">
+        <FormattedMessage
+          id="We apologize for the inconvenience, but the page you were trying to access is not at this address. You can use the links below to help you find what you are looking for."
+          defaultMessage="We apologize for the inconvenience, but the page you were trying to access is not at this address. You can use the links below to help you find what you are looking for."
+        />
+      </p>
+      <p>
+        <FormattedMessage
+          id="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
+          defaultMessage="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
+          values={{
+            site_admin: (
+              <Link to="/contact-form">
+                <FormattedMessage
+                  id="Site Administration"
+                  defaultMessage="Site Administration"
+                />
+              </Link>
+            ),
+          }}
+        />
+      </p>
+      <p>
+        <FormattedMessage id="Thank you." defaultMessage="Thank you." />
+      </p>
+    </Container>
+  );
+};
 
 export default withServerErrorCode(404)(NotFound);

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

@@ -50,8 +50,8 @@ const messages = defineMessages({
     defaultMessage: 'New password',
   },
   passwordDescription: {
-    id: 'Enter your new password. Minimum 5 characters.',
-    defaultMessage: 'Enter your new password. Minimum 5 characters.',
+    id: 'Enter your new password. Minimum 8 characters.',
+    defaultMessage: 'Enter your new password. Minimum 8 characters.',
   },
   passwordRepeatTitle: {
     id: 'Confirm password',
@@ -79,8 +79,7 @@ const messages = defineMessages({
     defaultMessage: 'Account activation completed',
   },
   successRedirectToLoginBody: {
-    id:
-      'Your password has been set successfully. You may now {link} with your new password.',
+    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.',
   },
@@ -227,6 +226,9 @@ class PasswordReset extends Component {
       );
     }
     if (this.props.token) {
+      const errmsg = this.props.error
+        ? this.props.error.response.body.error
+        : null;
       return (
         <div id="page-password-reset">
           <Helmet
@@ -238,7 +240,7 @@ class PasswordReset extends Component {
               description={this.props.intl.formatMessage(messages.description)}
               onSubmit={this.onSubmit}
               onCancel={this.onCancel}
-              error={this.state.error || this.props.error}
+              error={this.state.error || errmsg}
               schema={{
                 fieldsets: [
                   {

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/components/theme/PreviewImage/PreviewImage.jsx

@@ -1,34 +1,50 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
-import { flattenToAppURL } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
 
 /**
  * Renders a preview image for a catalog brain result item.
- *
  */
-function PreviewImage(props) {
-  const { item, size = 'preview', alt, ...rest } = props;
-  const src = item.image_field
-    ? flattenToAppURL(`${item['@id']}/@@images/${item.image_field}/${size}`)
-    : config.getComponent({
-        name: 'DefaultImage',
-        dependencies: ['listing', 'summary'],
-      }).component || DefaultImageSVG;
-
-  return <img src={src} alt={alt ?? item.title} {...rest} />;
+function PreviewImage({ item, alt, image_field, showDefault = true, ...rest }) {
+  const Image = config.getComponent({ name: 'Image' }).component;
+
+  const image = (
+    <Image item={item} image_field={image_field} alt={alt} {...rest} />
+  );
+
+  if (!image && !showDefault) return null;
+
+  if (image) {
+    return image;
+  } else {
+    return (
+      <img
+        src={
+          config.getComponent({
+            name: 'DefaultImage',
+            dependencies: ['listing', 'summary'],
+          }).component || DefaultImageSVG
+        }
+        alt={alt}
+        {...rest}
+        width="400"
+        height="300"
+      />
+    );
+  }
 }
 
 PreviewImage.propTypes = {
-  size: PropTypes.string,
   item: PropTypes.shape({
     '@id': PropTypes.string.isRequired,
-    image_field: PropTypes.string,
     title: PropTypes.string.isRequired,
+    image_field: PropTypes.string,
+    image_scales: PropTypes.object,
+    showDefault: PropTypes.bool,
   }),
+  alt: PropTypes.string.isRequired,
 };
 
 export default PreviewImage;

package/src/components/theme/PreviewImage/PreviewImage.test.js

@@ -7,10 +7,28 @@ describe('PreviewImage', () => {
   it('renders a preview image', () => {
     const item = {
       image_field: 'image',
+      image_scales: {
+        image: [
+          {
+            download: '@@images/image',
+            width: 400,
+            height: 400,
+            scales: {
+              preview: {
+                download: '@@images/image-400.png',
+                width: 400,
+                height: 400,
+              },
+            },
+          },
+        ],
+      },
       title: 'Item title',
       '@id': 'http://localhost:3000/something',
     };
-    const component = renderer.create(<PreviewImage item={item} />);
+    const component = renderer.create(
+      <PreviewImage item={item} alt={item.title} />,
+    );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
@@ -18,70 +36,92 @@ describe('PreviewImage', () => {
   it('renders a preview image with extra props', () => {
     const item = {
       image_field: 'image',
+      image_scales: {
+        image: [
+          {
+            download: '@@images/image',
+            width: 400,
+            height: 400,
+            scales: {
+              preview: {
+                download: '@@images/image-400.png',
+                width: 400,
+                height: 400,
+              },
+            },
+          },
+        ],
+      },
       title: 'Item title',
       '@id': 'http://localhost:3000/something',
     };
     const component = renderer.create(
-      <PreviewImage item={item} className="extra" />,
+      <PreviewImage item={item} alt={item.title} className="extra" />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
-  it('renders a preview image with custom size', () => {
+  it('renders a fallback image', () => {
     const item = {
-      image_field: 'image',
       title: 'Item title',
       '@id': 'http://localhost:3000/something',
     };
     const component = renderer.create(
-      <PreviewImage item={item} size="large" />,
+      <PreviewImage item={item} alt={item.title} />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
-  it('renders a fallback image', () => {
+  it('renders a fallback image with extra props', () => {
     const item = {
       title: 'Item title',
       '@id': 'http://localhost:3000/something',
     };
-    const component = renderer.create(<PreviewImage item={item} />);
+    const component = renderer.create(
+      <PreviewImage item={item} alt={item.title} className="extra" />,
+    );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
-  it('renders a fallback image with extra props', () => {
+  it('renders a fallback image with alt prop empty', () => {
     const item = {
       title: 'Item title',
       '@id': 'http://localhost:3000/something',
     };
     const component = renderer.create(
-      <PreviewImage item={item} className="extra" />,
+      <PreviewImage item={item} className="extra" alt="" />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
-  it('renders a fallback image with alt prop empty', () => {
+  it('renders a fallback image with alt prop', () => {
     const item = {
       title: 'Item title',
       '@id': 'http://localhost:3000/something',
     };
     const component = renderer.create(
-      <PreviewImage item={item} className="extra" alt="" />,
+      <PreviewImage item={item} className="extra" alt="Alt prop" />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
-  it('renders a fallback image with alt prop', () => {
+  it('not renders a fallback image if showDefault prop is false', () => {
     const item = {
       title: 'Item title',
       '@id': 'http://localhost:3000/something',
     };
     const component = renderer.create(
-      <PreviewImage item={item} className="extra" alt="Alt prop" />,
+      <PreviewImage
+        item={item}
+        className="extra"
+        showDefault={false}
+        alt={item.title}
+      />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();

package/src/components/theme/Register/Register.jsx

@@ -37,8 +37,7 @@ const messages = defineMessages({
     defaultMessage: 'E-mail',
   },
   emailDescription: {
-    id:
-      'Enter an email address. This will be your login name. We respect your privacy, and will not give the address away to any third parties or expose it anywhere.',
+    id: 'Enter an email address. This will be your login name. We respect your privacy, and will not give the address away to any third parties or expose it anywhere.',
     defaultMessage:
       'Enter an email address. This will be your login name. We respect your privacy, and will not give the address away to any third parties or expose it anywhere.',
   },
@@ -47,8 +46,7 @@ const messages = defineMessages({
     defaultMessage: 'Account Registration Completed',
   },
   successRegisterCompletedBody: {
-    id:
-      'The registration process has been successful. Please check your e-mail inbox for information on how activate your account.',
+    id: 'The registration process has been successful. Please check your e-mail inbox for information on how activate your account.',
     defaultMessage:
       'The registration process has been successful. Please check your e-mail inbox for information on how activate your account.',
   },