← All changes | resources/frontend/js/restrict-content.js +124 -33 3.4.1 → 3.4.5 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,97 @@
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	+ * Re-enables the inputs in the given container, following a failed request.
	106	+ *
	107	+ * @since 3.4.5
	108	+ *
	109	+ * @param {Object} container Container element.
	110	+ */
	111	+function convertKitRestrictContentEnableInputs(container) {
	112	+ container
	113	+ .querySelectorAll(
	114	+ 'input[type="text"], input[type="email"], input[type="submit"]'
	115	+ )
	116	+ .forEach(function (input) {
	117	+ input.removeAttribute('disabled');
	118	+ });
	119	+}
	120	+
	121	+/**
	122	+ * Returns whether the heading should be displayed above the login form, which is
	123	+ * the case when the modal is used.
	124	+ *
	125	+ * @since 3.4.2
	126	+ *
	127	+ * @param {Object} container Container element.
	128	+ * @return {boolean} Display the heading.
	129	+ */
	130	+function convertKitRestrictContentDisplayHeading(container) {
	131	+ return container.id === 'convertkit-restrict-content-modal-content';
	132	+}
	133	+
	134	+/**
	135	+ * Returns the element to display the response in for the given form, which is
	136	+ * either the embedded login form's container, or the modal's content.
	137	+ *
	138	+ * @since 3.4.2
	139	+ *
	140	+ * @param {Object} form Form element.
	141	+ * @return {Object} Container element.
	142	+ */
	143	+function convertKitRestrictContentContainer(form) {
	144	+ return (
	145	+ form.closest('.convertkit-restrict-content-content') ||
	146	+ document.querySelector('#convertkit-restrict-content-modal-content')
	147	+ );
	148	+}
	149	+
	150	+/**
	151	+ * Shows or hides the modal's loading overlay, if the modal is used.
	152	+ *
	153	+ * @since 3.4.2
	154	+ *
	155	+ * @param {boolean} display Display the loading overlay.
	156	+ */
	157	+function convertKitRestrictContentLoading(display) {
	158	+ const loading = document.querySelector(
	159	+ '#convertkit-restrict-content-modal-loading'
	160	+ );
	161	+
	162	+ if (loading === null) {
	163	+ return;
	164	+ }
	165	+
	166	+ loading.style.display = display ? 'block' : 'none';
	167	+}
	168	+
	169	+/**
	170	+ * Returns the spam protection response for the given form, if a spam protection
	171	+ * provider is enabled.
	172	+ *
	173	+ * @since 3.4.2
	174	+ *
	175	+ * @param {Object} form Form element.
	176	+ * @return {string} Spam protection response.
	177	+ */
	178	+function convertKitRestrictContentSpamProtectionResponse(form) {
	179	+ const field = form.querySelector(
	180	+ '[name="g-recaptcha-response"], [name="cf-turnstile-response"]'
	181	+ );
	182	+
	183	+ return field === null ? '' : field.value;
	184	+}
	185	+
	186	+/**
100	187	* Opens the modal, displaying the content stored within the
101	188	* #convertkit-restrict-content-modal-content element.
102	189	*
103	190	* @since 2.3.8
		@@ -133,13 +220,15 @@
133	220	* - the code form view, where the user can enter the OTP.
134	221	*
135	222	* @since 2.3.8
136	223	*
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.
	224	+ * @param {string} nonce WordPress nonce.
	225	+ * @param {string} email Email address.
	226	+ * @param {string} resource_type Resource Type (form|tag|product).
	227	+ * @param {string} resource_id Resource ID (Kit Form,Tag or Product ID).
	228	+ * @param {number} post_id WordPress Post ID being viewed / accessed.
	229	+ * @param {string} spam_protection_response Spam protection response.
	230	+ * @param {Object} container Element to display the response in.
142	231	*/
143	232	function convertKitRestrictContentSubscriberAuthenticationSendCode(
144	233	nonce,
145	234	email,
		@@ -144,9 +233,11 @@
144	233	nonce,
145	234	email,
146	235	resource_type,
147	236	resource_id,
148		- post_id
	237	+ post_id,
	238	+ spam_protection_response,
	239	+ container
149	240	) {
150	241	fetch(convertkit_restrict_content.subscriber_authentication_url, {
151	242	method: 'POST',
152	243	headers: {
		@@ -157,8 +248,10 @@
157	248	convertkit_email: email,
158	249	convertkit_resource_type: resource_type,
159	250	convertkit_resource_id: resource_id,
160	251	convertkit_post_id: post_id,
	252	+ spam_protection_response,
	253	+ display_heading: convertKitRestrictContentDisplayHeading(container),
161	254	}),
162	255	})
163	256	.then(function (response) {
164	257	if (convertkit_restrict_content.debug) {
		@@ -173,24 +266,18 @@
173	266	}
174	267
175	268	// Output error message if the response contains a code.
176	269	if (typeof result.code !== 'undefined') {
177		- document.querySelector(
178		- '#convertkit-restrict-content-modal-content'
179		- ).innerHTML = result.message;
	270	+ container.innerHTML = result.message;
180	271	} else {
181	272	// Output response, which will be either:
182	273	// - the email form view, with an error message e.g. invalid email,
183	274	// - the code form view, where the user can enter the OTP.
184		- document.querySelector(
185		- '#convertkit-restrict-content-modal-content'
186		- ).innerHTML = result.data;
	275	+ container.innerHTML = result.data;
187	276	}
188	277
189	278	// Hide loading overlay.
190		- document.querySelector(
191		- '#convertkit-restrict-content-modal-loading'
192		- ).style.display = 'none';
	279	+ convertKitRestrictContentLoading(false);
193	280
194	281	// Re-bind OTP listener.
195	282	convertKitRestrictContentOTPField();
196	283	})
		@@ -197,8 +284,12 @@
