mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-17 23:44:39 -05:00
Copied existing public members.js script from core
refs https://github.com/TryGhost/members.js/issues/32 - Copies over existing members.js script from core - Handles members functionality in a theme using data-attributes assinged - Only modification is tto use `siteUrl` value passed to the function for API calls
This commit is contained in:
Rish
Rishabh Garg
parent
bb7200dabf
commit
514e022520
1 changed files with 314 additions and 0 deletions
314
ghost/portal/src/data-attributes.js
Normal file
314
ghost/portal/src/data-attributes.js
Normal file
|
|
@ -0,0 +1,314 @@
|
||||||
|
function handleDataAttributes({siteUrl}) {
|
||||||
|
Array.prototype.forEach.call(document.querySelectorAll('form[data-members-form]'), function (form) {
|
||||||
|
let 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');
|
||||||
|
let input = event.target.querySelector('input[data-members-email]');
|
||||||
|
let email = input.value;
|
||||||
|
let emailType = undefined;
|
||||||
|
let labels = [];
|
||||||
|
|
||||||
|
let labelInputs = event.target.querySelectorAll('input[data-members-label]') || [];
|
||||||
|
for (let i = 0; i < labelInputs.length; ++i) {
|
||||||
|
labels.push(labelInputs[i].value);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (form.dataset.membersForm) {
|
||||||
|
emailType = form.dataset.membersForm;
|
||||||
|
}
|
||||||
|
|
||||||
|
form.classList.add('loading');
|
||||||
|
fetch(`${siteUrl}/members/api/send-magic-link/`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
email: email,
|
||||||
|
emailType: emailType,
|
||||||
|
labels: labels
|
||||||
|
})
|
||||||
|
}).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) {
|
||||||
|
let errorEl = el.querySelector('[data-members-error]');
|
||||||
|
function clickHandler(event) {
|
||||||
|
el.removeEventListener('click', clickHandler);
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
let plan = el.dataset.membersPlan;
|
||||||
|
let successUrl = el.dataset.membersSuccess;
|
||||||
|
let cancelUrl = el.dataset.membersCancel;
|
||||||
|
let checkoutSuccessUrl;
|
||||||
|
let checkoutCancelUrl;
|
||||||
|
|
||||||
|
if (successUrl) {
|
||||||
|
checkoutSuccessUrl = (new URL(successUrl, window.location.href)).href;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (cancelUrl) {
|
||||||
|
checkoutCancelUrl = (new URL(cancelUrl, window.location.href)).href;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (errorEl) {
|
||||||
|
errorEl.innerText = '';
|
||||||
|
}
|
||||||
|
el.classList.add('loading');
|
||||||
|
fetch(`${siteUrl}/members/api/session`, {
|
||||||
|
credentials: 'same-origin'
|
||||||
|
}).then(function (res) {
|
||||||
|
if (!res.ok) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return res.text();
|
||||||
|
}).then(function (identity) {
|
||||||
|
return fetch(`${siteUrl}/members/api/create-stripe-checkout-session/`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
plan: plan,
|
||||||
|
identity: identity,
|
||||||
|
successUrl: checkoutSuccessUrl,
|
||||||
|
cancelUrl: checkoutCancelUrl
|
||||||
|
})
|
||||||
|
}).then(function (res) {
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error('Could not create stripe checkout session');
|
||||||
|
}
|
||||||
|
return res.json();
|
||||||
|
});
|
||||||
|
}).then(function (result) {
|
||||||
|
let stripe = window.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-edit-billing]'), function (el) {
|
||||||
|
let errorEl = el.querySelector('[data-members-error]');
|
||||||
|
let membersSuccess = el.dataset.membersSuccess;
|
||||||
|
let membersCancel = el.dataset.membersCancel;
|
||||||
|
let successUrl;
|
||||||
|
let cancelUrl;
|
||||||
|
|
||||||
|
if (membersSuccess) {
|
||||||
|
successUrl = (new URL(membersSuccess, window.location.href)).href;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (membersCancel) {
|
||||||
|
cancelUrl = (new URL(membersCancel, window.location.href)).href;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clickHandler(event) {
|
||||||
|
el.removeEventListener('click', clickHandler);
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
if (errorEl) {
|
||||||
|
errorEl.innerText = '';
|
||||||
|
}
|
||||||
|
el.classList.add('loading');
|
||||||
|
fetch(`${siteUrl}/members/api/session`, {
|
||||||
|
credentials: 'same-origin'
|
||||||
|
}).then(function (res) {
|
||||||
|
if (!res.ok) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return res.text();
|
||||||
|
}).then(function (identity) {
|
||||||
|
return fetch(`${siteUrl}/members/api/create-stripe-update-session/`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
identity: identity,
|
||||||
|
successUrl: successUrl,
|
||||||
|
cancelUrl: cancelUrl
|
||||||
|
})
|
||||||
|
}).then(function (res) {
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error('Could not create stripe checkout session');
|
||||||
|
}
|
||||||
|
return res.json();
|
||||||
|
});
|
||||||
|
}).then(function (result) {
|
||||||
|
let stripe = window.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(`${siteUrl}/members/api/session`, {
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
|
||||||
|
Array.prototype.forEach.call(document.querySelectorAll('[data-members-cancel-subscription]'), function (el) {
|
||||||
|
let errorEl = el.parentElement.querySelector('[data-members-error]');
|
||||||
|
function clickHandler(event) {
|
||||||
|
el.removeEventListener('click', clickHandler);
|
||||||
|
event.preventDefault();
|
||||||
|
el.classList.remove('error');
|
||||||
|
el.classList.add('loading');
|
||||||
|
|
||||||
|
let subscriptionId = el.dataset.membersCancelSubscription;
|
||||||
|
|
||||||
|
if (errorEl) {
|
||||||
|
errorEl.innerText = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
return fetch(`${siteUrl}/members/api/session`, {
|
||||||
|
credentials: 'same-origin'
|
||||||
|
}).then(function (res) {
|
||||||
|
if (!res.ok) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return res.text();
|
||||||
|
}).then(function (identity) {
|
||||||
|
return fetch(`${siteUrl}/members/api/subscriptions/${subscriptionId}/`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
identity: identity,
|
||||||
|
cancel_at_period_end: true
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}).then(function (res) {
|
||||||
|
if (res.ok) {
|
||||||
|
window.location.reload();
|
||||||
|
} else {
|
||||||
|
el.addEventListener('click', clickHandler);
|
||||||
|
el.classList.remove('loading');
|
||||||
|
el.classList.add('error');
|
||||||
|
|
||||||
|
if (errorEl) {
|
||||||
|
errorEl.innerText = 'There was an error cancelling your subscription, please try again.';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
el.addEventListener('click', clickHandler);
|
||||||
|
});
|
||||||
|
|
||||||
|
Array.prototype.forEach.call(document.querySelectorAll('[data-members-continue-subscription]'), function (el) {
|
||||||
|
let errorEl = el.parentElement.querySelector('[data-members-error]');
|
||||||
|
function clickHandler(event) {
|
||||||
|
el.removeEventListener('click', clickHandler);
|
||||||
|
event.preventDefault();
|
||||||
|
el.classList.remove('error');
|
||||||
|
el.classList.add('loading');
|
||||||
|
|
||||||
|
let subscriptionId = el.dataset.membersContinueSubscription;
|
||||||
|
|
||||||
|
if (errorEl) {
|
||||||
|
errorEl.innerText = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
return fetch(`${siteUrl}/members/api/session`, {
|
||||||
|
credentials: 'same-origin'
|
||||||
|
}).then(function (res) {
|
||||||
|
if (!res.ok) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return res.text();
|
||||||
|
}).then(function (identity) {
|
||||||
|
return fetch(`${siteUrl}/members/api/subscriptions/${subscriptionId}/`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
identity: identity,
|
||||||
|
cancel_at_period_end: false
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}).then(function (res) {
|
||||||
|
if (res.ok) {
|
||||||
|
window.location.reload();
|
||||||
|
} else {
|
||||||
|
el.addEventListener('click', clickHandler);
|
||||||
|
el.classList.remove('loading');
|
||||||
|
el.classList.add('error');
|
||||||
|
|
||||||
|
if (errorEl) {
|
||||||
|
errorEl.innerText = 'There was an error continuing your subscription, please try again.';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
el.addEventListener('click', clickHandler);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = handleDataAttributes;
|
||||||
Loading…
Add table
Reference in a new issue