Closes #170

app/dist/scripts/app.js

@@ -59,10 +59,23 @@ document.querySelectorAll("a[href^='#']").forEach(anchor => {
 });
 
 // Newsletter
-document.querySelector("[data-action='subscribe to newsletter']").onclick = () => {
+document.getElementById("emailAddress").addEventListener("keyup", event => {
-  const email = document.getElementById("emailAddress").value;
+  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,

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

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;
   }
 }

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) => {
+  return new Promise((resolve, reject) => request({
-    request({
+    method: "POST",
-      method: "POST",
+    url: `https://api.lbry.io/list/subscribe?email=${encodeURIComponent(email)}&tag=developer`
-      url: `https://api.lbry.io/list/subscribe?email=${email}&tag=developer`
+  }).then(body => {
-    }).then(body => {
+    if (!body || !JSON.parse(body)) {
-      if (!body || !JSON.parse(body)) {
+      logSlackError(
-        logSlackError(
+        "\n" +
-          "\n" +
+        "> *NEWSLETTER ERROR:* ```¯\\_(ツ)_/¯ This should be an unreachable error```" + "\n" +
-          "> *NEWSLETTER ERROR:* ```¯\\_(ツ)_/¯ This should be an unreachable error```" + "\n" +
+        `> _Cause: ${email} interacted with the form_\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 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({
+    body = JSON.parse(body);
-            html: "You have already subscribed!",
+
-            message: "updated html",
+    if (!body.success) {
-            selector: "#emailMessage"
+      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) {