From ec27c881b1448e43766114f8a0a37b8a0a751312 Mon Sep 17 00:00:00 2001
From: ztimson <zaktimson@gmail.com>
Date: Tue, 3 May 2022 19:37:01 -0400
Subject: [PATCH] Updated how emails are handled

---
 src/app/app.module.ts                         | 34 +--------------
 .../contact-form/contact-form.component.html  |  2 +
 .../contact-form/contact-form.component.ts    | 42 ++++++++++++-------
 src/app/services/email.service.ts             | 25 +++++++++++
 src/app/services/quote.service.ts             |  5 +++
 5 files changed, 61 insertions(+), 47 deletions(-)
 create mode 100644 src/app/services/email.service.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 72d17a2..71e2024 100644
--- a/src/app/app.module.ts
+++ b/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,
-    ],
-    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,
+		HttpClientModule,
         MaterialModule,
     ],
     bootstrap: [AppComponent]
diff --git a/src/app/components/contact-form/contact-form.component.html b/src/app/components/contact-form/contact-form.component.html
index 9fe2471..0fa3f59 100644
--- a/src/app/components/contact-form/contact-form.component.html
+++ b/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">
diff --git a/src/app/components/contact-form/contact-form.component.ts b/src/app/components/contact-form/contact-form.component.ts
index 5125411..65a876f 100644
--- a/src/app/components/contact-form/contact-form.component.ts
+++ b/src/app/components/contact-form/contact-form.component.ts
@@ -1,5 +1,5 @@
-import {Component} from '@angular/core';
-import {formEncode} from '../../misc/utils';
+import {ChangeDetectorRef, Component} from '@angular/core';
+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', {
-			method: 'POST',
-			mode: 'no-cors',
-			cache: 'no-cache',
-			headers: {
-				'Content-Type': 'application/x-www-form-urlencoded'
-			},
-			body: formEncode({
-				access_token: 's7uhce84sx6fayy5xlq0nrtx',
-				subject: `ZaksCode: ${this.subject}`,
-				text: `From: ${this.email}\n\n${this.message}`
-			})
+		this.emailService.send(`ZaksCode: ${this.subject}`, `From: ${this.email}\n\n${this.message}`
+		).then(() => {
+			this.email = '';
+			this.message = '';
+			this.success = true;
+			this.subject = '';
+		}).catch(err => {
+			// Postmail seems to always return an error message
+			if(200 <= err.status && err.status < 300) {
+				this.email = '';
+				this.message = '';
+				this.success = true;
+				this.subject = '';
+			} else {
+				this.error = true;
+			}
+		}).finally(() => {
+			this.loading = false;
+			this.changeRef.detectChanges();
 		});
-		this.loading = false;
 	}
 }
diff --git a/src/app/services/email.service.ts b/src/app/services/email.service.ts
new file mode 100644
index 0000000..14c7ccc
--- /dev/null
+++ b/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();
+	}
+}
diff --git a/src/app/services/quote.service.ts b/src/app/services/quote.service.ts
index b18f9a6..afe7d33 100644
--- a/src/app/services/quote.service.ts
+++ b/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)];
 	}