@eeacms/volto-cca-policy 0.1.1

package/src/customizations/volto/components/theme/Header/Header.jsx

@@ -0,0 +1,258 @@
+/**
+ * Header component.
+ * @module components/theme/Header/Header
+ */
+
+import React from 'react';
+import { Dropdown, Image } from 'semantic-ui-react';
+import { connect, useDispatch, useSelector } from 'react-redux';
+
+import { withRouter } from 'react-router-dom';
+import { UniversalLink } from '@plone/volto/components';
+import {
+  getBaseUrl,
+  hasApiExpander,
+  flattenToAppURL,
+} from '@plone/volto/helpers';
+import { getNavigation } from '@plone/volto/actions';
+import { Header, Logo } from '@eeacms/volto-eea-design-system/ui';
+import { usePrevious } from '@eeacms/volto-eea-design-system/helpers';
+import { find } from 'lodash';
+import globeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/global-line.svg';
+import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea.png';
+
+import config from '@plone/volto/registry';
+import { compose } from 'recompose';
+import { BodyClass } from '@plone/volto/helpers';
+
+import cx from 'classnames';
+
+function removeTrailingSlash(path) {
+  return path.replace(/\/+$/, '');
+}
+
+/**
+ * EEA Specific Header component.
+ */
+const EEAHeader = ({ pathname, token, items, history, subsite }) => {
+  const currentLang = useSelector((state) => state.intl.locale);
+  const translations = useSelector(
+    (state) => state.content.data?.['@components']?.translations?.items,
+  );
+
+  const router_pathname = useSelector((state) => {
+    return removeTrailingSlash(state.router?.location?.pathname) || '';
+  });
+
+  const isSubsite = subsite?.['@type'] === 'Subsite';
+
+  const isHomePageInverse = useSelector((state) => {
+    const layout = state.content?.data?.layout;
+    const has_home_layout =
+      layout === 'homepage_inverse_view' ||
+      (__CLIENT__ && document.body.classList.contains('homepage-inverse'));
+    return (
+      has_home_layout &&
+      (pathname === router_pathname || router_pathname.endsWith('/edit'))
+    );
+  });
+
+  const { eea } = config.settings;
+  const headerOpts = eea.headerOpts || {};
+  const { logo, logoWhite } = headerOpts || {};
+  const width = useSelector((state) => state.screen?.width);
+  const dispatch = useDispatch();
+  const previousToken = usePrevious(token);
+  const [language, setLanguage] = React.useState(
+    currentLang || eea.defaultLanguage,
+  );
+
+  React.useEffect(() => {
+    const { settings } = config;
+    const base_url = getBaseUrl(pathname);
+    if (!hasApiExpander('navigation', base_url)) {
+      dispatch(getNavigation(base_url, settings.navDepth));
+    }
+  }, [pathname, dispatch]);
+
+  React.useEffect(() => {
+    if (token !== previousToken) {
+      const { settings } = config;
+      const base = getBaseUrl(pathname);
+      if (!hasApiExpander('navigation', base)) {
+        dispatch(getNavigation(base, settings.navDepth));
+      }
+    }
+  }, [token, dispatch, pathname, previousToken]);
+
+  return (
+    <Header menuItems={items}>
+      {isHomePageInverse && <BodyClass className="homepage" />}
+      <Header.TopHeader>
+        <Header.TopItem className="official-union">
+          <Image src={eeaFlag} alt="eea flag"></Image>
+          <Header.TopDropdownMenu
+            text="An official website of the European Union | How do you know?"
+            tabletText="EEA information systems"
+            mobileText=" "
+            icon="chevron down"
+            aria-label="dropdown"
+            className=""
+            viewportWidth={width}
+          >
+            <div
+              className="content"
+              role="menu"
+              tabIndex="0"
+              onClick={(evt) => evt.stopPropagation()}
+              onKeyDown={(evt) => evt.stopPropagation()}
+            >
+              <p>
+                All official European Union website addresses are in the{' '}
+                <b>europa.eu</b> domain.
+              </p>
+              <a
+                href="https://europa.eu/european-union/contact/institutions-bodies_en"
+                target="_blank"
+                rel="noreferrer"
+                role="option"
+                aria-selected="false"
+              >
+                See all EU institutions and bodies
+              </a>
+            </div>
+          </Header.TopDropdownMenu>
+        </Header.TopItem>
+
+        {!!headerOpts.partnerLinks && (
+          <Header.TopItem>
+            <Header.TopDropdownMenu
+              id="theme-sites"
+              text={headerOpts.partnerLinks.title}
+              viewportWidth={width}
+            >
+              <div className="wrapper">
+                {headerOpts.partnerLinks.links.map((item, index) => (
+                  <Dropdown.Item key={index}>
+                    <a
+                      href={item.href}
+                      className="site"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {item.title}
+                    </a>
+                  </Dropdown.Item>
+                ))}
+              </div>
+            </Header.TopDropdownMenu>
+          </Header.TopItem>
+        )}
+
+        {config.settings.isMultilingual && (
+          <Header.TopDropdownMenu
+            id="language-switcher"
+            className="item"
+            text={`${language.toUpperCase()}`}
+            mobileText={`${language.toUpperCase()}`}
+            icon={
+              <Image src={globeIcon} alt="language dropdown globe icon"></Image>
+            }
+            viewportWidth={width}
+          >
+            <ul
+              className="wrapper language-list"
+              role="listbox"
+              aria-label="language switcher"
+            >
+              {eea.languages.map((item, index) => (
+                <Dropdown.Item
+                  as="li"
+                  key={index}
+                  text={
+                    <span>
+                      {item.name}
+                      <span className="country-code">
+                        {item.code.toUpperCase()}
+                      </span>
+                    </span>
+                  }
+                  onClick={() => {
+                    const translation = find(translations, {
+                      language: item.code,
+                    });
+                    const to = translation
+                      ? flattenToAppURL(translation['@id'])
+                      : `/${item.code}`;
+                    setLanguage(item.code);
+                    history.push(to);
+                  }}
+                ></Dropdown.Item>
+              ))}
+            </ul>
+          </Header.TopDropdownMenu>
+        )}
+      </Header.TopHeader>
+      <Header.Main
+        pathname={pathname}
+        inverted={isHomePageInverse ? true : false}
+        transparency={isHomePageInverse ? true : false}
+        logo={
+          <div {...(isSubsite ? { className: 'logo-wrapper' } : {})}>
+            <Logo
+              src={isHomePageInverse ? logoWhite : logo}
+              title={eea.websiteTitle}
+              alt={eea.organisationName}
+              url={eea.logoTargetUrl}
+            />
+
+            {!!subsite && subsite.title && (
+              <UniversalLink item={subsite} className="subsite-logo">
+                {subsite.title}
+              </UniversalLink>
+            )}
+          </div>
+        }
+        menuItems={items}
+        renderGlobalMenuItem={(item, { onClick }) => (
+          <a
+            href={item.url || '/'}
+            title={item.title}
+            onClick={(e) => {
+              e.preventDefault();
+              onClick(e, item);
+            }}
+          >
+            {item.title}
+          </a>
+        )}
+        renderMenuItem={(item, options, props) => (
+          <UniversalLink
+            href={item.url || '/'}
+            title={item.title}
+            {...(options || {})}
+            className={cx(options?.className, {
+              active: item.url === router_pathname,
+            })}
+          >
+            {props?.iconPosition !== 'right' && props?.children}
+            <span>{item.title}</span>
+            {props?.iconPosition === 'right' && props?.children}
+          </UniversalLink>
+        )}
+      ></Header.Main>
+    </Header>
+  );
+};
+
+export default compose(
+  withRouter,
+  connect(
+    (state) => ({
+      token: state.userSession.token,
+      items: state.navigation.items,
+      subsite: state.content.data?.['@components']?.subsite,
+    }),
+    { getNavigation },
+  ),
+)(EEAHeader);

