design-comuni-plone-theme 8.3.2 → 8.4.0

package/src/customizations/volto/middleware/api.js

@@ -0,0 +1,362 @@
+/**
+ * backport parziale/temporaneo di https://github.com/plone/volto/pull/5069
+ * rimuovere dopo l'aggiornamento a Volto >= 17.0.0-alpha.24
+ *
+ * Api middleware.
+ * @module middleware/api
+ */
+
+import Cookies from 'universal-cookie';
+import jwtDecode from 'jwt-decode';
+import { compact, flatten, union } from 'lodash';
+import { matchPath } from 'react-router';
+import qs from 'query-string';
+
+import config from '@plone/volto/registry';
+
+import {
+  GET_CONTENT,
+  LOGIN,
+  RESET_APIERROR,
+  SET_APIERROR,
+} from '@plone/volto/constants/ActionTypes';
+import { changeLanguage } from '@plone/volto/actions';
+import {
+  toGettextLang,
+  toReactIntlLang,
+  getCookieOptions,
+} from '@plone/volto/helpers';
+let socket = null;
+
+/**
+ *
+ * Add configured expanders to an api call for an action
+ * Requirements:
+ *
+ * - It should add the expanders set in the config settings
+ * - It should preserve any query if present
+ * - It should preserve (and add) any expand parameter (if present) e.g. translations
+ * - It should take use the correct codification for arrays in querystring (repeated parameter for each member of the array)
+ *
+ * @function addExpandersToPath
+ * @param {string} path The url/path including the querystring
+ * @param {*} type The action type
+ * @returns {string} The url/path with the configured expanders added to the query string
+ */
+export function addExpandersToPath(path, type, isAnonymous) {
+  const { settings } = config;
+  const { apiExpanders = [] } = settings;
+
+  const {
+    url,
+    query: { expand, ...query },
+  } = qs.parseUrl(path, { decode: false });
+
+  const expandersFromConfig = apiExpanders
+    .filter((expand) => matchPath(url, expand.match) && expand[type])
+    .map((expand) => expand[type]);
+
+  const expandMerge = compact(
+    union([expand, ...flatten(expandersFromConfig)]),
+  ).filter((item) => !(item === 'types' && isAnonymous)); // Remove types expander if isAnonymous
+
+  const stringifiedExpand = qs.stringify(
+    { expand: expandMerge },
+    {
+      arrayFormat: 'comma',
+      encode: false,
+    },
+  );
+
+  const querystringFromConfig = apiExpanders
+    .filter((expand) => matchPath(url, expand.match) && expand[type])
+    .reduce((acc, expand) => {
+      let querystring = expand?.['querystring'];
+      // The querystring accepts being a function to be able to take other
+      // config parameters
+      if (typeof querystring === 'function') {
+        querystring = querystring(config);
+      }
+      return { ...acc, ...querystring };
+    }, {});
+
+  const queryMerge = { ...query, ...querystringFromConfig };
+
+  const stringifiedQuery = qs.stringify(queryMerge, {
+    encode: false,
+  });
+
+  if (stringifiedQuery && stringifiedExpand) {
+    return `${url}?${stringifiedExpand}&${stringifiedQuery}`;
+  } else if (!stringifiedQuery && stringifiedExpand) {
+    return `${url}?${stringifiedExpand}`;
+  } else if (stringifiedQuery && !stringifiedExpand) {
+    return `${url}?${stringifiedQuery}`;
+  } else {
+    return url;
+  }
+}
+
+/**
+ * Send a message on a websocket.
+ * @function sendOnSocket
+ * @param {Object} request Request object.
+ * @returns {Promise} message is send
+ */
+function sendOnSocket(request) {
+  return new Promise((resolve, reject) => {
+    switch (socket.readyState) {
+      case socket.CONNECTING:
+        socket.addEventListener('open', () => resolve(socket));
+        socket.addEventListener('error', reject);
+        break;
+      case socket.OPEN:
+        resolve(socket);
+        break;
+      default:
+        reject();
+        break;
+    }
+  }).then(() => {
+    socket.send(JSON.stringify(request));
+  });
+}
+
+/**
+ * Api middleware.
+ * @function
+ * @param {Object} api Api object.
+ * @returns {Promise} Action promise.
+ */
+const apiMiddlewareFactory = (api) => ({ dispatch, getState }) => (next) => (
+  action,
+) => {
+  const { settings } = config;
+
+  const token = getState().userSession.token;
+  let isAnonymous = true;
+  if (token) {
+    const tokenExpiration = jwtDecode(token).exp;
+    const currentTime = new Date().getTime() / 1000;
+    isAnonymous = !token || currentTime > tokenExpiration;
+  }
+
+  if (typeof action === 'function') {
+    return action(dispatch, getState);
+  }
+
+  const { request, type, mode = 'parallel', ...rest } = action;
+  const { subrequest } = action; // We want subrequest remains in `...rest` above
+
+  let actionPromise;
+
+  if (!request) {
+    return next(action);
+  }
+
+  next({ ...rest, type: `${type}_PENDING` });
+
+  if (socket) {
+    actionPromise = Array.isArray(request)
+      ? Promise.all(
+          request.map((item) =>
+            sendOnSocket({
+              ...item,
+              path: addExpandersToPath(item.path, type, isAnonymous),
+              id: type,
+            }),
+          ),
+        )
+      : sendOnSocket({
+          ...request,
+          path: addExpandersToPath(request.path, type, isAnonymous),
+          id: type,
+        });
+  } else {
+    actionPromise = Array.isArray(request)
+      ? mode === 'serial'
+        ? request.reduce((prevPromise, item) => {
+            return prevPromise.then((acc) => {
+              return api[item.op](
+                addExpandersToPath(item.path, type, isAnonymous),
+                {
+                  data: item.data,
+                  type: item.type,
+                  headers: item.headers,
+                  params: request.params,
+                  checkUrl: settings.actions_raising_api_errors.includes(
+                    action.type,
+                  ),
+                },
+              ).then((reqres) => {
+                return [...acc, reqres];
+              });
+            });
+          }, Promise.resolve([]))
+        : Promise.all(
+            request.map((item) =>
+              api[item.op](addExpandersToPath(item.path, type, isAnonymous), {
+                data: item.data,
+                type: item.type,
+                headers: item.headers,
+                params: request.params,
+                checkUrl: settings.actions_raising_api_errors.includes(
+                  action.type,
+                ),
+              }),
+            ),
+          )
+      : api[request.op](addExpandersToPath(request.path, type, isAnonymous), {
+          data: request.data,
+          type: request.type,
+          headers: request.headers,
+          params: request.params,
+          checkUrl: settings.actions_raising_api_errors.includes(action.type),
+        });
+    actionPromise.then(
+      (result) => {
+        const { settings } = config;
+        if (getState().apierror.connectionRefused) {
+          next({
+            ...rest,
+            type: RESET_APIERROR,
+          });
+        }
+        if (type === GET_CONTENT) {
+          const lang = result?.language?.token;
+          if (
+            lang &&
+            getState().intl.locale !== toReactIntlLang(lang) &&
+            !subrequest &&
+            config.settings.supportedLanguages.includes(lang)
+          ) {
+            const langFileName = toGettextLang(lang);
+            import('~/../locales/' + langFileName + '.json').then((locale) => {
+              dispatch(changeLanguage(lang, locale.default));
+            });
+          }
+        }
+        if (type === LOGIN && settings.websockets) {
+          const cookies = new Cookies();
+          cookies.set(
+            'auth_token',
+            result.token,
+            getCookieOptions({
+              expires: new Date(jwtDecode(result.token).exp * 1000),
+            }),
+          );
+          api.get('/@wstoken').then((res) => {
+            socket = new WebSocket(
+              `${settings.apiPath.replace('http', 'ws')}/@ws?ws_token=${
+                res.token
+              }`,
+            );
+            socket.onmessage = (message) => {
+              const packet = JSON.parse(message.data);
+              if (packet.error) {
+                dispatch({
+                  type: `${packet.id}_FAIL`,
+                  error: packet.error,
+                });
+              } else {
+                dispatch({
+                  type: `${packet.id}_SUCCESS`,
+                  result: JSON.parse(packet.data),
+                });
+              }
+            };
+          });
+        }
+        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 SSR can set ECONNREFUSED
+        if (error.code === 'ECONNREFUSED') {
+          next({
+            ...rest,
+            error,
+            statusCode: error.code,
+            connectionRefused: true,
+            type: SET_APIERROR,
+          });
+        }
+
+        // Response error is marked crossDomain if CORS error happen
+        else if (error.crossDomain) {
+          next({
+            ...rest,
+            error,
+            statusCode: 'CORSERROR',
+            connectionRefused: false,
+            type: SET_APIERROR,
+          });
+        }
+
+        // Check for actions who can raise api errors
+        if (settings.actions_raising_api_errors.includes(action.type)) {
+          // Gateway timeout
+          if (error?.response?.statusCode === 504) {
+            next({
+              ...rest,
+              error,
+              statusCode: error.code,
+              connectionRefused: true,
+              type: SET_APIERROR,
+            });
+          }
+
+          // Redirect
+          else if (error?.code === 301) {
+            next({
+              ...rest,
+              error,
+              statusCode: error.code,
+              connectionRefused: false,
+              type: SET_APIERROR,
+            });
+          }
+
+          // Redirect
+          else if (error?.code === 408) {
+            next({
+              ...rest,
+              error,
+              statusCode: error.code,
+              connectionRefused: false,
+              type: SET_APIERROR,
+            });
+          }
+
+          // Unauthorized
+          else if (error?.response?.statusCode === 401) {
+            next({
+              ...rest,
+              error,
+              statusCode: error.response,
+              message: error.response.body.message,
+              connectionRefused: false,
+              type: SET_APIERROR,
+            });
+          }
+        }
+        return next({ ...rest, error, type: `${type}_FAIL` });
+      },
+    );
+  }
+
+  return actionPromise;
+};
+
+export default apiMiddlewareFactory;

