diff --git a/src/Webform.js b/src/Webform.js index 2b638953ec..f92c701a48 100644 --- a/src/Webform.js +++ b/src/Webform.js @@ -12,7 +12,6 @@ import { currentTimezone, unescapeHTML, getStringFromComponentPath, - searchComponents, convertStringToHTMLElement, getArrayFromComponentPath, } from './utils/utils'; @@ -749,7 +748,7 @@ export default class Webform extends NestedDataComponent { const rebuild = this.rebuild() || Promise.resolve(); return rebuild.then(() => { this.emit('formLoad', form); - this.triggerRecaptcha(); + this.triggerCaptcha(); // Make sure to trigger onChange after a render event occurs to speed up form rendering. setTimeout(() => { this.onChange(flags); @@ -1697,16 +1696,20 @@ export default class Webform extends NestedDataComponent { } } - triggerRecaptcha() { + triggerCaptcha() { if (!this || !this.components) { return; } - const recaptchaComponent = searchComponents(this.components, { - 'component.type': 'recaptcha', - 'component.eventType': 'formLoad' + + const captchaComponent = []; + eachComponent(this.components, (component) => { + if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') { + captchaComponent.push(component); + } }); - if (recaptchaComponent.length > 0) { - recaptchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`); + + if (captchaComponent.length > 0) { + captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`); } } diff --git a/src/WebformBuilder.js b/src/WebformBuilder.js index 256386f271..e6aa69d786 100644 --- a/src/WebformBuilder.js +++ b/src/WebformBuilder.js @@ -560,7 +560,7 @@ export default class WebformBuilder extends Component { attach(element) { this.on('change', (form) => { - this.populateRecaptchaSettings(form); + this.populateCaptchaSettings(form); this.webform.setAlert(false); }); return super.attach(element).then(() => { @@ -1080,24 +1080,24 @@ export default class WebformBuilder extends Component { return Promise.resolve(form); } - populateRecaptchaSettings(form) { - //populate isEnabled for recaptcha form settings - let isRecaptchaEnabled = false; + populateCaptchaSettings(form) { + //populate isEnabled for captcha form settings + let isCaptchaEnabled = false; if (this.form.components) { eachComponent(form.components, component => { - if (isRecaptchaEnabled) { + if (isCaptchaEnabled) { return; } - if (component.type === 'recaptcha') { - isRecaptchaEnabled = true; + if (component.type === 'captcha') { + isCaptchaEnabled = true; return false; } }); - if (isRecaptchaEnabled) { - _.set(form, 'settings.recaptcha.isEnabled', true); + if (isCaptchaEnabled) { + _.set(form, 'settings.captcha.isEnabled', true); } - else if (_.get(form, 'settings.recaptcha.isEnabled')) { - _.set(form, 'settings.recaptcha.isEnabled', false); + else if (_.get(form, 'settings.captcha.isEnabled')) { + _.set(form, 'settings.captcha.isEnabled', false); } } } diff --git a/src/components/button/Button.js b/src/components/button/Button.js index 7194c10e1a..0068a1618b 100644 --- a/src/components/button/Button.js +++ b/src/components/button/Button.js @@ -297,7 +297,7 @@ export default class ButtonComponent extends Field { } onClick(event) { - this.triggerReCaptcha(); + this.triggerCaptcha(); // Don't click if disabled or in builder mode. if (this.disabled || this.options.attachMode === 'builder') { return; @@ -505,23 +505,23 @@ export default class ButtonComponent extends Field { } } - triggerReCaptcha() { + triggerCaptcha() { if (!this.root) { return; } - let recaptchaComponent; + let captchaComponent; this.root.everyComponent((component)=> { - if ( component.component.type === 'recaptcha' && + if (/^(re)?captcha$/.test(component.component.type) && component.component.eventType === 'buttonClick' && component.component.buttonKey === this.component.key) { - recaptchaComponent = component; + captchaComponent = component; } }); - if (recaptchaComponent) { - recaptchaComponent.verify(`${this.component.key}Click`); + if (captchaComponent) { + captchaComponent.verify(`${this.component.key}Click`); } } } diff --git a/src/components/recaptcha/ReCaptcha.form.js b/src/components/recaptcha/ReCaptcha.form.js index 6171a71043..0679e79f32 100644 --- a/src/components/recaptcha/ReCaptcha.form.js +++ b/src/components/recaptcha/ReCaptcha.form.js @@ -1,7 +1,7 @@ import Components from '../Components'; import ReCaptchaEditDisplay from './editForm/ReCaptcha.edit.display'; -export default function() { +export default function(...extend) { return Components.baseEditForm([ { key: 'display', @@ -23,5 +23,5 @@ export default function() { key: 'logic', ignore: true }, - ]); + ], ...extend); } diff --git a/src/components/recaptcha/ReCaptcha.js b/src/components/recaptcha/ReCaptcha.js index 668f8c3a80..78abb00422 100644 --- a/src/components/recaptcha/ReCaptcha.js +++ b/src/components/recaptcha/ReCaptcha.js @@ -14,14 +14,7 @@ export default class ReCaptchaComponent extends Component { } static get builderInfo() { - return { - title: 'reCAPTCHA', - group: 'premium', - icon: 'refresh', - documentation: '/userguide/form-building/premium-components#recaptcha', - weight: 40, - schema: ReCaptchaComponent.schema() - }; + return {}; } static savedValueTypes() { diff --git a/src/components/recaptcha/editForm/ReCaptcha.edit.display.js b/src/components/recaptcha/editForm/ReCaptcha.edit.display.js index c32d35c6f4..90f965041b 100644 --- a/src/components/recaptcha/editForm/ReCaptcha.edit.display.js +++ b/src/components/recaptcha/editForm/ReCaptcha.edit.display.js @@ -1,9 +1,17 @@ import { getContextButtons } from '../../../utils/utils'; export default [ + { + key: 'recaptchaInfo', + weight: -10, + type: 'htmlelement', + tag: 'div', + className: 'alert alert-danger', + content: 'This component has been deprecated and will be removed. Use the CAPTCHA component instead.', + }, { key: 'eventType', label: 'Type of event', - tooltip: 'Specify type of event that this reCAPTCHA would react to', + tooltip: 'Specify type of event that this CAPTCHA would react to. If Button Click is selected, then the CAPTCHA widget will be displayed and verification will occur after clicking on the button.', type: 'radio', values: [ { @@ -27,7 +35,7 @@ export default [ key: 'buttonKey', dataSrc: 'custom', valueProperty: 'value', - tooltip: 'Specify key of button on this form that this reCAPTCHA should react to', + tooltip: 'Specify key of button on this form that this CAPTCHA should react to', weight: 660, customConditional(context) { return context.data.eventType === 'buttonClick';