feat: handled collective.volto.formsupport.captcha.providers vocabulary

collective · May 19, 2022 · 12060e7 · 12060e7
1 parent e1026bc
commit 12060e7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ yarn add volto-form-block
 ```
 
 > **Note**: Since version v2.0.0 of this addon, it's required [collective.volto.formsupport](https://github.com/collective/collective.volto.formsupport) 2.0.0 or higher (and its upgrade steps).
-> 
+>
 > **Note**: Since version v2.1.2 of this addon, it's required Volto 14.2.0
 
 ## Features
@@ -42,11 +42,11 @@ For select, radio and checkbox fields, you can select a list of values.
 ## Captcha verification
 
 This form addon is configured to work with [HCaptcha](https://www.hcaptcha.com) and [ReCaptcha](https://www.google.com/recaptcha/) to prevent spam.
-In order to make one of these integrations work, you need to add an enviroment variable with the key `RAZZLE_HCAPTCHA_KEY` or `RAZZLE_RECAPTCHA_KEY` and the value of the key in your `.env` file.
+In order to make one of these integrations work, you need to add https://github.com/plone/plone.formwidget.hcaptcha Plone addon or https://github.com/plone/plone.formwidget.recaptcha Plone addon (or both) and configure public and private keys in controlpanels.
 
 ### HCaptcha
 
-With HCaptcha integration, you also get an additional option in the sidebar to enable or disable the invisible captcha (see implications [here](https://docs.hcaptcha.com/faq#do-i-need-to-display-anything-on-the-page-when-using-hcaptcha-in-invisible-mode)).
+With HCaptcha integration, you also have an additional option in the sidebar in 'Captcha provider' to enable or disable the invisible captcha (see implications [here](https://docs.hcaptcha.com/faq#do-i-need-to-display-anything-on-the-page-when-using-hcaptcha-in-invisible-mode)).
 
 ## Export
 

diff --git a/src/components/FormView.jsx b/src/components/FormView.jsx
@@ -163,21 +163,23 @@ const FormView = ({
                   );
                 })}
 
-                {data.captcha === 'recaptcha' && (
+                {data.captcha?.indexOf('recaptcha') >= 0 && (
                   <GoogleReCaptchaWidget
                     sitekey={data.captcha_props?.public_key}
                     onVerify={onVerifyCaptcha}
                   />
                 )}
-
-                {data.captcha === 'hcaptcha' && (
+                {data.captcha?.indexOf('hcaptcha') >= 0 && (
                   <HCaptchaWidget
                     sitekey={data.captcha_props?.public_key}
                     onVerify={onVerifyCaptcha}
-                    size={data.invisibleHCaptcha ? 'invisible' : 'normal'}
+                    size={
+                      data.captcha.indexOf('invisible') >= 0
+                        ? 'invisible'
+                        : 'normal'
+                    }
                   />
                 )}
-
                 {formErrors.length > 0 && (
                   <Message error role="alert">
                     <Message.Header as="h4">

diff --git a/src/formSchema.js b/src/formSchema.js
@@ -34,15 +34,7 @@ const messages = defineMessages({
     id: 'captcha',
     defaultMessage: 'Captcha provider',
   },
-  invisibleHCaptcha: {
-    id: 'invisible_hcaptcha',
-    defaultMessage: 'Invisible captcha',
-  },
-  invisibleHCaptchaDescription: {
-    id: 'invisible_hcaptcha_desc',
-    defaultMessage:
-      'See https://docs.hcaptcha.com/faq#do-i-need-to-display-anything-on-the-page-when-using-hcaptcha-in-invisible-mode',
-  },
+
   store: {
     id: 'form_save_persistent_data',
     defaultMessage: 'Store compiled data',
@@ -59,9 +51,7 @@ const messages = defineMessages({
 
 export default () => {
   var intl = useIntl();
-  var invisibleHCaptcha = process.env.RAZZLE_HCAPTCHA_KEY
-    ? ['invisibleHCaptcha']
-    : [];
+
   return {
     title: intl.formatMessage(messages.form),
     fieldsets: [
@@ -76,7 +66,6 @@ export default () => {
           'default_subject',
           'submit_label',
           'captcha',
-          ...invisibleHCaptcha,
           'store',
           'send',
         ],
@@ -104,15 +93,10 @@ export default () => {
       },
       captcha: {
         title: intl.formatMessage(messages.captcha),
-        choices: [
-          ['recaptcha', 'Google reCaptcha'],
-          ['hcaptcha', 'HCaptcha'],
-        ],
-      },
-      invisibleHCaptcha: {
-        type: 'boolean',
-        title: intl.formatMessage(messages.invisibleHCaptcha),
-        description: intl.formatMessage(messages.invisibleHCaptchaDescription),
+        type: 'array',
+        vocabulary: {
+          '@id': 'collective.volto.formsupport.captcha.providers',
+        },
       },
       store: {
         type: 'boolean',
@@ -124,6 +108,6 @@ export default () => {
         title: intl.formatMessage(messages.send),
       },
     },
-    required: ['default_to', 'default_from', 'default_subject'],
+    required: ['default_to', 'default_from', 'default_subject', 'captcha'],
   };
 };