Merge pull request #33 from collective/honeypot

feat: added honeypot field type

src/components/Field.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { useIntl, defineMessages } from 'react-intl';
 
 import WysiwygWidget from '@plone/volto/components/manage/Widgets/WysiwygWidget';
-
 import EmailWidget from './Widget/EmailWidget';
 import FileWidget from './Widget/FileWidget';
 import DatetimeWidget from './Widget/DatetimeWidget';

src/components/View.jsx

@@ -137,10 +137,13 @@ const View = ({ data, id, path }) => {
       .then(() => {
         if (isValidForm()) {
           let attachments = {};
-          const captcha = {
+          let captcha = {
             provider: data.captcha,
             token: captchaToken.current,
           };
+          if (data.captcha === 'honeypot') {
+            captcha.value = formData[data.captcha_props.id]?.value ?? '';
+          }
 
           let formattedFormData = { ...formData };
           data.subblocks.forEach((subblock) => {
@@ -194,6 +197,7 @@ const View = ({ data, id, path }) => {
     captchaToken,
     captcha: data.captcha,
     captcha_props: data.captcha_props,
+    onChangeFormData,
   });
 
   useEffect(() => {

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) {
@@ -39,7 +40,13 @@ class Captcha extends React.Component {
   }
 
   render() {
-    const { captchaToken, captcha, captcha_props } = this.props;
+    const {
+      captchaToken,
+      captcha,
+      captcha_props,
+      onChangeFormData,
+    } = this.props;
+
     const captchaRef = this.captchaRef;
     if (captcha === 'recaptcha') {
       return (
@@ -77,6 +84,16 @@ class Captcha extends React.Component {
           captchaToken={captchaToken}
         ></NoRobotsCaptchaWidget>
       );
+    } else if (captcha === 'honeypot') {
+      return (
+        <HoneypotCaptchaWidget
+          id={captcha_props.id}
+          title={captcha_props.id}
+          captchaRef={captchaRef}
+          captchaToken={captchaToken}
+          onChangeFormData={onChangeFormData}
+        />
+      );
     } else {
       return null;
     }

src/components/Widget/HoneypotCaptchaWidget.css

@@ -0,0 +1,3 @@
+.public-ui .ui.grid > .row.honey-wrapper {
+    display: none;
+}

src/components/Widget/HoneypotCaptchaWidget.jsx

@@ -0,0 +1,62 @@
+/**
+ * HoneypotCaptchaWidget component.
+ * @module components/manage/Widgets/HoneypotCaptchaWidget
+ */
+
+import React, { useState, useEffect } from 'react';
+
+import TextWidget from '@plone/volto/components/manage/Widgets/TextWidget';
+import { Grid } from 'semantic-ui-react';
+import './HoneypotCaptchaWidget.css';
+
+/**
+ * HoneypotCaptchaWidget component class.
+ * @function HoneypotCaptchaWidget
+ * @returns {string} Markup of the component.
+ */
+
+/*By default, captcha token is setted, and becames empty if user/bot fills the field.
+ */
+const HoneypotCaptchaWidget = ({
+  id,
+  title,
+  captchaToken,
+  onChangeFormData,
+}) => {
+  const createToken = (id, value) => {
+    const token = {
+      id: id,
+      value: value,
+    };
+    return JSON.stringify(token);
+  };
+
+  useEffect(() => {
+    captchaToken.current = createToken(id, new Date().toString());
+  }, [captchaToken, id]);
+
+  useEffect(() => {
+    onChangeFormData(id, id, '', { label: id });
+  }, []);
+
+  const [value, setValue] = useState();
+  return (
+    <Grid.Row className="honey-wrapper" key={'honeypot-captcha'}>
+      <TextWidget
+        id={id}
+        name={id}
+        label={title}
+        title={title}
+        onChange={(field, value) => {
+          //captchaToken.current = createToken(id, value);
+          captchaToken.current = undefined;
+          setValue(value);
+          onChangeFormData(id, field, value, {});
+        }}
+        value={value}
+      />
+    </Grid.Row>
+  );
+};
+
+export default HoneypotCaptchaWidget;