support: added recaptcha

invenio.cfg

@@ -51,6 +51,16 @@ APP_DEFAULT_SECURE_HEADERS = {
             "blob:",            # for pdf preview
             # Add your own policies here (e.g. analytics)
         ],
+        "frame-src": [
+            "'self'",
+            "https://www.google.com/recaptcha/",
+            "https://recaptcha.google.com/recaptcha/",
+        ],
+        "script-src": [
+            "'self'",
+            "https://www.google.com/recaptcha/",
+            "https://www.gstatic.com/recaptcha/",
+        ],
     },
     'content_security_policy_report_only': False,
     'content_security_policy_report_uri': None,
@@ -283,3 +293,6 @@ RDM_CUSTOM_FIELDS = [
     # obo
     RelationshipListCF(name='obo:RO_0002453'),
 ]
+
+# Google recaptcha client key
+RECAPTCHA_CLIENT_KEY = "CHANGE ME"

site/zenodo_rdm/assets/semantic-ui/js/zenodo_rdm/src/support/components/SupportForm.js

@@ -5,11 +5,11 @@ import { Form as SemanticForm, Button, Modal } from "semantic-ui-react";
 import { http, TextField, TextAreaField, ToggleField } from "react-invenio-forms";
 import { remove, set } from "lodash";
 import CategoryDropdown from "./CategoryDropdown";
+import ReCAPTCHA from "react-google-recaptcha";
 import FileUploader from './FileUploader';
 
 // TODO translations
 // TODO implement error notification
-// TODO implement recaptcha
 // TODO required fields are highlighted by the component and not Formik
 
 const requestConfig = {
@@ -76,7 +76,7 @@ class SupportForm extends Component {
             if (apiResponse) {
                 const apiErrors = apiResponse.errors || [];
                 const deserializedErrors = this.deserializeFieldErrors(apiErrors);
-                
+
                 // Highlight errors using formik
                 formikBag.setErrors(deserializedErrors);
                 errorMessage = apiResponse.message || errorMessage;
@@ -87,7 +87,6 @@ class SupportForm extends Component {
         }
     }
 
-
     render() {
         const {
             categories,
@@ -96,7 +95,8 @@ class SupportForm extends Component {
             userBrowser,
             userPlatform,
             userMail,
-            maxFileSize
+            maxFileSize,
+            recaptchaClientKey
         } = this.props;
 
         const defaultCategory = categories.length > 0 ? categories[0].key : '';
@@ -106,7 +106,8 @@ class SupportForm extends Component {
             name: name,
             category: defaultCategory,
             sysInfo: false,
-            files: []
+            files: [],
+            recaptcha: recaptchaClientKey ? false : true
         }
 
         const sysInfo = `Browser: ${userBrowser} Operating System: ${userPlatform}`;
@@ -202,7 +203,17 @@ class SupportForm extends Component {
                                     <label className="helptext">{sysInfo}</label>
                                 </div>
                             </div>
-
+                            {
+                                recaptchaClientKey &&
+                                <div className="field flex">
+                                    <ReCAPTCHA
+                                        sitekey={recaptchaClientKey}
+                                        onChange={(value) => {
+                                            setFieldValue('recaptcha', true);
+                                        }}
+                                    />
+                                </div>
+                            }
                             <Modal.Actions className="label-padding">
                                 <Button type="submit" positive>
                                     Send Request
@@ -227,7 +238,8 @@ SupportForm.propTypes = {
     maxFileSize: PropTypes.number,
     descriptionMaxLength: PropTypes.number,
     descriptionMinLength: PropTypes.number,
-    apiEndpoint: PropTypes.string.isRequired
+    apiEndpoint: PropTypes.string.isRequired,
+    recaptchaClientKey: PropTypes.string.isRequired
 };
 
 SubmitEvent.defaultProps = {

site/zenodo_rdm/assets/semantic-ui/js/zenodo_rdm/src/support/support.js

@@ -14,6 +14,8 @@ const maxFileSize = parseInt(domContainer.dataset.maxFileSize);
 const descriptionMaxLength = parseInt(domContainer.dataset.descriptionMaxLength);
 const descriptionMinLength = parseInt(domContainer.dataset.descriptionMinLength);
 const apiEndpoint = domContainer.dataset.apiEndpoint;
+const recaptchaClientKey = domContainer.dataset.recaptchaClientKey;
+
 
 ReactDOM.render(
     <SupportForm
@@ -27,6 +29,7 @@ ReactDOM.render(
         descriptionMaxLength={descriptionMaxLength}
         descriptionMinLength={descriptionMinLength}
         apiEndpoint={apiEndpoint}
+        recaptchaClientKey={recaptchaClientKey || ''}
     >
     </SupportForm>,
     rootContainer

site/zenodo_rdm/support/schema.py

@@ -29,18 +29,19 @@ class Meta:
     category = fields.String(required=True)
     sysInfo = fields.Boolean()
     files = fields.List(fields.Raw(type="file"))
+    recaptcha = fields.Boolean()
 
     @validates("description")
     def validate_description(self, data, **kwargs):
         if len(data) < min_length_config:
             raise ValidationError(
-                "Description length must be bigger than {} characters".format(
+                "Description length must be longer than {} characters".format(
                     min_length_config
                 )
             )
         if len(data) > max_length_config:
             raise ValidationError(
-                "Description length must be smaller than {} characters".format(
+                "Description length must be shorter than {} characters".format(
                     max_length_config
                 )
             )
@@ -50,6 +51,11 @@ def validate_category(self, data, **kwargs):
         if data not in self.allowed_categories:
             raise ValidationError("{} is not a valid support category".format(data))
 
+    @validates("recaptcha")
+    def validate_recaptcha(self, data, **kwards):
+        if data == False:
+            raise ValidationError("Recaptcha not completed")
+
     @cached_property
     def allowed_categories(self):
         return [c.get("key") for c in loaded_categories]

site/zenodo_rdm/templates/semantic-ui/zenodo_rdm/support.html

@@ -39,6 +39,7 @@ <h2 class="ui header mb-10">Contact us</h2>
             data-description-min-length = '{{ config.SUPPORT_DESCRIPTION_MIN_LENGTH }}';
             data-description-max-length = '{{ config.SUPPORT_DESCRIPTION_MAX_LENGTH }}';
             data-api-endpoint = '{{ config.SUPPORT_ENDPOINT }}';
+            data-recaptcha-client-key = '{{ config.RECAPTCHA_CLIENT_KEY }}';
         >
         </div>
     {% endblock %}

site/zenodo_rdm/webpack.py

@@ -34,6 +34,7 @@
                 "react": "^16.13.0",
                 "react-dom": "^16.13.0",
                 "lodash": "^4.17.0",
+                "react-google-recaptcha": "^2.1.0"
             },
             # aliases={
             #     "@translations/zenodo_rdm": "translations",