diff --git a/website/src/_includes/mc-submit.js b/website/src/_includes/mc-submit.js new file mode 100644 index 0000000000..9ccd10fe6f --- /dev/null +++ b/website/src/_includes/mc-submit.js @@ -0,0 +1,81 @@ +(function () { + var LANDINGS = [ + { path: '/subscribe/thankyou', status: 'subscribed' }, + { path: '/subscribe/confirmed', status: 'confirmed' } + ]; + var MESSAGES = { + 'mc:subscribed': 'subscribed', + 'mc:confirmed': 'confirmed', + 'mc:failed': 'failed' + }; + var TIMEOUT = 12000; + var REDIRECT_GRACE = 5000; + + function init() { + var forms = document.querySelectorAll('form[action*="list-manage.com"]'); + if (!forms.length) return; + + var frame = document.createElement('iframe'); + frame.name = 'mc-target'; + frame.title = 'Subscription result'; + frame.className = 'mc-frame'; + (document.querySelector('.mc-frame-host') || document.body).appendChild(frame); + + var pending = false; + var timer = null; + + function done(status) { + if (!pending) return; + pending = false; + clearTimeout(timer); + document.dispatchEvent(new CustomEvent('mc:result', { + detail: { ok: status !== 'failed', status: status } + })); + } + + function landedStatus() { + var path; + try { + path = frame.contentWindow.location.pathname; + } catch (e) { + return null; + } + for (var i = 0; i < LANDINGS.length; i++) { + if (path.indexOf(LANDINGS[i].path) === 0) return LANDINGS[i].status; + } + return null; + } + + window.addEventListener('message', function (e) { + if (!pending || e.source !== frame.contentWindow) return; + var status = MESSAGES[e.data]; + if (status) done(status); + }); + + frame.addEventListener('load', function () { + if (!pending) return; + var status = landedStatus(); + if (status) { + done(status); + return; + } + clearTimeout(timer); + timer = setTimeout(function () { done('failed'); }, REDIRECT_GRACE); + }); + + forms.forEach(function (form) { + form.target = 'mc-target'; + form.addEventListener('submit', function () { + pending = true; + clearTimeout(timer); + timer = setTimeout(function () { done('failed'); }, TIMEOUT); + }); + }); + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } +})(); diff --git a/website/src/css/livestream.css b/website/src/css/livestream.css index cc8021127d..9928664c99 100644 --- a/website/src/css/livestream.css +++ b/website/src/css/livestream.css @@ -281,6 +281,7 @@ main .section-bg { .register-card input[type="submit"] { height: 52px; + min-width: 164px; padding: 0 34px; border: none; border-radius: 9999px; @@ -297,6 +298,16 @@ main .section-bg { color: #000000; } +.register-card .register-note { + margin-top: 10px; + font-size: 16px; + color: #6b7478; +} + +.dark .register-card .register-note { + color: #9fb2c9; +} + .register-card .channel-link { display: inline-flex; align-items: center; @@ -344,3 +355,34 @@ main .section-bg { .dark .register-card .close-register svg { fill: #ffffff; } + +.mc-frame { + position: absolute; + left: -5000px; + width: 0; + height: 0; + border: 0; +} + +.mc-frame-card { + max-width: 640px; + padding: 44px 0 0; + overflow: hidden; + background: #ffffff; +} + +.dark .mc-frame-card { + background: #ffffff; +} + +.mc-frame-card .close-register svg, +.dark .mc-frame-card .close-register svg { + fill: #023789; +} + +#subscribe-failed.open .mc-frame { + position: static; + display: block; + width: 100%; + height: min(520px, calc(100svh - 140px)); +} diff --git a/website/src/js/livestream.js b/website/src/js/livestream.js index cc236ee221..a0375f722f 100644 --- a/website/src/js/livestream.js +++ b/website/src/js/livestream.js @@ -79,7 +79,14 @@ function setupRegisterOverlay() { } openBtn.addEventListener('click', openOverlay); - form.addEventListener('submit', closeOverlay); + form.addEventListener('submit', () => { + const submit = form.querySelector('[type="submit"]'); + if (!submit) return; + setTimeout(() => { + submit.disabled = true; + submit.value = 'Submitting...'; + }, 0); + }); overlay.addEventListener('click', (e) => { if (e.target === overlay || e.target.closest('.close-register')) closeOverlay(); }); diff --git a/website/src/livestream.html b/website/src/livestream.html index ee5aee6855..262a2cf4af 100644 --- a/website/src/livestream.html +++ b/website/src/livestream.html @@ -106,6 +106,42 @@ templateEngineOverride: njk Or join our SimpleX Crowdfunding News channel +

We use Mailchimp to deliver updates via email

+ + + + + +
+ +
+ +
+ +
+ +
+ + + +