@plone/volto 17.0.0-alpha.24 → 17.0.0-alpha.26

package/src/components/theme/ContentMetadataTags/ContentMetadataTags.jsx

@@ -1,6 +1,13 @@
-import React from 'react';
-import { toPublicURL, Helmet } from '@plone/volto/helpers';
+import React, { useEffect } from 'react';
+import {
+  toPublicURL,
+  Helmet,
+  hasApiExpander,
+  getBaseUrl,
+} from '@plone/volto/helpers';
+import { getNavroot } from '@plone/volto/actions';
 import config from '@plone/volto/registry';
+import { useDispatch, useSelector } from 'react-redux';
 
 const ContentMetadataTags = (props) => {
   const {
@@ -14,6 +21,17 @@ const ContentMetadataTags = (props) => {
     description,
   } = props.content;
 
+  const dispatch = useDispatch();
+  const pathname = useSelector((state) => state.router.location.pathname);
+  const navroot = useSelector((state) => state.navroot?.data?.navroot);
+  const site = useSelector((state) => state.site?.data);
+
+  useEffect(() => {
+    if (pathname && !hasApiExpander('navroot', getBaseUrl(pathname))) {
+      dispatch(getNavroot(getBaseUrl(pathname)));
+    }
+  }, [dispatch, pathname]);
+
   const getContentImageInfo = () => {
     const { contentMetadataTagsImageField } = config.settings;
     const image = props.content[contentMetadataTagsImageField];
@@ -45,10 +63,26 @@ const ContentMetadataTags = (props) => {
 
   const contentImageInfo = getContentImageInfo();
 
+  const getTitle = () => {
+    const includeSiteTitle =
+      config?.settings?.siteTitleFormat?.includeSiteTitle || false;
+    const titleAndSiteTitleSeparator =
+      config?.settings?.titleAndSiteTitleSeparator || '-';
+    const navRootTitle = navroot?.title;
+    const siteRootTitle = site?.['plone.site_title'];
+    const titlePart = navRootTitle || siteRootTitle;
+
+    if (includeSiteTitle && titlePart && titlePart !== title) {
+      return seo_title || `${title} ${titleAndSiteTitleSeparator} ${titlePart}`;
+    } else {
+      return seo_title || title;
+    }
+  };
+
   return (
     <>
       <Helmet>
-        <title>{(seo_title || title)?.replace(/\u00AD/g, '')}</title>
+        <title>{getTitle()?.replace(/\u00AD/g, '')}</title>
         <meta name="description" content={seo_description || description} />
         <meta
           property="og:title"

package/src/components/theme/Login/Login.jsx

@@ -1,14 +1,6 @@
-/**
- * Login container.
- * @module components/theme/Login/Login
- */
-
-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 { Link } from 'react-router-dom';
+import { useEffect } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { Link, useHistory, useLocation } from 'react-router-dom';
 import {
   Container,
   Button,
@@ -17,20 +9,18 @@ import {
   Segment,
   Grid,
 } from 'semantic-ui-react';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import qs from 'query-string';
-import { withRouter } from 'react-router-dom';
 
+import { Helmet } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 import { Icon } from '@plone/volto/components';
-import { login } from '@plone/volto/actions';
+import { login, resetLoginRequest } from '@plone/volto/actions';
 import { toast } from 'react-toastify';
 import { Toast } from '@plone/volto/components';
-
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
 
-import config from '@plone/volto/registry';
-
 const messages = defineMessages({
   login: {
     id: 'Log in',
@@ -76,59 +66,21 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Login class.
- * @class Login
- * @extends Component
- */
-class Login extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    login: PropTypes.func.isRequired,
-    error: PropTypes.shape({
-      message: PropTypes.string,
-    }),
-    loading: PropTypes.bool,
-    token: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
-    returnUrl: PropTypes.string,
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    error: null,
-    loading: null,
-    token: null,
-    returnUrl: null,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygEditor
-   */
-  constructor(props) {
-    super(props);
-    this.onLogin = this.onLogin.bind(this);
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.token) {
-      this.props.history.push(this.props.returnUrl || '/');
+const Login = (props) => {
+  const intl = useIntl();
+  const history = useHistory();
+  const location = useLocation();
+  const dispatch = useDispatch();
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const error = useSelector((state) => state.userSession.login.error);
+  const loading = useSelector((state) => state.userSession.login.loading);
+  const returnUrl =
+    qs.parse(props.location.search ?? location.search).return_url ||
+    location.pathname.replace(/\/login\/?$/, '').replace(/\/logout\/?$/, '') ||
+    '/';
+  useEffect(() => {
+    if (token && !props.isLogout) {
+      history.push(returnUrl || '/');
       if (toast.isActive('loggedOut')) {
         toast.dismiss('loggedOut');
       }
@@ -136,7 +88,7 @@ class Login extends Component {
         toast.dismiss('loginFailed');
       }
     }
-    if (nextProps.error) {
+    if (error) {
       if (toast.isActive('loggedOut')) {
         toast.dismiss('loggedOut');
       }
@@ -144,189 +96,155 @@ class Login extends Component {
         toast.error(
           <Toast
             error
-            title={this.props.intl.formatMessage(messages.loginFailed)}
-            content={this.props.intl.formatMessage(messages.loginFailedContent)}
+            title={intl.formatMessage(messages.loginFailed)}
+            content={intl.formatMessage(messages.loginFailedContent)}
           />,
           { autoClose: false, toastId: 'loginFailed' },
         );
       }
     }
-  }
-
-  componentWillUnmount() {
-    if (toast.isActive('loginFailed')) {
-      toast.dismiss('loginFailed');
-    }
-  }
+    return () => {
+      if (toast.isActive('loginFailed')) {
+        toast.dismiss('loginFailed');
+        dispatch(resetLoginRequest());
+      }
+    };
+  }, [dispatch, token, error, intl, history, returnUrl, props.isLogout]);
 
-  /**
-   * On login handler
-   * @method onLogin
-   * @param {Object} event Event object.
-   * @returns {undefined}
-   */
-  onLogin(event) {
-    this.props.login(
-      document.getElementsByName('login')[0].value,
-      document.getElementsByName('password')[0].value,
+  const onLogin = (event) => {
+    dispatch(
+      login(
+        document.getElementsByName('login')[0].value,
+        document.getElementsByName('password')[0].value,
+      ),
     );
     event.preventDefault();
-  }
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <div id="page-login">
-        <Helmet title={this.props.intl.formatMessage(messages.Login)} />
-        <Container text>
-          <Form method="post" onSubmit={this.onLogin}>
-            <Segment.Group raised>
-              <Segment className="primary">
-                <FormattedMessage id="Log In" defaultMessage="Login" />
-              </Segment>
-              <Segment secondary>
-                <FormattedMessage
-                  id="Sign in to start session"
-                  defaultMessage="Sign in to start session"
-                />
-              </Segment>
-              <Segment className="form">
-                <Form.Field inline className="help">
-                  <Grid>
-                    <Grid.Row stretched>
-                      <Grid.Column width="4">
-                        <div className="wrapper">
-                          <label htmlFor="login">
-                            <FormattedMessage
-                              id="Login Name"
-                              defaultMessage="Login Name"
-                            />
-                          </label>
-                        </div>
-                      </Grid.Column>
-                      <Grid.Column width="8">
-                        {/* eslint-disable jsx-a11y/no-autofocus */}
-                        <Input
-                          id="login"
-                          name="login"
-                          placeholder={this.props.intl.formatMessage(
-                            messages.loginName,
-                          )}
-                          autoFocus
-                        />
-                      </Grid.Column>
-                    </Grid.Row>
-                  </Grid>
-                </Form.Field>
-                <Form.Field inline className="help">
-                  <Grid>
-                    <Grid.Row stretched>
-                      <Grid.Column stretched width="4">
-                        <div className="wrapper">
-                          <label htmlFor="password">
-                            <FormattedMessage
-                              id="Password"
-                              defaultMessage="Password"
-                            />
-                          </label>
-                        </div>
-                      </Grid.Column>
-                      <Grid.Column stretched width="8">
-                        <Input
-                          type="password"
-                          id="password"
-                          autoComplete="current-password"
-                          name="password"
-                          placeholder={this.props.intl.formatMessage(
-                            messages.password,
-                          )}
-                          tabIndex={0}
-                        />
-                      </Grid.Column>
-                    </Grid.Row>
-                  </Grid>
-                </Form.Field>
-                <Form.Field inline className="help">
-                  <Grid>
-                    <Grid.Row stretched>
-                      {config.settings.showSelfRegistration && (
-                        <Grid.Column stretched width="12">
-                          <p className="help">
-                            <Link to="/register">
-                              {this.props.intl.formatMessage(messages.register)}
-                            </Link>
-                          </p>
-                        </Grid.Column>
-                      )}
+  return (
+    <div id="page-login">
+      <Helmet title={intl.formatMessage(messages.Login)} />
+      <Container text>
+        <Form method="post" onSubmit={onLogin}>
+          <Segment.Group raised>
+            <Segment className="primary">
+              <FormattedMessage id="Log In" defaultMessage="Login" />
+            </Segment>
+            <Segment secondary>
+              <FormattedMessage
+                id="Sign in to start session"
+                defaultMessage="Sign in to start session"
+              />
+            </Segment>
+            <Segment className="form">
+              <Form.Field inline className="help">
+                <Grid>
+                  <Grid.Row stretched>
+                    <Grid.Column width="4">
+                      <div className="wrapper">
+                        <label htmlFor="login">
+                          <FormattedMessage
+                            id="Login Name"
+                            defaultMessage="Login Name"
+                          />
+                        </label>
+                      </div>
+                    </Grid.Column>
+                    <Grid.Column width="8">
+                      {/* eslint-disable jsx-a11y/no-autofocus */}
+                      <Input
+                        id="login"
+                        name="login"
+                        placeholder={intl.formatMessage(messages.loginName)}
+                        autoFocus
+                      />
+                    </Grid.Column>
+                  </Grid.Row>
+                </Grid>
+              </Form.Field>
+              <Form.Field inline className="help">
+                <Grid>
+                  <Grid.Row stretched>
+                    <Grid.Column stretched width="4">
+                      <div className="wrapper">
+                        <label htmlFor="password">
+                          <FormattedMessage
+                            id="Password"
+                            defaultMessage="Password"
+                          />
+                        </label>
+                      </div>
+                    </Grid.Column>
+                    <Grid.Column stretched width="8">
+                      <Input
+                        type="password"
+                        id="password"
+                        autoComplete="current-password"
+                        name="password"
+                        placeholder={intl.formatMessage(messages.password)}
+                        tabIndex={0}
+                      />
+                    </Grid.Column>
+                  </Grid.Row>
+                </Grid>
+              </Form.Field>
+              <Form.Field inline className="help">
+                <Grid>
+                  <Grid.Row stretched>
+                    {config.settings.showSelfRegistration && (
                       <Grid.Column stretched width="12">
                         <p className="help">
-                          <Link to="/passwordreset">
-                            {this.props.intl.formatMessage(
-                              messages.forgotPassword,
-                            )}
+                          <Link to="/register">
+                            {intl.formatMessage(messages.register)}
                           </Link>
                         </p>
                       </Grid.Column>
-                    </Grid.Row>
-                  </Grid>
-                </Form.Field>
-              </Segment>
-              <Segment className="actions" clearing>
-                <Button
-                  basic
-                  primary
-                  icon
-                  floated="right"
-                  type="submit"
-                  id="login-form-submit"
-                  aria-label={this.props.intl.formatMessage(messages.login)}
-                  title={this.props.intl.formatMessage(messages.login)}
-                  loading={this.props.loading}
-                >
-                  <Icon className="circled" name={aheadSVG} size="30px" />
-                </Button>
+                    )}
+                    <Grid.Column stretched width="12">
+                      <p className="help">
+                        <Link to="/passwordreset">
+                          {intl.formatMessage(messages.forgotPassword)}
+                        </Link>
+                      </p>
+                    </Grid.Column>
+                  </Grid.Row>
+                </Grid>
+              </Form.Field>
+            </Segment>
+            <Segment className="actions" clearing>
+              <Button
+                basic
+                primary
+                icon
+                floated="right"
+                type="submit"
+                id="login-form-submit"
+                aria-label={intl.formatMessage(messages.login)}
+                title={intl.formatMessage(messages.login)}
+                loading={loading}
+              >
+                <Icon className="circled" name={aheadSVG} size="30px" />
+              </Button>
 
-                <Button
-                  basic
-                  secondary
-                  icon
-                  floated="right"
-                  id="login-form-cancel"
-                  as={Link}
-                  to="/"
-                  aria-label={this.props.intl.formatMessage(messages.cancel)}
-                  title={this.props.intl.formatMessage(messages.cancel)}
-                >
-                  <Icon className="circled" name={clearSVG} size="30px" />
-                </Button>
-              </Segment>
-            </Segment.Group>
-          </Form>
-        </Container>
-      </div>
-    );
-  }
-}
+              <Button
+                basic
+                secondary
+                icon
+                floated="right"
+                id="login-form-cancel"
+                as={Link}
+                to="/"
+                aria-label={intl.formatMessage(messages.cancel)}
+                title={intl.formatMessage(messages.cancel)}
+              >
+                <Icon className="circled" name={clearSVG} size="30px" />
+              </Button>
+            </Segment>
+          </Segment.Group>
+        </Form>
+      </Container>
+    </div>
+  );
+};
 
-export default compose(
-  withRouter,
-  injectIntl,
-  connect(
-    (state, props) => ({
-      error: state.userSession.login.error,
-      loading: state.userSession.login.loading,
-      token: state.userSession.token,
-      returnUrl:
-        qs.parse(props.location.search).return_url ||
-        props.location.pathname
-          .replace(/\/login\/?$/, '')
-          .replace(/\/logout\/?$/, '') ||
-        '/',
-    }),
-    { login },
-  ),
-)(Login);
+export default Login;

package/src/components/theme/Logo/Logo.Multilingual.test.jsx

@@ -14,12 +14,142 @@ beforeAll(() => {
 const mockStore = configureStore();
 
 describe('Multilingual Logo', () => {
-  it('renders a logo component with multilingual', () => {
+  it('renders a logo component in a multilingual site root', () => {
     const store = mockStore({
       intl: {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          id: 'http://localhost:3000/@navroot',
+          navroot: {
+            '@id': 'http://localhost:3000',
+            title: 'Plone Site',
+          },
+        },
+      },
+      router: {
+        location: {
+          pathname: '/',
+        },
+      },
+      site: {
+        data: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Logo />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a logo component in a multilingual site language root', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      navroot: {
+        data: {
+          id: 'http://localhost:3000/en/@navroot',
+          navroot: {
+            '@id': 'http://localhost:3000/en',
+            title: 'English',
+          },
+        },
+      },
+      router: {
+        location: {
+          pathname: '/en',
+        },
+      },
+      site: {
+        data: {
+          'plone.site_title': 'Plone Site',
+        },
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Logo />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a logo component with a custom logo in a non-root url', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      navroot: {
+        data: {
+          id: 'http://localhost:3000/en/@navroot',
+          navroot: {
+            '@id': 'http://localhost:3000/en',
+            title: 'English',
+          },
+        },
+      },
+      router: {
+        location: {
+          pathname: '/en',
+        },
+      },
+      site: {
+        data: {
+          'plone.site_logo':
+            'http://localhost:3000/@@site-logo/logo.cab945d8.svg',
+        },
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Logo />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a logo component with a custom logo in a non-root url with path', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      navroot: {
+        data: {
+          id: 'http://localhost:3000/en/@navroot',
+          navroot: {
+            '@id': 'http://localhost:3000/en',
+            title: 'English',
+          },
+        },
+      },
+      router: {
+        location: {
+          pathname: '/en/my/path',
+        },
+      },
+      site: {
+        data: {
+          'plone.site_logo':
+            'http://localhost:3000/@@site-logo/logo.cab945d8.svg',
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>