FIO-8027 added new Captcha provider

formio · Jul 8, 2024 · 3471258 · 3471258
1 parent ece4715
commit 3471258
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 38 deletions.
diff --git a/src/Webform.js b/src/Webform.js
@@ -13,7 +13,6 @@ import {
   currentTimezone,
   unescapeHTML,
   getStringFromComponentPath,
-  searchComponents,
   convertStringToHTMLElement,
   getArrayFromComponentPath
 } from './utils/utils';
@@ -735,7 +734,7 @@ export default class Webform extends NestedDataComponent {
     const rebuild = this.rebuild() || NativePromise.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);
@@ -1688,16 +1687,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
@@ -566,7 +566,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(() => {
@@ -1071,24 +1071,24 @@ export default class WebformBuilder extends Component {
     return NativePromise.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
@@ -298,7 +298,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
@@ -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
@@ -15,14 +15,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
@@ -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';