design-comuni-plone-theme 11.23.2 → 11.24.1

package/src/customizations/volto-form-block/components/FormView.jsx

@@ -209,47 +209,51 @@ const FormView = ({
                   })}
 
                   {/*OTP*/}
-                  {data.subblocks
-                    .filter((subblock) => subblock.use_as_bcc)
-                    .map((subblock, index) => {
-                      const fieldName = getFieldName(
-                        subblock.label,
-                        subblock.id,
-                      );
-                      const name = fieldName + OTP_FIELDNAME_EXTENDER;
-                      const fieldValue = formData[fieldName]?.value;
-                      const value = formData[fieldName]?.otp;
-                      const fields_to_send_with_value =
-                        getFieldsToSendWithValue(subblock);
+                  {data.email_otp_verification ? (
+                    data.subblocks
+                      .filter((subblock) => subblock.use_as_bcc)
+                      .map((subblock, index) => {
+                        const fieldName = getFieldName(
+                          subblock.label,
+                          subblock.id,
+                        );
+                        const name = fieldName + OTP_FIELDNAME_EXTENDER;
+                        const fieldValue = formData[fieldName]?.value;
+                        const value = formData[fieldName]?.otp;
+                        const fields_to_send_with_value =
+                          getFieldsToSendWithValue(subblock);
 
-                      return (
-                        <Row key={'row_otp' + index}>
-                          <Col className="py-2">
-                            <OTPWidget
-                              {...subblock}
-                              fieldValue={fieldValue}
-                              onChange={(field, value) => {
-                                onChangeFormData(
-                                  subblock.id,
-                                  fieldName,
-                                  fieldValue,
-                                  {
-                                    ...fields_to_send_with_value,
-                                    otp: value,
-                                  },
-                                );
-                              }}
-                              value={value}
-                              valid={isValidField(name)}
-                              errorMessage={getErrorMessage(name)}
-                              formHasErrors={formErrors?.length > 0}
-                              path={path}
-                              block_id={block_id}
-                            />
-                          </Col>
-                        </Row>
-                      );
-                    })}
+                        return (
+                          <Row key={'row_otp' + index}>
+                            <Col className="py-2">
+                              <OTPWidget
+                                {...subblock}
+                                fieldValue={fieldValue}
+                                onChange={(field, value) => {
+                                  onChangeFormData(
+                                    subblock.id,
+                                    fieldName,
+                                    fieldValue,
+                                    {
+                                      ...fields_to_send_with_value,
+                                      otp: value,
+                                    },
+                                  );
+                                }}
+                                value={value}
+                                valid={isValidField(name)}
+                                errorMessage={getErrorMessage(name)}
+                                formHasErrors={formErrors?.length > 0}
+                                path={path}
+                                block_id={block_id}
+                              />
+                            </Col>
+                          </Row>
+                        );
+                      })
+                  ) : (
+                    <></>
+                  )}
 
                   {enableCaptcha && <>{captcha.render()}</>}
 

package/src/customizations/volto-form-block/components/Sidebar.jsx

