feat: added honeypot widget captcha

src/components/Field.jsx

@@ -12,7 +12,6 @@ import TextWidget from './Widget/TextWidget';
 import TextareaWidget from './Widget/TextareaWidget';
 import CheckboxListWidget from './Widget/CheckboxListWidget';
 import RadioWidget from './Widget/RadioWidget';
-import HoneypotWidget from './Widget/HoneypotWidget';
 
 import './Field.css';
 
@@ -214,17 +213,6 @@ const Field = ({
         ) : (
           <br />
         ))}
-
-      {field_type === 'honeypot' && (
-        <HoneypotWidget
-          id={name}
-          name={name}
-          title={label}
-          description={description}
-          onChange={onChange}
-          value={value}
-        />
-      )}
       {config.blocks.blocksConfig.form.additionalFields?.reduce((acc, val) => {
         if (val.id === field_type)
           return [

src/components/Widget/Captcha.jsx

@@ -2,6 +2,7 @@ import React, { createRef } from 'react';
 import GoogleReCaptchaWidget from './GoogleReCaptchaWidget';
 import HCaptchaWidget from './HCaptchaWidget';
 import NoRobotsCaptchaWidget from './NoRobotsCaptchaWidget';
+import HoneypotCaptchaWidget from './HoneypotCaptchaWidget';
 
 class Captcha extends React.Component {
   constructor(props) {
@@ -77,6 +78,16 @@ class Captcha extends React.Component {
           captchaToken={captchaToken}
         ></NoRobotsCaptchaWidget>
       );
+    } else if (captcha === 'honeypot') {
+      return (
+        <HoneypotCaptchaWidget
+          id={captcha_props.id}
+          id_check={captcha_props.id_check}
+          title={captcha_props.title}
+          captchaRef={captchaRef}
+          captchaToken={captchaToken}
+        />
+      );
     } else {
       return null;
     }

src/components/Widget/HoneypotCaptchaWidget.jsx

@@ -0,0 +1,43 @@
+/**
+ * HoneypotCaptchaWidget component.
+ * @module components/manage/Widgets/HoneypotCaptchaWidget
+ */
+
+import React, { useState } from 'react';
+
+import TextWidget from '@plone/volto/components/manage/Widgets/TextWidget';
+import './HoneypotCaptchaWidget.css';
+
+/**
+ * HoneypotCaptchaWidget component class.
+ * @function HoneypotCaptchaWidget
+ * @returns {string} Markup of the component.
+ */
+const HoneypotCaptchaWidget = ({ id, id_check, title, captchaToken }) => {
+  const createToken = (id, id_check, value) => {
+    const token = {
+      id: id,
+      id_check: id_check,
+      value: value,
+    };
+    return JSON.stringify(token);
+  };
+  const [value, setValue] = useState();
+  return (
+    <div className="honey-wrapper" key={'honeypot-captcha'}>
+      <TextWidget
+        id={id}
+        name={id}
+        label={title}
+        title={title}
+        onChange={(field, value) => {
+          captchaToken.current = createToken(id, id_check, value);
+          setValue(value);
+        }}
+        value={value}
+      />
+    </div>
+  );
+};
+
+export default HoneypotCaptchaWidget;