diff --git a/src/components/Field.jsx b/src/components/Field.jsx index 9eb8916..3c18033 100644 --- a/src/components/Field.jsx +++ b/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'; diff --git a/src/components/View.jsx b/src/components/View.jsx index de33449..dbd45f8 100644 --- a/src/components/View.jsx +++ b/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(() => { diff --git a/src/components/Widget/Captcha.jsx b/src/components/Widget/Captcha.jsx index c5421ac..b9119cd 100644 --- a/src/components/Widget/Captcha.jsx +++ b/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} > ); + } else if (captcha === 'honeypot') { + return ( + + ); } else { return null; } diff --git a/src/components/Widget/HoneypotCaptchaWidget.css b/src/components/Widget/HoneypotCaptchaWidget.css new file mode 100644 index 0000000..bf44dcb --- /dev/null +++ b/src/components/Widget/HoneypotCaptchaWidget.css @@ -0,0 +1,3 @@ +.public-ui .ui.grid > .row.honey-wrapper { + display: none; +} diff --git a/src/components/Widget/HoneypotCaptchaWidget.jsx b/src/components/Widget/HoneypotCaptchaWidget.jsx new file mode 100644 index 0000000..92d31b6 --- /dev/null +++ b/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 ( + + { + //captchaToken.current = createToken(id, value); + captchaToken.current = undefined; + setValue(value); + onChangeFormData(id, field, value, {}); + }} + value={value} + /> + + ); +}; + +export default HoneypotCaptchaWidget;