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 = () => {
-  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,

app/dist/scripts/sockets.js

@@ -50,8 +50,14 @@ function initializeWebSocketConnection() {
 
       case data.message === "updated html":
         document.querySelector(data.selector).innerHTML = data.html;
+
+        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,15 +327,15 @@ 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({
+  return new Promise((resolve, reject) => request({
     method: "POST",
-      url: `https://api.lbry.io/list/subscribe?email=${email}&tag=developer`
+    url: `https://api.lbry.io/list/subscribe?email=${encodeURIComponent(email)}&tag=developer`
   }).then(body => {
     if (!body || !JSON.parse(body)) {
       logSlackError(
@@ -345,6 +345,7 @@ function newsletterSubscribe(data, socket) {
       );
 
       return resolve(socket.send(JSON.stringify({
+        class: "error",
         html: "Something is terribly wrong",
         message: "updated html",
         selector: "#emailMessage"
@@ -361,6 +362,7 @@ function newsletterSubscribe(data, socket) {
       );
 
       return reject(socket.send(JSON.stringify({
+        class: "error",
         html: body.error,
         message: "updated html",
         selector: "#emailMessage"
@@ -382,13 +384,13 @@ function newsletterSubscribe(data, socket) {
         );
 
         return resolve(socket.send(JSON.stringify({
+          class: "error",
           html: "You have already subscribed!",
           message: "updated html",
           selector: "#emailMessage"
         })));
       }
-      });
-  });
+    }));
 }
 
 function validateEmail(email) {