From 00604bf5222140ccb3d98c5092f92d24c82b4da0 Mon Sep 17 00:00:00 2001 From: Fabien O'Carroll Date: Tue, 10 Sep 2019 15:48:55 +0800 Subject: [PATCH] Ensured events are not fired whilst being handled no-issue This _should_ stop double firing of API requests --- core/server/public/members.js | 22 ++++++++++++++++------ core/server/public/members.min.js | 2 +- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/core/server/public/members.js b/core/server/public/members.js index f47a27a74d..484bc9eeb4 100644 --- a/core/server/public/members.js +++ b/core/server/public/members.js @@ -1,6 +1,7 @@ Array.prototype.forEach.call(document.querySelectorAll('form[data-members-form]'), function (form){ var errorEl = form.querySelector('[data-members-error]'); - form.addEventListener('submit', function (event) { + function submitHandler(event) { + form.removeEventListener('submit', submitHandler); event.preventDefault(); if (errorEl) { errorEl.innerText = ''; @@ -11,6 +12,7 @@ Array.prototype.forEach.call(document.querySelectorAll('form[data-members-form]' if (!email.includes('@')) { form.classList.add('invalid') + form.addEventListener('submit', submitHandler); return; } @@ -24,6 +26,7 @@ Array.prototype.forEach.call(document.querySelectorAll('form[data-members-form]' email: email }) }).then(function (res) { + form.addEventListener('submit', submitHandler); form.classList.remove('loading'); if (res.ok) { form.classList.add('success') @@ -34,12 +37,14 @@ Array.prototype.forEach.call(document.querySelectorAll('form[data-members-form]' form.classList.add('error') } }); - }); + } + form.addEventListener('submit', submitHandler); }); Array.prototype.forEach.call(document.querySelectorAll('[data-members-plan]'), function (el) { var errorEl = el.querySelector('[data-members-error]'); - el.addEventListener('click', function (event) { + function clickHandler(event) { + el.removeEventListener('click', clickHandler); event.preventDefault(); var plan = el.dataset.membersPlan; @@ -82,17 +87,20 @@ Array.prototype.forEach.call(document.querySelectorAll('[data-members-plan]'), f } }).catch(function (err) { console.error(err); + el.addEventListener('click', clickHandler); el.classList.remove('loading'); if (errorEl) { errorEl.innerText = err.message; } el.classList.add('error'); }); - }); + } + el.addEventListener('click', clickHandler); }); Array.prototype.forEach.call(document.querySelectorAll('[data-members-signout]'), function (el) { - el.addEventListener('click', function (event) { + function clickHandler(event) { + el.removeEventListener('click', clickHandler); event.preventDefault(); el.classList.remove('error'); el.classList.add('loading'); @@ -102,11 +110,13 @@ Array.prototype.forEach.call(document.querySelectorAll('[data-members-signout]') if (res.ok) { window.location.reload(); } else { + el.addEventListener('click', clickHandler); el.classList.remove('loading'); el.classList.add('error'); } }); - }); + } + el.addEventListener('click', clickHandler); }); var magicLinkRegEx = /token=([a-zA-Z0-9_\-]+\.[a-zA-Z0-9_\-]+\.[a-zA-Z0-9_\-]+)/; diff --git a/core/server/public/members.min.js b/core/server/public/members.min.js index 6cad43cf8f..beb17e89b3 100644 --- a/core/server/public/members.min.js +++ b/core/server/public/members.min.js @@ -1 +1 @@ -Array.prototype.forEach.call(document.querySelectorAll("form[data-members-form]"),function(form){var errorEl=form.querySelector("[data-members-error]");form.addEventListener("submit",function(event){event.preventDefault();if(errorEl){errorEl.innerText=""}form.classList.remove("success","invalid","error");var input=event.target.querySelector("input[data-members-email]");var email=input.value;if(!email.includes("@")){form.classList.add("invalid");return}form.classList.add("loading");fetch("{{admin-url}}/api/canary/members/send-magic-link/",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({email:email})}).then(function(res){form.classList.remove("loading");if(res.ok){form.classList.add("success")}else{if(errorEl){errorEl.innerText="There was an error sending the email, please try again"}form.classList.add("error")}})})});Array.prototype.forEach.call(document.querySelectorAll("[data-members-plan]"),function(el){var errorEl=el.querySelector("[data-members-error]");el.addEventListener("click",function(event){event.preventDefault();var plan=el.dataset.membersPlan;if(errorEl){errorEl.innerText=""}el.classList.add("loading");fetch("{{blog-url}}/members/ssr",{credentials:"same-origin"}).then(function(res){if(!res.ok){throw new Error("Could not get identity token")}return res.text()}).then(function(identity){return fetch("{{admin-url}}/api/canary/members/create-stripe-checkout-session/",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({plan:plan,identity:identity})}).then(function(res){if(!res.ok){throw new Error("Could not create stripe checkout session")}return res.json()})}).then(function(result){var stripe=Stripe(result.publicKey);return stripe.redirectToCheckout({sessionId:result.sessionId})}).then(function(result){if(result.error){throw new Error(result.error.message)}}).catch(function(err){console.error(err);el.classList.remove("loading");if(errorEl){errorEl.innerText=err.message}el.classList.add("error")})})});Array.prototype.forEach.call(document.querySelectorAll("[data-members-signout]"),function(el){el.addEventListener("click",function(event){event.preventDefault();el.classList.remove("error");el.classList.add("loading");fetch("{{blog-url}}/members/ssr",{method:"DELETE"}).then(function(res){if(res.ok){window.location.reload()}else{el.classList.remove("loading");el.classList.add("error")}})})});var magicLinkRegEx=/token=([a-zA-Z0-9_\-]+\.[a-zA-Z0-9_\-]+\.[a-zA-Z0-9_\-]+)/;var match=location.search.match(magicLinkRegEx);var isMagicLink=!!match;var token=match&&match[1];if(isMagicLink){fetch("{{blog-url}}/members/ssr",{method:"POST",body:token}).then(function(res){if(res.ok){window.location.search=window.location.search.replace(magicLinkRegEx,"")}})} +Array.prototype.forEach.call(document.querySelectorAll("form[data-members-form]"),function(form){var errorEl=form.querySelector("[data-members-error]");function submitHandler(event){form.removeEventListener("submit",submitHandler);event.preventDefault();if(errorEl){errorEl.innerText=""}form.classList.remove("success","invalid","error");var input=event.target.querySelector("input[data-members-email]");var email=input.value;if(!email.includes("@")){form.classList.add("invalid");form.addEventListener("submit",submitHandler);return}form.classList.add("loading");fetch("{{admin-url}}/api/canary/members/send-magic-link/",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({email:email})}).then(function(res){form.addEventListener("submit",submitHandler);form.classList.remove("loading");if(res.ok){form.classList.add("success")}else{if(errorEl){errorEl.innerText="There was an error sending the email, please try again"}form.classList.add("error")}})}form.addEventListener("submit",submitHandler)});Array.prototype.forEach.call(document.querySelectorAll("[data-members-plan]"),function(el){var errorEl=el.querySelector("[data-members-error]");function clickHandler(event){el.removeEventListener("click",clickHandler);event.preventDefault();var plan=el.dataset.membersPlan;if(errorEl){errorEl.innerText=""}el.classList.add("loading");fetch("{{blog-url}}/members/ssr",{credentials:"same-origin"}).then(function(res){if(!res.ok){throw new Error("Could not get identity token")}return res.text()}).then(function(identity){return fetch("{{admin-url}}/api/canary/members/create-stripe-checkout-session/",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({plan:plan,identity:identity})}).then(function(res){if(!res.ok){throw new Error("Could not create stripe checkout session")}return res.json()})}).then(function(result){var stripe=Stripe(result.publicKey);return stripe.redirectToCheckout({sessionId:result.sessionId})}).then(function(result){if(result.error){throw new Error(result.error.message)}}).catch(function(err){console.error(err);el.addEventListener("click",clickHandler);el.classList.remove("loading");if(errorEl){errorEl.innerText=err.message}el.classList.add("error")})}el.addEventListener("click",clickHandler)});Array.prototype.forEach.call(document.querySelectorAll("[data-members-signout]"),function(el){function clickHandler(event){el.removeEventListener("click",clickHandler);event.preventDefault();el.classList.remove("error");el.classList.add("loading");fetch("{{blog-url}}/members/ssr",{method:"DELETE"}).then(function(res){if(res.ok){window.location.reload()}else{el.addEventListener("click",clickHandler);el.classList.remove("loading");el.classList.add("error")}})}el.addEventListener("click",clickHandler)});var magicLinkRegEx=/token=([a-zA-Z0-9_\-]+\.[a-zA-Z0-9_\-]+\.[a-zA-Z0-9_\-]+)/;var match=location.search.match(magicLinkRegEx);var isMagicLink=!!match;var token=match&&match[1];if(isMagicLink){fetch("{{blog-url}}/members/ssr",{method:"POST",body:token}).then(function(res){if(res.ok){window.location.search=window.location.search.replace(magicLinkRegEx,"")}})}