@plone/volto 15.5.0 → 15.7.0

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

@@ -1,20 +1,36 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
 import { MemoryRouter } from 'react-router-dom';
 import LinkView from './LinkView';
 
+const mockStore = configureStore();
+
+const store = mockStore({
+  userSession: {
+    token: null,
+  },
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
 test('renders a link view component', () => {
   const component = renderer.create(
-    <MemoryRouter>
-      <LinkView
-        token="1234"
-        content={{
-          title: 'Hello World!',
-          description: 'Hi',
-          remoteUrl: '/news',
-        }}
-      />
-    </MemoryRouter>,
+    <Provider store={store}>
+      <MemoryRouter>
+        <LinkView
+          token="1234"
+          content={{
+            title: 'Hello World!',
+            description: 'Hi',
+            remoteUrl: '/news',
+          }}
+        />
+      </MemoryRouter>
+    </Provider>,
   );
   const json = component.toJSON();
   expect(json).toMatchSnapshot();

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

@@ -5,8 +5,8 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-import { Segment, Container, Image } from 'semantic-ui-react';
+import { Segment, Container } from 'semantic-ui-react';
+import { UniversalLink, PreviewImage } from '@plone/volto/components';
 
 /**
  * List view component class.
@@ -21,17 +21,18 @@ const ListingView = ({ content }) => (
         <Segment key={item.url} className="listing-item">
           <Container>
             <h2>
-              <Link to={item.url} title={item['@type']}>
+              <UniversalLink item={item} title={item['@type']}>
                 {item.title}
-              </Link>
+              </UniversalLink>
             </h2>
             {item.description && <p>{item.description}</p>}
           </Container>
-          {item.image && (
-            <Image
-              size="small"
+          {item.image_field && (
+            <PreviewImage
+              item={item}
+              size="thumb"
               alt={item.image_caption ? item.image_caption : item.title}
-              src={item.image.scales.thumb.download}
+              className="ui image"
             />
           )}
         </Segment>

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

@@ -5,9 +5,10 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-import { Container, Image } from 'semantic-ui-react';
+import { UniversalLink } from '@plone/volto/components';
+import { Container } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
+import PreviewImage from '../PreviewImage/PreviewImage';
 
 /**
  * Summary view component class.
@@ -16,7 +17,7 @@ import { FormattedMessage } from 'react-intl';
  * @returns {string} Markup of the component.
  */
 const SummaryView = ({ content }) => (
-  <Container className="view-wrapper">
+  <Container className="view-wrapper summary-view">
     <article id="content">
       <header>
         <h1 className="documentFirstHeading">{content.title}</h1>
@@ -28,23 +29,23 @@ const SummaryView = ({ content }) => (
         {content.items.map((item) => (
           <article key={item.url}>
             <h2>
-              <Link to={item.url} title={item['@type']}>
+              <UniversalLink item={item} title={item['@type']}>
                 {item.title}
-              </Link>
+              </UniversalLink>
             </h2>
-            {item.image && (
-              <Image
-                clearing
-                floated="right"
+            {item.image_field && (
+              <PreviewImage
+                item={item}
                 alt={item.image_caption ? item.image_caption : item.title}
-                src={item.image.scales.thumb.download}
+                size="thumb"
+                className="ui image floated right clear"
               />
             )}
             {item.description && <p>{item.description}</p>}
             <p>
-              <Link to={item.url}>
+              <UniversalLink item={item}>
                 <FormattedMessage id="Read More…" defaultMessage="Read More…" />
-              </Link>
+              </UniversalLink>
             </p>
           </article>
         ))}

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

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
+import { UniversalLink } from '@plone/volto/components';
 import { Container, Table } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
 
@@ -49,13 +49,13 @@ const TabularView = ({ content }) => (
             {content.items.map((item) => (
               <Table.Row key={item.url}>
                 <Table.Cell>
-                  <Link
-                    to={item.url}
+                  <UniversalLink
+                    item={item}
                     className="summary url"
                     title={item['@type']}
                   >
                     {item.title}
-                  </Link>
+                  </UniversalLink>
                 </Table.Cell>
                 <Table.Cell>{item.description}</Table.Cell>
                 <Table.Cell>{item['@type']}</Table.Cell>

package/src/helpers/AuthToken/AuthToken.js

@@ -7,6 +7,7 @@ import Cookies from 'universal-cookie';
 import jwtDecode from 'jwt-decode';
 
 import { loginRenew } from '@plone/volto/actions';
+import { getCookieOptions } from '@plone/volto/helpers';
 import { push } from 'connected-react-router';
 
 /**
@@ -62,10 +63,13 @@ export function persistAuthToken(store, req) {
         }
       } else {
         if (previousValue !== currentValue) {
-          cookies.set('auth_token', currentValue, {
-            path: '/',
-            expires: new Date(jwtDecode(currentValue).exp * 1000),
-          });
+          cookies.set(
+            'auth_token',
+            currentValue,
+            getCookieOptions({
+              expires: new Date(jwtDecode(currentValue).exp * 1000),
+            }),
+          );
         }
         const exp =
           (jwtDecode(store.getState().userSession.token).exp * 1000 -

package/src/helpers/AuthToken/AuthToken.test.js

@@ -57,6 +57,7 @@ describe('AuthToken', () => {
       expect(cookies.set).toBeCalledWith('auth_token', token, {
         path: '/',
         expires: new Date(jwtDecode(token).exp * 1000),
+        secure: false,
       });
     });
 

package/src/helpers/Cookies/cookies.js

@@ -0,0 +1,24 @@
+import config from '@plone/volto/registry';
+
+export const getCookieOptions = (options = {}) => {
+  const { path = '/', secure = false, ...otherOptions } = options;
+  let secureOption = secure;
+
+  try {
+    if (secureOption === undefined || secureOption === null) {
+      const protocol = window?.location?.protocol ?? 'http';
+      secureOption = protocol.startsWith('https') ? true : false;
+    }
+  } catch (e) {
+    //window is not defined. It's ssr and we use 'secure' option passed from param
+  }
+
+  return {
+    path: path,
+    expires: new Date(
+      new Date().getTime() + config.settings.cookieExpires * 1000,
+    ),
+    secure: secureOption,
+    ...otherOptions,
+  };
+};

package/src/helpers/Url/Url.js

@@ -246,6 +246,33 @@ export function normalizeTelephone(tel) {
   return `tel:${tel}`;
 }
 
+export function checkAndNormalizeUrl(url) {
+  let res = {
+    isMail: false,
+    isTelephone: false,
+    url: url,
+    isValid: true,
+  };
+  if (URLUtils.isMail(URLUtils.normaliseMail(url))) {
+    //Mail
+    res.isMail = true;
+    res.url = URLUtils.normaliseMail(url);
+  } else if (URLUtils.isTelephone(url)) {
+    //Phone
+    res.isTelephone = true;
+    res.url = URLUtils.normalizeTelephone(url);
+  } else {
+    //url
+    if (!res.url.startsWith('/') && !res.url.startsWith('#')) {
+      res.url = URLUtils.normalizeUrl(url);
+      if (!URLUtils.isUrl(res.url)) {
+        res.isValid = false;
+      }
+    }
+  }
+  return res;
+}
+
 export const URLUtils = {
   normalizeTelephone,
   normaliseMail,
@@ -253,4 +280,5 @@ export const URLUtils = {
   isTelephone,
   isMail,
   isUrl,
+  checkAndNormalizeUrl,
 };

package/src/helpers/index.js

@@ -96,3 +96,4 @@ export { useDetectClickOutside } from './Utils/useDetectClickOutside';
 export { usePrevious } from './Utils/usePrevious';
 export { usePagination } from './Utils/usePagination';
 export useUndoManager from './UndoManager/useUndoManager';
+export { getCookieOptions } from './Cookies/cookies';

package/src/middleware/api.js

@@ -18,7 +18,7 @@ import {
   SET_APIERROR,
 } from '@plone/volto/constants/ActionTypes';
 import { changeLanguage } from '@plone/volto/actions';
-import { normalizeLanguageName } from '@plone/volto/helpers';
+import { normalizeLanguageName, getCookieOptions } from '@plone/volto/helpers';
 let socket = null;
 
 /**
@@ -197,10 +197,13 @@ export default (api) => ({ dispatch, getState }) => (next) => (action) => {
         }
         if (type === LOGIN && settings.websockets) {
           const cookies = new Cookies();
-          cookies.set('auth_token', result.token, {
-            path: '/',
-            expires: new Date(jwtDecode(result.token).exp * 1000),
-          });
+          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=${

package/theme/themes/pastanaga/extras/main.less

@@ -574,4 +574,5 @@ body.has-toolbar-collapsed .mobile-menu {
 @import 'widgets';
 @import 'login';
 @import 'language-selector';
+@import 'views';
 .loadUIOverrides();

package/theme/themes/pastanaga/extras/views.less

@@ -0,0 +1,5 @@
+.summary-view {
+  article {
+    margin: 2.5rem 0;
+  }
+}