Added email checks

client/app/controllers/subscribe.js

@@ -0,0 +1,71 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import fetch from 'fetch';
+import ENV from 'labs-zap-search/config/environment';
+
+const tlds = [".com", ".gov", ".edu", ".net", ".org"];
+
+export default class SubscribeController extends Controller {
+  lastEmailChecked = "";
+  emailAlreadyExists = false;
+  emailNeedsConfirmation = false;
+  startContinuouslyChecking = false;
+  emailSent = false;
+
+
+  @action
+  async checkExistingEmail(event) {
+    const email = event.target.value;
+    if(email === this.lastEmailChecked) { return; }
+    this.set('lastEmailChecked', email);
+    this.set('startContinuouslyChecking', true);
+
+    try {
+      const response = await fetch(`${ENV.host}/subscribers/email/${email}`);
+      const userData = await response.json();
+
+      if (userData.error) {
+        this.set('emailAlreadyExists', false);
+        this.set('emailNeedsConfirmation', false);
+        this.set('emailSent', false);
+        return;
+      }
+
+      if (userData.message === "User already subscribed.") {
+        this.set('emailAlreadyExists', true);
+        this.set('emailNeedsConfirmation', false);
+      } else if (userData.message === "User is subscribed but must confirm.") {
+        this.set('emailNeedsConfirmation', true);
+        this.set('emailAlreadyExists', false);
+      }
+      return;
+    } catch (error) {
+      // We will receive an error if:
+      // a) the user does not exist in Sendgrid, or 
+      // b) their confirmed field is null.
+      // Either way, we don't need to log to console
+      this.set('emailAlreadyExists', false);
+      this.set('emailNeedsConfirmation', false);
+      this.set('emailSent', false);
+    }
+  }
+
+  @action
+  continuouslyCheckEmail(event) {
+    if((this.startContinuouslyChecking) || (tlds.includes(event.target.value.slice(-4)))) { this.checkExistingEmail(event) }
+  }
+
+  @action
+  sendEmail() {
+    if (this.emailAlreadyExists) {
+      // Run the script to update the email
+      // Endpoint does not yet exist
+      this.set('emailSent', true);
+    } else if (this.emailNeedsConfirmation) {
+      // Run the script to confirm the email
+      // Endpoint does not yet exist
+      this.set('emailSent', true);
+    }
+  }
+
+}

client/app/styles/app.scss

@@ -69,6 +69,7 @@ $completed-color: #a6cee3;
 @import 'modules/_m-search';
 @import 'modules/_m-site-header';
 @import 'modules/_m-statuses';
+@import 'modules/_m-subscribe';
 @import 'modules/_m-subscribed';
 @import 'modules/_m-subscribers-confirm';
 @import 'modules/_m-subscription-form';

client/app/styles/modules/_m-subscribe.scss

@@ -0,0 +1,13 @@
+// --------------------------------------------------
+// Module: Subscribe Page
+// --------------------------------------------------
+
+.email-exists, .email-needs-confirmation {
+  padding-top: 1.5rem;
+  font-weight: 700;
+}
+
+.email-sent {
+  color: $success-color;
+  font-weight: 700;
+}

client/app/templates/components/subscription-form.hbs

@@ -9,7 +9,6 @@
         <ul>
             <li>
                 <div class="update-type-item">
-{{log "isCityWide" isCityWide}}                    
                     <Input @id="city-wide-checkbox" @type="checkbox" @checked={{isCityWide}} {{on "change" this.toggleCitywide}}/>
                     <div class="update-type-label">
                         <label for="city-wide-checkbox">Citywide Updates</label>

client/app/templates/subscribe.hbs

@@ -11,8 +11,17 @@
                         <div class="subscribe-section">
                             <div class="subscribe-input-group">
                             <label class="email-label">Email Address</label>
-                            <Input class="input-group-field" type="text" @value={{this.model.email}}/>
+                            <Input class="input-group-field" type="text" @value={{this.model.email}} onkeyup={{action 'continuouslyCheckEmail'}} onchange={{action 'checkExistingEmail'}} />
                             </div>
+                            {{#if this.emailAlreadyExists}}
+                                <p class="email-exists">This email already is subscribed to ZAP Updates. <a onclick={{action 'sendEmail'}}>Click here to receive an email to modify subscriptions.</a></p>
+                            {{/if}}
+                            {{#if this.emailNeedsConfirmation}}
+                                <p class="email-needs-confirmation">This email address has not confirmed their subscription to ZAP Updates. <a onclick={{action 'sendEmail'}}>Click here to re-send the confirmation email.</a></p>
+                            {{/if}}
+                            {{#if this.emailSent}}
+                                <p class="email-sent">Email sent.</p>
+                            {{/if}}
                         </div>
                     </SubscriptionForm>
                 <div class="subscribe-footer">