package/src/customizations/volto/middleware/blacklistRoutes.js

@@ -0,0 +1,47 @@
+/**
+ * backport https://github.com/plone/volto/pull/4854
+ */
+
+import config from '@plone/volto/registry';
+import { matchPath } from 'react-router';
+
+const blacklistRoutes = ({ dispatch, getState }) => (next) => (action) => {
+  if (typeof action === 'function') {
+    return next(action);
+  }
+
+  switch (action.type) {
+    case '@@router/LOCATION_CHANGE':
+      let { pathname } = action.payload.location;
+      const { externalRoutes = [] } = config.settings;
+
+      const route = externalRoutes.find((route) =>
+        matchPath(pathname, route.match),
+      );
+
+      let actionToSend = action;
+      if (pathname.startsWith('/++api++')) {
+        actionToSend.payload.location.pathname = actionToSend.payload.location.pathname.substring(
+          8,
+        );
+        // To handle the `window.location.replace`
+        pathname = actionToSend.payload.location.pathname;
+        if (window.history) {
+          window.history.replaceState(window.history.state, '', pathname);
+        }
+      }
+
+      if (!route) {
+        return next(actionToSend);
+      } else {
+        window.location.replace(
+          route.url ? route.url(actionToSend.payload) : pathname,
+        );
+      }
+      break;
+    default:
+      return next(action);
+  }
+};
+
+export default blacklistRoutes;

