← All changes | resources/frontend/js/convertkit.js +121 -20 3.4.3 → 3.4.6 View file →

		@@ -67,8 +67,35 @@
67	67	const event = new CustomEvent(eventName, { detail });
68	68	document.dispatchEvent(event);
69	69	}
70	70
	71	+/**
	72	+ * Holds the most recently clicked reCAPTCHA submit button, so the reCAPTCHA
	73	+ * callback submits that button's form when a page has multiple forms.
	74	+ *
	75	+ * @since 3.4.6
	76	+ */
	77	+let convertKitRecaptchaSubmitButton = null;
	78	+
	79	+// Store the clicked reCAPTCHA submit button. This runs in the capture phase,
	80	+// before reCAPTCHA's own click handler on the button.
	81	+document.addEventListener(
	82	+ 'click',
	83	+ function (e) {
	84	+ if (!(e.target instanceof Element)) {
	85	+ return;
	86	+ }
	87	+
	88	+ const button = e.target.closest(
	89	+ '[type="submit"][data-callback="convertKitRecaptchaFormSubmit"]'
	90	+ );
	91	+ if (button) {
	92	+ convertKitRecaptchaSubmitButton = button;
	93	+ }
	94	+ },
	95	+ true
	96	+);
	97	+
71	98	/* eslint-disable no-unused-vars */
72	99	/**
73	100	* Handles form submissions when reCAPTCHA is enabled.
74	101	*
		@@ -74,12 +101,14 @@
74	101	*
75	102	* @param {string} token reCAPTCHA token.
76	103	*/
77	104	function convertKitRecaptchaFormSubmit(token) {
78		- // Find submit button with the data-callback attribute.
79		- const submitButton = document.querySelector(
80		- '[type="submit"][data-callback="convertKitRecaptchaFormSubmit"]'
81		- );
	105	+ // Use the clicked submit button, falling back to the first reCAPTCHA submit button on the page.
	106	+ const submitButton =
	107	+ convertKitRecaptchaSubmitButton ||
	108	+ document.querySelector(
	109	+ '[type="submit"][data-callback="convertKitRecaptchaFormSubmit"]'
	110	+ );
82	111
83	112	// Get the parent form of the submit button.
84	113	const form = submitButton.closest('form');
85	114
		@@ -92,36 +121,108 @@
92	121	// resulting in the function not being available globally.
93	122	window.convertKitRecaptchaFormSubmit = convertKitRecaptchaFormSubmit;
94	123
95	124	/**
96		- * Handles form submissions when Cloudflare Turnstile is enabled.
	125	+ * Holds the form and submit button awaiting a Cloudflare Turnstile token.
97	126	*
98		- * Turnstile auto-populates a hidden `cf-turnstile-response` input inside the
99		- * enclosing form once the challenge is solved, so we just need to submit the
100		- * containing form when the callback fires.
	127	+ * @since 3.4.6
	128	+ */
	129	+let convertKitTurnstileForm = null;
	130	+let convertKitTurnstileSubmitter = null;
	131	+
	132	+// Generate a Cloudflare Turnstile token when a form is submitted, before other submit listeners run.
	133	+document.addEventListener(
	134	+ 'submit',
	135	+ function (e) {
	136	+ const form = e.target;
	137	+ if (!(form instanceof HTMLFormElement)) {
	138	+ return;
	139	+ }
	140	+
	141	+ // Bail if the form doesn't contain a Turnstile widget.
	142	+ const widget = form.querySelector(
	143	+ '.cf-turnstile[data-callback="convertKitTurnstileFormSubmit"]'
	144	+ );
	145	+ if (!widget) {
	146	+ return;
	147	+ }
	148	+
	149	+ // Permit the submission if the form has a token, resetting the widget as each token can only be used once.
	150	+ const response = form.querySelector('[name="cf-turnstile-response"]');
	151	+ if (response !== null && response.value !== '') {
	152	+ setTimeout(function () {
	153	+ convertKitTurnstileReset(widget);
	154	+ }, 0);
	155	+ return;
	156	+ }
	157	+
	158	+ // Permit the submission if the Turnstile script isn't loaded, so the server returns an error.
	159	+ if (typeof window.turnstile === 'undefined') {
	160	+ return;
	161	+ }
	162	+
	163	+ // Prevent the submission until a token is generated.
	164	+ e.preventDefault();
	165	+ e.stopImmediatePropagation();
	166	+
	167	+ // Store the form and submit button, so the callback submits this form.
	168	+ convertKitTurnstileForm = form;
	169	+ convertKitTurnstileSubmitter = e.submitter || null;
	170	+
	171	+ // Render the widget if it was inserted after the page loaded e.g. following a failed Member Content login.
	172	+ if (response === null) {
	173	+ window.turnstile.render(widget);
	174	+ }
	175	+
	176	+ // Generate a token.
	177	+ window.turnstile.execute(widget);
	178	+ },
	179	+ true
	180	+);
	181	+
	182	+/**
	183	+ * Resets the given Cloudflare Turnstile widget, so a new token is generated on the
	184	+ * next submission.
101	185	*
102		- * @param {string} token Turnstile response token.
	186	+ * @since 3.4.6
	187	+ *
	188	+ * @param {Element} widget Turnstile widget.
103	189	*/
104		-function convertKitTurnstileFormSubmit(token) {
105		- // Find the Turnstile widget div with the data-callback attribute.
106		- const widget = document.querySelector(
107		- '.cf-turnstile[data-callback="convertKitTurnstileFormSubmit"]'
108		- );
109		-
110		- if (!widget) {
	190	+function convertKitTurnstileReset(widget) {
	191	+ if (typeof window.turnstile === 'undefined' || !widget.isConnected) {
111	192	return;
112	193	}
113	194
114		- // Get the parent form of the widget.
115		- const form = widget.closest('form');
	195	+ window.turnstile.reset(widget);
	196	+}
116	197
117		- if (!form) {
	198	+/**
	199	+ * Submits the form awaiting a Cloudflare Turnstile token, once Turnstile has
	200	+ * generated the token.
	201	+ *
	202	+ * Turnstile populates a hidden `cf-turnstile-response` input inside the form,
	203	+ * which is included when the form is submitted.
	204	+ *
	205	+ * @param {string} token Turnstile response token.
	206	+ */
	207	+function convertKitTurnstileFormSubmit(token) {
	208	+ // Bail if no form is awaiting a token.
	209	+ if (convertKitTurnstileForm === null) {
118	210	return;
119	211	}
120	212
	213	+ const form = convertKitTurnstileForm;
	214	+ const submitter = convertKitTurnstileSubmitter;
	215	+ convertKitTurnstileForm = null;
	216	+ convertKitTurnstileSubmitter = null;
	217	+
121	218	// Submit the form, using requestSubmit() so any submit event listeners are honored
122	219	// e.g. the Member Content login form, which submits using AJAX.
123		- form.requestSubmit();
	220	+ if (submitter !== null && submitter.form === form) {
	221	+ form.requestSubmit(submitter);
	222	+ } else {
	223	+ form.requestSubmit();
	224	+ }
124	225	}
125	226
126	227	// Scope the function to the window object as webpack will wrap everything in a closure,
127	228	// resulting in the function not being available globally.