Adds google recaptcha validation. #388.

.eslintrc.js

@@ -31,6 +31,7 @@ module.exports = {
         '_': true,
         'jQuery': true,
         'tainacan_extra_components': true,
-        'tainacan_extra_plugins': true
+        'tainacan_extra_plugins': true,
+        'grecaptcha': true
     }
 }

src/views/admin/js/axios.js

@@ -97,5 +97,6 @@ wp.interceptors.response.use(
 export const CancelToken = axios.CancelToken;
 export const isCancel = axios.isCancel;
 export const all = axios.all;
+export const axiosCreate = axios.create;
 
-export default { tainacan, wp, CancelToken, isCancel, all };
+export default { tainacan, wp, CancelToken, isCancel, all, axiosCreate };

src/views/admin/js/store/modules/item/actions.js

@@ -385,3 +385,20 @@ export const finishItemSubmission = ({ commit }, { itemSubmission, fakeItemId })
             });
     }); 
 }
+
+export const verifyCaptcha = ({ commit }, { secret, response }) => {
+    return new Promise((resolve, reject) => {
+
+        // New axios instance
+        const googleReCaptcha = axios.axiosCreate({
+            baseURL: 'https://www.google.com/recaptcha/api/'
+        });
+        
+        googleReCaptcha.post('/verify/', { secret: secret, response: response })
+            .then( res => {
+                resolve( res.data );
+            }).catch( error => {
+                reject(error);
+            });
+    }); 
+}

src/views/gutenberg-blocks/class-tainacan-gutenberg-block.php

@@ -178,6 +178,13 @@ function tainacan_blocks_register_tainacan_item_submission_form(){
 		array('wp-blocks', 'wp-element', 'wp-components', 'wp-editor')
 	);
 
+	wp_register_script(
+		'google-recaptcha-script',
+		'https://www.google.com/recaptcha/api.js',
+		[], false, true 
+	);
+	wp_enqueue_script('google-recaptcha-script');
+
 	wp_register_style(
 		'item-submission-form',
 		$TAINACAN_BASE_URL . '/assets/css/tainacan-gutenberg-block-item-submission-form.css',

src/views/item-submission/pages/item-submission-form.vue

@@ -320,6 +320,14 @@
                     v-html="formHooks['item']['end-right'].join('')"/>
             </template>
 
+            <!-- Google ReCAPTCHA -->
+            <template v-if="useCaptcha">
+                <div 
+                        class="g-recaptcha"
+                        :data-sitekey="captchaSiteKey" />
+                <br>
+            </template>
+
             <footer class="form-submission-footer">
 
                 <button
@@ -492,7 +500,8 @@ export default {
             'setItemSubmissionMetadata',
             'submitItemSubmission',
             'finishItemSubmission',
-            'clearItemSubmission'
+            'clearItemSubmission',
+            'verifyCaptcha'
         ]),
         ...mapGetters('item',[
             'getItemSubmission',
@@ -509,6 +518,25 @@ export default {
             // Puts loading on Item edition
             this.isSubmitting = true;
 
+            // Checks captcha value before submitting to the api
+            if (this.useCaptcha) {
+                this.verifyCaptcha({ secret: this.captchaSecretKey, response: grecaptcha.getResponse()})
+                    .then(() => {
+                        this.performItemSubmission();
+                    })
+                    .catch((error) => {
+                        this.formErrorMessage = error;
+
+                        this.isSubmitting = false;
+                        this.hasSentForm = false;
+                        this.isUploading = false;
+                    });
+            } else {
+                this.performItemSubmission();
+            }
+        },
+        performItemSubmission() {
+
             let data = this.form;
             this.fillExtraFormData(data);
             this.updateExtraFormData(data);

src/views/theme-search/pages/theme-items-page.vue

@@ -2,6 +2,7 @@
     <div 
             :class="{
                 'is-filters-menu-open': !hideFilters && isFiltersModalActive && !openAdvancedSearch,
+                'is-filters-menu-fixed': isFiltersListFixed,
                 'repository-level-page': isRepositoryLevel,
                 'is-fullscreen': registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].full_screen
             }"
@@ -447,6 +448,7 @@
                 
                 <h3 
                         id="items-list-landmark"
+                        ref="items-list-landmark"
                         class="sr-only">
                     {{ $i18n.get('label_items_list') }}
                 </h3>
@@ -603,7 +605,9 @@
                 metadataSearchCancel: undefined,
                 latestNonFullscreenViewMode: '',
                 isMobile: false,
-                initialItemPosition: null
+                initialItemPosition: null,
+                isFiltersListFixed: false,
+                intersectionObserver: null
             }
         },
         computed: {
@@ -773,10 +777,28 @@
                 this.hideFiltersOnMobile();
                 window.addEventListener('resize', this.hideFiltersOnMobile);
             }
+            
+            // Uses Intersection Observer o see if the top of the list is on screen and fix filters list position
+            if (!this.filtersAsModal &&
+                !this.hideFilters &&
+                this.$refs['items-list-landmark'] &&
+                "IntersectionObserver" in window &&
+                "IntersectionObserverEntry" in window &&
+                "isIntersecting" in window.IntersectionObserverEntry.prototype &&
+                "boundingClientRect" in window.IntersectionObserverEntry.prototype) {
+                this.intersectionObserver = new IntersectionObserver(entries => {
+                    this.isFiltersListFixed = entries[0] && (!entries[0].isIntersecting) && (entries[0].boundingClientRect.y < 0);
+                });
+                this.intersectionObserver.observe(this.$refs['items-list-landmark']);
+            }
         },
         beforeDestroy() {
             this.removeEventListeners();
             
+            // Removes intersection listener, if it was set up
+            if (this.intersectionObserver)
+                this.intersectionObserver.disconnect();
+
             // Cancels previous Metadata Request
             if (this.metadataSearchCancel != undefined)
                 this.metadataSearchCancel.cancel('Metadata search Canceled.');

src/views/theme-search/scss/_layout.scss

@@ -142,6 +142,16 @@
 			min-width: 13.75%;
 			min-width: 13.75vw;
 		}
+		&.is-filters-menu-fixed {
+
+			.items-list-area {
+				margin-left: var(--tainacan-filter-menu-width-theme) !important;
+			}
+			.filters-menu:not(.filters-menu-modal) {
+				position: fixed;
+				top: 0px !important;
+			}
+		}
 	}
 
 	@media screen and (max-width: 768px) {