diff --git a/src/Webform.js b/src/Webform.js index 65cbce3ceb..5fd3896276 100644 --- a/src/Webform.js +++ b/src/Webform.js @@ -11,7 +11,6 @@ import { currentTimezone, unescapeHTML, getStringFromComponentPath, - searchComponents, convertStringToHTMLElement, getArrayFromComponentPath } from './utils/utils'; @@ -654,7 +653,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); @@ -1624,16 +1623,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 4871940aa3..295e345db6 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 8bfa069245..750775e74c 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; @@ -504,23 +504,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 bf862d68bc..7c9cfe9cc1 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 37cedf27f5..9df38a2468 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: [ { @@ -24,7 +32,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';