← All changes | resources/frontend/js/restrict-content.js +98 -30 3.3.8 → 3.4.3 View file →

		@@ -55,10 +55,14 @@
55	55	*
56	56	* @param {Event} e Form submission event.
57	57	*/
58	58	function convertKitRestrictContentFormSubmit(e) {
	59	+ // Determine where the response should be displayed; either the embedded login
	60	+ // form, or the modal.
	61	+ const container = convertKitRestrictContentContainer(e.target);
	62	+
59	63	// Disable inputs.
60		- document
	64	+ container
61	65	.querySelectorAll(
62	66	'input[type="text"], input[type="email"], input[type="submit"]'
63	67	)
64	68	.forEach(function (input) {
		@@ -65,15 +69,13 @@
65	69	input.setAttribute('disabled', 'disabled');
66	70	});
67	71
68	72	// Show loading overlay.
69		- document.querySelector(
70		- '#convertkit-restrict-content-modal-loading'
71		- ).style.display = 'block';
	73	+ convertKitRestrictContentLoading(true);
72	74
73	75	// Determine if this is the email or code submission.
74	76	const isCodeSubmission =
75		- document.querySelector('input#convertkit-subscriber-code') !== null;
	77	+ container.querySelector('input#convertkit-subscriber-code') !== null;
76	78
77	79	if (isCodeSubmission) {
78	80	// Code submission.
79	81	convertKitRestrictContentSubscriberVerification(
		@@ -79,9 +81,10 @@
79	81	convertKitRestrictContentSubscriberVerification(
80	82	convertkit_restrict_content.nonce,
81	83	e.target.querySelector('input[name="subscriber_code"]').value,
82	84	e.target.querySelector('input[name="token"]').value,
83		- e.target.querySelector('input[name="convertkit_post_id"]').value
	85	+ e.target.querySelector('input[name="convertkit_post_id"]').value,
	86	+ container
84	87	);
85	88
86	89	return false;
87	90	}
		@@ -91,13 +94,80 @@
91	94	convertkit_restrict_content.nonce,
92	95	e.target.querySelector('input[name="convertkit_email"]').value,
93	96	e.target.querySelector('input[name="convertkit_resource_type"]').value,
94	97	e.target.querySelector('input[name="convertkit_resource_id"]').value,
95		- e.target.querySelector('input[name="convertkit_post_id"]').value
	98	+ e.target.querySelector('input[name="convertkit_post_id"]').value,
	99	+ convertKitRestrictContentSpamProtectionResponse(e.target),
	100	+ container
96	101	);
97	102	}
98	103
99	104	/**
	105	+ * Returns whether the heading should be displayed above the login form, which is
	106	+ * the case when the modal is used.
	107	+ *
	108	+ * @since 3.4.2
	109	+ *
	110	+ * @param {Object} container Container element.
	111	+ * @return {boolean} Display the heading.
	112	+ */
	113	+function convertKitRestrictContentDisplayHeading(container) {
	114	+ return container.id === 'convertkit-restrict-content-modal-content';
	115	+}
	116	+
	117	+/**
	118	+ * Returns the element to display the response in for the given form, which is
	119	+ * either the embedded login form's container, or the modal's content.
	120	+ *
	121	+ * @since 3.4.2
	122	+ *
	123	+ * @param {Object} form Form element.
	124	+ * @return {Object} Container element.
	125	+ */
	126	+function convertKitRestrictContentContainer(form) {
	127	+ return (
	128	+ form.closest('.convertkit-restrict-content-content') ||
	129	+ document.querySelector('#convertkit-restrict-content-modal-content')
	130	+ );
	131	+}
	132	+
	133	+/**
	134	+ * Shows or hides the modal's loading overlay, if the modal is used.
	135	+ *
	136	+ * @since 3.4.2
	137	+ *
	138	+ * @param {boolean} display Display the loading overlay.
	139	+ */
	140	+function convertKitRestrictContentLoading(display) {
	141	+ const loading = document.querySelector(
	142	+ '#convertkit-restrict-content-modal-loading'
	143	+ );
	144	+
	145	+ if (loading === null) {
	146	+ return;
	147	+ }
	148	+
	149	+ loading.style.display = display ? 'block' : 'none';
	150	+}
	151	+
	152	+/**
	153	+ * Returns the spam protection response for the given form, if a spam protection
	154	+ * provider is enabled.
	155	+ *
	156	+ * @since 3.4.2
	157	+ *
	158	+ * @param {Object} form Form element.
	159	+ * @return {string} Spam protection response.
	160	+ */
	161	+function convertKitRestrictContentSpamProtectionResponse(form) {
	162	+ const field = form.querySelector(
	163	+ '[name="g-recaptcha-response"], [name="cf-turnstile-response"]'
	164	+ );
	165	+
	166	+ return field === null ? '' : field.value;
	167	+}
	168	+
	169	+/**
100	170	* Opens the modal, displaying the content stored within the
101	171	* #convertkit-restrict-content-modal-content element.
102	172	*
103	173	* @since 2.3.8
		@@ -133,13 +203,15 @@
133	203	* - the code form view, where the user can enter the OTP.
134	204	*
135	205	* @since 2.3.8
136	206	*
137		- * @param {string} nonce WordPress nonce.
138		- * @param {string} email Email address.
139		- * @param {string} resource_type Resource Type (form|tag|product).
140		- * @param {string} resource_id Resource ID (Kit Form,Tag or Product ID).
141		- * @param {number} post_id WordPress Post ID being viewed / accessed.
	207	+ * @param {string} nonce WordPress nonce.
	208	+ * @param {string} email Email address.
	209	+ * @param {string} resource_type Resource Type (form|tag|product).
	210	+ * @param {string} resource_id Resource ID (Kit Form,Tag or Product ID).
	211	+ * @param {number} post_id WordPress Post ID being viewed / accessed.
	212	+ * @param {string} spam_protection_response Spam protection response.
	213	+ * @param {Object} container Element to display the response in.
142	214	*/
143	215	function convertKitRestrictContentSubscriberAuthenticationSendCode(
144	216	nonce,
145	217	email,
		@@ -144,9 +216,11 @@
144	216	nonce,
145	217	email,
146	218	resource_type,
147	219	resource_id,
148		- post_id
	220	+ post_id,
	221	+ spam_protection_response,
	222	+ container
149	223	) {
150	224	fetch(convertkit_restrict_content.subscriber_authentication_url, {
151	225	method: 'POST',
152	226	headers: {
		@@ -157,8 +231,10 @@
157	231	convertkit_email: email,
158	232	convertkit_resource_type: resource_type,
159	233	convertkit_resource_id: resource_id,
160	234	convertkit_post_id: post_id,
	235	+ spam_protection_response,
	236	+ display_heading: convertKitRestrictContentDisplayHeading(container),
161	237	}),
162	238	})
163	239	.then(function (response) {
164	240	if (convertkit_restrict_content.debug) {
		@@ -173,24 +249,18 @@
173	249	}
174	250
175	251	// Output error message if the response contains a code.
176	252	if (typeof result.code !== 'undefined') {
177		- document.querySelector(
178		- '#convertkit-restrict-content-modal-content'
179		- ).innerHTML = result.message;
	253	+ container.innerHTML = result.message;
180	254	} else {
181	255	// Output response, which will be either:
182	256	// - the email form view, with an error message e.g. invalid email,
183	257	// - the code form view, where the user can enter the OTP.
184		- document.querySelector(
185		- '#convertkit-restrict-content-modal-content'
186		- ).innerHTML = result.data;
	258	+ container.innerHTML = result.data;
187	259	}
188	260
189	261	// Hide loading overlay.
190		- document.querySelector(
191		- '#convertkit-restrict-content-modal-loading'
192		- ).style.display = 'none';
	262	+ convertKitRestrictContentLoading(false);
193	263
194	264	// Re-bind OTP listener.
195	265	convertKitRestrictContentOTPField();
196	266	})
		@@ -212,14 +282,16 @@
