@eeacms/volto-marine-policy 2.0.35 → 2.0.37

package/CHANGELOG.md

@@ -4,6 +4,24 @@ 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).
 
+### [2.0.37](https://github.com/eea/volto-marine-policy/compare/2.0.36...2.0.37) - 27 November 2025
+
+#### :hammer_and_wrench: Others
+
+- Delete src/customizations/@plone-collective/volto-authomatic/components/Login directory [dobri1408 - [`6ae6856`](https://github.com/eea/volto-marine-policy/commit/6ae68563420e56e32f073cd5950494fdc210b0a1)]
+### [2.0.36](https://github.com/eea/volto-marine-policy/compare/2.0.35...2.0.36) - 10 November 2025
+
+#### :rocket: New Features
+
+- feat: new variation for Demo sites explorer [laszlocseh - [`58799b2`](https://github.com/eea/volto-marine-policy/commit/58799b23a8c0ff0f34ff2aeee8991113baaaa3d9)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`db0e43a`](https://github.com/eea/volto-marine-policy/commit/db0e43a4def21dddc41640173ff963ad97b6d32a)]
+
+#### :hammer_and_wrench: Others
+
+- fix demo sites map [laszlocseh - [`b4e676a`](https://github.com/eea/volto-marine-policy/commit/b4e676a445bcee52dc74b36662c36e149c74c841)]
 ### [2.0.35](https://github.com/eea/volto-marine-policy/compare/2.0.34...2.0.35) - 3 November 2025
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-marine-policy",
-  "version": "2.0.35",
+  "version": "2.0.37",
   "description": "@eeacms/volto-marine-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Blocks/DemoSitesExplorer/DemoSitesExplorerView.js

@@ -19,8 +19,7 @@ export default function DemoSitesExplorerView(props) {
     : '/marine/@@demo-sites-map.arcgis.json';
   let cases = useCases(addAppURL(cases_url));
   const [selectedCase, onSelectedCase] = React.useState(null);
-  const { enableMarineMO } = props.data;
-  // console.log('enableMarineMO', enableMarineMO);
+  const { mapVariation } = props.data;
   const { properties } = props;
   // if the map is rendered on the indicator page we hide the Target and
   // the Indicator filters, and hide the chart on the right side
@@ -39,7 +38,10 @@ export default function DemoSitesExplorerView(props) {
   const [filters, setFilters] = React.useState([]);
   const [map, setMap] = React.useState();
   const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
-  const columnsLength = hideFilters || enableMarineMO ? 12 : 8;
+  const columnsLength =
+    hideFilters || ['blueParks', 'blueParksObj1'].includes(mapVariation)
+      ? 12
+      : 8;
 
   React.useEffect(() => {
     const _filters = getFilters(activeItems, indicatorOnly);
@@ -60,11 +62,11 @@ export default function DemoSitesExplorerView(props) {
       cases,
       activeFilters,
       indicatorOnly,
-      enableMarineMO,
+      mapVariation,
     );
 
     setActiveItems(activeItems);
-  }, [activeFilters, cases, indicatorOnly, enableMarineMO]);
+  }, [activeFilters, cases, indicatorOnly, mapVariation]);
 
   if (__SERVER__) return '';
 
@@ -86,7 +88,7 @@ export default function DemoSitesExplorerView(props) {
           hideFilters={hideFilters}
           setActiveFilters={setActiveFilters}
           highlightedIndex={highlightedIndex}
-          enableMarineMO={enableMarineMO}
+          mapVariation={mapVariation}
         />
       </Grid.Row>
       <Grid.Row>
@@ -108,10 +110,13 @@ export default function DemoSitesExplorerView(props) {
                 setMap={setMap}
                 highlightedIndex={highlightedIndex}
                 setHighlightedIndex={setHighlightedIndex}
-                enableMarineMO={enableMarineMO}
+                mapVariation={mapVariation}
               />
             </Grid.Column>
-            {!(hideFilters || enableMarineMO) ? (
+            {!(
+              hideFilters ||
+              ['blueParks', 'blueParksObj1'].includes(mapVariation)
+            ) ? (
               <Grid.Column
                 mobile={4}
                 tablet={4}
@@ -142,7 +147,7 @@ export default function DemoSitesExplorerView(props) {
                       <div className="circle">
                         {/* <div className="dot-demosite"></div> */}
                         <img
-                          src="/marine/europe-seas/eu-mission-restore-our-oceans-and-water/icon-point.png/@@images/image/small"
+                          src="/marine/europe-seas/eu-mission-restore-our-oceans-and-water/icon-point-light.png/@@images/image/small"
                           alt=""
                         />
                       </div>
@@ -152,7 +157,7 @@ export default function DemoSitesExplorerView(props) {
                       <div className="circle">
                         {/* <div className="dot-region"></div> */}
                         <img
-                          src="/marine/europe-seas/eu-mission-restore-our-oceans-and-water/icon-region.png/@@images/image/small"
+                          src="/marine/europe-seas/eu-mission-restore-our-oceans-and-water/icon-region-light.png/@@images/image/small"
                           alt=""
                         />
                       </div>

package/src/components/Blocks/DemoSitesExplorer/DemoSitesFilters.jsx

@@ -165,7 +165,7 @@ export function DemoSitesFilters(props) {
     hideFilters,
     setActiveFilters,
     highlightedIndex,
-    enableMarineMO,
+    mapVariation,
   } = props;
 
   React.useEffect(() => {
@@ -180,7 +180,7 @@ export function DemoSitesFilters(props) {
     });
   }, []);
 
-  return !enableMarineMO ? (
+  return !['blueParks', 'blueParksObj1'].includes(mapVariation) ? (
     <>
       {!hideFilters ? (
         <DemoSitesFilter

package/src/components/Blocks/DemoSitesExplorer/DemoSitesMap.jsx

@@ -42,7 +42,7 @@ function DemoSitesMap(props) {
     setMap,
     highlightedIndex,
     setHighlightedIndex,
-    enableMarineMO,
+    mapVariation,
     ol,
   } = props;
   const features = getFeatures({ cases: items, ol });
@@ -135,8 +135,8 @@ function DemoSitesMap(props) {
   }, [map, selectedCase, resetMapButtonClass, setResetMapButtonClass, ol]);
 
   const clusterStyle = React.useMemo(
-    () => selectedClusterStyle({ selectedCase, ol, enableMarineMO }),
-    [selectedCase, ol, enableMarineMO],
+    () => selectedClusterStyle({ selectedCase, ol, mapVariation }),
+    [selectedCase, ol, mapVariation],
   );
 
   const MapWithSelection = React.useMemo(() => Map, []);
@@ -196,7 +196,9 @@ function DemoSitesMap(props) {
             // selectedCase={selectedCase}
           />
           <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
-          {enableMarineMO && <Layer.Tile source={arcgisSource} zIndex={0} />}
+          {['blueParks', 'blueParksObj1'].includes(mapVariation) && (
+            <Layer.Tile source={arcgisSource} zIndex={0} />
+          )}
           <Layer.Vector
             style={clusterStyle}
             source={clusterSource}
@@ -209,7 +211,7 @@ function DemoSitesMap(props) {
   ) : null;
 }
 
-const selectedClusterStyle = ({ selectedFeature, ol, enableMarineMO }) => {
+const selectedClusterStyle = ({ selectedFeature, ol, mapVariation }) => {
   function _clusterStyle(feature, selectedFeature) {
     const size = feature.get('features').length;
     let clusterStyle = styleCache[size];
@@ -235,52 +237,64 @@ const selectedClusterStyle = ({ selectedFeature, ol, enableMarineMO }) => {
       });
       styleCache[size] = clusterStyle;
     }
-    // set size === 1 to enable clusterization
-    if (size) {
-      if (enableMarineMO) {
+    // use condition size === 1 to enable clusterization
+    if (true) {
+      let iconType = '-light';
+      let iconSize = 'icon';
+
+      if ('blueParks' === mapVariation) {
         return new ol.style.Style({
           image: new ol.style.Icon({
             anchor: [0.5, 1],
-            // size: [52, 52],
-            // offset: [52, 0],
-            // opacity: 1,
             scale: 0.8,
             src: '/marine/europe-seas/eu-mission-restore-our-oceans-and-water/icon-point.png/@@images/image/tiny',
           }),
         });
-      } else {
-        // let color = feature.values_.features[0].values_['color'];
-        // type_is_region
-        // let color = '#0179cf';
-        // let width = feature.values_.features[0].values_['width'];
-        // let radius = feature.values_.features[0].values_['radius'];
-
-        // return new ol.style.Style({
-        //   image: new ol.style.Circle({
-        //     radius: radius,
-        //     fill: new ol.style.Fill({
-        //       color: '#fff',
-        //     }),
-        //     stroke: new ol.style.Stroke({
-        //       color: color,
-        //       width: width,
-        //     }),
-        //   }),
-        // });
-        let iconUrl =
-          feature.values_.features[0].values_['type_is_region'] ===
-          'Associated region'
-            ? '/marine/europe-seas/eu-mission-restore-our-oceans-and-water/icon-region.png/@@images/image/icon'
-            : '/marine/europe-seas/eu-mission-restore-our-oceans-and-water/icon-point.png/@@images/image/icon';
+      } else if ('blueParksObj1' === mapVariation) {
+        iconType = '-light';
+        iconSize = 'tiny';
 
-        return new ol.style.Style({
-          image: new ol.style.Icon({
-            anchor: [0.5, 1],
-            scale: 0.8,
-            src: iconUrl,
-          }),
-        });
+        if (
+          ['BioProtect', 'BLUE CONNECT', 'BLUE4ALL', 'EFFECTIVE'].includes(
+            feature.values_.features[0].values_['project'],
+          )
+        ) {
+          iconType = '';
+          iconSize = 'tiny';
+        }
       }
+      // let color = feature.values_.features[0].values_['color'];
+      // type_is_region
+      // let color = '#0179cf';
+      // let width = feature.values_.features[0].values_['width'];
+      // let radius = feature.values_.features[0].values_['radius'];
+
+      // return new ol.style.Style({
+      //   image: new ol.style.Circle({
+      //     radius: radius,
+      //     fill: new ol.style.Fill({
+      //       color: '#fff',
+      //     }),
+      //     stroke: new ol.style.Stroke({
+      //       color: color,
+      //       width: width,
+      //     }),
+      //   }),
+      // });
+
+      let iconUrl =
+        feature.values_.features[0].values_['type_is_region'] ===
+        'Associated region'
+          ? `/marine/europe-seas/eu-mission-restore-our-oceans-and-water/icon-region${iconType}.png/@@images/image/${iconSize}`
+          : `/marine/europe-seas/eu-mission-restore-our-oceans-and-water/icon-point${iconType}.png/@@images/image/${iconSize}`;
+
+      return new ol.style.Style({
+        image: new ol.style.Icon({
+          anchor: [0.5, 1],
+          scale: 0.8,
+          src: iconUrl,
+        }),
+      });
     } else {
       return clusterStyle;
     }

package/src/components/Blocks/DemoSitesExplorer/schema.jsx

@@ -4,20 +4,28 @@ const DemoSitesExplorerSchema = {
     {
       id: 'default',
       title: 'Default',
-      fields: ['enableMarineMO'],
+      fields: ['mapVariation'],
     },
   ],
 
   properties: {
-    enableMarineMO: {
-      title: 'Enable Marine Protected Areas layer',
+    mapVariation: {
+      title: 'Choose the type of map',
       description:
         'If enabled, the Marine Protected Areas layer will be displayed on the map, without the filters and the chart on the right side',
-      type: 'boolean',
-      default: false,
+      // type: 'boolean',
+      choices: [
+        ['standard', 'Standard map with filters and chart'],
+        ['blueParks', 'Marine protected areas map with Blue Parks projects'],
+        [
+          'blueParksObj1',
+          'Marine protected areas map with Objective 1 and Blue Parks projects',
+        ],
+      ],
+      default: 'standard',
     },
   },
-  required: ['enableMarineMO'],
+  required: ['mapVariation'],
 };
 
 export default DemoSitesExplorerSchema;

package/src/components/Blocks/DemoSitesExplorer/utils.js

@@ -144,12 +144,7 @@ export function getFeatures({ cases, ol }) {
   });
 }
 
-export function filterCases(
-  cases,
-  activeFilters,
-  indicatorOnly,
-  enableMarineMO,
-) {
+export function filterCases(cases, activeFilters, indicatorOnly, mapVariation) {
   const data = cases.filter((_case) => {
     let flag_objective = false;
     let flag_target = false;
@@ -163,21 +158,20 @@ export function filterCases(
         return item['title'].toString();
       });
       if (indicators?.includes(indicatorOnly)) flag_indicatorOnly = true;
-    } else if (enableMarineMO) {
-      let indicators = _case.properties.indicators?.map((item) => {
-        return item['title'].toString();
-      });
-      if (
-        indicators?.includes('Marine protected areas') ||
-        indicators?.includes('Marine strictly protected areas')
-      )
-        flag_indicatorOnly = true;
     } else {
       flag_indicatorOnly = true;
     }
 
     // debugger;
-    if (!activeFilters.objective_filter.length) {
+    if ('blueParksObj1' === mapVariation) {
+      let objective = _case.properties.objective;
+      if (
+        objective.includes(
+          'Objective 1: Protect and restore marine and freshwater ecosystems and biodiversity',
+        )
+      )
+        flag_objective = true;
+    } else if (!activeFilters.objective_filter.length) {
       flag_objective = true;
     } else {
       let objective = _case.properties.objective;
@@ -209,7 +203,16 @@ export function filterCases(
       });
     }
 
-    if (!activeFilters.project_filter.length) {
+    // BioProtect, BLUE CONNECT, BLUE4ALL, EFFECTIVE
+    if (['blueParks'].includes(mapVariation)) {
+      let project = _case.properties.project;
+      if (
+        ['BioProtect', 'BLUE CONNECT', 'BLUE4ALL', 'EFFECTIVE'].includes(
+          project,
+        )
+      )
+        flag_project = true;
+    } else if (!activeFilters.project_filter.length) {
       flag_project = true;
     } else {
       let project = _case.properties.project;

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

@@ -1,389 +0,0 @@
-/**
- * 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 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/customizations/@plone-collective/volto-authomatic/components/Login/Login.less

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