@eeacms/volto-bise-policy 1.2.21 → 1.2.22

package/CHANGELOG.md

@@ -4,6 +4,12 @@ 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.2.22](https://github.com/eea/volto-bise-policy/compare/1.2.21...1.2.22) - 22 August 2025
+
+#### :hammer_and_wrench: Others
+
+- Update Login.jsx [dobri1408 - [`e7c2546`](https://github.com/eea/volto-bise-policy/commit/e7c2546fe6709e5a43098f80787cabd6615e37c0)]
+- entra id login [Dobricean Ioan Dorian - [`b8edbe8`](https://github.com/eea/volto-bise-policy/commit/b8edbe8a4a0be037308df154283075bf0111f4a0)]
 ### [1.2.21](https://github.com/eea/volto-bise-policy/compare/1.2.20...1.2.21) - 7 August 2025
 
 #### :bug: Bug Fixes
@@ -126,7 +132,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - chore: customize root theme to use volto-spotlight - refs #259794 [ana-oprea - [`347f96e`](https://github.com/eea/volto-bise-policy/commit/347f96e335139f9656abd34c308c531b05de85e7)]
 - chore: change the theme and alias to volto-spotlight and add volto-spotlight to package.json - refs #259794 [ana-oprea - [`52732a1`](https://github.com/eea/volto-bise-policy/commit/52732a17b3247a04ffae0a3f5118e173afa98157)]
 - chore: change theme to eea-volto-theme, change config.alias - refs #259794 [ana-oprea - [`c2d08ea`](https://github.com/eea/volto-bise-policy/commit/c2d08ea08a7f0e5f6f7d32149e60ea3f3e901923)]
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`a3c9488`](https://github.com/eea/volto-bise-policy/commit/a3c9488c5d09ba97fe5976675524d436080a2460)]
 - chore: husky, lint-staged use fixed versions [valentinab25 - [`fddc30f`](https://github.com/eea/volto-bise-policy/commit/fddc30f11a1d8ec290edaca2d924282f5e113bc6)]
 - chore:volto 16 in tests, update docs, fix stylelint overrides [valentinab25 - [`005ce74`](https://github.com/eea/volto-bise-policy/commit/005ce742dbd014fde27e417059251233365766dd)]
 
@@ -139,17 +144,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - test: Update jest,Jenkinsfile,lint to volto-addons-template PR30 [valentinab25 - [`c1277ba`](https://github.com/eea/volto-bise-policy/commit/c1277bacf840ee9feccbfd6a2c85f0b25a9a9125)]
 - test: Update jest,Jenkinsfile,lint to volto-addons-template PR30 [valentinab25 - [`c944153`](https://github.com/eea/volto-bise-policy/commit/c944153710fd53c5d48863cf363464273e25f52e)]
 - test: Update jest,Jenkinsfile,lint to volto-addons-template PR30 [valentinab25 - [`d648d52`](https://github.com/eea/volto-bise-policy/commit/d648d525a2fc5076577fe0f75ff9782bf0d1d4e9)]
-- test: [JENKINS] fix jest config, fail with logs on coverage [valentinab25 - [`2a7affe`](https://github.com/eea/volto-bise-policy/commit/2a7affe33d737704bdba117c4a5c8c6748ef7a47)]
-- test: [JENKINS] fix jest config, fail with logs on coverage [valentinab25 - [`5929642`](https://github.com/eea/volto-bise-policy/commit/59296420105d0e8c1f1547aa0cd17a019e478c2b)]
-- test: [JENKINS] fix jest config, fail with logs on coverage [valentinab25 - [`b1142f1`](https://github.com/eea/volto-bise-policy/commit/b1142f1da3667a9f56720f65bebce897a5dd8005)]
 - test: cypress should not wait for navigation, actions, types - refs #259794 [ana-oprea - [`188637c`](https://github.com/eea/volto-bise-policy/commit/188637c78a0cae71b5ee48022507d559dfaceb3e)]
-- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`fa4e473`](https://github.com/eea/volto-bise-policy/commit/fa4e473018386ec3f09d7300d655c8cccdc19a0e)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`1d9135b`](https://github.com/eea/volto-bise-policy/commit/1d9135bb878b3c7a1b828085b99b9d27d78ce60e)]
 - remove cypress tests as it doesn t work on bise [Dobricean Ioan Dorian - [`ba7e2de`](https://github.com/eea/volto-bise-policy/commit/ba7e2defea2dcfd01537c3abb41fa9515ff0a3e3)]
 - add mega menu layout settings as #259794 said [dobri1408 - [`b9a3683`](https://github.com/eea/volto-bise-policy/commit/b9a3683e7d85f8c88ad8feac975c47c434f62c4a)]
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`9181908`](https://github.com/eea/volto-bise-policy/commit/9181908c7f4b51bdf83a34f8c7f25827de9b1cc6)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`099d796`](https://github.com/eea/volto-bise-policy/commit/099d79669471e6924bf1e0bc51a79d54379c3a1a)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`6d5d8e2`](https://github.com/eea/volto-bise-policy/commit/6d5d8e29b04ddb92628245570055067ca3dcbb6c)]
 - test: fix comment [valentinab25 - [`4f27d5a`](https://github.com/eea/volto-bise-policy/commit/4f27d5af2e8895c7af4f1157521ca42682b96e23)]
 - test: EN locales, pre-commit fix, feature PRs checks Refs #257193 [valentinab25 - [`4c2fcb0`](https://github.com/eea/volto-bise-policy/commit/4c2fcb01065e1ef962317ba7be788fd1df079618)]
 - test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`89afaa1`](https://github.com/eea/volto-bise-policy/commit/89afaa15892930452027ef8c8593fc6d193cda70)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-bise-policy",
-  "version": "1.2.21",
+  "version": "1.2.22",
   "description": "@eeacms/volto-bise-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -18,7 +18,8 @@
     "@eeacms/volto-eea-design-system",
     "@eeacms/volto-eea-website-theme",
     "@eeacms/volto-resize-helper",
-    "@eeacms/volto-spotlight"
+    "@eeacms/volto-spotlight",
+    "@plone-collective/volto-authomatic"
   ],
   "repository": {
     "type": "git",
@@ -31,6 +32,7 @@
     "@eeacms/volto-eea-website-theme": "*",
     "@eeacms/volto-resize-helper": "*",
     "@eeacms/volto-spotlight": "*",
+    "@plone-collective/volto-authomatic": "2.0.1",
     "esri-loader": "3.7.0",
     "plotly.js": "^2.28.0",
     "react-plotly.js": "2.6.0"

package/src/customizations/@plone-collective/volto-authomatic/components/Login/Login.jsx

@@ -0,0 +1,389 @@
+/**
+ * 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 qs from 'query-string';
+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';
+
+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',
+  },
+});
+
+/**
+ * Get return url function.
+ * @function getReturnUrl
+ * @param  {Object} location Location object.
+ * @returns {string} Return url.
+ */
+function getReturnUrl(location) {
+  return `${
+    qs.parse(location.search).return_url ||
+    (location.pathname === '/login'
+      ? '/'
+      : location.pathname.replace('/login', ''))
+  }`;
+}
+
+/**
+ * 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 =
+    qs.parse(location.search).return_url ||
+    location.pathname.replace(/\/login\/?$/, '').replace(/\/logout\/?$/, '') ||
+    '/';
+
+  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 external provider:"
+                defaultMessage="Or sign in with external provider:"
+              />
+            </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);