package/src/customizations/volto/components/theme/Tags/Tags.jsx

@@ -0,0 +1,53 @@
+/**
+ * Tags component.
+ * @module components/theme/Tags/Tags
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import TagList from '@eeacms/volto-eea-design-system/ui/TagList/TagList';
+import Tag from '@eeacms/volto-eea-design-system/ui/Tag/Tag';
+import { Container } from 'semantic-ui-react';
+
+/**
+ * Tags component class.
+ * @function Tags
+ * @param {array} tags Array of tags.
+ * @returns {string} Markup of the component.
+ */
+const Tags = ({ tags }) =>
+  tags && tags.length > 0 ? (
+    <Container className="eea">
+      <TagList className="right">
+        <TagList.Content>
+          {tags.map((tag) => (
+            <Tag href={`http://search.apps.eea.europa.eu/?q=${tag}`} key={tag}>
+              {tag}
+            </Tag>
+          ))}
+        </TagList.Content>
+      </TagList>
+    </Container>
+  ) : (
+    ''
+  );
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+Tags.propTypes = {
+  tags: PropTypes.arrayOf(PropTypes.string),
+};
+
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+Tags.defaultProps = {
+  tags: null,
+};
+
+export default Tags;

package/src/customizations/volto/components/theme/Unauthorized/Unauthorized.jsx

