diff --git a/ghost/sdk/layer2/index.js b/ghost/sdk/layer2/index.js index 535dd59389..d1d36e707c 100644 --- a/ghost/sdk/layer2/index.js +++ b/ghost/sdk/layer2/index.js @@ -1,4 +1,4 @@ -/* global window */ +/* global document window */ var layer1 = require('@tryghost/members-layer1'); module.exports = function layer2(options) { @@ -50,6 +50,10 @@ module.exports = function layer2(options) { return openAuth('signin'); } + function upgrade() { + return openAuth('upgrade'); + } + function getToken({audience}) { return members.getToken({audience}); } @@ -62,6 +66,7 @@ module.exports = function layer2(options) { getToken, signout, signin, + upgrade, resetPassword }); }; diff --git a/ghost/sdk/theme-dropin/src/index.js b/ghost/sdk/theme-dropin/src/index.js index 093c337b6a..0f94f8c913 100644 --- a/ghost/sdk/theme-dropin/src/index.js +++ b/ghost/sdk/theme-dropin/src/index.js @@ -35,19 +35,30 @@ DomReady(function () { } } - const membersContentElements = Array.from(document.querySelectorAll('[data-members]')); // TODO use data-members-content; + const membersContentElements = Array.from(document.querySelectorAll('[data-members-content]')); - var signinBtn = document.querySelector('[data-members-signin]'); - var signinCta = document.querySelector('[data-members-signin-cta]'); - var signoutBtn = document.querySelector('[data-members-signout]'); + const signinBtn = document.querySelector('[data-members-signin]'); + const signinCta = document.querySelector('[data-members-signin-cta]'); + const upgradeCta = document.querySelector('[data-members-upgrade-cta]'); + const signoutBtn = document.querySelector('[data-members-signout]'); + + const showForbidden = document.querySelector('[data-members-show-forbidden]'); + const showUnauthorized = document.querySelector('[data-members-show-unauthorized]'); + + hide(showForbidden); + hide(showUnauthorized); members.on('signedin', function () { show(signoutBtn); + show(upgradeCta); + hide(signinCta); hide(signinBtn); }); members.on('signedout', function () { show(signinBtn); + show(signinCta); + hide(upgradeCta); hide(signoutBtn); }); @@ -63,9 +74,16 @@ DomReady(function () { .then(reload); } + function upgrade(event) { + event.preventDefault(); + members.upgrade() + .then(reload); + } + signoutBtn.addEventListener('click', signout); signinBtn.addEventListener('click', signin); signinCta.addEventListener('click', signin); + upgradeCta.addEventListener('click', upgrade); membersContentElements.forEach(function (element) { const resourceType = element.getAttribute('data-members-resource-type'); @@ -80,11 +98,16 @@ DomReady(function () { const audience = new URL(host).origin; members.getToken({audience}).then((token) => { if (!token) { + show(showUnauthorized); return; } api[resourceType].read({id: resourceId}, {}, token).then(({html}) => { - element.innerHTML = html; + if (html) { + element.innerHTML = html; + } else { + show(showForbidden); + } }).catch((err) => { element.innerHTML = err.message; });