@plone/volto 18.0.0-alpha.40 → 18.0.0-alpha.42

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

@@ -37,7 +37,6 @@ import {
   FREQUENCES,
   WEEKLY_DAYS,
   MONDAYFRIDAY_DAYS,
-  toISOString,
   rrulei18n,
 } from './Utils';
 
@@ -219,26 +218,40 @@ class RecurrenceWidget extends Component {
 
   componentDidUpdate(prevProps) {
     if (this.props.value) {
-      if (prevProps.formData?.start !== this.props.formData?.start) {
-        let start = this.getUTCDate(this.props.formData?.start)
-          .startOf('day')
-          .toDate();
-
-        this.setState((prevState) => {
-          let rruleSet = prevState.rruleSet;
-
-          rruleSet = this.updateRruleSet(
-            rruleSet,
-            prevState.formValues,
-            'dtstart',
-            start,
-          );
-
-          return {
-            ...prevState,
-            rruleSet,
-          };
-        });
+      const changedStart =
+        prevProps.formData?.start !== this.props.formData?.start;
+      const changedEnd = prevProps.formData?.end !== this.props.formData?.end;
+
+      if (changedStart || changedEnd) {
+        let start = this.getUTCDate(this.props.formData?.start).toDate();
+
+        let changeFormValues = {};
+        if (changedEnd) {
+          changeFormValues.until = this.getUTCDate(
+            this.props.formData?.end,
+          ).toDate();
+        }
+        this.setState(
+          (prevState) => {
+            let rruleSet = prevState.rruleSet;
+
+            rruleSet = this.updateRruleSet(
+              rruleSet,
+              { ...prevState.formValues, ...changeFormValues },
+              'dtstart',
+              start,
+            );
+
+            return {
+              ...prevState,
+              rruleSet,
+            };
+          },
+          () => {
+            //then, after set state, set recurrence rrule value
+            this.saveRrule();
+          },
+        );
       }
     }
   }
@@ -250,7 +263,8 @@ class RecurrenceWidget extends Component {
   setRecurrenceStartEnd = () => {
     const start = this.props.formData?.start;
 
-    let _start = this.getUTCDate(start).startOf('day').toDate();
+    // The `start` date from Plone is in UTC
+    const _start = new Date(start);
 
     this.setState((prevState) => {
       let rruleSet = prevState.rruleSet;
@@ -339,7 +353,7 @@ class RecurrenceWidget extends Component {
           case 'until':
             if (value != null) {
               formValues['recurrenceEnds'] = option;
-              formValues[option] = toISOString(value);
+              formValues[option] = value;
             }
             break;
           case 'byweekday':
@@ -422,7 +436,24 @@ class RecurrenceWidget extends Component {
           }
           break;
         case 'until':
-          value = value ? this.moment(new Date(value)).utc().toDate() : null;
+          let mDate = null;
+          if (value) {
+            mDate = this.moment(new Date(value));
+            if (typeof value === 'string') {
+              mDate = this.moment(new Date(value));
+            } else {
+              //object-->Date()
+              mDate = this.moment(value);
+            }
+
+            if (this.props.formData.end) {
+              //set time from formData.end
+              const mEnd = this.moment(new Date(this.props.formData.end));
+              mDate.set('hour', mEnd.get('hour'));
+              mDate.set('minute', mEnd.get('minute'));
+            }
+          }
+          value = value ? mDate.toDate() : null;
           break;
         default:
           break;
@@ -447,7 +478,7 @@ class RecurrenceWidget extends Component {
         ? value
         : rruleSet.dtstart()
           ? rruleSet.dtstart()
-          : this.moment().utc().toDate();
+          : new Date();
     var exdates =
       field === 'exdates' ? value : Object.assign([], rruleSet.exdates());
 
@@ -470,13 +501,14 @@ class RecurrenceWidget extends Component {
 
   getDefaultUntil = (freq) => {
     const moment = this.moment;
+
     var end = this.props.formData?.end
-      ? toISOString(this.getUTCDate(this.props.formData.end).toDate())
+      ? moment(new Date(this.props.formData.end))
       : null;
-    var tomorrow = toISOString(moment().add(1, 'days').utc().toDate());
-    var nextWeek = toISOString(moment().add(7, 'days').utc().toDate());
-    var nextMonth = toISOString(moment().add(1, 'months').utc().toDate());
-    var nextYear = toISOString(moment().add(1, 'years').utc().toDate());
+    var tomorrow = moment().add(1, 'days');
+    var nextWeek = moment().add(7, 'days');
+    var nextMonth = moment().add(1, 'months');
+    var nextYear = moment().add(1, 'years');
 
     var until = end;
     switch (freq) {
@@ -502,6 +534,19 @@ class RecurrenceWidget extends Component {
         break;
     }
 
+    if (this.props.formData.end) {
+      //set default end time
+      until.set('hour', end.get('hour'));
+      until.set('minute', end.get('minute'));
+    }
+    until = new Date(
+      until.get('year'),
+      until.get('month'),
+      until.get('date'),
+      until.get('hour'),
+      until.get('minute'),
+    );
+
     return until;
   };
 
@@ -716,9 +761,13 @@ class RecurrenceWidget extends Component {
     }
   };
 
-  save = () => {
+  saveRrule = () => {
     var value = this.state.rruleSet.toString();
     this.props.onChange(this.props.id, value);
+  };
+
+  save = () => {
+    this.saveRrule();
     this.close();
   };
 

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

@@ -12,10 +12,15 @@ import {
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import qs from 'query-string';
 
-import { Helmet } from '@plone/volto/helpers';
+import { Helmet, usePrevious } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 import { Icon } from '@plone/volto/components';
-import { login, resetLoginRequest } from '@plone/volto/actions';
+import {
+  login,
+  logout,
+  resetLoginRequest,
+  purgeMessages,
+} from '@plone/volto/actions';
 import { toast } from 'react-toastify';
 import { Toast } from '@plone/volto/components';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
@@ -78,8 +83,22 @@ const Login = (props) => {
     location.pathname.replace(/\/login\/?$/, '').replace(/\/logout\/?$/, '') ||
     '/';
 
+  const previousToken = usePrevious(token);
+
   useEffect(() => {
-    if (token && !(props.isLogout || location?.state?.isLogout)) {
+    if (location?.state?.isLogout) {
+      // Execute a true Logout action
+      // 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
+      // See also Unauthorized.jsx
+      dispatch(logout());
+      dispatch(purgeMessages());
+      // Reset the location state
+      history.push(`${location.pathname}${location.search}`);
+    } else if (token && token !== previousToken) {
+      // We just did a true login action
       history.push(returnUrl || '/');
       if (toast.isActive('loggedOut')) {
         toast.dismiss('loggedOut');
@@ -116,8 +135,10 @@ const Login = (props) => {
     intl,
     history,
     returnUrl,
-    props.isLogout,
+    location.search,
+    location.pathname,
     location?.state?.isLogout,
+    previousToken,
   ]);
 
   const onLogin = (event) => {

package/src/components/theme/Logout/Logout.jsx

@@ -3,7 +3,7 @@ import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { defineMessages, useIntl } from 'react-intl';
 import qs from 'query-string';
-import { Login, Toast } from '@plone/volto/components';
+import { Toast } from '@plone/volto/components';
 import { logout, purgeMessages } from '@plone/volto/actions';
 import { toast } from 'react-toastify';
 
@@ -55,7 +55,7 @@ const Logout = ({ location }) => {
     }
   }, [history, returnUrl, intl, token]);
 
-  return <Login location={{ query: location.query }} isLogout={true} />;
+  return '';
 };
 
 export default Logout;

package/src/components/theme/Search/Search.jsx

@@ -71,6 +71,7 @@ class Search extends Component {
 
   constructor(props) {
     super(props);
+    this.defaultPageSize = config.settings.defaultPageSize;
     this.state = { currentPage: 1, isClient: false, active: 'relevance' };
   }
 
@@ -109,19 +110,24 @@ class Search extends Component {
     const options = qs.parse(this.props.history.location.search);
     this.setState({ currentPage: 1 });
     options['use_site_search_settings'] = 1;
-    this.props.searchContent('', options);
+    this.props.searchContent('', {
+      b_size: this.defaultPageSize,
+      ...options,
+    });
   };
 
   handleQueryPaginationChange = (e, { activePage }) => {
-    const { settings } = config;
     window.scrollTo(0, 0);
     let options = qs.parse(this.props.history.location.search);
     options['use_site_search_settings'] = 1;
 
     this.setState({ currentPage: activePage }, () => {
       this.props.searchContent('', {
+        b_size: this.defaultPageSize,
         ...options,
-        b_start: (this.state.currentPage - 1) * settings.defaultPageSize,
+        b_start:
+          (this.state.currentPage - 1) *
+          (options.b_size || this.defaultPageSize),
       });
     });
   };
@@ -149,7 +155,8 @@ class Search extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    const { settings } = config;
+    const options = qs.parse(this.props.history.location.search);
+
     return (
       <Container id="page-search">
         <Helmet title={this.props.intl.formatMessage(messages.Search)} />
@@ -282,7 +289,8 @@ class Search extends Component {
                   <Pagination
                     activePage={this.state.currentPage}
                     totalPages={Math.ceil(
-                      this.props.search.items_total / settings.defaultPageSize,
+                      this.props.search.items_total /
+                        (options.b_size || this.defaultPageSize),
                     )}
                     onPageChange={this.handleQueryPaginationChange}
                     firstItem={null}

package/src/components/theme/View/View.jsx

@@ -261,13 +261,6 @@ class View extends Component {
           this.props.content.subjects.length > 0 && (
             <Tags tags={this.props.content.subjects} />
           )}
-        {/* Add opt-in social sharing if required, disabled by default */}
-        {/* In the future this might be parameterized from the app config */}
-        {/* <SocialSharing
-          url={typeof window === 'undefined' ? '' : window.location.href}
-          title={this.props.content.title}
-          description={this.props.content.description || ''}
-        /> */}
         {this.props.content.allow_discussion && (
           <Comments pathname={this.props.pathname} />
         )}

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

@@ -30,9 +30,6 @@ jest.mock('../../manage/Toolbar/Toolbar', () =>
   jest.fn(() => <div id="Portal" />),
 );
 
-jest.mock('../SocialSharing/SocialSharing', () =>
-  jest.fn(() => <div id="SocialSharing" />),
-);
 jest.mock('../Comments/Comments', () => jest.fn(() => <div id="Comments" />));
 jest.mock('../Tags/Tags', () => jest.fn(() => <div id="Tags" />));
 jest.mock('../SlotRenderer/SlotRenderer', () =>

package/src/config/Widgets.jsx

@@ -55,7 +55,6 @@ import ImageWidget from '@plone/volto/components/manage/Widgets/ImageWidget';
 // Widgets mapping
 export const widgetMapping = {
   id: {
-    schema: SchemaWidget,
     subjects: TokenWidget,
     query: QuerystringWidget,
     recurrence: RecurrenceWidget,
@@ -89,6 +88,7 @@ export const widgetMapping = {
     autocomplete: SelectAutoComplete,
     color_picker: ColorPickerWidget,
     select: SelectWidget,
+    schema: SchemaWidget,
   },
   vocabulary: {
     'plone.app.vocabularies.Catalog': ObjectBrowserWidget,

package/src/config/index.js

@@ -32,6 +32,7 @@ import applyAddonConfiguration, { addonsInfo } from 'load-volto-addons';
 import ConfigRegistry from '@plone/volto/registry';
 
 import { getSiteAsyncPropExtender } from '@plone/volto/helpers';
+import { registerValidators } from './validation';
 
 const host = process.env.HOST || 'localhost';
 const port = process.env.PORT || '3000';
@@ -97,7 +98,7 @@ let config = {
       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 Set it for set a custom target for the proxy or override 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,
@@ -209,8 +210,9 @@ let config = {
   },
   addonRoutes: [],
   addonReducers: {},
-  slots: {},
   components,
+  slots: {},
+  utilities: {},
 };
 
 // The apiExpanders depends on a config of the object, so it's done here
@@ -238,5 +240,8 @@ ConfigRegistry.addonRoutes = config.addonRoutes;
 ConfigRegistry.addonReducers = config.addonReducers;
 ConfigRegistry.components = config.components;
 ConfigRegistry.slots = config.slots;
+ConfigRegistry.utilities = config.utilities;
+
+registerValidators(ConfigRegistry);
 
 applyAddonConfiguration(ConfigRegistry);

package/src/config/validation.ts

@@ -0,0 +1,155 @@
+import { ConfigType } from '@plone/registry';
+
+import {
+  minLengthValidator,
+  maxLengthValidator,
+  urlValidator,
+  emailValidator,
+  isNumberValidator,
+  maximumValidator,
+  minimumValidator,
+  isIntegerValidator,
+  maxItemsValidator,
+  minItemsValidator,
+  hasUniqueItemsValidator,
+  startEventDateRangeValidator,
+  endEventDateRangeValidator,
+  patternValidator,
+} from '@plone/volto/helpers/FormValidation/validators';
+
+const registerValidators = (config: ConfigType) => {
+  config.registerUtility({
+    name: 'minLength',
+    type: 'validator',
+    dependencies: { fieldType: 'string' },
+    method: minLengthValidator,
+  });
+
+  config.registerUtility({
+    name: 'maxLength',
+    type: 'validator',
+    dependencies: { fieldType: 'string' },
+    method: maxLengthValidator,
+  });
+
+  config.registerUtility({
+    name: 'pattern',
+    type: 'validator',
+    dependencies: { fieldType: 'string' },
+    method: patternValidator,
+  });
+
+  config.registerUtility({
+    name: 'minLength',
+    type: 'validator',
+    dependencies: { fieldType: 'password' },
+    method: minLengthValidator,
+  });
+
+  config.registerUtility({
+    name: 'maxLength',
+    type: 'validator',
+    dependencies: { fieldType: 'password' },
+    method: maxLengthValidator,
+  });
+
+  config.registerUtility({
+    name: 'pattern',
+    type: 'validator',
+    dependencies: { fieldType: 'password' },
+    method: patternValidator,
+  });
+
+  config.registerUtility({
+    name: 'email',
+    type: 'validator',
+    dependencies: { widget: 'email' },
+    method: emailValidator,
+  });
+
+  config.registerUtility({
+    name: 'url',
+    type: 'validator',
+    dependencies: { widget: 'url' },
+    method: urlValidator,
+  });
+
+  config.registerUtility({
+    name: 'number',
+    type: 'validator',
+    dependencies: { fieldType: 'number' },
+    method: isNumberValidator,
+  });
+
+  config.registerUtility({
+    name: 'minimum',
+    type: 'validator',
+    dependencies: { fieldType: 'number' },
+    method: minimumValidator,
+  });
+
+  config.registerUtility({
+    name: 'maximum',
+    type: 'validator',
+    dependencies: { fieldType: 'number' },
+    method: maximumValidator,
+  });
+
+  config.registerUtility({
+    name: 'integer',
+    type: 'validator',
+    dependencies: { fieldType: 'integer' },
+    method: isIntegerValidator,
+  });
+
+  config.registerUtility({
+    name: 'minimum',
+    type: 'validator',
+    dependencies: { fieldType: 'integer' },
+    method: minimumValidator,
+  });
+
+  config.registerUtility({
+    name: 'maximum',
+    type: 'validator',
+    dependencies: { fieldType: 'integer' },
+    method: maximumValidator,
+  });
+
+  config.registerUtility({
+    name: 'maxItems',
+    type: 'validator',
+    dependencies: { fieldType: 'array' },
+    method: maxItemsValidator,
+  });
+
+  config.registerUtility({
+    name: 'minItems',
+    type: 'validator',
+    dependencies: { fieldType: 'array' },
+    method: minItemsValidator,
+  });
+
+  config.registerUtility({
+    name: 'uniqueItems',
+    type: 'validator',
+    dependencies: { fieldType: 'array' },
+    method: hasUniqueItemsValidator,
+  });
+
+  config.registerUtility({
+    name: 'dateRangeValidator',
+    type: 'validator',
+    dependencies: { behaviorName: 'plone.eventbasic', fieldName: 'start' },
+    method: startEventDateRangeValidator,
+  });
+
+  config.registerUtility({
+    name: 'dateRangeValidator',
+    type: 'validator',
+    dependencies: { behaviorName: 'plone.eventbasic', fieldName: 'end' },
+    method: endEventDateRangeValidator,
+  });
+};
+
+export { registerValidators };

package/src/helpers/Extensions/withBlockExtensions.jsx

@@ -51,7 +51,7 @@ export function resolveExtension(name, extensions, data) {
  * - extensions is the blocksConfig extensions object for that block
  * - resolvedExtensions is an object with
  *   `{ variation, <someExtensionA>, <someExtensionB> }` and each of these
- *   fields hold the coresponding definition object from the block's
+ *   fields hold the corresponding definition object from the block's
  *   configuration.
  */
 export function resolveBlockExtensions(data, blocksConfig) {