From 1a92fb861980d516dea52b31dc76518426903395 Mon Sep 17 00:00:00 2001 From: Fabien O'Carroll Date: Mon, 9 Sep 2019 12:29:56 +0800 Subject: [PATCH] Added loading class to data-members elements no-issue This is so that developers can confitionally render state based on if the request is currently in progress --- core/server/public/members.js | 7 +++++++ core/server/public/members.min.js | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/core/server/public/members.js b/core/server/public/members.js index 6481b380bd..79944b38cc 100644 --- a/core/server/public/members.js +++ b/core/server/public/members.js @@ -10,6 +10,7 @@ Array.prototype.forEach.call(document.querySelectorAll('form[data-members-form]' return; } + form.classList.add('loading'); fetch('{{admin-url}}/api/canary/members/send-magic-link/', { method: 'POST', headers: { @@ -19,6 +20,7 @@ Array.prototype.forEach.call(document.querySelectorAll('form[data-members-form]' email: email }) }).then(function (res) { + form.classList.remove('loading'); if (res.ok) { form.classList.add('success') } else { @@ -34,6 +36,7 @@ Array.prototype.forEach.call(document.querySelectorAll('[data-members-subscripti var plan = event.target.dataset.membersSubscriptionPlan; + button.classList.add('loading'); fetch('{{blog-url}}/members/ssr', { credentials: 'same-origin' }).then(function (res) { @@ -62,6 +65,10 @@ Array.prototype.forEach.call(document.querySelectorAll('[data-members-subscripti return stripe.redirectToCheckout({ sessionId: result.sessionId }); + }, function (_err) { + console.error(_err); + button.classList.remove('loading'); + button.classList.add('error'); }); }); }); diff --git a/core/server/public/members.min.js b/core/server/public/members.min.js index 88cfb10ea6..7ecf5451f1 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){form.addEventListener("submit",function(event){event.preventDefault(),form.classList.remove("success","invalid","error");var email=event.target.querySelector("input[data-members-email]").value;email.includes("@")?fetch("{{admin-url}}/api/canary/members/send-magic-link/",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({email:email})}).then(function(res){res.ok?form.classList.add("success"):form.classList.add("error")}):form.classList.add("invalid")})}),Array.prototype.forEach.call(document.querySelectorAll("[data-members-subscription]"),function(button){button.addEventListener("click",function(event){event.preventDefault();var plan=event.target.dataset.membersSubscriptionPlan;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){return Stripe(result.publicKey).redirectToCheckout({sessionId:result.sessionId})})})});var magicLinkRegEx=/token=([a-zA-Z0-9_\-]+\.[a-zA-Z0-9_\-]+\.[a-zA-Z0-9_\-]+)/,match=location.search.match(magicLinkRegEx),isMagicLink=!!match,token=match&&match[1];isMagicLink&&fetch("{{blog-url}}/members/ssr",{method:"POST",body:token}).then(function(res){res.ok&&(window.location.search=window.location.search.replace(magicLinkRegEx,""))}); +Array.prototype.forEach.call(document.querySelectorAll("form[data-members-form]"),function(form){form.addEventListener("submit",function(event){event.preventDefault();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{form.classList.add("error")}})})});Array.prototype.forEach.call(document.querySelectorAll("[data-members-subscription]"),function(button){button.addEventListener("click",function(event){event.preventDefault();var plan=event.target.dataset.membersSubscriptionPlan;button.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})},function(_err){console.error(_err);button.classList.remove("loading");button.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,"")}})}