@eeacms/volto-marine-policy 2.0.17 → 2.0.19

package/CHANGELOG.md

@@ -4,6 +4,29 @@ 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.19](https://github.com/eea/volto-marine-policy/compare/2.0.18...2.0.19) - 25 August 2025
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`de9990e`](https://github.com/eea/volto-marine-policy/commit/de9990e8922e4f56f97cc7a84c081a4597ab8ee7)]
+
+#### :hammer_and_wrench: Others
+
+- fix NIS [laszlocseh - [`cf15edd`](https://github.com/eea/volto-marine-policy/commit/cf15eddc8efe127bf29c6a5ed77e86a0a605fa90)]
+### [2.0.18](https://github.com/eea/volto-marine-policy/compare/2.0.17...2.0.18) - 22 August 2025
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`58ad0aa`](https://github.com/eea/volto-marine-policy/commit/58ad0aa67a4d13e03c1bf338e904eb07cef47dba)]
+- style: Automated code fix [eea-jenkins - [`25f767c`](https://github.com/eea/volto-marine-policy/commit/25f767ce4e26f68cd3daeebee7e2d0f594e8afd5)]
+
+#### :hammer_and_wrench: Others
+
+- fix eslint [laszlocseh - [`f494ab2`](https://github.com/eea/volto-marine-policy/commit/f494ab287e04db2c75d413de398e73ae510f6f4c)]
+- fix eslint [laszlocseh - [`0a94318`](https://github.com/eea/volto-marine-policy/commit/0a94318433bc0ae035efa9f3043d63b53645ab67)]
+- WiP NIS listing [laszlocseh - [`eed0dcf`](https://github.com/eea/volto-marine-policy/commit/eed0dcf37c5047db6d85f12e0a14683c8e48884e)]
+- Update Login.jsx [dobri1408 - [`668cbf6`](https://github.com/eea/volto-marine-policy/commit/668cbf619d63d51062f869c3e3b3d180e64f223e)]
+- entraid [Dobricean Ioan Dorian - [`c573e9b`](https://github.com/eea/volto-marine-policy/commit/c573e9bcddba9dab7ddea558d935365ea905b282)]
 ### [2.0.17](https://github.com/eea/volto-marine-policy/compare/2.0.16...2.0.17) - 8 August 2025
 
 #### :rocket: Dependency updates

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-marine-policy",
-  "version": "2.0.17",
+  "version": "2.0.19",
   "description": "@eeacms/volto-marine-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -24,7 +24,8 @@
     "@eeacms/volto-eea-website-theme",
     "@eeacms/volto-globalsearch",
     "@eeacms/volto-metadata-block",
-    "@eeacms/volto-workflow-progress"
+    "@eeacms/volto-workflow-progress",
+    "@plone-collective/volto-authomatic"
   ],
   "resolutions": {
     "react-countup/countup.js": "2.5.0",
@@ -37,11 +38,12 @@
     "@eeacms/volto-eea-website-theme": "*",
     "@eeacms/volto-embed": "*",
     "@eeacms/volto-globalsearch": "2.1.2",
+    "@eeacms/volto-metadata-block": "*",
     "@eeacms/volto-openlayers-map": "1.0.1",
     "@eeacms/volto-searchlib": "2.1.8",
     "@eeacms/volto-tabs-block": "*",
-    "@eeacms/volto-metadata-block": "*",
     "@eeacms/volto-workflow-progress": "*",
+    "@plone-collective/volto-authomatic": "2.0.1",
     "axios": "0.30.0",
     "d3-array": "^2.12.1",
     "jquery": "3.6.0",

package/src/components/theme/NISListingView/NISListingView.jsx

@@ -4,99 +4,193 @@ import ProgressWorkflow from '@eeacms/volto-marine-policy/components/theme/Progr
 // import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import './style.less';
-
-// const NISListingView = ({ items, isEditMode }) => {
-//   console.log(items);
-//   return (
-//     <div className="items">
-//       {items.map((item, index) => (
-//         <div className="listing-item" key={item['@id']}>
-//           <div className="listing-body">
-//             <h3>
-//               <Link to={item['@id']}>{item.title}</Link>
-//             </h3>
-//             <div className="listing-metadata">
-//               {item.nis_species_name_accepted && (
-//                 <div className="metadata-item">
-//                   <b>Species name accepted:</b> {item.nis_species_name_accepted}
-//                 </div>
-//               )}
-//               {item.nis_region && (
-//                 <div className="metadata-item">
-//                   <b>Region:</b> {item.nis_region}
-//                 </div>
-//               )}
-//               {item.nis_subregion && (
-//                 <div className="metadata-item">
-//                   <b>Subregion:</b> {item.nis_subregion}
-//                 </div>
-//               )}
-//             </div>
-//           </div>
-//         </div>
-//       ))}
-//     </div>
-//   );
-// };
+import { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { Checkbox } from 'semantic-ui-react';
+import { Button, Select } from 'semantic-ui-react';
 
 const NISListingView = ({ items, isEditMode }) => {
-  // console.log(items);
+  const [selectedItems, setSelectedItems] = useState([]);
+  const [users, setUsers] = useState([]);
+  const [assignee, setAssignee] = useState(null);
+  const actions = useSelector((state) => state.actions.actions);
+  const canEditPage = actions?.object?.some((action) => action.id === 'edit');
+  // console.log('actions', actions);
+
+  const toggleSelection = (id) => {
+    setSelectedItems((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
+    );
+  };
+
+  const handleBulkAssign = () => {
+    onBulkAssign(selectedItems, assignee);
+    setSelectedItems([]);
+    setAssignee(null);
+  };
+
+  const onBulkAssign = async (ids, assignee) => {
+    await fetch(`${window.location.origin}/++api++/@bulk-assign`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      credentials: 'include',
+      body: JSON.stringify({
+        items: ids,
+        assigned_to: assignee,
+      }),
+    });
+
+    // const result = await res.json();
+    window.location.reload();
+  };
+
+  useEffect(() => {
+    const fetchUsers = async () => {
+      const res = await fetch(
+        `${window.location.origin}/++api++/@vocabularies/nis_experts_vocabulary`,
+        {
+          headers: {
+            Accept: 'application/json',
+          },
+          credentials: 'include',
+        },
+      );
+      const data = await res.json();
+      if (data?.items) {
+        setUsers(
+          data.items.map((u) => ({
+            key: u.token,
+            text: u.title,
+            value: u.token,
+          })),
+        );
+      }
+    };
+    fetchUsers();
+  }, []);
 
   return (
-    <table className="ui table">
-      <thead>
-        <tr>
-          <th>Species name original</th>
-          <th>Species name accepted</th>
-          <th>Scientific name accepted</th>
-          <th>Region</th>
-          <th>Subregion</th>
-          <th>Status</th>
-          <th>Group</th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-        {items.map((item, index) => (
-          <tr key={item['@id']}>
-            <td>{item.nis_species_name_original}</td>
-            <td>{item.nis_species_name_accepted}</td>
-            <td>{item.nis_scientificname_accepted}</td>
-            <td>{item.nis_region}</td>
-            <td>{item.nis_subregion}</td>
-            <td>{item.nis_status}</td>
-            <td>{item.nis_group}</td>
-            <td className="workflow-actions">
-              <div className="action-buttons">
-                <a
-                  className="ui button secondary mini"
-                  href={`${item['@id']}`}
-                  target="_blank"
-                  rel="noopener"
-                >
-                  View
-                </a>
-                <a
-                  className="ui button primary mini"
-                  href={`${item['@id']}/edit`}
-                  target="_blank"
-                  rel="noopener"
-                >
-                  Edit
-                </a>
-              </div>
-              <div className="workflow-progress">
-                <ProgressWorkflow
-                  content={item}
-                  pathname={item['@id']}
-                  token={123}
-                />
-              </div>
-            </td>
+    <>
+      <table className="ui table">
+        <thead>
+          <tr>
+            <th>Species name original</th>
+            <th>Species name accepted</th>
+            <th>Scientific name accepted</th>
+            <th>Region</th>
+            <th>Subregion</th>
+            <th>Status</th>
+            <th>Group</th>
+            <th>Assigned to</th>
+            <th>
+              {canEditPage && (
+                <div>
+                  <a
+                    href={`/++api++${window.location.pathname}/nis-export${window.location.search}`}
+                    title="Download"
+                    target="_blank"
+                    rel="noopener"
+                    className="ui button primary download-as-xls"
+                  >
+                    <i className="ri-file-download-line"></i>
+                    Download
+                  </a>
+                </div>
+              )}
+            </th>
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {items.map((item, index) => (
+            <tr key={item['@id']}>
+              <td>{item.nis_species_name_original}</td>
+              <td>{item.nis_species_name_accepted}</td>
+              <td>{item.nis_scientificname_accepted}</td>
+              <td>{item.nis_region}</td>
+              <td>{item.nis_subregion}</td>
+              <td>{item.nis_status}</td>
+              <td>{item.nis_group}</td>
+              <td>
+                <div className="assigned-to-container">
+                  <div>{item.nis_assigned_to}</div>
+                  {canEditPage && (
+                    <Checkbox
+                      checked={selectedItems.includes(item['@id'])}
+                      onChange={() => toggleSelection(item['@id'])}
+                    />
+                  )}
+                </div>
+              </td>
+              <td>
+                <div className="workflow-actions">
+                  <div className="action-buttons">
+                    <a
+                      className="ui button secondary mini"
+                      href={`${item['@id']}`}
+                      target="_blank"
+                      rel="noopener"
+                    >
+                      View
+                    </a>
+                    <a
+                      className="ui button primary mini"
+                      href={`${item['@id']}/edit`}
+                      target="_blank"
+                      rel="noopener"
+                    >
+                      Edit
+                    </a>
+                  </div>
+                  <div className="workflow-progress">
+                    <ProgressWorkflow
+                      content={item}
+                      pathname={item['@id']}
+                      token={123}
+                    />
+                  </div>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {selectedItems.length > 0 && (
+        <div className="users-assign-container">
+          <h4>
+            Assign {selectedItems.length} item
+            {selectedItems.length > 1 ? 's' : ''}
+          </h4>
+          <Select
+            placeholder="Select expert"
+            options={users}
+            value={assignee}
+            onChange={(e, { value }) => setAssignee(value)}
+          />
+          <div style={{ marginTop: '10px', textAlign: 'right' }}>
+            <Button
+              className="tertiary"
+              size="small"
+              onClick={() => setSelectedItems([])}
+              style={{ marginRight: '5px' }}
+            >
+              Cancel
+            </Button>
+            <Button
+              className="primary"
+              size="small"
+              // color="green"
+              disabled={!assignee}
+              onClick={handleBulkAssign}
+            >
+              Assign
+            </Button>
+          </div>
+        </div>
+      )}{' '}
+    </>
   );
 };
 

package/src/components/theme/NISListingView/style.less

@@ -14,10 +14,10 @@
 .ui.table tr {
   td,
   th {
-    border-left: 1px solid #bcbec0 !important;
+    border-right: 1px solid #bcbec0 !important;
 
-    &:first-of-type {
-      border-left: none !important;
+    &:last-of-type {
+      border-right: none !important;
     }
   }
 }
@@ -119,3 +119,29 @@
   border-color: #3ca34a !important;
   color: #3ca34a !important;
 }
+
+.users-assign-container {
+  position: fixed;
+  z-index: 1000;
+  top: 20px;
+  right: 20px;
+  padding: 16px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background: white;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
+}
+
+.assigned-to-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ri-file-download-line {
+  margin-right: 5px;
+}
+
+.download-as-xls {
+  padding: 0.6em 0.5em !important;
+}

package/src/components/theme/NISMetadataSectionTableView/NISMetadataSectionTableView.jsx

@@ -1,113 +1,3 @@
-// import config from '@plone/volto/registry';
-// import { useSelector } from 'react-redux';
-// import { Table } from 'semantic-ui-react';
-// import { ErrorBoundary } from '@eeacms/volto-metadata-block/widgets';
-// import { isEmpty } from 'lodash';
-// import { useIntl } from 'react-intl';
-// import './style.less';
-
-// function isEmptyWithNumberCheck(value) {
-//   // Check if the value is a number and is not NaN
-//   if (typeof value === 'number' && !isNaN(value)) {
-//     return false; // Numbers, including 0, are considered non-empty
-//   }
-
-//   // Fallback to Lodash's isEmpty for other types
-//   return isEmpty(value);
-// }
-
-// const Field = (props) => {
-//   const { data, properties = {}, metadata = {}, showLabel } = props;
-//   const { views } = config.widgets;
-//   const intl = useIntl();
-
-//   const initialFormData = useSelector((state) => state?.content?.data || {});
-//   const dataTitle = data?.title;
-//   const label = intl.formatMessage({ id: dataTitle, message: dataTitle });
-
-//   let metadata_element = {
-//     ...initialFormData,
-//     ...(properties || {}),
-//     ...(metadata || {}),
-//   };
-
-//   if (!data?.id) {
-//     return '';
-//   }
-
-//   let output = metadata_element[data.id];
-
-//   let Widget = views?.getWidget(data);
-//   if (!output && props.data.placeholder) {
-//     Widget = views?.default;
-//     output = props.data.placeholder;
-//   }
-
-//   const hasValue = !isEmptyWithNumberCheck(output);
-
-//   if (!Widget || !hasValue) {
-//     return '';
-//   }
-
-//   let className = 'block metadata ' + data.id;
-//   return (
-//     <ErrorBoundary name={data.id}>
-//       {showLabel ? (
-//         <label htmlFor={`metadata-${data.id}`} className={className}>
-//           {label}
-//         </label>
-//       ) : (
-//         ''
-//       )}
-//       <Widget
-//         value={output}
-//         content={metadata_element}
-//         className={className}
-//         id={`metadata-${data.id}`}
-//       />
-//     </ErrorBoundary>
-//   );
-// };
-
-// const NISMetadataSectionTableView = (props) => {
-//   const { data = {}, properties = {}, metadata = {} } = props;
-//   const { table = {}, fields = [] } = data;
-
-//   const initialFormData = useSelector((state) => state?.content?.data || {});
-//   let metadata_element = { ...initialFormData, ...properties, ...metadata };
-//   const showFields = fields.filter(({ hideInView }) => !hideInView);
-
-//   return showFields.length ? (
-//     <Table
-//       fixed={table.fixed}
-//       compact={table.compact}
-//       basic={table.basic ? 'very' : false}
-//       celled={table.celled}
-//       inverted={table.inverted}
-//       striped={table.striped}
-//     >
-//       <Table.Body>
-//         {showFields.map(({ field }, i) => {
-//           const hasValue = !isEmptyWithNumberCheck(metadata_element[field?.id]);
-
-//           return hasValue ? (
-//             <Table.Row key={i}>
-//               <Table.HeaderCell width={1}>{field.title}</Table.HeaderCell>
-//               <Table.Cell>
-//                 <Field key={i} {...props} showLabel={false} data={field} />
-//               </Table.Cell>
-//             </Table.Row>
-//           ) : (
-//             ''
-//           );
-//         })}
-//       </Table.Body>
-//     </Table>
-//   ) : (
-//     ''
-//   );
-// };
-
 import { MetadataSectionTableView } from '@eeacms/volto-metadata-block/components';
 import './style.less';
 

package/src/components/theme/ProgressWorkflow/ProgressWorkflow.jsx

@@ -249,8 +249,8 @@ const ProgressWorkflow = (props) => {
     const rect = button.getBoundingClientRect();
 
     dropdown.style.position = 'fixed';
-    dropdown.style.top = `${rect.bottom}px`; // or rect.top
-    dropdown.style.left = `${rect.left}px`;
+    dropdown.style.top = `${rect.bottom - 35}px`; // or rect.top
+    dropdown.style.left = `${rect.left - 200}px`;
     dropdown.classList.toggle('is-hidden');
     // console.log(rect.bottom, rect.left);
   };

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);

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

@@ -0,0 +1,8 @@
+.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;
+}