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

This commit is contained in:
mateuswetah 2020-10-19 12:38:35 -03:00
parent 4413b803de
commit 1fa7962c25
7 changed files with 65 additions and 10 deletions

View File

@ -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

View File

@ -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 = [

View File

@ -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>

View File

@ -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 }
onSelectCollection={ ({ collectionId }) => {
existingCollectionId={ 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>
}

View File

@ -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>

View File

@ -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;

View File

@ -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(){