@plone/volto 16.22.0 → 16.22.2

package/src/components/manage/Controlpanels/Groups/RenderGroups.jsx

@@ -57,7 +57,7 @@ class RenderGroups extends Component {
    * @memberof UsersControlpanelUser
    */
   onChange(event, { value }) {
-    const [group, role] = value.split('.');
+    const [group, role] = value.split('&role=');
     this.props.updateGroups(group, role);
   }
 
@@ -97,7 +97,7 @@ class RenderGroups extends Component {
                     : this.props.group.roles.includes(role.id)
                 }
                 onChange={this.onChange}
-                value={`${this.props.group.id}.${role.id}`}
+                value={`${this.props.group.id}&role=${role.id}`}
               />
             )}
           </Table.Cell>

package/src/components/manage/Controlpanels/Users/RenderUsers.jsx

@@ -53,7 +53,7 @@ class RenderUsers extends Component {
    */
 
   onChange(event, { value }) {
-    const [user, role] = value.split('.');
+    const [user, role] = value.split('&role=');
     this.props.updateUser(user, role);
   }
   /**
@@ -83,7 +83,7 @@ class RenderUsers extends Component {
               <Checkbox
                 checked={this.props.user.roles.includes(role.id)}
                 onChange={this.onChange}
-                value={`${this.props.user.id}.${role.id}`}
+                value={`${this.props.user.id}&role=${role.id}`}
               />
             )}
           </Table.Cell>

package/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx

@@ -107,6 +107,7 @@ class UsersControlpanel extends Component {
       isClient: false,
       currentPage: 0,
       pageSize: 10,
+      loginUsingEmail: false,
     };
   }
 
@@ -122,6 +123,14 @@ class UsersControlpanel extends Component {
     }
   };
 
+  // Because username field needs to be disabled if email login is enabled!
+  checkLoginUsingEmailStatus = async () => {
+    await this.props.getControlpanel('security');
+    this.setState({
+      loginUsingEmail: this.props.controlPanelData?.data.use_email_as_login,
+    });
+  };
+
   /**
    * Component did mount
    * @method componentDidMount
@@ -132,6 +141,7 @@ class UsersControlpanel extends Component {
       isClient: true,
     });
     this.fetchData();
+    this.checkLoginUsingEmailStatus();
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -425,7 +435,7 @@ class UsersControlpanel extends Component {
                     id: 'default',
                     title: 'FIXME: User Data',
                     fields: [
-                      'username',
+                      ...(!this.state.loginUsingEmail ? ['username'] : []),
                       'fullname',
                       'email',
                       'password',
@@ -436,15 +446,19 @@ class UsersControlpanel extends Component {
                   },
                 ],
                 properties: {
-                  username: {
-                    title: this.props.intl.formatMessage(
-                      messages.addUserFormUsernameTitle,
-                    ),
-                    type: 'string',
-                    description: this.props.intl.formatMessage(
-                      messages.addUserFormUsernameDescription,
-                    ),
-                  },
+                  ...(!this.state.loginUsingEmail
+                    ? {
+                        username: {
+                          title: this.props.intl.formatMessage(
+                            messages.addUserFormUsernameTitle,
+                          ),
+                          type: 'string',
+                          description: this.props.intl.formatMessage(
+                            messages.addUserFormUsernameDescription,
+                          ),
+                        },
+                      }
+                    : {}),
                   fullname: {
                     title: this.props.intl.formatMessage(
                       messages.addUserFormFullnameTitle,
@@ -670,6 +684,7 @@ export default compose(
       createRequest: state.users.create,
       loadRolesRequest: state.roles,
       inheritedRole: state.authRole.authenticatedRole,
+      controlPanelData: state.controlpanels?.controlpanel,
     }),
     (dispatch) =>
       bindActionCreators(

package/src/components/manage/Diff/DiffField.jsx

@@ -17,6 +17,7 @@ import { useSelector } from 'react-redux';
 import { Api } from '@plone/volto/helpers';
 import configureStore from '@plone/volto/store';
 import { DefaultView } from '@plone/volto/components/';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
 
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
@@ -69,7 +70,7 @@ const DiffField = ({
             .replace('\u202F', ' '),
         );
         break;
-      case 'json':
+      case 'json': {
         const api = new Api();
         const history = createBrowserHistory();
         const store = configureStore(window.__data, history, api);
@@ -90,6 +91,29 @@ const DiffField = ({
           ),
         );
         break;
+      }
+      case 'slate': {
+        const api = new Api();
+        const history = createBrowserHistory();
+        const store = configureStore(window.__data, history, api);
+        parts = diffWords(
+          ReactDOMServer.renderToStaticMarkup(
+            <Provider store={store}>
+              <ConnectedRouter history={history}>
+                {serializeNodes(one)}
+              </ConnectedRouter>
+            </Provider>,
+          ),
+          ReactDOMServer.renderToStaticMarkup(
+            <Provider store={store}>
+              <ConnectedRouter history={history}>
+                {serializeNodes(two)}
+              </ConnectedRouter>
+            </Provider>,
+          ),
+        );
+        break;
+      }
       case 'textarea':
       default:
         parts = diffWords(one, two);

package/src/components/manage/Sharing/Sharing.jsx

@@ -246,9 +246,9 @@ class SharingComponent extends Component {
    * @returns {undefined}
    */
   onToggleInherit() {
-    this.setState({
-      inherit: !this.state.inherit,
-    });
+    this.setState((state) => ({
+      inherit: !state.inherit,
+    }));
   }
 
   /**
@@ -404,9 +404,15 @@ class SharingComponent extends Component {
               <Segment attached>
                 <Form.Field>
                   <Checkbox
-                    checked={this.state.inherit}
+                    id="inherit-permissions-checkbox"
+                    name="inherit-permissions-checkbox"
+                    defaultChecked={this.state.inherit}
                     onChange={this.onToggleInherit}
-                    label={this.props.intl.formatMessage(messages.inherit)}
+                    label={
+                      <label htmlFor="inherit-permissions-checkbox">
+                        {this.props.intl.formatMessage(messages.inherit)}
+                      </label>
+                    }
                   />
                 </Form.Field>
                 <p className="help">

package/src/components/manage/Widgets/FormFieldWrapper.jsx

@@ -96,7 +96,7 @@ class FormFieldWrapper extends Component {
         {this.props.children}
 
         {map(error, (message) => (
-          <Label key={message} basic color="red" pointing>
+          <Label key={message} basic color="red" className="form-error-label">
             {message}
           </Label>
         ))}

package/src/components/manage/Widgets/SelectUtils.js

@@ -111,7 +111,7 @@ export function normalizeValue(choices, value, intl) {
 
   if (Array.isArray(value)) {
     // a list of values, like ['foo', 'bar'];
-    return value.map((v) => normalizeValue(choices, v));
+    return value.map((v) => normalizeValue(choices, v, intl));
   }
 
   if (isObject(value)) {

package/src/components/theme/Error/ServerError.jsx

@@ -0,0 +1,29 @@
+/**
+ * @module components/theme/Error/ServerError
+ */
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Container } from 'semantic-ui-react';
+import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
+
+/**
+ * server error
+ * @function ServerError
+ * @returns {string} Markup of the server error page.
+ */
+const ServerError = () => (
+  <Container className="view-wrapper">
+    <h1>
+      <FormattedMessage id="Server Error" defaultMessage="Server Error" />
+    </h1>
+    <p className="description">
+      <FormattedMessage
+        id="We apologize for the inconvenience, but there was an unexpected error on the server."
+        defaultMessage="We apologize for the inconvenience, but there was an unexpected error on the server."
+      />
+    </p>
+  </Container>
+);
+
+export default withServerErrorCode(500)(ServerError);

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

