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 @@
+
Email sent!
+
Email failed to send
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} - 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)]; }