package/src/theme/ItaliaTheme/Blocks/_imageBlock.scss

@@ -12,4 +12,8 @@
       }
     }
   }
+  &.left,
+  &.right {
+    margin-bottom: 0;
+  }
 }

package/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss

@@ -46,12 +46,12 @@
     .icon {
       width: 25px;
       height: 40px;
-      color: lighten($primary, 40%);
-      fill: lighten($primary, 40%);
+      color: $primary;
+      fill: $primary;
     }
     &:hover .icon {
       color: $primary;
-      fill: $primary;
+      fill: darken($primary, 15%);
     }
 
     &.slick-prev {
@@ -77,6 +77,18 @@
     position: unset;
     bottom: unset;
     margin-top: 0.5rem !important;
+    .slick-dot button:before {
+      background-image: none;
+      background-color: #3f4142e0;
+      opacity: 1;
+      border-radius: 50%;
+    }
+    .slick-dot.slick-active button:before {
+      background-image: none;
+      background-color: $primary;
+      opacity: 1;
+      border-radius: 50%;
+    }
   }
 
   .slick-track {
@@ -132,7 +144,9 @@
 
           background-color: #3f4142e0;
 
-          color: $white;
+          .slide-link {
+            color: $white;
+          }
 
           font-size: 1.8rem;
           font-weight: bold;

package/src/theme/ItaliaTheme/Components/_search.scss

@@ -2,4 +2,10 @@
   label.has-prepend {
     z-index: unset;
   }
+
+  .react-select__option--is-focused {
+    border-color: var(--focus-outline-color) !important;
+    box-shadow: 0 0 0 2px var(--focus-outline-color) !important;
+    outline: none !important;
+  }
 }