@@ -294,7 +294,10 @@ const Sidebar = ({
                     <BlockDataForm
                       schema={FieldSchema(subblock)}
                       onChangeField={(name, value) => {
-                        var update_values = {};
+                        const update_values = {};
+                        if (subblock.field_type === 'static_text') {
+                          update_values.required = false;
+                        }
 
                         onChangeSubBlock(index, {
                           ...subblock,

package/src/customizations/volto-form-block/components/View.jsx

@@ -5,7 +5,7 @@ import React, { useState, useEffect, useReducer, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { useIntl, defineMessages } from 'react-intl';
-import { submitForm } from 'volto-form-block/actions';
+import { submitForm, resetOTP } from 'volto-form-block/actions';
 import { getFieldName } from 'volto-form-block/components/utils';
 import FormView from 'volto-form-block/components/FormView';
 import { formatDate } from '@plone/volto/helpers/Utils/Date';
@@ -127,6 +127,9 @@ const View = ({ data, id, path }) => {
 
   const [formData, setFormData] = useReducer((state, action) => {
     if (action.reset) {
+      if (data.email_otp_verification) {
+        dispatch(resetOTP(id));
+      }
       return getInitialData(data);
     }
 
@@ -209,7 +212,11 @@ const View = ({ data, id, path }) => {
             field: name,
             message: intl.formatMessage(messages.invalidEmailMessage),
           });
-        } else if (isBCC && !formData[name].otp) {
+        } else if (
+          data.email_otp_verification &&
+          isBCC &&
+          !formData[name].otp
+        ) {
           v.push({
             field: name + OTP_FIELDNAME_EXTENDER,
             message: intl.formatMessage(messages.insertOtp),

package/src/customizations/volto-form-block/formSchema.js

@@ -102,6 +102,15 @@ const messages = defineMessages({
     id: 'mail_footer_label',
     defaultMessage: 'Text at the end of the email',
   },
+  email_otp_verification: {
+    id: 'form_email_otp_verification',
+    defaultMessage: 'Validate BCC emails with OTP verification',
+  },
+  email_otp_verification_description: {
+    id: 'form_email_otp_verification_description',
+    defaultMessage:
+      "Prevent spam from your website. By enabling this option, you do not allow malicious users to send emails to other email addresses through your website. The OTP will be requested for all email-type fields for which the 'Send a copy of the email to this address' option is checked.",
+  },
 });
 
 const Schema = (data) => {
@@ -130,6 +139,7 @@ const Schema = (data) => {
           ...(data?.show_cancel ? ['cancel_label'] : []),
           'set_limit',
           ...(data?.set_limit ? ['limit'] : []),
+          'email_otp_verification',
           'mail_header',
           'mail_footer',
           'captcha',
@@ -202,6 +212,14 @@ const Schema = (data) => {
           '@id': 'collective.volto.formsupport.captcha.providers',
         },
       },
+      email_otp_verification: {
+        type: 'boolean',
+        title: intl.formatMessage(messages.email_otp_verification),
+        description: intl.formatMessage(
+          messages.email_otp_verification_description,
+        ),
+        default: false,
+      },
       store: {
         type: 'boolean',
         title: intl.formatMessage(messages.store),

package/src/theme/ItaliaTheme/Blocks/common/_searchBlockFilters.scss

@@ -15,8 +15,11 @@
         min-width: 150px;
 
         &:focus-within {
-          border: 2px solid $inner-focus-border !important;
-          box-shadow: 0 0 0 2px $outer-focus-outline !important;
+          outline: 2px solid $outer-focus-outline !important;
+          outline-offset: 2px;
+
+          border: none !important;
+          box-shadow: 0 0 0 2px $inner-focus-shadow !important;
         }
 
         .react-select__control {
@@ -58,8 +61,11 @@
             }
 
             &.DateInput_input__focused {
-              border: 2px solid $inner-focus-border !important;
-              box-shadow: 0 0 0 2px $outer-focus-outline !important;
+              outline: 2px solid $outer-focus-outline !important;
+              outline-offset: 2px;
+
+              border: none !important;
+              box-shadow: 0 0 0 2px $inner-focus-shadow !important;
             }
           }
 

package/src/theme/ItaliaTheme/Widgets/_reactSelect.scss

@@ -20,7 +20,10 @@
 .react-select__control,
 .react-select__control:hover {
   &.react-select__control--is-focused {
-    border: 2px solid $inner-focus-border !important;
-    box-shadow: 0 0 0 2px $outer-focus-outline !important;
+    outline: 2px solid $outer-focus-outline !important;
+    outline-offset: 2px;
+
+    border: none !important;
+    box-shadow: 0 0 0 2px $inner-focus-shadow !important;
   }
 }

package/src/theme/ItaliaTheme/_common.scss

@@ -7,9 +7,11 @@
   button.btn,
   button.rounded-right {
     &:focus {
-      border: 2px solid $inner-focus-border !important;
-      box-shadow: 0 0 0 2px $outer-focus-outline !important;
-      outline: none;
+      outline: 2px solid $outer-focus-outline !important;
+      outline-offset: 2px;
+
+      border: none !important;
+      box-shadow: 0 0 0 2px $inner-focus-shadow !important;
     }
   }
 

package/src/theme/_site-variables.scss

@@ -61,4 +61,4 @@ $ribbon-width: calc($spacer * 2);
 
 // accessible focus colors
 $outer-focus-outline: #000 !default;
-$inner-focus-border: #fff !default;
+$inner-focus-shadow: #fff !default;

package/src/theme/bootstrap-override/bootstrap-italia/_focus.scss

@@ -1,7 +1,10 @@
 :focus:not(.focus--mouse),
 %focus {
-  box-shadow: 0 0 0 2px $outer-focus-outline !important;
-  border: 2px solid $inner-focus-border !important;
+  outline: 2px solid $outer-focus-outline !important;
+  outline-offset: 2px;
+
+  border: none !important;
+  box-shadow: 0 0 0 2px $inner-focus-shadow !important;
 }
 
 .skiplinks a:focus:not(.focus--mouse) {

package/src/theme/bootstrap-override/bootstrap-italia/_headercenter.scss

@@ -18,8 +18,11 @@
           border: $header-center-bg-color 2px solid !important;
 
           &:focus {
-            outline: 2.5px solid $inner-focus-border !important;
-            box-shadow: 0 0 0 5px $outer-focus-outline !important;
+            outline: 2px solid $outer-focus-outline !important;
+            outline-offset: 2px;
+
+            border: none !important;
+            box-shadow: 0 0 0 2px $inner-focus-shadow !important;
           }
         }
       }