Adds submission_use_recaptcha field to collection form. Captures site captcha key from admin settings. #388

src/views/admin/components/edition/collection-edition-form.vue

@@ -524,6 +524,24 @@
                                 </div>
                             </b-field>
 
+                            <!-- Submission process uses ReCAPTCHA ------------------------ --> 
+                            <b-field
+                                    :addons="false" 
+                                    :label="$i18n.getHelperTitle('collections', 'submission_use_recaptcha')"
+                                    :type="editFormErrors['submission_use_recaptcha'] != undefined ? 'is-danger' : ''" 
+                                    :message="editFormErrors['submission_use_recaptcha'] != undefined ? editFormErrors['submission_use_recaptcha'] : ''">
+                                &nbsp;
+                                <b-switch
+                                        id="tainacan-checkbox-submission-use-recaptcha" 
+                                        size="is-small"
+                                        true-value="yes" 
+                                        false-value="no"
+                                        v-model="form.submission_use_recaptcha" />
+                                <help-button 
+                                        :title="$i18n.getHelperTitle('collections', 'submission_use_recaptcha')" 
+                                        :message="$i18n.getHelperMessage('collections', 'submission_use_recaptcha')"/>
+                            </b-field>
+
                         </div>
                     </transition>
 
@@ -628,7 +646,8 @@ export default {
                 allows_submission: 'no',
                 submission_default_status: 'draft',
                 submission_anonymous_user: 'no',
-                hide_items_thumbnail_on_lists: ''
+                hide_items_thumbnail_on_lists: '',
+                submission_use_recaptcha: 'no'
             },
             thumbnail: {},
             cover: {},
