Updated how emails are handled

src/app/app.module.ts

@@ -1,3 +1,4 @@
+import {HttpClientModule} from '@angular/common/http';
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 import {ContactFormComponent} from './components/contact-form/contact-form.component';
@@ -25,38 +26,7 @@ import {ConsoleComponent} from './components/console/console.component';
         BrowserModule,
         BrowserAnimationsModule,
         FormsModule,
-        MaterialModule,
+		HttpClientModule,
-    ],
-    bootstrap: [AppComponent]
-})
-export class AppModule { }
-import {BrowserModule} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
-import {ContactFormComponent} from './components/contact-form/contact-form.component';
-import {HomeComponent} from './views/home/home.component';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MaterialModule} from './material.module';
-import {FormsModule} from '@angular/forms';
-import {TypewriterComponent} from './components/typewriter/typewriter.component';
-import {SlideShowComponent} from './components/slideShow/slideShow.component';
-import {AppComponent} from './views/app/app.component';
-import {AppRouting} from './app.routing';
-import {ConsoleComponent} from './components/console/console.component';
-
-@NgModule({
-    declarations: [
-        AppComponent,
-        ConsoleComponent,
-		ContactFormComponent,
-        HomeComponent,
-        SlideShowComponent,
-        TypewriterComponent
-    ],
-    imports: [
-        AppRouting,
-        BrowserModule,
-        BrowserAnimationsModule,
-        FormsModule,
         MaterialModule,
     ],
     bootstrap: [AppComponent]

src/app/components/contact-form/contact-form.component.html

@@ -1,4 +1,6 @@
 <form>
+	<div *ngIf="success" class="alert alert-success">Email sent!</div>
+	<div *ngIf="error" class="alert alert-danger">Email failed to send</div>
 	<div class="form-group">
 		<label for="emailInput">Email</label>
 		<input type="email" class="form-control" id="emailInput" name="email" placeholder="username@example.com" [(ngModel)]="email">

src/app/components/contact-form/contact-form.component.ts

@@ -1,5 +1,5 @@
-import {Component} from '@angular/core';
+import {ChangeDetectorRef, Component} from '@angular/core';
-import {formEncode} from '../../misc/utils';
+import {EmailService} from '../../services/email.service';
 
 @Component({
 	selector: 'contact-form',
@@ -7,26 +7,38 @@ import {formEncode} from '../../misc/utils';
 })
 export class ContactFormComponent {
 	email = '';
+	error = false;
 	loading = false;
 	message = '';
 	subject = '';
+	success = false;
+
+	constructor(private changeRef: ChangeDetectorRef, private emailService: EmailService) { }
 
 	async send() {
+		this.error = false;
+		this.success = false;
 		if(this.loading || !this.email || !this.subject || !this.message) return;
 		this.loading = true;
-		await fetch('https://postmail.invotes.com/send', {
+		this.emailService.send(`ZaksCode: ${this.subject}`, `From: ${this.email}\n\n${this.message}`
-			method: 'POST',
+		).then(() => {
-			mode: 'no-cors',
+			this.email = '';
-			cache: 'no-cache',
+			this.message = '';
-			headers: {
+			this.success = true;
-				'Content-Type': 'application/x-www-form-urlencoded'
+			this.subject = '';
-			},
+		}).catch(err => {
-			body: formEncode({
+			// Postmail seems to always return an error message
-				access_token: 's7uhce84sx6fayy5xlq0nrtx',
+			if(200 <= err.status && err.status < 300) {
-				subject: `ZaksCode: ${this.subject}`,
+				this.email = '';
-				text: `From: ${this.email}\n\n${this.message}`
+				this.message = '';
-			})
+				this.success = true;
-		});
+				this.subject = '';
+			} else {
+				this.error = true;
+			}
+		}).finally(() => {
 			this.loading = false;
+			this.changeRef.detectChanges();
+		});
 	}
 }

src/app/services/email.service.ts

@@ -0,0 +1,25 @@
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {formEncode} from '../misc/utils';
+
+@Injectable({providedIn: 'root'})
+export class EmailService {
+	constructor(private http: HttpClient) { }
+
+	/**
+	 * Send an email to website admin.
+	 *
+	 * @param {string} subject - Email subject line
+	 * @param {string} message - Email body
+	 * @returns {Promise<Object | undefined>} - Response from Postmail API
+	 */
+	send(subject: string, message: string) {
+		return this.http.post('https://postmail.invotes.com/send', formEncode({
+			access_token: 's7uhce84sx6fayy5xlq0nrtx',
+			subject: subject,
+			text: message
+		}), {
+			headers: {'Content-Type': 'application/x-www-form-urlencoded'}
+		}).toPromise();
+	}
+}

src/app/services/quote.service.ts

@@ -16,6 +16,11 @@ export class QuoteService {
 		'Either we are alone in the universe or we are not. both are terrifying'
 	];
 
+	/**
+	 * Return random quote
+	 *
+	 * @returns {string} - Quote
+	 */
 	random() {
 		return this.quotes[Math.round(Math.random() * this.quotes.length)];
 	}