Adding mailing list signup

src/app/_components/mailing-list/mailing-list.component.html

@@ -0,0 +1,35 @@
+<p class="description">
+  <span>
+    The Ingredient Parser API will launch publicly in June 2018. Sign up below if
+    you're interested in using the Ingredient Parser API in your app.
+  </span>
+</p>
+<form ngNoForm action="https://mtlynch.us16.list-manage.com/subscribe/post?u=827c54a25e4f8abbb83d878c4&amp;id=1d542f814b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
+  <div id="mc_embed_signup_scroll">
+    <mat-form-field class="input-full-width">
+      <input matInput placeholder="Email Address" type="email" value="" name="EMAIL" id="mce-EMAIL" required>
+    </mat-form-field>
+
+    <mat-form-field class="input-full-width">
+      <input matInput placeholder="First name" type="text" value="" name="FNAME" class="" id="mce-FNAME">
+    </mat-form-field>
+
+    <mat-form-field class="input-full-width">
+      <input matInput placeholder="Last name" type="text" value="" name="LNAME" class="" id="mce-LNAME">
+    </mat-form-field>
+
+    <mat-form-field class="input-full-width">
+      <input matInput placeholder="Company" type="text" value="" name="COMPANY" class="" id="mce-COMPANY">
+    </mat-form-field>
+
+    <div id="mce-responses" class="clear">
+      <div class="response" id="mce-error-response" style="display:none"></div>
+      <div class="response" id="mce-success-response" style="display:none"></div>
+    </div>
+
+    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_827c54a25e4f8abbb83d878c4_1d542f814b" tabindex="-1" value=""></div>
+    <div class="clear">
+      <button mat-raised-button type="submit" color="primary" name="subscribe" id="mc-embedded-subscribe">Sign Up</button>
+    </div>
+  </div>
+</form>

src/app/_components/mailing-list/mailing-list.component.scss

@@ -0,0 +1,12 @@
+#mc_embed_signup_scroll {
+  display: flex;
+  flex-direction: column;
+}
+
+p {
+  margin-bottom: 20px;
+}
+
+.description {
+  font-size: 12pt;
+}

src/app/_components/mailing-list/mailing-list.component.spec.ts

@@ -0,0 +1,27 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+import { MailingListComponent } from './mailing-list.component';
+
+describe('MailingListComponent', () => {
+  let component: MailingListComponent;
+  let fixture: ComponentFixture<MailingListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [MailingListComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MailingListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/_components/mailing-list/mailing-list.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-mailing-list',
+  templateUrl: './mailing-list.component.html',
+  styleUrls: ['./mailing-list.component.scss'],
+})
+export class MailingListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+}

src/app/app.module.ts

@@ -5,6 +5,7 @@ import { HttpClientModule } from '@angular/common/http';
 import {
   MatButtonModule,
   MatCardModule,
+  MatExpansionModule,
   MatFormFieldModule,
   MatInputModule,
   MatListModule,
@@ -20,11 +21,13 @@ import { ParserService } from './_services/parser.service';
 
 // Public pages
 import { HomePageComponent } from './public/home-page/home-page.component';
+import { MailingListComponent } from './_components/mailing-list/mailing-list.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     HomePageComponent,
+    MailingListComponent,
   ],
   imports: [
     BrowserAnimationsModule,
@@ -33,6 +36,7 @@ import { HomePageComponent } from './public/home-page/home-page.component';
     HttpClientModule,
     MatButtonModule,
     MatCardModule,
+    MatExpansionModule,
     MatFormFieldModule,
     MatInputModule,
     MatListModule,

src/app/public/home-page/home-page.component.html

@@ -36,4 +36,14 @@
 </div>
 <div *ngIf="requestsRemaining !== null">
   <span class="fieldName">Requests remaining</span>: {{ requestsRemaining }}
-</div>
+</div>
+<mat-expansion-panel>
+  <mat-expansion-panel-header>
+    <mat-panel-title>
+      Sign up
+    </mat-panel-title>
+  </mat-expansion-panel-header>
+
+  <app-mailing-list></app-mailing-list>
+
+</mat-expansion-panel>

src/app/public/home-page/home-page.component.scss

@@ -49,4 +49,11 @@ mat-card {
   @include respond-to('medium') {
     margin-right: 2px;
   }
+}
+
+mat-expansion-panel {
+  margin-top: 50px;
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
 }