@@ -0,0 +1,91 @@
+/**
+ * @module components/theme/Unauthorized/Unauthorized
+ */
+
+import React, { useEffect } from 'react';
+import { useLocation, Link, useHistory } from 'react-router-dom';
+import { getBaseUrl } from '@plone/volto/helpers';
+import { Container, Button } from 'semantic-ui-react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
+
+/**
+ * unauthorized function.
+ * @function Unauthorized
+ * @returns {string} Markup of the unauthorized page.
+ */
+
+const Unauthorized = () => {
+  const location = useLocation();
+  const pathname = location.pathname;
+  const base_pathname = getBaseUrl(pathname);
+  const login = `${base_pathname}/login`;
+  const history = useHistory();
+  const [countdown, setCountdown] = React.useState(5);
+
+  useEffect(() => {
+    const login_with_return = login + `?return_url=${pathname}`;
+    const timer = setTimeout(() => {
+      return history.push(login_with_return);
+    }, 5000);
+    return () => clearTimeout(timer);
+  }, [history, login, pathname]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (countdown > 0) {
+        setCountdown(countdown - 1);
+      } else {
+        clearTimeout(timer);
+      }
+    }, 1000);
+    // Clear timeout if the component is unmounted
+    return () => clearTimeout(timer);
+  }, [countdown]);
+
+  return (
+    <Container className="view-wrapper">
+      <h1>
+        <FormattedMessage id="Unauthorized" defaultMessage="Unauthorized" />
+      </h1>
+      <h3>
+        <FormattedMessage
+          id="Forbidden, you will be redirected to the login screen in "
+          defaultMessage="Forbidden, you will be redirected to the login screen in "
+        />
+        <span id="redirect-countdown">{countdown}</span>.
+      </h3>
+
+      <p className="description">
+        <FormattedMessage id="Click" defaultMessage="Click" />{' '}
+        <Link
+          className={'ui mini compact button my-half unauthorized-buttons'}
+          to={login}
+        >
+          <FormattedMessage id="Log in" defaultMessage="Log in" />
+        </Link>
+        <FormattedMessage
+          id="to get to login screen or click"
+          defaultMessage="to get to login screen or click"
+        />{' '}
+        <Button
+          size={'mini'}
+          compact
+          onClick={() => history.goBack()}
+          className={'my-half unauthorized-buttons'}
+        >
+          <FormattedMessage id="Get back" defaultMessage="Get back" />
+        </Button>
+        <FormattedMessage
+          id="to get to the previous location"
+          defaultMessage="to get to the previous location"
+        />
+        .
+      </p>
+    </Container>
+  );
+};
+
+export default withServerErrorCode(401)(Unauthorized);

package/src/customizations/volto/components/theme/View/EventView.jsx

