@plone/volto 18.0.0-alpha.41 → 18.0.0-alpha.43

package/src/helpers/FormValidation/FormValidation.jsx

@@ -1,5 +1,5 @@
-import { map, uniq, keys, intersection, isEmpty } from 'lodash';
-import { messages } from '../MessageLabels/MessageLabels';
+import { map, keys, intersection, isEmpty } from 'lodash';
+import { messages } from '@plone/volto/helpers/MessageLabels/MessageLabels';
 import config from '@plone/volto/registry';
 import { toast } from 'react-toastify';
 import Toast from '@plone/volto/components/manage/Toast/Toast';
@@ -11,7 +11,12 @@ import Toast from '@plone/volto/components/manage/Toast/Toast';
  * @param {string | number} valueToCompare can compare '47' < 50
  * @param {Function} intlFunc
  */
-const validationMessage = (isValid, criterion, valueToCompare, intlFunc) =>
+export const validationMessage = (
+  isValid,
+  criterion,
+  valueToCompare,
+  intlFunc,
+) =>
   !isValid
     ? intlFunc(messages[criterion], {
         len: valueToCompare,
@@ -19,142 +24,7 @@ const validationMessage = (isValid, criterion, valueToCompare, intlFunc) =>
     : null;
 
 /**
- * Returns if based on the criterion the value is lower or equal
- * @param {string | number} value can compare '47' < 50
- * @param {string | number} valueToCompare can compare '47' < 50
- * @param {string} maxCriterion
- * @param {Function} intlFunc
- */
-const isMaxPropertyValid = (value, valueToCompare, maxCriterion, intlFunc) => {
-  const isValid = valueToCompare !== undefined ? value <= valueToCompare : true;
-  return validationMessage(isValid, maxCriterion, valueToCompare, intlFunc);
-};
-
-/**
- * Returns if based on the criterion the value is higher or equal
- * @param {string | number} value can compare '47' < 50
- * @param {string | number} valueToCompare can compare '47' < 50
- * @param {string} minCriterion
- * @param {Function} intlFunc
- */
-const isMinPropertyValid = (value, valueToCompare, minCriterion, intlFunc) => {
-  const isValid = valueToCompare !== undefined ? value >= valueToCompare : true;
-  return validationMessage(isValid, minCriterion, valueToCompare, intlFunc);
-};
-
-const widgetValidation = {
-  email: {
-    isValidEmail: (emailValue, emailObj, intlFunc) => {
-      // Email Regex taken from from WHATWG living standard:
-      // https://html.spec.whatwg.org/multipage/input.html#e-mail-state-(type=email)
-      const emailRegex =
-        /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
-      const isValid = emailRegex.test(emailValue);
-      return !isValid ? intlFunc(messages.isValidEmail) : null;
-    },
-    minLength: (emailValue, emailObj, intlFunc) =>
-      isMinPropertyValid(
-        emailValue.length,
-        emailObj.minLength,
-        'minLength',
-        intlFunc,
-      ),
-    maxLength: (emailValue, emailObj, intlFunc) =>
-      isMaxPropertyValid(
-        emailValue.length,
-        emailObj.maxLength,
-        'maxLength',
-        intlFunc,
-      ),
-  },
-  url: {
-    isValidURL: (urlValue, urlObj, intlFunc) => {
-      var urlRegex = new RegExp(
-        '^(https?:\\/\\/)?' + // validate protocol
-          '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // validate domain name
-          '((\\d{1,3}\\.){3}\\d{1,3}))|' + // validate OR ip (v4) address
-          '(localhost)' + // validate OR localhost address
-          '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // validate port and path
-          '(\\?[;&a-z\\d%_.~+=-]*)?' + // validate query string
-          '(\\#[-a-z\\d_]*)?$', // validate fragment locator
-        'i',
-      );
-      const isValid = urlRegex.test(urlValue);
-      return !isValid ? intlFunc(messages.isValidURL) : null;
-    },
-    minLength: (urlValue, urlObj, intlFunc) =>
-      isMinPropertyValid(
-        urlValue.length,
-        urlObj.minLength,
-        'minLength',
-        intlFunc,
-      ),
-    maxLength: (urlValue, urlObj, intlFunc) =>
-      isMaxPropertyValid(
-        urlValue.length,
-        urlObj.maxLength,
-        'maxLength',
-        intlFunc,
-      ),
-  },
-  password: {
-    minLength: (passwordValue, passwordObj, intlFunc) =>
-      isMinPropertyValid(
-        passwordValue.length,
-        passwordObj.minLength,
-        'minLength',
-        intlFunc,
-      ),
-    maxLength: (passwordValue, passwordObj, intlFunc) =>
-      isMaxPropertyValid(
-        passwordValue.length,
-        passwordObj.maxLength,
-        'maxLength',
-        intlFunc,
-      ),
-  },
-  string: {
-    minLength: (value, itemObj, intlFunc) =>
-      isMinPropertyValid(
-        value.length,
-        itemObj.minLength,
-        'minLength',
-        intlFunc,
-      ),
-    maxLength: (value, itemObj, intlFunc) =>
-      isMaxPropertyValid(
-        value.length,
-        itemObj.maxLength,
-        'maxLength',
-        intlFunc,
-      ),
-  },
-  number: {
-    isNumber: (value, itemObj, intlFunc) => {
-      const floatRegex = /^[+-]?\d+(\.\d+)?$/;
-      const isValid = !isNaN(value) && floatRegex.test(value);
-      return !isValid ? intlFunc(messages.isNumber) : null;
-    },
-    minimum: (value, itemObj, intlFunc) =>
-      isMinPropertyValid(value, itemObj.minimum, 'minimum', intlFunc),
-    maximum: (value, itemObj, intlFunc) =>
-      isMaxPropertyValid(value, itemObj.maximum, 'maximum', intlFunc),
-  },
-  integer: {
-    isInteger: (value, itemObj, intlFunc) => {
-      const intRegex = /^-?[0-9]+$/;
-      const isValid = !isNaN(value) && intRegex.test(value);
-      return !isValid ? intlFunc(messages.isInteger) : null;
-    },
-    minimum: (value, itemObj, intlFunc) =>
-      isMinPropertyValid(value, itemObj.minimum, 'minimum', intlFunc),
-    maximum: (value, itemObj, intlFunc) =>
-      isMaxPropertyValid(value, itemObj.maximum, 'maximum', intlFunc),
-  },
-};
-
-/**
- * The string that comes my not be a valid JSON
+ * The string that comes might not be a valid JSON
  * @param {string} requestItem
  */
 export const tryParseJSON = (requestItem) => {
@@ -165,30 +35,19 @@ export const tryParseJSON = (requestItem) => {
     try {
       resultObj = JSON.parse(requestItem.replace(/'/g, '"'));
     } catch (e) {
-      resultObj = null;
+      try {
+        // Treats strings like: `'String "double quotes"'`
+        resultObj = JSON.parse(
+          requestItem.replace(/"/g, '\\"').replace(/'/g, '"'),
+        );
+      } catch (e) {
+        resultObj = null;
+      }
     }
   }
   return resultObj;
 };
 
-/**
- * Returns errors if obj has unique Items
- * @param {Object} field
- * @param {*} fieldData
- * @returns {Object[string]} - list of errors
- */
-const hasUniqueItems = (field, fieldData, formatMessage) => {
-  const errors = [];
-  if (
-    field.uniqueItems &&
-    fieldData &&
-    uniq(fieldData).length !== fieldData.length
-  ) {
-    errors.push(formatMessage(messages.uniqueItems));
-  }
-  return errors;
-};
-
 /**
  * If required fields are undefined, return list of errors
  * @returns {Object[string]} - list of errors
@@ -252,35 +111,122 @@ const validateFieldsPerFieldset = (
     touchedField,
   );
 
-  map(schema.properties, (field, fieldId) => {
-    const fieldWidgetType = field.widget || field.type;
-    const widgetValidationCriteria = widgetValidation[fieldWidgetType]
-      ? Object.keys(widgetValidation[fieldWidgetType])
-      : [];
-    let fieldData = formData[fieldId];
-    // test each criterion ex maximum, isEmail, isUrl, maxLength etc
-    const fieldErrors = widgetValidationCriteria
+  function checkFieldErrors(fieldValidationCriteria, field, fieldData) {
+    return fieldValidationCriteria
       .map((widgetCriterion) => {
         const errorMessage =
           fieldData === undefined || fieldData === null
             ? null
-            : widgetValidation[fieldWidgetType][widgetCriterion](
-                fieldData,
+            : widgetCriterion.method({
+                value: fieldData,
                 field,
+                formData,
                 formatMessage,
-              );
+              });
         return errorMessage;
       })
       .filter((item) => !!item);
+  }
 
-    const uniqueErrors = hasUniqueItems(field, fieldData, formatMessage);
-    const mergedErrors = [...fieldErrors, ...uniqueErrors];
+  Object.entries(schema.properties).forEach(([fieldId, field]) => {
+    let fieldData = formData[fieldId];
+
+    // Validation per specific validator set (format property)
+    const hasSpecificValidator =
+      field.widgetOptions?.frontendOptions?.format || field.format;
+    let specificFieldErrors = [];
+    if (hasSpecificValidator) {
+      const specificValidationCriteria = config.getUtilities({
+        type: 'validator',
+        dependencies: { format: hasSpecificValidator },
+      });
+
+      specificFieldErrors = checkFieldErrors(
+        specificValidationCriteria,
+        field,
+        fieldData,
+      );
+    }
+
+    // Validation per field type
+    const fieldType = field.type || 'string'; // defaults to string
+    const fieldTypeValidationCriteria = config.getUtilities({
+      type: 'validator',
+      dependencies: { fieldType },
+    });
+
+    const fieldErrors = checkFieldErrors(
+      fieldTypeValidationCriteria,
+      field,
+      fieldData,
+    );
+
+    // Validation per field widget
+    const widgetName =
+      field.widgetOptions?.frontendOptions?.widget || field.widget || '';
+
+    let widgetErrors = [];
+    if (widgetName) {
+      const widgetNameValidationCriteria = config.getUtilities({
+        type: 'validator',
+        dependencies: { widget: widgetName },
+      });
+
+      widgetErrors = checkFieldErrors(
+        widgetNameValidationCriteria,
+        field,
+        fieldData,
+      );
+    }
+
+    // Validation per specific behavior and field name (for content types)
+    const behaviorName = field.behavior;
+    let perBehaviorFieldErrors = [];
+    if (behaviorName) {
+      const specificPerBehaviorFieldValidationCriteria = config.getUtilities({
+        type: 'validator',
+        dependencies: { behaviorName, fieldName: fieldId },
+      });
+
+      perBehaviorFieldErrors = checkFieldErrors(
+        specificPerBehaviorFieldValidationCriteria,
+        field,
+        fieldData,
+      );
+    }
+
+    // Validation per block type validator (for blocks)
+    const blockType = formData['@type'];
+    let blockTypeFieldErrors = [];
+    if (blockType) {
+      const blockTypeFieldValidationCriteria = config.getUtilities({
+        type: 'validator',
+        dependencies: { blockType, fieldName: fieldId },
+      });
+
+      blockTypeFieldErrors = checkFieldErrors(
+        blockTypeFieldValidationCriteria,
+        field,
+        fieldData,
+      );
+    }
+
+    const mergedErrors = [
+      ...specificFieldErrors,
+      ...fieldErrors,
+      ...widgetErrors,
+      ...perBehaviorFieldErrors,
+      ...blockTypeFieldErrors,
+    ];
 
     if (mergedErrors.length > 0) {
       errors[fieldId] = [
         ...(errors[fieldId] || []),
+        ...specificFieldErrors,
         ...fieldErrors,
-        ...uniqueErrors,
+        ...widgetErrors,
+        ...perBehaviorFieldErrors,
+        ...blockTypeFieldErrors,
       ];
     }
   });
@@ -399,3 +345,13 @@ export const validateFileUploadSize = (file, intlFunc) => {
   }
   return isValid;
 };
+
+/**
+ * Extract invariant errors given an array of errors.
+ * @param {Array} erros
+ */
+export const extractInvariantErrors = (erros) => {
+  return erros
+    .filter((errorItem) => !('field' in errorItem))
+    .map((errorItem) => errorItem['message']);
+};