@@ -22,6 +22,13 @@ const messages = defineMessages({
     defaultMessage: 'Sitemap',
   },
 });
+
+export function getSitemapPath(pathname = '', lang) {
+  const prefix = pathname.replace(/\/sitemap$/gm, '').replace(/^\//, '');
+  const path = prefix || lang || '';
+  return path;
+}
+
 /**
  * Sitemap class.
  * @class Sitemap
@@ -39,11 +46,13 @@ class Sitemap extends Component {
 
   componentDidMount() {
     const { settings } = config;
-    if (settings.isMultilingual) {
-      this.props.getNavigation(`${toBackendLang(this.props.lang)}`, 4);
-    } else {
-      this.props.getNavigation('', 4);
-    }
+
+    const lang = settings.isMultilingual
+      ? `${toBackendLang(this.props.lang)}`
+      : null;
+
+    const path = getSitemapPath(this.props.location.pathname, lang);
+    this.props.getNavigation(path, 4);
   }
 
   /**
@@ -105,15 +114,17 @@ export default compose(
     {
       key: 'navigation',
       promise: ({ location, store: { dispatch, getState } }) => {
+        if (!__SERVER__) return;
         const { settings } = config;
-        const lang = getState().intl.locale;
-        if (settings.isMultilingual) {
-          return (
-            __SERVER__ && dispatch(getNavigation(`${toBackendLang(lang)}`, 4))
-          );
-        } else {
-          return __SERVER__ && dispatch(getNavigation('', 4));
-        }
+
+        const path = getSitemapPath(
+          location.pathname,
+          settings.isMultilingual
+            ? toBackendLang(getState().intl.locale)
+            : null,
+        );
+
+        return dispatch(getNavigation(path, 4));
       },
     },
   ]),

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

@@ -4,7 +4,7 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 
-import { __test__ as Sitemap } from './Sitemap';
+import { __test__ as Sitemap, getSitemapPath } from './Sitemap';
 
 const mockStore = configureStore();
 
@@ -46,7 +46,7 @@ describe('Sitemap', () => {
     const component = renderer.create(
       <Provider store={store}>
         <MemoryRouter>
-          <Sitemap />
+          <Sitemap location={{ pathname: '/page-1' }} />
         </MemoryRouter>
       </Provider>,
     );
@@ -54,3 +54,24 @@ describe('Sitemap', () => {
     expect(json).toMatchSnapshot();
   });
 });
+
+describe('getSitemapPath', () => {
+  it('accepts empty path', () => {
+    expect(getSitemapPath('', null)).toBe('');
+  });
+
+  it('accepts a path', () => {
+    expect(getSitemapPath('/page-1/sitemap', null)).toBe('page-1');
+  });
+  it('accepts a path', () => {
+    expect(getSitemapPath('/page-1/sitemap', null)).toBe('page-1');
+  });
+
+  it('uses a language as default root', () => {
+    expect(getSitemapPath('/', 'de')).toBe('de');
+  });
+
+  it('accepts language-rooted paths', () => {
+    expect(getSitemapPath('/de/mission', 'de')).toBe('de/mission');
+  });
+});

package/src/config/Views.jsx

@@ -16,6 +16,7 @@ import RequestTimeout from '@plone/volto/components/theme/RequestTimeout/Request
 import AlbumView from '@plone/volto/components/theme/View/AlbumView';
 import Unauthorized from '@plone/volto/components/theme/Unauthorized/Unauthorized';
 import Forbidden from '@plone/volto/components/theme/Forbidden/Forbidden';
+import ServerError from '@plone/volto/components/theme/Error/ServerError';
 
 const EventView = loadable(() =>
   import('@plone/volto/components/theme/View/EventView'),
@@ -114,6 +115,7 @@ export const errorViews = {
   '401': Unauthorized,
   '403': Forbidden,
   '408': RequestTimeout,
+  '500': ServerError,
   ECONNREFUSED: ConnectionRefused,
   corsError: CorsError,
 };

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/middleware/api.js

@@ -250,10 +250,22 @@ const apiMiddlewareFactory = (api) => ({ dispatch, getState }) => (next) => (
             };
           });
         }
-        return next({ ...rest, result, type: `${type}_SUCCESS` });
+        try {
+          return next({ ...rest, result, type: `${type}_SUCCESS` });
+        } catch (error) {
+          // There was an exception while processing reducers or downstream middleware.
+          next({
+            ...rest,
+            error: { status: 500, error },
+            type: `${type}_FAIL`,
+          });
+          // Rethrow the original exception on the client side only,
+          // so it doesn't fall through to express on the server.
+          if (__CLIENT__) throw error;
+        }
       },
       (error) => {
-        // Only SRR can set ECONNREFUSED
+        // Only SSR can set ECONNREFUSED
         if (error.code === 'ECONNREFUSED') {
           next({
             ...rest,

package/src/reducers/actions/actions.js

@@ -57,11 +57,13 @@ export default function actions(state = initialState, action = {}) {
       }
       return state;
     case `${LIST_ACTIONS}_SUCCESS`:
-      hasExpander = hasApiExpander(
-        'actions',
-        getBaseUrl(flattenToAppURL(action.result['@id'])),
-      );
-      if (!hasExpander) {
+      // Even if the expander is set or not, if the LIST_ACTIONS is
+      // called, we want it to store the data if the actions data is
+      // not set in the expander data (['@components']) but in the "normal"
+      // action result (we look for the object property returned by the endpoint)
+      // Unfortunately, this endpoint returns all the actions in a plain object
+      // with no structure :(
+      if (action.result.object) {
         return {
           ...state,
           error: null,

package/src/reducers/actions/actions.test.js

@@ -207,4 +207,74 @@ describe('Actions reducer - (ACTIONS)GET_CONTENT', () => {
       loading: false,
     });
   });
+
+  it('should handle (ACTIONS)LIST_ACTIONS (standalone with apiExpander enabled)', () => {
+    expect(
+      actions(undefined, {
+        type: `${LIST_ACTIONS}_SUCCESS`,
+        result: {
+          object: [],
+          object_buttons: [],
+          site_actions: [],
+          user: [
+            {
+              icon: '',
+              id: 'preferences',
+              title: 'Preferences',
+            },
+            {
+              icon: '',
+              id: 'dashboard',
+              title: 'Dashboard',
+            },
+            {
+              icon: '',
+              id: 'plone_setup',
+              title: 'Site Setup',
+            },
+            {
+              icon: '',
+              id: 'logout',
+              title: 'Log out',
+            },
+          ],
+          document_actions: [],
+          portal_tabs: [],
+        },
+      }),
+    ).toEqual({
+      error: null,
+      actions: {
+        object: [],
+        object_buttons: [],
+        site_actions: [],
+        user: [
+          {
+            icon: '',
+            id: 'preferences',
+            title: 'Preferences',
+          },
+          {
+            icon: '',
+            id: 'dashboard',
+            title: 'Dashboard',
+          },
+          {
+            icon: '',
+            id: 'plone_setup',
+            title: 'Site Setup',
+          },
+          {
+            icon: '',
+            id: 'logout',
+            title: 'Log out',
+          },
+        ],
+        document_actions: [],
+        portal_tabs: [],
+      },
+      loaded: true,
+      loading: false,
+    });
+  });
 });

package/src/server.jsx

@@ -263,6 +263,15 @@ server.get('/*', (req, res) => {
       const readCriticalCss =
         config.settings.serverConfig.readCriticalCss || defaultReadCriticalCss;
 
+      // If we are showing an "old browser" warning,
+      // make sure it doesn't get cached in a shared cache
+      const browserdetect = store.getState().browserdetect;
+      if (config.settings.notSupportedBrowsers.includes(browserdetect?.name)) {
+        res.set({
+          'Cache-Control': 'private',
+        });
+      }
+
       if (context.url) {
         res.redirect(flattenToAppURL(context.url));
       } else if (context.error_code) {

package/styles/Vocab/Plone/accept.txt

@@ -1,10 +1,17 @@
+-{0,1}plone-{0,1}
+-{0,1}volto-{0,1}
 `plone.restapi`
 `plone.volto`
+[Aa]sync
+[Bb]ackend
+JavaScript
 npm
+nvm
+Pastanaga
 Plone
 Razzle
 RichText
+Sass
 Volto
+Vue
 Zope
-JavaScript
-NodeJS

package/styles/Vocab/Plone/reject.txt

@@ -1,5 +1,2 @@
-node
-nodejs
-javascript
-js
-Javascript
+[^.]js
+NodeJS

package/theme/themes/pastanaga/collections/form.overrides

@@ -49,6 +49,52 @@
   }
 }
 
+.ui.form .fields.error .field textarea,
+.ui.form .fields.error .field select,
+.ui.form .fields.error .field input:not([type]),
+.ui.form .fields.error .field input[type='date'],
+.ui.form .fields.error .field input[type='datetime-local'],
+.ui.form .fields.error .field input[type='email'],
+.ui.form .fields.error .field input[type='number'],
+.ui.form .fields.error .field input[type='password'],
+.ui.form .fields.error .field input[type='search'],
+.ui.form .fields.error .field input[type='tel'],
+.ui.form .fields.error .field input[type='time'],
+.ui.form .fields.error .field input[type='text'],
+.ui.form .fields.error .field input[type='file'],
+.ui.form .fields.error .field input[type='url'],
+.ui.form .field.error textarea,
+.ui.form .field.error select,
+.ui.form .field.error input:not([type]),
+.ui.form .field.error input[type='date'],
+.ui.form .field.error input[type='datetime-local'],
+.ui.form .field.error input[type='email'],
+.ui.form .field.error input[type='number'],
+.ui.form .field.error input[type='password'],
+.ui.form .field.error input[type='search'],
+.ui.form .field.error input[type='tel'],
+.ui.form .field.error input[type='time'],
+.ui.form .field.error input[type='text'],
+.ui.form .field.error input[type='file'],
+.ui.form .field.error input[type='url'],
+.ui.form .field.error textarea:focus,
+.ui.form .field.error select:focus,
+.ui.form .field.error input:not([type]):focus,
+.ui.form .field.error input[type='date']:focus,
+.ui.form .field.error input[type='datetime-local']:focus,
+.ui.form .field.error input[type='email']:focus,
+.ui.form .field.error input[type='number']:focus,
+.ui.form .field.error input[type='password']:focus,
+.ui.form .field.error input[type='search']:focus,
+.ui.form .field.error input[type='tel']:focus,
+.ui.form .field.error input[type='time']:focus,
+.ui.form .field.error input[type='text']:focus,
+.ui.form .field.error input[type='file']:focus,
+.ui.form .field.error input[type='url']:focus {
+  border-color: #d01157;
+  background: none;
+}
+
 .ui.form .field > .selection.dropdown {
   height: 60px;
 }

package/theme/themes/pastanaga/elements/input.overrides

@@ -6,6 +6,12 @@
   font-weight: @inputFontWeight;
 }
 
+/* This aligns the height of the field name label to the other side in case
+of an error is present, it overrides a default from SemanticUI grid definitions. */
+.ui.grid > .stretched.row > .column > .wrapper {
+  flex-grow: 0;
+}
+
 .inline.field {
   .wrapper {
     display: flex;

package/theme/themes/pastanaga/elements/label.overrides

@@ -6,3 +6,13 @@
     margin: 0em 0em 0em 0.75em;
   }
 }
+
+.ui.form {
+  .ui.basic.red.label.form-error-label {
+    padding-left: 0;
+    border: none;
+    margin-top: 0;
+    color: #d01157 !important;
+    font-weight: normal;
+  }
+}