197	284	.catch(function (error) {
198	285	if (convertkit_restrict_content.debug) {
199	286	console.error(error);
200	287	}
	288	+
	289	+ // Re-enable inputs and hide loading overlay, so the form can be resubmitted.
	290	+ convertKitRestrictContentEnableInputs(container);
	291	+ convertKitRestrictContentLoading(false);
201	292	});
202	293	}
203	294
204	295	/**
		@@ -212,14 +303,16 @@
212	303	* @param {string} nonce WordPress nonce.
213	304	* @param {string} subscriber_code OTP Subscriber Code.
214	305	* @param {string} token Subscriber Token.
215	306	* @param {number} post_id WordPress Post ID being viewed / accessed.
	307	+ * @param {Object} container Element to display the response in.
216	308	*/
217	309	function convertKitRestrictContentSubscriberVerification(
218	310	nonce,
219	311	subscriber_code,
220	312	token,
221		- post_id
	313	+ post_id,
	314	+ container
222	315	) {
223	316	fetch(convertkit_restrict_content.subscriber_verification_url, {
224	317	method: 'POST',
225	318	headers: {
		@@ -243,18 +336,14 @@
243	336	if (convertkit_restrict_content.debug) {
244	337	console.log(result);
245	338	}
246	339
247		- // If the entered code is invalid, show the response in the modal.
	340	+ // If the entered code is invalid, show the response.
248	341	if (!result.success) {
249		- document.querySelector(
250		- '#convertkit-restrict-content-modal-content'
251		- ).innerHTML = result.data;
	342	+ container.innerHTML = result.data;
252	343
253	344	// Hide loading overlay.
254		- document.querySelector(
255		- '#convertkit-restrict-content-modal-loading'
256		- ).style.display = 'none';
	345	+ convertKitRestrictContentLoading(false);
257	346
258	347	// Re-bind OTP listener.
259	348	convertKitRestrictContentOTPField();
260	349	return;
		@@ -266,8 +355,12 @@
266	355	.catch(function (error) {
267	356	if (convertkit_restrict_content.debug) {
268	357	console.error(error);
269	358	}
	359	+
	360	+ // Re-enable inputs and hide loading overlay, so the form can be resubmitted.
	361	+ convertKitRestrictContentEnableInputs(container);
	362	+ convertKitRestrictContentLoading(false);
270	363	});
271	364	}
272	365
273	366	/**
		@@ -294,10 +387,8 @@
294	387	// - submit the form.
295	388	if (otpInput.value.length === 6) {
296	389	otpInput.setSelectionRange(0, 0);
297	390	otpInput.blur();
298		- document
299		- .querySelector('#convertkit-restrict-content-form')
300		- .requestSubmit();
	391	+ otpInput.closest('form').requestSubmit();
301	392	}
302	393	});
303	394	}