package/src/theme/ItaliaTheme/_common.scss

@@ -3,6 +3,15 @@
   .text-justify {
     text-align: justify;
   }
+  button.btn,
+  button.rounded-right {
+    &:focus {
+      border-color: $focus-outline-color !important;
+      box-shadow: inset 0 1px 0 $focus-outline-color,
+        0 1px 1px $focus-outline-color, 0 0 0 0.2rem $focus-outline-color !important;
+      outline: none;
+    }
+  }
 
   .btn-tertiary {
     @include button-variant($tertiary, $tertiary);
@@ -21,6 +30,12 @@
 
   a.btn-tertiary {
     color: $tertiary-text !important;
+    &:focus {
+      border-color: $focus-outline-color;
+      box-shadow: inset 0 1px 0 $focus-outline-color,
+        0 1px 1px $focus-outline-color, 0 0 0 0.2rem $focus-outline-color;
+      outline: none;
+    }
   }
 
   .btn-outline-tertiary {

package/src/theme/ItaliaTheme/_css_variables.scss

@@ -0,0 +1,3 @@
+:root {
+  --focus-outline-color: #{$focus-outline-color};
+}

package/src/theme/_cms-ui.scss

@@ -218,6 +218,7 @@ body.cms-ui {
 
   .react-select__menu {
     z-index: 11;
+
     /* FIX CT SELECT REACTVIRTUALIZED */
     .ReactVirtualized__Grid.ReactVirtualized__List {
       width: 100% !important;
@@ -417,6 +418,14 @@ body.cms-ui {
         z-index: 0;
       }
     }
+    &.image {
+      .block.align {
+        &.left,
+        &.right {
+          z-index: 0;
+        }
+      }
+    }
   }
 
   a {

package/src/theme/bootstrap-override/bootstrap-italia/_footer.scss

@@ -9,9 +9,9 @@
         align-items: flex-start;
       }
       .nextGenerationEULogo {
-        margin-top: 10px;
-        width: 178px;
-        height: 56px;
+        height: 75px;
+        width: auto;
+        aspect-ratio: 167 / 41;
       }
       a {
         h2 {

package/src/theme/extras/_search.scss

@@ -37,8 +37,39 @@ body.search-modal-opened {
 
   .nav-tabs {
     .nav-item {
+      &:first-of-type {
+        a.nav-link:not(.active):focus {
+          border-right: 2px solid hsl(36deg, 100%, 50%) !important;
+          border-left: 2px solid hsl(36deg, 100%, 50%) !important;
+        }
+        a.nav-link.active:focus {
+          border-right: 2px solid hsl(36deg, 100%, 50%) !important;
+          border-left: 2px solid hsl(36deg, 100%, 50%) !important;
+        }
+      }
+      &:last-of-type {
+        a.nav-link:focus {
+          border-right: 2px solid hsl(36deg, 100%, 50%) !important;
+          border-right: 2px solid hsl(36deg, 100%, 50%) !important;
+        }
+      }
       a.nav-link {
         width: 100%;
+        border-top: 2px solid transparent;
+        &.active {
+          border-left: none;
+          border-right: none;
+        }
+        &:focus {
+          border-color: hsl(36deg, 100%, 50%) !important;
+          box-shadow: 0 0 0 2px hsl(36deg, 100%, 50%) !important;
+          outline: none;
+          border-right: none;
+          border-left: none;
+        }
+        &:not(.active):focus {
+          border-right: 2px solid hsl(36deg, 100%, 50%) !important;
+        }
       }
     }
   }

package/src/theme/site.scss

@@ -18,6 +18,7 @@
 @import 'extras/tables';
 
 /*** ItaliaTheme ***/
+@import 'ItaliaTheme/css_variables';
 @import 'ItaliaTheme/common';
 @import 'ItaliaTheme/main';
 @import 'ItaliaTheme/ar';