@eeacms/volto-clms-theme 1.1.292 → 1.1.293

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -4,11 +4,20 @@ All notable changes to this project will be documented in this file. Dates are d
4
4
 
5
5
  Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
6
6
 
7
- ### [1.1.292](https://github.com/eea/volto-clms-theme/compare/1.1.291...1.1.292) - 2 June 2026
7
+ ### [1.1.293](https://github.com/eea/volto-clms-theme/compare/1.1.292...1.1.293) - 5 June 2026
8
+
9
+ #### :house: Internal changes
10
+
11
+ - style: Automated code fix [eea-jenkins - [`8c05ecd`](https://github.com/eea/volto-clms-theme/commit/8c05ecd107a922be765a39df0c161e5d407ae053)]
8
12
 
9
13
  #### :hammer_and_wrench: Others
10
14
 
11
- - Refs #289838 - Implement CSP support in Volto's webpack implementation. [GhitaB - [`6a342dd`](https://github.com/eea/volto-clms-theme/commit/6a342dde51548f960e87a19fb6c44b0fccc64a1a)]
15
+ - add deps [Dobricean Ioan Dorian - [`1000ea9`](https://github.com/eea/volto-clms-theme/commit/1000ea9261702391c255f833e961b27c6fd9a2d5)]
16
+ - add deps [Dobricean Ioan Dorian - [`199a21f`](https://github.com/eea/volto-clms-theme/commit/199a21f7022ff81337cd8e10c609bbbdf0421351)]
17
+ - Add volto-authomatic dependency to package.json [dobri1408 - [`a9151d6`](https://github.com/eea/volto-clms-theme/commit/a9151d62c369a4225a6e0750b28f25f492b37138)]
18
+ - add entra id [Dobricean Ioan Dorian - [`a167b6a`](https://github.com/eea/volto-clms-theme/commit/a167b6ac92480f9e99c1478d322cfc829c99d238)]
19
+ ### [1.1.292](https://github.com/eea/volto-clms-theme/compare/1.1.291...1.1.292) - 2 June 2026
20
+
12
21
  ### [1.1.291](https://github.com/eea/volto-clms-theme/compare/1.1.290...1.1.291) - 22 May 2026
13
22
 
14
23
  ### [1.1.290](https://github.com/eea/volto-clms-theme/compare/1.1.289...1.1.290) - 21 May 2026
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eeacms/volto-clms-theme",
3
- "version": "1.1.292",
3
+ "version": "1.1.293",
4
4
  "description": "volto-clms-theme: Volto theme for CLMS site",
5
5
  "main": "src/index.js",
6
6
  "author": "CodeSyntax for the European Environment Agency",
@@ -32,7 +32,8 @@
32
32
  "volto-cookie-banner",
33
33
  "@eeacms/volto-tableau",
34
34
  "@eeacms/volto-embed",
35
- "@eeacms/volto-globalsearch"
35
+ "@eeacms/volto-globalsearch",
36
+ "@plone-collective/volto-authomatic"
36
37
  ],
37
38
  "resolutions": {
38
39
  "@elastic/search-ui": "1.21.2",
@@ -59,6 +60,7 @@
59
60
  "@fortawesome/react-fontawesome": "0.1.14",
60
61
  "@ginkgo-bioworks/react-json-schema-form-builder": "2.10.1",
61
62
  "@kitconcept/volto-blocks-grid": "7.0.2",
63
+ "@plone-collective/volto-authomatic": "2.0.1",
62
64
  "connected-react-router": "6.8.0",
63
65
  "d3-array": "^2.12.1",
64
66
  "husky": "7.0.4",
@@ -0,0 +1,390 @@
1
+ /**
2
+ * Combined Login container - supports both external providers and Plone login.
3
+ * @module components/Login/Login
4
+ */
5
+ import React, { useEffect, useState } from 'react';
6
+ import { useDispatch, useSelector, shallowEqual } from 'react-redux';
7
+ import { Link, useHistory, useLocation } from 'react-router-dom';
8
+ import {
9
+ Container,
10
+ Button,
11
+ Form,
12
+ Input,
13
+ Segment,
14
+ Grid,
15
+ } from 'semantic-ui-react';
16
+ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
17
+ import qs from 'query-string';
18
+ import { useCookies } from 'react-cookie';
19
+
20
+ import { Helmet } from '@plone/volto/helpers';
21
+ import config from '@plone/volto/registry';
22
+ import { Icon } from '@plone/volto/components';
23
+ import { login, resetLoginRequest } from '@plone/volto/actions';
24
+ import { toast } from 'react-toastify';
25
+ import { Toast } from '@plone/volto/components';
26
+ import aheadSVG from '@plone/volto/icons/ahead.svg';
27
+ import clearSVG from '@plone/volto/icons/clear.svg';
28
+ import './Login.less';
29
+
30
+ // Import authomatic components and actions
31
+ import {
32
+ authomaticRedirect,
33
+ listAuthOptions,
34
+ oidcRedirect,
35
+ } from '@plone-collective/volto-authomatic/actions';
36
+ import AuthProviders from '@plone-collective/volto-authomatic/components/AuthProviders/AuthProviders';
37
+
38
+ const messages = defineMessages({
39
+ login: {
40
+ id: 'Log in',
41
+ defaultMessage: 'Log in',
42
+ },
43
+ loginName: {
44
+ id: 'Login Name',
45
+ defaultMessage: 'Login Name',
46
+ },
47
+ Login: {
48
+ id: 'Login',
49
+ defaultMessage: 'Login',
50
+ },
51
+ password: {
52
+ id: 'Password',
53
+ defaultMessage: 'Password',
54
+ },
55
+ cancel: {
56
+ id: 'Cancel',
57
+ defaultMessage: 'Cancel',
58
+ },
59
+ error: {
60
+ id: 'Error',
61
+ defaultMessage: 'Error',
62
+ },
63
+ loginFailed: {
64
+ id: 'Login Failed',
65
+ defaultMessage: 'Login Failed',
66
+ },
67
+ loginFailedContent: {
68
+ id:
69
+ 'Both email address and password are case sensitive, check that caps lock is not enabled.',
70
+ defaultMessage:
71
+ 'Both email address and password are case sensitive, check that caps lock is not enabled.',
72
+ },
73
+ register: {
74
+ id: 'Register',
75
+ defaultMessage: 'Register',
76
+ },
77
+ forgotPassword: {
78
+ id: 'box_forgot_password_option',
79
+ defaultMessage: 'Forgot your password?',
80
+ },
81
+ signInWith: {
82
+ id: 'Sign in with EEA Microsoft Entra ID',
83
+ defaultMessage: 'Sign in with EEA Microsoft Entra ID',
84
+ },
85
+ orSignIn: {
86
+ id: 'Or sign in with EEA Entra ID:',
87
+ defaultMessage: 'Or sign in with EEA Entra ID:',
88
+ },
89
+ loading: {
90
+ id: 'Loading',
91
+ defaultMessage: 'Loading',
92
+ },
93
+ });
94
+
95
+ /**
96
+ * Get return url function.
97
+ * @function getReturnUrl
98
+ * @param {Object} location Location object.
99
+ * @returns {string} Return url.
100
+ */
101
+ function getReturnUrl(location) {
102
+ return `${
103
+ qs.parse(location.search).return_url ||
104
+ (location.pathname === '/login'
105
+ ? '/'
106
+ : location.pathname.replace('/login', ''))
107
+ }`;
108
+ }
109
+
110
+ /**
111
+ * Combined Login function.
112
+ * @function Login
113
+ * @returns {JSX.Element} Markup of the Login page.
114
+ */
115
+ function Login({ intl }) {
116
+ const dispatch = useDispatch();
117
+ const history = useHistory();
118
+ const location = useLocation();
119
+
120
+ // Authomatic state
121
+ const [startedOAuth, setStartedOAuth] = useState(false);
122
+ const [startedOIDC, setStartedOIDC] = useState(false);
123
+ const loading = useSelector((state) => state.authOptions.loading);
124
+ const options = useSelector((state) => state.authOptions.options);
125
+ const loginOAuthValues = useSelector((state) => state.authomaticRedirect);
126
+ const loginOIDCValues = useSelector((state) => state.oidcRedirect);
127
+ const [, setCookie] = useCookies();
128
+
129
+ // Plone login state
130
+ const token = useSelector((state) => state.userSession.token, shallowEqual);
131
+ const error = useSelector((state) => state.userSession.login.error);
132
+ const ploneLoading = useSelector((state) => state.userSession.login.loading);
133
+
134
+ const returnUrl =
135
+ qs.parse(location.search).return_url ||
136
+ location.pathname.replace(/\/login\/?$/, '').replace(/\/logout\/?$/, '') ||
137
+ '/';
138
+
139
+ useEffect(() => {
140
+ dispatch(listAuthOptions());
141
+ }, [dispatch]);
142
+
143
+ // Handle successful Plone login
144
+ useEffect(() => {
145
+ if (token) {
146
+ history.push(returnUrl || '/');
147
+ if (toast.isActive('loggedOut')) {
148
+ toast.dismiss('loggedOut');
149
+ }
150
+ if (toast.isActive('loginFailed')) {
151
+ toast.dismiss('loginFailed');
152
+ }
153
+ }
154
+ if (error) {
155
+ if (toast.isActive('loggedOut')) {
156
+ toast.dismiss('loggedOut');
157
+ }
158
+ if (!toast.isActive('loginFailed')) {
159
+ toast.error(
160
+ <Toast
161
+ error
162
+ title={intl.formatMessage(messages.loginFailed)}
163
+ content={intl.formatMessage(messages.loginFailedContent)}
164
+ />,
165
+ { autoClose: false, toastId: 'loginFailed' },
166
+ );
167
+ }
168
+ }
169
+ return () => {
170
+ if (toast.isActive('loginFailed')) {
171
+ toast.dismiss('loginFailed');
172
+ dispatch(resetLoginRequest());
173
+ }
174
+ };
175
+ }, [dispatch, token, error, intl, history, returnUrl]);
176
+
177
+ // Handle OAuth redirects
178
+ useEffect(() => {
179
+ const next_url = loginOAuthValues.next_url;
180
+ const session = loginOAuthValues.session;
181
+ if (next_url && session && startedOAuth) {
182
+ setStartedOAuth(false);
183
+ // Give time to save state to localstorage
184
+ setTimeout(function () {
185
+ window.location.href = next_url;
186
+ }, 500);
187
+ }
188
+ }, [startedOAuth, loginOAuthValues]);
189
+
190
+ useEffect(() => {
191
+ const next_url = loginOIDCValues.next_url;
192
+ if (next_url && startedOIDC) {
193
+ setStartedOIDC(false);
194
+ // Give time to save state to localstorage
195
+ setTimeout(function () {
196
+ window.location.href = next_url;
197
+ }, 500);
198
+ }
199
+ }, [startedOIDC, loginOIDCValues]);
200
+
201
+ useEffect(() => {
202
+ if (
203
+ options !== undefined &&
204
+ options.length === 1 &&
205
+ options[0].id === 'oidc'
206
+ ) {
207
+ setStartedOIDC(true);
208
+ dispatch(oidcRedirect('oidc'));
209
+ }
210
+ }, [options, dispatch]);
211
+
212
+ // Handle provider selection
213
+ const onSelectProvider = (provider) => {
214
+ setStartedOAuth(true);
215
+ setCookie('return_url', getReturnUrl(location), { path: '/' });
216
+ dispatch(authomaticRedirect(provider.id));
217
+ };
218
+
219
+ // Handle Plone login form submission
220
+ const onLogin = (event) => {
221
+ dispatch(
222
+ login(
223
+ document.getElementsByName('login')[0].value,
224
+ document.getElementsByName('password')[0].value,
225
+ ),
226
+ );
227
+ event.preventDefault();
228
+ };
229
+
230
+ // Prepare providers for external login
231
+ const validProviders = options
232
+ ? options.filter((provider) => provider.id !== 'oidc')
233
+ : [];
234
+
235
+ return (
236
+ <div id="page-login">
237
+ <Helmet title={intl.formatMessage(messages.Login)} />
238
+ <Container text>
239
+ <Segment.Group raised>
240
+ <Segment className="primary">
241
+ <FormattedMessage id="Log In" defaultMessage="Login" />
242
+ </Segment>
243
+ <Segment secondary>
244
+ <FormattedMessage
245
+ id="Sign in to start session"
246
+ defaultMessage="Sign in to start session"
247
+ />
248
+ </Segment>
249
+
250
+ {/* Plone Login Form */}
251
+ <Segment className="form">
252
+ <Form method="post" onSubmit={onLogin}>
253
+ <Form.Field inline className="help">
254
+ <Grid>
255
+ <Grid.Row stretched>
256
+ <Grid.Column width="4">
257
+ <div className="wrapper">
258
+ <label htmlFor="login">
259
+ <FormattedMessage
260
+ id="Login Name"
261
+ defaultMessage="Login Name"
262
+ />
263
+ </label>
264
+ </div>
265
+ </Grid.Column>
266
+ <Grid.Column width="8">
267
+ <Input
268
+ id="login"
269
+ name="login"
270
+ placeholder={intl.formatMessage(messages.loginName)}
271
+ />
272
+ </Grid.Column>
273
+ </Grid.Row>
274
+ </Grid>
275
+ </Form.Field>
276
+ <Form.Field inline className="help">
277
+ <Grid>
278
+ <Grid.Row stretched>
279
+ <Grid.Column stretched width="4">
280
+ <div className="wrapper">
281
+ <label htmlFor="password">
282
+ <FormattedMessage
283
+ id="Password"
284
+ defaultMessage="Password"
285
+ />
286
+ </label>
287
+ </div>
288
+ </Grid.Column>
289
+ <Grid.Column stretched width="8">
290
+ <Input
291
+ type="password"
292
+ id="password"
293
+ autoComplete="current-password"
294
+ name="password"
295
+ placeholder={intl.formatMessage(messages.password)}
296
+ tabIndex={0}
297
+ />
298
+ </Grid.Column>
299
+ </Grid.Row>
300
+ </Grid>
301
+ </Form.Field>
302
+ <Form.Field inline className="help">
303
+ <Grid>
304
+ <Grid.Row stretched>
305
+ {config.settings.showSelfRegistration && (
306
+ <Grid.Column stretched width="12">
307
+ <p className="help">
308
+ <Link to="/register">
309
+ {intl.formatMessage(messages.register)}
310
+ </Link>
311
+ </p>
312
+ </Grid.Column>
313
+ )}
314
+ <Grid.Column stretched width="12">
315
+ <p className="help">
316
+ <Link to="/passwordreset">
317
+ {intl.formatMessage(messages.forgotPassword)}
318
+ </Link>
319
+ </p>
320
+ </Grid.Column>
321
+ </Grid.Row>
322
+ </Grid>
323
+ </Form.Field>
324
+ </Form>
325
+ </Segment>
326
+
327
+ <Segment className="actions" clearing>
328
+ <Button
329
+ basic
330
+ primary
331
+ icon
332
+ floated="right"
333
+ type="submit"
334
+ form="login-form"
335
+ id="login-form-submit"
336
+ aria-label={intl.formatMessage(messages.login)}
337
+ title={intl.formatMessage(messages.login)}
338
+ loading={ploneLoading}
339
+ onClick={onLogin}
340
+ >
341
+ <Icon className="circled" name={aheadSVG} size="30px" />
342
+ </Button>
343
+
344
+ <Button
345
+ basic
346
+ secondary
347
+ icon
348
+ floated="right"
349
+ id="login-form-cancel"
350
+ as={Link}
351
+ to="/"
352
+ aria-label={intl.formatMessage(messages.cancel)}
353
+ title={intl.formatMessage(messages.cancel)}
354
+ >
355
+ <Icon className="circled" name={clearSVG} size="30px" />
356
+ </Button>
357
+ </Segment>
358
+ </Segment.Group>
359
+
360
+ {/* External Login Providers - Outside the main form */}
361
+ {validProviders && validProviders.length > 0 && (
362
+ <div style={{ marginTop: '2rem', width: '100%' }}>
363
+ <div style={{ textAlign: 'center', marginBottom: '1rem' }}>
364
+ <FormattedMessage
365
+ id="Or sign in with EEA Entra ID:"
366
+ defaultMessage="Or sign in with EEA Entra ID:"
367
+ />
368
+ </div>
369
+ <div style={{ width: '100%' }}>
370
+ {!loading && validProviders && (
371
+ <AuthProviders
372
+ providers={validProviders}
373
+ action="login"
374
+ onSelectProvider={onSelectProvider}
375
+ />
376
+ )}
377
+ {(loading || validProviders.length === 0) && (
378
+ <div style={{ textAlign: 'center', padding: '1rem' }}>
379
+ {intl.formatMessage(messages.loading)}
380
+ </div>
381
+ )}
382
+ </div>
383
+ </div>
384
+ )}
385
+ </Container>
386
+ </div>
387
+ );
388
+ }
389
+
390
+ export default injectIntl(Login);
@@ -0,0 +1,8 @@
1
+ .ui.button.authenticationProvider {
2
+ display: inline-flex;
3
+ width: 100% !important;
4
+ align-items: center;
5
+ margin: 0.5rem auto;
6
+ border-radius: 3px;
7
+ box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
8
+ }
package/src/index.js CHANGED
@@ -4,7 +4,7 @@ import customBlocks, {
4
4
  } from '@eeacms/volto-clms-theme/components/Blocks/customBlocks';
5
5
 
6
6
  // ROUTE VIEWS
7
- import { ContactForm, Search, Sitemap, Login } from '@plone/volto/components';
7
+ import { ContactForm, Search, Sitemap } from '@plone/volto/components';
8
8
 
9
9
  // VIEWS
10
10
  import CLMSDatasetDetailView from '@eeacms/volto-clms-theme/components/CLMSDatasetDetailView/CLMSDatasetDetailView';
@@ -52,7 +52,7 @@ import { CheckboxHtmlWidget } from './components/Blocks/CustomTemplates/VoltoFor
52
52
  import reducers from './reducers';
53
53
  import CookieBanner from 'volto-cookie-banner/CookieBannerContainer';
54
54
  import CLMSLoginView from './components/CLMSLoginView/CLMSLogin';
55
-
55
+ import AuthomaticLoginPlone from './components/CLMSLoginView/AuthomaticLoginPlone';
56
56
  //SLATE CONFIGURATION
57
57
  import installLinkEditor from '@plone/volto-slate/editor/plugins/AdvancedLink';
58
58
 
@@ -274,11 +274,11 @@ const applyConfig = (config) => {
274
274
  ...config.addonRoutes,
275
275
  {
276
276
  path: '/login-plone',
277
- component: Login,
277
+ component: AuthomaticLoginPlone,
278
278
  },
279
279
  {
280
280
  path: '/**/login-plone',
281
- component: Login,
281
+ component: AuthomaticLoginPlone,
282
282
  },
283
283
  {
284
284
  path: '/login',