212	282	* @param {string} nonce WordPress nonce.
213	283	* @param {string} subscriber_code OTP Subscriber Code.
214	284	* @param {string} token Subscriber Token.
215	285	* @param {number} post_id WordPress Post ID being viewed / accessed.
	286	+ * @param {Object} container Element to display the response in.
216	287	*/
217	288	function convertKitRestrictContentSubscriberVerification(
218	289	nonce,
219	290	subscriber_code,
220	291	token,
221		- post_id
	292	+ post_id,
	293	+ container
222	294	) {
223	295	fetch(convertkit_restrict_content.subscriber_verification_url, {
224	296	method: 'POST',
225	297	headers: {
		@@ -243,18 +315,14 @@
243	315	if (convertkit_restrict_content.debug) {
244	316	console.log(result);
245	317	}
246	318
247		- // If the entered code is invalid, show the response in the modal.
	319	+ // If the entered code is invalid, show the response.
248	320	if (!result.success) {
249		- document.querySelector(
250		- '#convertkit-restrict-content-modal-content'
251		- ).innerHTML = result.data;
	321	+ container.innerHTML = result.data;
252	322
253	323	// Hide loading overlay.
254		- document.querySelector(
255		- '#convertkit-restrict-content-modal-loading'
256		- ).style.display = 'none';
	324	+ convertKitRestrictContentLoading(false);
257	325
258	326	// Re-bind OTP listener.
259	327	convertKitRestrictContentOTPField();
260	328	return;