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

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/PasswordReset/RequestPasswordReset.test.jsx

@@ -6,11 +6,7 @@ import { MemoryRouter } from 'react-router-dom';
 
 import RequestPasswordReset from './RequestPasswordReset';
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 const mockStore = configureStore();
 

package/src/components/theme/PreviewImage/PreviewImage.jsx

@@ -25,7 +25,7 @@ function PreviewImage({ item, alt, image_field, showDefault = true, ...rest }) {
     return image;
   } else {
     return (
-      <img
+      <Image
         src={
           config.getComponent({
             name: 'DefaultImage',

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

@@ -6,11 +6,7 @@ import { MemoryRouter } from 'react-router-dom';
 
 import Register from './Register';
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 const mockStore = configureStore();
 

package/src/components/theme/RequestTimeout/RequestTimeout.jsx

@@ -29,7 +29,7 @@ const RequestTimeout = () => (
         <h1 style={{ textAlign: 'center', lineHeight: '40px' }}>
           <FormattedMessage
             id="No connection to the server"
-            defaultMessage="There is no connection to the server, due to a timeout o no network connection."
+            defaultMessage="There is no connection to the server, due to a timeout or no network connection."
           />
           <br />
           <a href={config.settings.apiPath}>{config.settings.apiPath}</a>

package/src/components/theme/Sitemap/Sitemap.stories.jsx

@@ -0,0 +1,82 @@
+import { injectIntl } from 'react-intl';
+import SitemapComponent from './Sitemap';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlSitemapComponent = injectIntl(SitemapComponent);
+
+function StoryComponent(args) {
+  // Add mock location object
+  const mockLocation = {
+    pathname: '/sitemap',
+    search: '',
+    hash: '',
+    state: null,
+  };
+  return (
+    <Wrapper
+      customStore={{
+        navigation: {
+          url: 'http://localhost:8080/Plone/@navigation',
+          ...args,
+        },
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlSitemapComponent
+        location={mockLocation}
+        getNavigation={() => {}}
+        lang="en"
+        items={args.items}
+      />
+    </Wrapper>
+  );
+}
+
+export const Sitemap = StoryComponent.bind({});
+Sitemap.args = {
+  items: [
+    {
+      url: 'http://localhost:8080/Plone/page-1',
+      description: '',
+      items: [
+        {
+          url: 'http://localhost:8080/Plone/page-1/page-1-2',
+          description: '',
+          title: 'Page 1-2',
+        },
+        {
+          url: 'http://localhost:8080/Plone/page-1/page-1-3',
+          description: '',
+          title: 'Page 1-3',
+        },
+      ],
+      title: 'Page 1-3',
+    },
+    {
+      url: 'http://localhost:8080/Plone/page-2',
+      description: '',
+      title: 'Page 2',
+    },
+  ],
+};
+export default {
+  title: 'Public components/Sitemap',
+  component: Sitemap,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    items: {
+      control: 'object',
+      description: 'url,description,title of the pages mentioned',
+    },
+  },
+};

package/src/components/theme/SlotRenderer/SlotRenderer.tsx

@@ -1,6 +1,10 @@
 import { useLocation } from 'react-router-dom';
 import config from '@plone/volto/registry';
-import type { Content } from '@plone/types';
+import type { GetSlotArgs } from '@plone/types';
+
+export interface SlotRendererProps extends GetSlotArgs {
+  name: string;
+}
 
 /*
 Usage:
@@ -11,20 +15,20 @@ const SlotRenderer = ({
   name,
   content,
   navRoot,
-}: {
-  name: string;
-  content: Content;
-  navRoot?: Content;
-}) => {
+  data,
+  ...rest
+}: SlotRendererProps) => {
   const location = useLocation();
 
   let slots = config.getSlot(name, {
+    ...rest,
     content,
     location: location as any, // Since we are using an older version of history, we need to cast it to any
     // This is to cover the use case while adding a new content and we don't have
     // have the navRoot information in the initial content. This will be
     // useful for SlotRenderers rendered in the `Add` route.
     navRoot: content?.['@components']?.navroot?.navroot || navRoot,
+    data,
   });
 
   if (!slots) {
@@ -45,10 +49,12 @@ const SlotRenderer = ({
           const SlotComponent = component;
           return (
             <SlotComponent
+              {...rest}
               key={name}
               content={content}
               location={location}
               navRoot={navRoot}
+              data={data}
             />
           );
         },

package/src/components/theme/Unauthorized/Unauthorized.jsx

@@ -4,41 +4,50 @@ import { Container } from 'semantic-ui-react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
-import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 
 const Unauthorized = () => {
+  const token = useSelector((state) => state.userSession.token);
   const error_message = useSelector((state) => state.apierror?.message);
   let location = useLocation();
 
   return (
     <Container className="view-wrapper">
+      <BodyClass className="view-unauthorized" />
       <h1>
         <FormattedMessage id="Unauthorized" defaultMessage="Unauthorized" />
       </h1>
       <h3>{error_message}</h3>
       <p className="description">
-        <FormattedMessage
-          id="You are trying to access a protected resource, please {login} first."
-          defaultMessage="You are trying to access a protected resource, please {login} first."
-          values={{
-            login: (
-              <Link
-                to={{
-                  pathname: `${getBaseUrl(location.pathname)}/login`,
-                  state: {
-                    // This is needed to cover the use case of being logged in in
-                    // another backend (eg. in development), having a token for
-                    // localhost and try to use it, the login route has to know that
-                    // it's the same as it comes from a logout
-                    isLogout: true,
-                  },
-                }}
-              >
-                <FormattedMessage id="log in" defaultMessage="log in" />
-              </Link>
-            ),
-          }}
-        />
+        {token ? (
+          <FormattedMessage
+            id="You are trying to access a protected resource."
+            defaultMessage="You are trying to access a protected resource."
+          />
+        ) : (
+          <FormattedMessage
+            id="You are trying to access a protected resource, please {login} first."
+            defaultMessage="You are trying to access a protected resource, please {login} first."
+            values={{
+              login: (
+                <Link
+                  to={{
+                    pathname: `${location.pathname.replace(/\/$/, '')}/login`,
+                    state: {
+                      // This is needed to cover the use case of being logged in in
+                      // another backend (eg. in development), having a token for
+                      // localhost and try to use it, the login route has to know that
+                      // it's the same as it comes from a logout
+                      isLogout: true,
+                    },
+                  }}
+                >
+                  <FormattedMessage id="log in" defaultMessage="log in" />
+                </Link>
+              ),
+            }}
+          />
+        )}
       </p>
       <p>
         <FormattedMessage
@@ -62,5 +71,6 @@ const Unauthorized = () => {
     </Container>
   );
 };
-
-export default withServerErrorCode(401)(Unauthorized);
+const UnauthorizedWithCode = withServerErrorCode(401)(Unauthorized);
+UnauthorizedWithCode.displayName = 'unauthorized';
+export default UnauthorizedWithCode;

package/src/components/theme/Unauthorized/Unauthorized.test.jsx

@@ -9,8 +9,35 @@ import Unauthorized from './Unauthorized';
 const mockStore = configureStore();
 
 describe('Unauthorized', () => {
-  it('renders a not found component', () => {
+  it('renders an unauthorized component', () => {
     const store = mockStore({
+      userSession: {
+        token: null,
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      apierror: {
+        message: 'You are not authorized to access this resource',
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Unauthorized />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders an unauthorized component for authenticated user', () => {
+    const store = mockStore({
+      userSession: {
+        token: '1234',
+      },
       intl: {
         locale: 'en',
         messages: {},