From 38567045adb53716e456b2a13a2f7f48c00cb0a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?= =?UTF-8?q?=E3=83=96?= Date: Wed, 10 Oct 2018 14:04:16 -0500 Subject: [PATCH] Closes #170 --- app/dist/scripts/app.js | 19 ++++- app/dist/scripts/sockets.js | 10 ++- app/sass/partials/_email-subscribe.scss | 15 +++- app/sockets.js | 106 ++++++++++++------------ 4 files changed, 90 insertions(+), 60 deletions(-) diff --git a/app/dist/scripts/app.js b/app/dist/scripts/app.js index 20c2255..2414df2 100755 --- a/app/dist/scripts/app.js +++ b/app/dist/scripts/app.js @@ -59,10 +59,23 @@ document.querySelectorAll("a[href^='#']").forEach(anchor => { }); // Newsletter -document.querySelector("[data-action='subscribe to newsletter']").onclick = () => { - const email = document.getElementById("emailAddress").value; +document.getElementById("emailAddress").addEventListener("keyup", event => { + const key = event.keyCode ? event.keyCode : event.which; - if (!validateEmail(email)) return; + if (key === 13) + document.querySelector("[data-action='subscribe to newsletter']").click(); +}); + +document.querySelector("[data-action='subscribe to newsletter']").onclick = () => { + const email = document.getElementById("emailAddress").value.trim(); + + if (!validateEmail(email)) { + document.getElementById("emailMessage").classList.add("error"); + document.getElementById("emailMessage").innerHTML = "Your email address is invalid"; + return; + } + + document.getElementById("emailMessage").classList.remove("error"); send(JSON.stringify({ email: email, diff --git a/app/dist/scripts/sockets.js b/app/dist/scripts/sockets.js index 0b46aff..9b83f6b 100644 --- a/app/dist/scripts/sockets.js +++ b/app/dist/scripts/sockets.js @@ -50,8 +50,14 @@ function initializeWebSocketConnection() { case data.message === "updated html": document.querySelector(data.selector).innerHTML = data.html; - document.getElementById("emailAddress").value = ""; - document.getElementById("emailMessage").innerHTML = ""; + + if (data.class) + document.querySelector(data.selector).classList.add(data.class); + + if (data.selector !== "#emailMessage") { + document.getElementById("emailAddress").value = ""; + document.getElementById("emailMessage").innerHTML = ""; + } if (data.example === 2) { detectLanguageAndUpdate(); // eslint-disable-line diff --git a/app/sass/partials/_email-subscribe.scss b/app/sass/partials/_email-subscribe.scss index e5aaecd..d10f48d 100644 --- a/app/sass/partials/_email-subscribe.scss +++ b/app/sass/partials/_email-subscribe.scss @@ -117,12 +117,21 @@ .newsletter-cta__message { @include clearfix; - background-color: $teal; color: $white; - font-size: 1rem; + cursor: default; + display: inline-block; + font-size: 0.8rem; text-align: center; &:not(:empty) { - padding: 1rem; + margin: 0.5rem auto 0; padding: 0.25rem 1rem; + } + + &:not(.error) { + background-color: $teal; + } + + &.error { + background-color: $red; } } diff --git a/app/sockets.js b/app/sockets.js index c27d3f5..83b9d46 100644 --- a/app/sockets.js +++ b/app/sockets.js @@ -327,68 +327,70 @@ function newsletterSubscribe(data, socket) { const email = data.email; if (!validateEmail(email)) return socket.send(JSON.stringify({ - html: "Your email is invalid", + class: "error", + html: "Your email address is invalid", message: "updated html", selector: "#emailMessage" })); - return new Promise((resolve, reject) => { - request({ - method: "POST", - url: `https://api.lbry.io/list/subscribe?email=${email}&tag=developer` - }).then(body => { - if (!body || !JSON.parse(body)) { - logSlackError( - "\n" + - "> *NEWSLETTER ERROR:* ```¯\\_(ツ)_/¯ This should be an unreachable error```" + "\n" + - `> _Cause: ${email} interacted with the form_\n` - ); - - return resolve(socket.send(JSON.stringify({ - html: "Something is terribly wrong", - message: "updated html", - selector: "#emailMessage" - }))); - } - - body = JSON.parse(body); - - if (!body.success) { - logSlackError( - "\n" + - "> *NEWSLETTER ERROR:* ```" + JSON.parse(JSON.stringify(body.error)) + "```" + "\n" + - `> _Cause: ${email} interacted with the form_\n` - ); - - return reject(socket.send(JSON.stringify({ - html: body.error, - message: "updated html", - selector: "#emailMessage" - }))); - } + return new Promise((resolve, reject) => request({ + method: "POST", + url: `https://api.lbry.io/list/subscribe?email=${encodeURIComponent(email)}&tag=developer` + }).then(body => { + if (!body || !JSON.parse(body)) { + logSlackError( + "\n" + + "> *NEWSLETTER ERROR:* ```¯\\_(ツ)_/¯ This should be an unreachable error```" + "\n" + + `> _Cause: ${email} interacted with the form_\n` + ); return resolve(socket.send(JSON.stringify({ - html: "Thank you! Please confirm subscription in your inbox.", + class: "error", + html: "Something is terribly wrong", message: "updated html", selector: "#emailMessage" }))); - }) - .catch(welp => { - if (welp.statusCode === 409) { - logSlackError( - "\n" + - "> *NEWSLETTER ERROR:* ```" + JSON.parse(JSON.stringify(welp.error)) + "```" + "\n" + - `> _Cause: ${email} interacted with the form_\n` - ); + } - return resolve(socket.send(JSON.stringify({ - html: "You have already subscribed!", - message: "updated html", - selector: "#emailMessage" - }))); - } - }); - }); + body = JSON.parse(body); + + if (!body.success) { + logSlackError( + "\n" + + "> *NEWSLETTER ERROR:* ```" + JSON.parse(JSON.stringify(body.error)) + "```" + "\n" + + `> _Cause: ${email} interacted with the form_\n` + ); + + return reject(socket.send(JSON.stringify({ + class: "error", + html: body.error, + message: "updated html", + selector: "#emailMessage" + }))); + } + + return resolve(socket.send(JSON.stringify({ + html: "Thank you! Please confirm subscription in your inbox.", + message: "updated html", + selector: "#emailMessage" + }))); + }) + .catch(welp => { + if (welp.statusCode === 409) { + logSlackError( + "\n" + + "> *NEWSLETTER ERROR:* ```" + JSON.parse(JSON.stringify(welp.error)) + "```" + "\n" + + `> _Cause: ${email} interacted with the form_\n` + ); + + return resolve(socket.send(JSON.stringify({ + class: "error", + html: "You have already subscribed!", + message: "updated html", + selector: "#emailMessage" + }))); + } + })); } function validateEmail(email) {