@eeacms/volto-clms-theme 1.0.41 → 1.0.45

package/src/components/CLMSProfileView/CLMSApiTokensView.jsx

@@ -67,7 +67,7 @@ const messages = defineMessages({
   },
   createdToken: {
     id: 'Created token name',
-    defaultMessage: 'Token',
+    defaultMessage: 'The token has been created successfuly',
   },
   copyButton: {
     id: 'Copy created token button',
@@ -144,11 +144,12 @@ class CLMSApiTokensView extends Component {
         ip_range: PropTypes.string,
         issued: PropTypes.string,
         key_id: PropTypes.string,
-        last_used: PropTypes.string,
-        title: PropTypes.string,
+        public_key: PropTypes.string,
+        private_key: PropTypes.string,
       }),
     ),
   };
+
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
@@ -184,12 +185,9 @@ class CLMSApiTokensView extends Component {
   onClose() {
     this.componentDidMount();
     this.setState({
-      value: '',
-      createdToken: false,
-      modal: false,
-      tokenTitle: '',
-      textToCopy: '',
       createNewToken: false,
+      public_key: undefined,
+      private_key: undefined,
     });
   }
 
@@ -203,10 +201,10 @@ class CLMSApiTokensView extends Component {
 
   handleClick() {
     this.setState({
-      createdToken: true,
       modal: false,
-      button: false,
       createNewToken: true,
+      public_key: undefined,
+      private_key: undefined,
     });
   }
 
@@ -225,14 +223,14 @@ class CLMSApiTokensView extends Component {
     this.props.getUser(this.props.userId);
     this.props.getTokens();
     this.setState({
-      value: '',
-      tokenTitle: '',
+      value: undefined,
+      tokenTitle: undefined,
       button: false,
-      createNewToken: true,
+      // createNewToken: true,
       modal: false,
       createdToken: false,
-      textToCopy: '',
-      key_id: '',
+      textToCopy: undefined,
+      key_id: undefined,
     });
   }
 
@@ -263,21 +261,36 @@ class CLMSApiTokensView extends Component {
               {this.props.intl.formatMessage(messages.ApiTokens)}
             </h1>
             <div>
-              <h3>{this.props.intl.formatMessage(messages.title)}</h3>
+              <h2>{this.props.intl.formatMessage(messages.title)}</h2>
               <p>{this.props.intl.formatMessage(messages.description)}</p>
               {this.props.createdTokens?.map((item) => (
                 <>
                   <div>
                     <p>{item.title}</p>
                     <p>{item.key_id}</p>
-                    <CclButton
-                      mode={'filled'}
-                      onClick={() => {
-                        this.deleteToken(item.key_id);
-                      }}
+                    <CclModal
+                      onClick={() => this.onClose}
+                      trigger={
+                        <CclButton mode={'filled'}>
+                          {this.props.intl.formatMessage(messages.deleteButton)}
+                        </CclButton>
+                      }
+                      size="small"
                     >
-                      {this.props.intl.formatMessage(messages.deleteButton)}
-                    </CclButton>
+                      <h4>This token will be deleted forever</h4>
+                      <p>
+                        You will not be able to use this token again. Only
+                        delete your tokens when you are absolutely sure of it
+                      </p>
+                      <CclButton
+                        mode={'filled'}
+                        onClick={() => {
+                          this.deleteToken(item.key_id);
+                        }}
+                      >
+                        {'I confirm that I want to delete this token'}
+                      </CclButton>
+                    </CclModal>
                   </div>
                 </>
               ))}
@@ -351,31 +364,40 @@ class CLMSApiTokensView extends Component {
                       <>
                         {(this.state.createdToken === true && (
                           <div>
-                            <p>
+                            <h3>
                               {this.props.intl.formatMessage(
                                 messages.createdToken,
                               )}
-                            </p>
+                            </h3>
                             <form className="ccl-form search-form">
                               {this.props.newTokens?.map((item) => (
                                 <>
-                                  {(item.public_key !== undefined && (
+                                  {(item?.private_key && (
                                     <>
-                                      <input
-                                        value={item.public_key}
+                                      <p>{'Download your service key.'}</p>
+                                      <p>
+                                        {
+                                          "This is the only time your private key will be displayed - it will not be stored on the server, and can't be recovered should you fail to save it."
+                                        }
+                                      </p>
+                                      <p>
+                                        {
+                                          'You should copy & paste this key into a .json file, and store this file in a location accessible only to your service application. This key grants anyone in possession of it full access to this account. You should therefore make sure to protect it with the least file system permissions possible.'
+                                        }
+                                      </p>
+
+                                      <textarea
                                         disabled="disabled"
-                                        type="text"
-                                        className="ccl-text-input"
                                         id="created_token"
                                         name="createdToken"
-                                        placeholder=""
-                                        aria-label="Created token"
+                                        class="ccl-text-input"
+                                        value={JSON.stringify(item)}
                                       />
                                       <CclButton
                                         mode={'filled'}
                                         onClick={() => {
                                           navigator.clipboard.writeText(
-                                            item.public_key,
+                                            JSON.stringify(item),
                                           );
                                         }}
                                       >

package/src/components/CLMSProfileView/CLMSProfileView.jsx

@@ -3,18 +3,20 @@
  * @module components/CLMSProfileView/CLMSProfileView
  */
 
+import {
+  CLMSApiTokensView,
+  CLMSUserProfileView,
+} from '@eeacms/volto-clms-theme/components/CLMSProfileView';
 import React, { Component } from 'react';
+import { getUser, updateUser } from '@plone/volto/actions';
+
+import CclTabs from '@eeacms/volto-clms-theme/components/CclTab/CclTabs';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 import { compose } from 'redux';
-import jwtDecode from 'jwt-decode';
-import { getUser, updateUser } from '@plone/volto/actions';
+import { connect } from 'react-redux';
 import { getBaseUrl } from '@plone/volto/helpers';
-import CclTabs from '@eeacms/volto-clms-theme/components/CclTab/CclTabs';
-import {
-  CLMSUserProfileView,
-  CLMSApiTokensView,
-} from '@eeacms/volto-clms-theme/components/CLMSProfileView';
+import { getExtraBreadcrumbItems } from '../../actions';
+import jwtDecode from 'jwt-decode';
 
 /**
  * CLMSProfileView class.
@@ -32,13 +34,18 @@ class CLMSProfileView extends Component {
     children: PropTypes.instanceOf(Array),
     user: PropTypes.shape({
       '@id': PropTypes.string,
-      description: PropTypes.string,
+      are_you_registering_on_behalf_on_an_organisation_: PropTypes.bool,
+      country: PropTypes.string,
       email: PropTypes.string,
       fullname: PropTypes.string,
+      how_do_you_intend_to_use_the_products: PropTypes.arrayOf(
+        PropTypes.string,
+      ),
       id: PropTypes.string,
-      location: PropTypes.string,
-      nickname: PropTypes.string,
-      portrait: PropTypes.string,
+      organisation_institutional_domain: PropTypes.arrayOf(PropTypes.string),
+      organisation_name: PropTypes.string,
+      organisation_url: PropTypes.string,
+      professional_thematic_domain: PropTypes.arrayOf(PropTypes.string),
       roles: PropTypes.array,
       username: PropTypes.string,
       return_url: PropTypes.string,
@@ -56,8 +63,14 @@ class CLMSProfileView extends Component {
    */
   render() {
     const loggedIn = !!this.props.userId;
+    this.props.getExtraBreadcrumbItems([
+      {
+        title: 'Profile',
+        pathname: this.props.location.pathname,
+      },
+    ]);
     return (
-      <>
+      <div className="ccl-container ">
         {loggedIn && (
           <>
             <CclTabs>
@@ -70,7 +83,7 @@ class CLMSProfileView extends Component {
             </CclTabs>
           </>
         )}
-      </>
+      </div>
     );
   }
 }
@@ -83,6 +96,6 @@ export default compose(
         ? jwtDecode(state.userSession.token).sub
         : '',
     }),
-    { getUser, updateUser, getBaseUrl },
+    { getUser, updateUser, getBaseUrl, getExtraBreadcrumbItems },
   ),
 )(CLMSProfileView);

package/src/components/CLMSProfileView/CLMSUserProfileView.jsx

@@ -14,6 +14,7 @@ import { toast } from 'react-toastify';
 import { getUser, updateUser } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
 import { Container } from 'semantic-ui-react';
+import { getUserSchema } from '../../actions';
 
 const messages = defineMessages({
   UserProfile: {
@@ -83,13 +84,18 @@ class CLMSUserProfileView extends Component {
   static propTypes = {
     user: PropTypes.shape({
       '@id': PropTypes.string,
-      description: PropTypes.string,
+      are_you_registering_on_behalf_on_an_organisation_: PropTypes.bool,
+      country: PropTypes.string,
       email: PropTypes.string,
       fullname: PropTypes.string,
+      how_do_you_intend_to_use_the_products: PropTypes.arrayOf(
+        PropTypes.string,
+      ),
       id: PropTypes.string,
-      location: PropTypes.string,
-      nickname: PropTypes.string,
-      portrait: PropTypes.string,
+      organisation_institutional_domain: PropTypes.arrayOf(PropTypes.string),
+      organisation_name: PropTypes.string,
+      organisation_url: PropTypes.string,
+      professional_thematic_domain: PropTypes.arrayOf(PropTypes.string),
       roles: PropTypes.array,
       username: PropTypes.string,
       return_url: PropTypes.string,
@@ -100,10 +106,12 @@ class CLMSUserProfileView extends Component {
     getUser: PropTypes.func.isRequired,
     updateUser: PropTypes.func.isRequired,
     getBaseUrl: PropTypes.func.isRequired,
+    getUserSchema: PropTypes.func.isRequired,
   };
 
   componentDidMount() {
     this.props.getUser(this.props.userId);
+    this.props.getUserSchema();
   }
 
   /**
@@ -140,66 +148,30 @@ class CLMSUserProfileView extends Component {
       <>
         {loggedIn && (
           <Container>
-            <h1 className="page-title">
-              {this.props.intl.formatMessage(messages.UserProfile)}
-            </h1>
             <div>
-              {this.props.loaded && (
-                <Form
-                  formData={this.props.user}
-                  schema={{
-                    fieldsets: [
-                      {
-                        id: 'default',
-                        title: this.props.intl.formatMessage(messages.default),
-                        fields: ['fullname', 'email', 'portrait', 'location'],
-                      },
-                    ],
-                    properties: {
-                      fullname: {
-                        description: this.props.intl.formatMessage(
-                          messages.fullnameDescription,
-                        ),
-                        title: this.props.intl.formatMessage(
-                          messages.fullnameTitle,
-                        ),
-                        type: 'string',
-                      },
-                      email: {
-                        description: this.props.intl.formatMessage(
-                          messages.emailDescription,
-                        ),
-                        title: this.props.intl.formatMessage(
-                          messages.emailTitle,
-                        ),
-                        type: 'string',
-                      },
-                      portrait: {
-                        description: this.props.intl.formatMessage(
-                          messages.portraitDescription,
-                        ),
-                        title: this.props.intl.formatMessage(
-                          messages.portraitTitle,
-                        ),
-                        type: 'object',
-                      },
-                      location: {
-                        description: this.props.intl.formatMessage(
-                          messages.locationDescription,
-                        ),
-                        title: this.props.intl.formatMessage(
-                          messages.locationTitle,
-                        ),
-                        type: 'string',
-                      },
-                    },
-                    required: ['email'],
-                  }}
-                  onSubmit={this.onSubmit}
-                  onCancel={this.onCancel}
-                  loading={this.props.loading}
-                />
-              )}
+              <h1 className="page-title">
+                {this.props.intl.formatMessage(messages.UserProfile)}
+              </h1>
+              <p>
+                Use this form to update your profile details. Be aware that if
+                you change your fullname and e-mail address they will be
+                rewriten when you log in again next time. This is because we are
+                using EU Login to enter this site. <br />
+                If you want to change your fullname and e-mail address, please
+                do so in your{' '}
+                <a href="https://ecas.ec.europa.eu/cas/">EU Login account</a>.
+              </p>
+              <div>
+                {this.props?.userschema?.loaded && (
+                  <Form
+                    formData={this.props.user}
+                    schema={this.props.userschema.userschema}
+                    onSubmit={this.onSubmit.bind(this)}
+                    onCancel={this.onCancel}
+                    loading={this.props.userschema.loading}
+                  />
+                )}
+              </div>
             </div>
           </Container>
         )}
@@ -218,7 +190,8 @@ export default compose(
         : '',
       loaded: state.users.get.loaded,
       loading: state.users.update.loading,
+      userschema: state.userschema,
     }),
-    { getUser, updateUser, getBaseUrl },
+    { getUser, updateUser, getBaseUrl, getUserSchema },
   ),
 )(CLMSUserProfileView);

package/src/components/CclCard/CclCard.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import './cards.less';
 import PropTypes from 'prop-types';
-import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as mime from 'react-native-mime-types';
 
@@ -56,14 +55,9 @@ function CclCard(props) {
               </div>
               <div className="card-text">
                 <div className="card-title">
-                  <a href={card?.file?.download || '#'}>
-                    {card?.title || 'Card default title'}
-                  </a>
+                  <a href={url}>{card?.title || 'Card default title'}</a>
                 </div>
                 <div className="card-description">{card?.description}</div>
-                <div className="card-button">
-                  <CclButton url={url}>Access to product</CclButton>
-                </div>
                 {children}
               </div>
             </>

package/src/components/CclCard/cards.less

@@ -99,7 +99,7 @@
   background-color: #a0b1280f;
 }
 
-.card-block .card-image {
+.card-block .card-block-image {
   height: 12rem;
 }
 

package/src/components/CclLoginModal/CclLoginModal.jsx

@@ -0,0 +1,83 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import CclModal from '@eeacms/volto-clms-theme/components/CclModal/CclModal';
+import { useDispatch, useSelector } from 'react-redux';
+import { getRegistry } from '@eeacms/volto-clms-theme/actions';
+import { FormattedMessage } from 'react-intl';
+import config from '@plone/volto/registry';
+import { toPublicURL } from '@plone/volto/helpers/Url/Url';
+import './ccl-login-modal.css';
+/**
+ * Login Modal component doc.
+ * @function CclLoginModal
+ * @example <CclLoginModal />
+ *
+ */
+function CclLoginModal() {
+  const dispatch = useDispatch();
+  const registryRecords = useSelector((state) => state.registry.records);
+  const [loginUrl, setLoginUrl] = React.useState('');
+  const registry_key = config.settings?.registry?.login_url || null;
+
+  useEffect(() => {
+    if (registryRecords && registry_key in registryRecords) {
+      setLoginUrl(registryRecords[registry_key]);
+    }
+  }, [registryRecords, registry_key]);
+
+  function modalStatus(status) {
+    if (status === true) {
+      dispatch(getRegistry(registry_key));
+    }
+  }
+
+  return (
+    <CclModal
+      trigger={
+        <div className="header-login-link">
+          <FormattedMessage
+            id="loginRegister"
+            defaultMessage="Register/Login"
+          />
+        </div>
+      }
+      size="tiny"
+      modalStatus={modalStatus}
+    >
+      <div className="modal-login-title">Registration / Login</div>
+      <div className="modal-login-text">
+        <p>
+          This site uses EU Login to handle user registration and login. You can
+          read more about this service in the{' '}
+          <a href="https://ecas.ec.europa.eu/cas/about.html">
+            EU Login site help
+          </a>
+          .
+        </p>
+        <p>
+          {' '}
+          When you clik on the following link, you will be sent to EU Login and
+          after a successful login there you will be redirected back to this
+          site.
+        </p>
+        <p>
+          If you have any issues or questions, please contact us using the
+          <a href="/en/contact-service-helpdesk"> helpdesk</a>.
+        </p>
+      </div>
+      <a
+        href={toPublicURL(loginUrl) || '#'}
+        className="ccl-button ccl-button-green"
+      >
+        Login using EU Login
+      </a>
+    </CclModal>
+  );
+}
+
+CclLoginModal.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  marginBottom: PropTypes.bool,
+};
+export default CclLoginModal;

package/src/components/CclLoginModal/ccl-login-modal.css

@@ -0,0 +1,3 @@
+.header-login-link {
+  color: white;
+}

package/src/components/CclModal/CclModal.jsx

@@ -3,13 +3,28 @@ import { Modal } from 'semantic-ui-react';
 import './modal.less';
 
 function CclModal(props) {
+  let {
+    trigger,
+    children,
+    size = 'fullscreen',
+    modalStatus = () => {},
+  } = props;
   const [open, setOpen] = React.useState(false);
-  let { trigger, children, size } = props;
+
+  function openModal() {
+    setOpen(true);
+    modalStatus(true);
+  }
+
+  function closeModal() {
+    setOpen(false);
+    modalStatus(false);
+  }
 
   return (
     <Modal
-      onClose={() => setOpen(false)}
-      onOpen={() => setOpen(true)}
+      onClose={() => closeModal()}
+      onOpen={() => openModal()}
       open={open}
       trigger={trigger}
       className={'modal-clms'}
@@ -21,8 +36,8 @@ function CclModal(props) {
             <span
               className="ccl-icon-close"
               aria-label="Close"
-              onClick={() => setOpen(false)}
-              onKeyDown={() => setOpen(false)}
+              onClick={() => closeModal()}
+              onKeyDown={() => closeModal()}
               tabIndex="0"
               role="button"
             ></span>

package/src/components/Widgets/ContactWidget.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+
+import ObjectListWidget from '@plone/volto/components/manage/Widgets/ObjectListWidget';
+
+const ItemSchema = {
+  title: 'Contact',
+  properties: {
+    organisationName: {
+      title: 'Organisation Name',
+      description: 'Enter the Organisation Name of the contact.',
+      type: 'string',
+    },
+    deliveryPoint: {
+      title: 'Delivery Point',
+      description: 'Enter the Delivery Point of the contact.',
+      type: 'string',
+    },
+    city: {
+      title: 'City',
+      description: 'Enter the City of the contact.',
+      type: 'string',
+    },
+    administrativeArea: {
+      title: 'Administrative Area',
+      description: 'Enter the Administrative Area of the contact.',
+      type: 'string',
+    },
+    postalCode: {
+      title: 'Postal Code',
+      description: 'Enter the Postal Code of the contact.',
+      type: 'string',
+    },
+    country: {
+      title: 'Country',
+      description: 'Enter the Country of the contact.',
+      type: 'string',
+    },
+    electronicMailAddress: {
+      title: 'Electronic Mail Address',
+      description: 'Enter the Electronic Mail Address of the contact.',
+      type: 'string',
+    },
+    url: {
+      title: 'URL',
+      description: 'Enter the URL of the contact.',
+      type: 'string',
+    },
+    urlTitle: {
+      title: 'URL Title',
+      description: 'Enter the URL Title of the contact.',
+      type: 'string',
+    },
+    roleCode: {
+      title: 'Role Code',
+      description: 'Enter the Role Code of the contact.',
+      type: 'string',
+    },
+  },
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Contact',
+      fields: [
+        'organisationName',
+        'deliveryPoint',
+        'city',
+        'administrativeArea',
+        'postalCode',
+        'country',
+        'electronicMailAddress',
+        'url',
+        'urlTitle',
+        'roleCode',
+      ],
+    },
+  ],
+  required: [],
+};
+
+const ContactWidget = (props) => {
+  return (
+    <ObjectListWidget
+      schema={ItemSchema}
+      {...props}
+      value={props.value?.items || props.default?.items || []}
+      onChange={(id, value) => props.onChange(id, { items: value })}
+    />
+  );
+};
+
+export default ContactWidget;