@eeacms/volto-clms-theme 1.1.292 → 1.1.294

package/CHANGELOG.md

@@ -4,11 +4,25 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [1.1.292](https://github.com/eea/volto-clms-theme/compare/1.1.291...1.1.292) - 2 June 2026
+### [1.1.294](https://github.com/eea/volto-clms-theme/compare/1.1.293...1.1.294) - 5 June 2026
 
 #### :hammer_and_wrench: Others
 
-- Refs #289838 - Implement CSP support in Volto's webpack implementation. [GhitaB - [`6a342dd`](https://github.com/eea/volto-clms-theme/commit/6a342dde51548f960e87a19fb6c44b0fccc64a1a)]
+- Fix redirect [Dobricean Ioan Dorian - [`18dc53d`](https://github.com/eea/volto-clms-theme/commit/18dc53d5b4fde69cf2ce95013ce7624b8dcb156d)]
+### [1.1.293](https://github.com/eea/volto-clms-theme/compare/1.1.292...1.1.293) - 5 June 2026
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`8c05ecd`](https://github.com/eea/volto-clms-theme/commit/8c05ecd107a922be765a39df0c161e5d407ae053)]
+
+#### :hammer_and_wrench: Others
+
+- add deps [Dobricean Ioan Dorian - [`1000ea9`](https://github.com/eea/volto-clms-theme/commit/1000ea9261702391c255f833e961b27c6fd9a2d5)]
+- add deps [Dobricean Ioan Dorian - [`199a21f`](https://github.com/eea/volto-clms-theme/commit/199a21f7022ff81337cd8e10c609bbbdf0421351)]
+- Add volto-authomatic dependency to package.json [dobri1408 - [`a9151d6`](https://github.com/eea/volto-clms-theme/commit/a9151d62c369a4225a6e0750b28f25f492b37138)]
+- add entra id [Dobricean Ioan Dorian - [`a167b6a`](https://github.com/eea/volto-clms-theme/commit/a167b6ac92480f9e99c1478d322cfc829c99d238)]
+### [1.1.292](https://github.com/eea/volto-clms-theme/compare/1.1.291...1.1.292) - 2 June 2026
+
 ### [1.1.291](https://github.com/eea/volto-clms-theme/compare/1.1.290...1.1.291) - 22 May 2026
 
 ### [1.1.290](https://github.com/eea/volto-clms-theme/compare/1.1.289...1.1.290) - 21 May 2026

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.292",
+  "version": "1.1.294",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -32,7 +32,8 @@
     "volto-cookie-banner",
     "@eeacms/volto-tableau",
     "@eeacms/volto-embed",
-    "@eeacms/volto-globalsearch"
+    "@eeacms/volto-globalsearch",
+    "@plone-collective/volto-authomatic"
   ],
   "resolutions": {
     "@elastic/search-ui": "1.21.2",
@@ -59,6 +60,7 @@
     "@fortawesome/react-fontawesome": "0.1.14",
     "@ginkgo-bioworks/react-json-schema-form-builder": "2.10.1",
     "@kitconcept/volto-blocks-grid": "7.0.2",
+    "@plone-collective/volto-authomatic": "2.0.1",
     "connected-react-router": "6.8.0",
     "d3-array": "^2.12.1",
     "husky": "7.0.4",

package/src/components/CLMSLoginView/AuthomaticLoginPlone.jsx

@@ -0,0 +1,372 @@
+/**
+ * Combined Login container - supports both external providers and Plone login.
+ * @module components/Login/Login
+ */
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { Link, useHistory, useLocation } from 'react-router-dom';
+import {
+  Container,
+  Button,
+  Form,
+  Input,
+  Segment,
+  Grid,
+} from 'semantic-ui-react';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { useCookies } from 'react-cookie';
+
+import { Helmet } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+import { Icon } from '@plone/volto/components';
+import { login, resetLoginRequest } from '@plone/volto/actions';
+import { toast } from 'react-toastify';
+import { Toast } from '@plone/volto/components';
+import aheadSVG from '@plone/volto/icons/ahead.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import './Login.less';
+
+// Import authomatic components and actions
+import {
+  authomaticRedirect,
+  listAuthOptions,
+  oidcRedirect,
+} from '@plone-collective/volto-authomatic/actions';
+import AuthProviders from '@plone-collective/volto-authomatic/components/AuthProviders/AuthProviders';
+import { getReturnUrl } from './loginUrl';
+
+const messages = defineMessages({
+  login: {
+    id: 'Log in',
+    defaultMessage: 'Log in',
+  },
+  loginName: {
+    id: 'Login Name',
+    defaultMessage: 'Login Name',
+  },
+  Login: {
+    id: 'Login',
+    defaultMessage: 'Login',
+  },
+  password: {
+    id: 'Password',
+    defaultMessage: 'Password',
+  },
+  cancel: {
+    id: 'Cancel',
+    defaultMessage: 'Cancel',
+  },
+  error: {
+    id: 'Error',
+    defaultMessage: 'Error',
+  },
+  loginFailed: {
+    id: 'Login Failed',
+    defaultMessage: 'Login Failed',
+  },
+  loginFailedContent: {
+    id:
+      'Both email address and password are case sensitive, check that caps lock is not enabled.',
+    defaultMessage:
+      'Both email address and password are case sensitive, check that caps lock is not enabled.',
+  },
+  register: {
+    id: 'Register',
+    defaultMessage: 'Register',
+  },
+  forgotPassword: {
+    id: 'box_forgot_password_option',
+    defaultMessage: 'Forgot your password?',
+  },
+  signInWith: {
+    id: 'Sign in with EEA Microsoft Entra ID',
+    defaultMessage: 'Sign in with EEA Microsoft Entra ID',
+  },
+  orSignIn: {
+    id: 'Or sign in with EEA Entra ID:',
+    defaultMessage: 'Or sign in with EEA Entra ID:',
+  },
+  loading: {
+    id: 'Loading',
+    defaultMessage: 'Loading',
+  },
+});
+
+/**
+ * Combined Login function.
+ * @function Login
+ * @returns {JSX.Element} Markup of the Login page.
+ */
+function Login({ intl }) {
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const location = useLocation();
+
+  // Authomatic state
+  const [startedOAuth, setStartedOAuth] = useState(false);
+  const [startedOIDC, setStartedOIDC] = useState(false);
+  const loading = useSelector((state) => state.authOptions.loading);
+  const options = useSelector((state) => state.authOptions.options);
+  const loginOAuthValues = useSelector((state) => state.authomaticRedirect);
+  const loginOIDCValues = useSelector((state) => state.oidcRedirect);
+  const [, setCookie] = useCookies();
+
+  // Plone login state
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const error = useSelector((state) => state.userSession.login.error);
+  const ploneLoading = useSelector((state) => state.userSession.login.loading);
+
+  const returnUrl = getReturnUrl(location);
+
+  useEffect(() => {
+    dispatch(listAuthOptions());
+  }, [dispatch]);
+
+  // Handle successful Plone login
+  useEffect(() => {
+    if (token) {
+      history.push(returnUrl || '/');
+      if (toast.isActive('loggedOut')) {
+        toast.dismiss('loggedOut');
+      }
+      if (toast.isActive('loginFailed')) {
+        toast.dismiss('loginFailed');
+      }
+    }
+    if (error) {
+      if (toast.isActive('loggedOut')) {
+        toast.dismiss('loggedOut');
+      }
+      if (!toast.isActive('loginFailed')) {
+        toast.error(
+          <Toast
+            error
+            title={intl.formatMessage(messages.loginFailed)}
+            content={intl.formatMessage(messages.loginFailedContent)}
+          />,
+          { autoClose: false, toastId: 'loginFailed' },
+        );
+      }
+    }
+    return () => {
+      if (toast.isActive('loginFailed')) {
+        toast.dismiss('loginFailed');
+        dispatch(resetLoginRequest());
+      }
+    };
+  }, [dispatch, token, error, intl, history, returnUrl]);
+
+  // Handle OAuth redirects
+  useEffect(() => {
+    const next_url = loginOAuthValues.next_url;
+    const session = loginOAuthValues.session;
+    if (next_url && session && startedOAuth) {
+      setStartedOAuth(false);
+      // Give time to save state to localstorage
+      setTimeout(function () {
+        window.location.href = next_url;
+      }, 500);
+    }
+  }, [startedOAuth, loginOAuthValues]);
+
+  useEffect(() => {
+    const next_url = loginOIDCValues.next_url;
+    if (next_url && startedOIDC) {
+      setStartedOIDC(false);
+      // Give time to save state to localstorage
+      setTimeout(function () {
+        window.location.href = next_url;
+      }, 500);
+    }
+  }, [startedOIDC, loginOIDCValues]);
+
+  useEffect(() => {
+    if (
+      options !== undefined &&
+      options.length === 1 &&
+      options[0].id === 'oidc'
+    ) {
+      setStartedOIDC(true);
+      dispatch(oidcRedirect('oidc'));
+    }
+  }, [options, dispatch]);
+
+  // Handle provider selection
+  const onSelectProvider = (provider) => {
+    setStartedOAuth(true);
+    setCookie('return_url', getReturnUrl(location), { path: '/' });
+    dispatch(authomaticRedirect(provider.id));
+  };
+
+  // Handle Plone login form submission
+  const onLogin = (event) => {
+    dispatch(
+      login(
+        document.getElementsByName('login')[0].value,
+        document.getElementsByName('password')[0].value,
+      ),
+    );
+    event.preventDefault();
+  };
+
+  // Prepare providers for external login
+  const validProviders = options
+    ? options.filter((provider) => provider.id !== 'oidc')
+    : [];
+
+  return (
+    <div id="page-login">
+      <Helmet title={intl.formatMessage(messages.Login)} />
+      <Container text>
+        <Segment.Group raised>
+          <Segment className="primary">
+            <FormattedMessage id="Log In" defaultMessage="Login" />
+          </Segment>
+          <Segment secondary>
+            <FormattedMessage
+              id="Sign in to start session"
+              defaultMessage="Sign in to start session"
+            />
+          </Segment>
+
+          {/* Plone Login Form */}
+          <Segment className="form">
+            <Form method="post" onSubmit={onLogin}>
+              <Form.Field inline className="help">
+                <Grid>
+                  <Grid.Row stretched>
+                    <Grid.Column width="4">
+                      <div className="wrapper">
+                        <label htmlFor="login">
+                          <FormattedMessage
+                            id="Login Name"
+                            defaultMessage="Login Name"
+                          />
+                        </label>
+                      </div>
+                    </Grid.Column>
+                    <Grid.Column width="8">
+                      <Input
+                        id="login"
+                        name="login"
+                        placeholder={intl.formatMessage(messages.loginName)}
+                      />
+                    </Grid.Column>
+                  </Grid.Row>
+                </Grid>
+              </Form.Field>
+              <Form.Field inline className="help">
+                <Grid>
+                  <Grid.Row stretched>
+                    <Grid.Column stretched width="4">
+                      <div className="wrapper">
+                        <label htmlFor="password">
+                          <FormattedMessage
+                            id="Password"
+                            defaultMessage="Password"
+                          />
+                        </label>
+                      </div>
+                    </Grid.Column>
+                    <Grid.Column stretched width="8">
+                      <Input
+                        type="password"
+                        id="password"
+                        autoComplete="current-password"
+                        name="password"
+                        placeholder={intl.formatMessage(messages.password)}
+                        tabIndex={0}
+                      />
+                    </Grid.Column>
+                  </Grid.Row>
+                </Grid>
+              </Form.Field>
+              <Form.Field inline className="help">
+                <Grid>
+                  <Grid.Row stretched>
+                    {config.settings.showSelfRegistration && (
+                      <Grid.Column stretched width="12">
+                        <p className="help">
+                          <Link to="/register">
+                            {intl.formatMessage(messages.register)}
+                          </Link>
+                        </p>
+                      </Grid.Column>
+                    )}
+                    <Grid.Column stretched width="12">
+                      <p className="help">
+                        <Link to="/passwordreset">
+                          {intl.formatMessage(messages.forgotPassword)}
+                        </Link>
+                      </p>
+                    </Grid.Column>
+                  </Grid.Row>
+                </Grid>
+              </Form.Field>
+            </Form>
+          </Segment>
+
+          <Segment className="actions" clearing>
+            <Button
+              basic
+              primary
+              icon
+              floated="right"
+              type="submit"
+              form="login-form"
+              id="login-form-submit"
+              aria-label={intl.formatMessage(messages.login)}
+              title={intl.formatMessage(messages.login)}
+              loading={ploneLoading}
+              onClick={onLogin}
+            >
+              <Icon className="circled" name={aheadSVG} size="30px" />
+            </Button>
+
+            <Button
+              basic
+              secondary
+              icon
+              floated="right"
+              id="login-form-cancel"
+              as={Link}
+              to="/"
+              aria-label={intl.formatMessage(messages.cancel)}
+              title={intl.formatMessage(messages.cancel)}
+            >
+              <Icon className="circled" name={clearSVG} size="30px" />
+            </Button>
+          </Segment>
+        </Segment.Group>
+
+        {/* External Login Providers - Outside the main form */}
+        {validProviders && validProviders.length > 0 && (
+          <div style={{ marginTop: '2rem', width: '100%' }}>
+            <div style={{ textAlign: 'center', marginBottom: '1rem' }}>
+              <FormattedMessage
+                id="Or sign in with EEA Entra ID:"
+                defaultMessage="Or sign in with EEA Entra ID:"
+              />
+            </div>
+            <div style={{ width: '100%' }}>
+              {!loading && validProviders && (
+                <AuthProviders
+                  providers={validProviders}
+                  action="login"
+                  onSelectProvider={onSelectProvider}
+                />
+              )}
+              {(loading || validProviders.length === 0) && (
+                <div style={{ textAlign: 'center', padding: '1rem' }}>
+                  {intl.formatMessage(messages.loading)}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </Container>
+    </div>
+  );
+}
+
+export default injectIntl(Login);

package/src/components/CLMSLoginView/Login.less

@@ -0,0 +1,8 @@
+.ui.button.authenticationProvider {
+  display: inline-flex;
+  width: 100% !important;
+  align-items: center;
+  margin: 0.5rem auto;
+  border-radius: 3px;
+  box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
+}

package/src/components/CLMSLoginView/loginUrl.js

@@ -0,0 +1,9 @@
+import qs from 'query-string';
+
+export function getReturnUrl(location) {
+  return (
+    qs.parse(location.search || '').return_url ||
+    (location.pathname || '/').replace(/\/(?:login|login-plone)\/?$/, '') ||
+    '/'
+  );
+}

package/src/index.js

@@ -4,7 +4,7 @@ import customBlocks, {
 } from '@eeacms/volto-clms-theme/components/Blocks/customBlocks';
 
 // ROUTE VIEWS
-import { ContactForm, Search, Sitemap, Login } from '@plone/volto/components';
+import { ContactForm, Search, Sitemap } from '@plone/volto/components';
 
 // VIEWS
 import CLMSDatasetDetailView from '@eeacms/volto-clms-theme/components/CLMSDatasetDetailView/CLMSDatasetDetailView';
@@ -52,7 +52,7 @@ import { CheckboxHtmlWidget } from './components/Blocks/CustomTemplates/VoltoFor
 import reducers from './reducers';
 import CookieBanner from 'volto-cookie-banner/CookieBannerContainer';
 import CLMSLoginView from './components/CLMSLoginView/CLMSLogin';
-
+import AuthomaticLoginPlone from './components/CLMSLoginView/AuthomaticLoginPlone';
 //SLATE CONFIGURATION
 import installLinkEditor from '@plone/volto-slate/editor/plugins/AdvancedLink';
 
@@ -274,11 +274,11 @@ const applyConfig = (config) => {
     ...config.addonRoutes,
     {
       path: '/login-plone',
-      component: Login,
+      component: AuthomaticLoginPlone,
     },
     {
       path: '/**/login-plone',
-      component: Login,
+      component: AuthomaticLoginPlone,
     },
     {
       path: '/login',