@@ -725,6 +744,7 @@ export default {
                 this.form.allows_submission = this.collection.allows_submission;
                 this.form.submission_anonymous_user = this.collection.submission_anonymous_user;
                 this.form.submission_default_status = this.collection.submission_default_status;
+                this.form.submission_use_recaptcha = this.collection.submission_use_recaptcha;
                 this.form.hide_items_thumbnail_on_lists = this.collection.hide_items_thumbnail_on_lists;
 
                 // Generates CoverPage from current cover_page_id info
@@ -825,6 +845,7 @@ export default {
                 allows_submission: this.form.allows_submission,
                 submission_anonymous_user: this.form.submission_anonymous_user,
                 submission_default_status: this.form.submission_default_status,
+                submission_use_recaptcha: this.form.submission_use_recaptcha,
                 allow_comments: this.form.allow_comments,
                 hide_items_thumbnail_on_lists: this.form.hide_items_thumbnail_on_lists
             };
@@ -851,6 +872,7 @@ export default {
                     this.form.allows_submission = this.collection.allows_submission;
                     this.form.submission_anonymous_user = this.collection.submission_anonymous_user;
                     this.form.submission_default_status = this.collection.submission_default_status;
+                    this.form.submission_use_recaptcha = this.collection.submission_use_recaptcha;
                     this.form.hide_items_thumbnail_on_lists = this.collection.hide_items_thumbnail_on_lists;
                     
                     this.isLoading = false;
@@ -908,6 +930,7 @@ export default {
                 this.form.allows_submission = this.collection.allows_submission;
                 this.form.submission_anonymous_user = this.collection.submission_anonymous_user;
                 this.form.submission_default_status = this.collection.submission_default_status;
+                this.form.submission_use_recaptcha = this.collection.submission_use_recaptcha;
                 this.form.hide_items_thumbnail_on_lists = this.collection.hide_items_thumbnail_on_lists;
 
                 // Pre-fill status with publish to incentivate it

src/views/class-tainacan-admin.php

@@ -252,6 +252,7 @@ class Admin {
 			'repository_name'	 		=> get_bloginfo('name'),
 			'api_max_items_per_page'    => $TAINACAN_API_MAX_ITEMS_PER_PAGE,
 			'wp_elasticpress'    		=> \Tainacan\Elastic_Press::get_instance()->is_active(),
+			'item_submission_captcha_site_key' => get_option("tnc_option_recaptch_site_key")
 		];
 
 		$maps = [

src/views/gutenberg-blocks/tainacan-facets/faceted-search/collection-modal.js

@@ -15,11 +15,13 @@ export default class CollectionModal extends React.Component {
             collectionViewModes: [],
             collectionsPerPage: 24,
             collectionId: undefined,  
+            useCaptcha: 'no',
             isLoadingCollections: false, 
             modalCollections: [],
             totalModalCollections: 0, 
             collectionPage: 1,
             collectionOrderBy: 'date-desc',
+            temporaryUseCaptcha: 'no',
             temporaryCollectionId: '',
             temporaryCollectionDefaultViewMode: '',
             temporaryCollectionEnabledViewModes: [],
@@ -38,10 +40,12 @@ export default class CollectionModal extends React.Component {
     componentWillMount() {
         
         this.setState({ 
+            useCaptcha: this.props.existingUseCaptcha,
             collectionId: this.props.existingCollectionId,
             temporaryCollectionId: this.props.existingCollectionId,
             temporaryCollectionDefaultViewMode: this.props.existingCollectionDefaultViewMode,
             temporaryCollectionEnabledViewModes: this.props.existingCollectionEnabledViewModes,
+            temporaryUseCaptcha: this.props.existingUseCaptcha,
             collectionPage: 1
         });
 
@@ -107,7 +111,8 @@ export default class CollectionModal extends React.Component {
                         name: collection.name, 
                         id: collection.id,
                         default_view_mode: collection.default_view_mode,
-                        enabled_view_modes: collection.enabled_view_modes 
+                        enabled_view_modes: collection.enabled_view_modes ,
+                        submission_use_recaptcha: collection.submission_use_recaptcha
                     });
                 }
 
@@ -124,10 +129,11 @@ export default class CollectionModal extends React.Component {
             });
     }
 
-    selectCollection({ collectionId, collectionDefaultViewMode, collectionEnabledViewModes }) {
+    selectCollection({ collectionId, collectionDefaultViewMode, collectionEnabledViewModes, useCaptcha }) {
         collectionId = collectionId;
         this.setState({ collectionId: collectionId });
-        this.props.onSelectCollection({ collectionId, collectionDefaultViewMode, collectionEnabledViewModes });
+        this.setState({ useCaptcha: useCaptcha });
+        this.props.onSelectCollection({ collectionId, collectionDefaultViewMode, collectionEnabledViewModes, useCaptcha });
     }
 
     fetchCollections(name) {
@@ -180,7 +186,8 @@ export default class CollectionModal extends React.Component {
                     name: collection.name, 
                     id: collection.id + '',
                     default_view_mode: collection.default_view_mode,
-                    enabled_view_modes: collection.enabled_view_modes 
+                    enabled_view_modes: collection.enabled_view_modes,
+                    submission_use_recaptcha: collection.submission_use_recaptcha 
                 }));
 
                 this.setState({ 
@@ -198,6 +205,7 @@ export default class CollectionModal extends React.Component {
     resetCollections() {
 
         this.setState({
+            useCaptcha: 'no',
             collectionId: null,
             collectionPage: 1,
             modalCollections: []
@@ -266,9 +274,11 @@ export default class CollectionModal extends React.Component {
                                             this.state.temporaryCollectionId = aCollectionId;
                                             this.state.temporaryCollectionDefaultViewMode = selectedCollection.default_view_mode;
                                             this.state.temporaryCollectionEnabledViewModes = selectedCollection.enabled_view_modes;
+                                            this.state.temporaryUseCaptcha = selectedCollection.submission_use_recaptcha;
                                             this.setState({ temporaryCollectionId: aCollectionId });
                                             this.setState({ temporaryCollectionDefaultViewMode: selectedCollection.default_view_mode });
                                             this.setState({ temporaryCollectionEnabledViewModes: selectedCollection.enabled_view_modes });
+                                            this.setState({ temporaryUseCaptcha: selectedCollection.submission_use_recaptcha });
                                         } } />
                                     }                                      
                                 </div>
@@ -298,9 +308,11 @@ export default class CollectionModal extends React.Component {
                                         this.state.temporaryCollectionId = aCollectionId;
                                         this.state.temporaryCollectionDefaultViewMode = selectedCollection.default_view_mode;
                                         this.state.temporaryCollectionEnabledViewModes = selectedCollection.enabled_view_modes;
+                                        this.state.temporaryUseCaptcha = selectedCollection.submission_use_recaptcha;
                                         this.setState({ temporaryCollectionId: aCollectionId });
                                         this.setState({ temporaryCollectionDefaultViewMode: selectedCollection.default_view_mode });
                                         this.setState({ temporaryCollectionEnabledViewModes: selectedCollection.enabled_view_modes });
+                                        this.setState({ temporaryUseCaptcha: selectedCollection.submission_use_recaptcha });
                                     } } />
                                 }                                     
                             </div>
@@ -335,7 +347,8 @@ export default class CollectionModal extends React.Component {
                         onClick={ () => this.selectCollection({ 
                             collectionId: this.state.temporaryCollectionId,
                             collectionDefaultViewMode: this.state.temporaryCollectionDefaultViewMode,
-                            collectionEnabledViewModes: this.state.temporaryCollectionEnabledViewModes
+                            collectionEnabledViewModes: this.state.temporaryCollectionEnabledViewModes,
+                            useCaptcha: this.state.temporaryUseCaptcha
                         }) }>
                         {__('Use selected Collection', 'tainacan')}
                     </Button>

src/views/gutenberg-blocks/tainacan-items/item-submission-form/index.js

@@ -143,6 +143,10 @@ registerBlockType('tainacan/item-submission-form', {
             type: String,
             default: __( 'Metadata', 'tainacan' )
         },
+        useCaptcha: {
+            type: String,
+            default: 'no'
+        },
         captchaSiteKey: {
             type: String,
             default: ''
@@ -184,9 +188,13 @@ registerBlockType('tainacan/item-submission-form', {
             attachmentsSectionLabel,
             thumbnailSectionLabel,
             metadataSectionLabel,
+            useCaptcha,
             captchaSiteKey
         } = attributes;
 
+        captchaSiteKey = tainacan_plugin['item_submission_captcha_site_key'];
+        setAttributes({ captchaSiteKey: captchaSiteKey });
+
         const fontSizes = [
             {
                 name: __( 'Tiny', 'tainacan' ),
@@ -764,10 +772,13 @@ registerBlockType('tainacan/item-submission-form', {
                 { isCollectionModalOpen ? 
                     <CollectionModal
                         filterOptionsBy={ { allows_submission: 'yes' } }
-                        existingCollectionId={ collectionId } 
+                        existingCollectionId={ collectionId }
-                        onSelectCollection={ ({ collectionId }) => {
+                        existingUseCaptcha={ useCaptcha } 
+                        onSelectCollection={ ({ collectionId, useCaptcha }) => {
                             collectionId = collectionId;
+                            useCaptcha = useCaptcha;
                             setAttributes({
+                                useCaptcha: useCaptcha,
                                 collectionId: collectionId,
                                 isCollectionModalOpen: false
                             });
@@ -808,6 +819,7 @@ registerBlockType('tainacan/item-submission-form', {
             enabledMetadata,
             sentFormHeading,
             sentFormMessage,
+            useCaptcha,
             captchaSiteKey
         } = attributes;
         
@@ -844,7 +856,8 @@ registerBlockType('tainacan/item-submission-form', {
                     thumbnail-section-label={ thumbnailSectionLabel }
                     attachments-section-label={ attachmentsSectionLabel }
                     metadata-section-label={ metadataSectionLabel }
-                    captcha-site-key={ captchaSiteKey } >
+                    captcha-site-key={ captchaSiteKey }
+                    use-captcha={ useCaptcha } >
             </div>
         </div>
     }

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

@@ -18,6 +18,7 @@
             :thumbnail-section-label="$root.thumbnailSectionLabel"
             :attachments-section-label="$root.attachmentsSectionLabel"
             :metadata-section-label="$root.metadataSectionLabel"
+            :use-captcha="$root.useCaptcha"
             :captcha-site-key="$root.captchaSiteKey" />
 </template>
 

src/views/item-submission/js/item-submission-main.js

@@ -115,6 +115,7 @@ document.addEventListener("DOMContentLoaded", () => {
                 thumbnailSectionLabel: '',
                 attachmentsSectionLabel: '',
                 metadataSectionLabel: '',
+                useCaptcha: 'no',
                 captchaSiteKey: ''
             },
             beforeMount () {
@@ -163,6 +164,8 @@ document.addEventListener("DOMContentLoaded", () => {
                     this.enabledMetadata = this.$el.attributes['enabled-metadata'].value.split(',');
 
                 // Captcha
+                if (this.$el.attributes['use-captcha'] != undefined)
+                    this.useCaptcha = this.$el.attributes['use-captcha'].value;
                 if (this.$el.attributes['captcha-site-key'] != undefined)
                     this.captchaSiteKey = this.$el.attributes['captcha-site-key'].value;
 

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

@@ -321,7 +321,7 @@
             </template>
 
             <!-- Google ReCAPTCHA -->
-            <template v-if="captchaSiteKey">
+            <template v-if="useCaptcha == 'yes'">
                 <div 
                         class="g-recaptcha"
                         :data-sitekey="captchaSiteKey" />
@@ -422,6 +422,7 @@ export default {
         thumbnailSectionLabel: String,
         attachmentsSectionLabel: String,
         metadataSectionLabel: String,
+        useCaptcha: String,
         captchaSiteKey: String
     },
     data(){