@@ -0,0 +1,90 @@
+/**
+ * EventView view component.
+ * @module components/theme/View/EventView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers';
+import { Image, Grid } from 'semantic-ui-react';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
+import { EventDetails } from '@plone/volto/components';
+
+const EventTextfieldView = ({ content }) => (
+  <React.Fragment>
+    {content.title && <h1 className="documentFirstHeading">{content.title}</h1>}
+    {content.description && (
+      <p className="documentDescription">{content.description}</p>
+    )}
+    {content.image && (
+      <Image
+        className="document-image"
+        src={content.image.scales.thumb.download}
+        floated="right"
+      />
+    )}
+    {content.text && (
+      <div
+        dangerouslySetInnerHTML={{
+          __html: flattenHTMLToAppURL(content.text.data),
+        }}
+      />
+    )}
+  </React.Fragment>
+);
+
+/**
+ * EventView view component class.
+ * @function EventView
+ * @params {object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const EventView = (props) => {
+  const { content } = props;
+
+  return (
+    <div id="page-document" className="ui container viewwrapper event-view">
+      <Grid>
+        <Grid.Column mobile={12} tablet={7} computer={7}>
+          {hasBlocksData(content) ? (
+            <RenderBlocks {...props} />
+          ) : (
+            <EventTextfieldView {...props} />
+          )}
+        </Grid.Column>
+        <Grid.Column mobile={12} tablet={5} computer={5}>
+          <EventDetails content={content} />
+        </Grid.Column>
+      </Grid>
+    </div>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+EventView.propTypes = {
+  content: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    text: PropTypes.shape({
+      data: PropTypes.string,
+    }),
+    attendees: PropTypes.arrayOf(PropTypes.string).isRequired,
+    contact_email: PropTypes.string,
+    contact_name: PropTypes.string,
+    contact_phone: PropTypes.string,
+    end: PropTypes.string.isRequired,
+    event_url: PropTypes.string,
+    location: PropTypes.string,
+    open_end: PropTypes.bool,
+    recurrence: PropTypes.any,
+    start: PropTypes.string.isRequired,
+    subjects: PropTypes.arrayOf(PropTypes.string).isRequired,
+    whole_day: PropTypes.bool,
+  }).isRequired,
+};
+
+export default EventView;

package/src/helpers/index.js

@@ -0,0 +1,44 @@
+import superagent from 'superagent';
+import config from '@plone/volto/registry';
+import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
+import { isArray } from 'lodash';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
+
+/**
+ * Get a resource image/file with authenticated (if token exist) API headers
+ * @function getBackendResourceWithAuth
+ * @param {Object} req Request object
+ * @return {string} The response with the image
+ */
+export const getBackendResourceWithAuth = (req) =>
+  new Promise((resolve, reject) => {
+    const { settings } = config;
+
+    let apiPath = '';
+    if (settings.internalApiPath && __SERVER__) {
+      apiPath = settings.internalApiPath;
+    } else if (__DEVELOPMENT__ && settings.devProxyToApiPath) {
+      apiPath = settings.devProxyToApiPath;
+    } else {
+      apiPath = settings.apiPath;
+    }
+    const backendURL = `${apiPath}${req.path}`;
+    const request = superagent
+      .get(backendURL)
+      .maxResponseSize(settings.maxResponseSize)
+      .responseType('blob');
+    const authToken = req.universalCookies.get('auth_token');
+    if (authToken) {
+      request.set('Authorization', `Bearer ${authToken}`);
+    }
+    request.use(addHeadersFactory(req));
+    request.then(resolve).catch(reject);
+  });
+
+export const createSlateParagraph = (text) => {
+  return isArray(text) ? text : config.settings.slate.defaultValue();
+};
+
+export const serializeText = (text) => {
+  return isArray(text) ? serializeNodes(text) : text;
+};

package/src/icons/content-box.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg width="90mm" height="90mm" version="1.1" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg">
+ <text x="44.72715" y="38.463978" fill="#000000" font-family="sans-serif" font-size="16.933px" letter-spacing="0px" stroke-width=".26458" text-align="center" text-anchor="middle" word-spacing="0px" style="line-height:1.5" xml:space="preserve"><tspan x="44.72715" y="38.463978" text-align="center">Content</tspan><tspan x="44.72715" y="63.863926" text-align="center">Box</tspan></text>
+</svg>

package/src/icons/image-narrow.svg

@@ -0,0 +1,5 @@
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 13L11.9333 11V25L10 23H26L24.0667 25V11L26 13H10ZM26 11V18V21.5V23.5V25H10V11H26Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 31H29V29H7V31Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 7H29V5H7V7Z"/>
+</svg>

package/src/index.js

@@ -0,0 +1,13 @@
+const applyConfig = (config) => {
+  config.settings.dateLocale = 'en-gb';
+  config.settings.isMultilingual = true;
+  config.settings.defaultLanguage =
+    config.settings.eea?.defaultLanguage || 'en';
+  config.settings.supportedLanguages = config.settings.eea?.languages?.map(
+    (item) => item.code,
+  ) || ['en'];
+
+  return config;
+};
+
+export default applyConfig;

package/src/middleware/voltoCustom.js

@@ -0,0 +1,37 @@
+import { getBackendResourceWithAuth } from '@eeacms/volto-cca-policy/helpers';
+
+const HEADERS = [
+  'Accept-Ranges',
+  'Cache-Control',
+  'Content-Disposition',
+  'Content-Range',
+  'Content-Type',
+];
+
+function voltoCustomMiddleware(req, res, next) {
+  getBackendResourceWithAuth(req)
+    .then((resource) => {
+      // Just forward the headers that we need
+      HEADERS.forEach((header) => {
+        if (resource?.get?.(header)) {
+          res.set(header, resource.get(header));
+        }
+      });
+      res.status(resource.statusCode);
+      res.send(resource.body);
+    })
+    .catch(() => {
+      res.set('Content-Type', 'text/css; charset=utf-8');
+      res.status(200);
+      res.send(
+        '/* Override this by adding a File called voltoCustom.css to backend at portal_skins/custom/manage_main */',
+      );
+    });
+}
+
+export default function (express) {
+  const middleware = express.Router();
+  middleware.all(['**/voltoCustom.css$'], voltoCustomMiddleware);
+  middleware.id = 'voltoCustom.css';
+  return middleware;
+}