From 3ecad74d1003831e76bc05cebbe0bffc9d14e4f7 Mon Sep 17 00:00:00 2001 From: ztimson Date: Tue, 3 May 2022 18:07:04 -0400 Subject: [PATCH] Added contact form (Closes #3) --- src/app/app.module.ts | 2 ++ .../contact-form/contact-form.component.html | 17 ++++++++++ .../contact-form/contact-form.component.ts | 32 +++++++++++++++++++ src/app/material.module.ts | 8 ++++- src/app/misc/utils.ts | 12 +++++++ src/app/views/home/home.component.html | 28 +++++++++------- 6 files changed, 86 insertions(+), 13 deletions(-) create mode 100644 src/app/components/contact-form/contact-form.component.html create mode 100644 src/app/components/contact-form/contact-form.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index e8ba116..dad3657 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,5 +1,6 @@ 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'; @@ -14,6 +15,7 @@ import {ConsoleComponent} from './components/console/console.component'; declarations: [ AppComponent, ConsoleComponent, + ContactFormComponent, HomeComponent, SlideShowComponent, TypewriterComponent diff --git a/src/app/components/contact-form/contact-form.component.html b/src/app/components/contact-form/contact-form.component.html new file mode 100644 index 0000000..9fe2471 --- /dev/null +++ b/src/app/components/contact-form/contact-form.component.html @@ -0,0 +1,17 @@ +
+
+ + +
+
+ + +
+
+ + +
+ +
diff --git a/src/app/components/contact-form/contact-form.component.ts b/src/app/components/contact-form/contact-form.component.ts new file mode 100644 index 0000000..5125411 --- /dev/null +++ b/src/app/components/contact-form/contact-form.component.ts @@ -0,0 +1,32 @@ +import {Component} from '@angular/core'; +import {formEncode} from '../../misc/utils'; + +@Component({ + selector: 'contact-form', + templateUrl: './contact-form.component.html' +}) +export class ContactFormComponent { + email = ''; + loading = false; + message = ''; + subject = ''; + + async send() { + 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.loading = false; + } +} diff --git a/src/app/material.module.ts b/src/app/material.module.ts index f7331f5..c64f01e 100644 --- a/src/app/material.module.ts +++ b/src/app/material.module.ts @@ -1,8 +1,14 @@ import {NgModule} from '@angular/core'; +import {MatButtonModule} from '@angular/material/button'; import {MatCardModule} from '@angular/material/card'; +import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatInputModule} from '@angular/material/input'; const MODULES = [ - MatCardModule + MatButtonModule, + MatCardModule, + MatFormFieldModule, + MatInputModule, ]; @NgModule({ diff --git a/src/app/misc/utils.ts b/src/app/misc/utils.ts index 7c91310..3cdf28e 100644 --- a/src/app/misc/utils.ts +++ b/src/app/misc/utils.ts @@ -1,3 +1,15 @@ +/** + * Convert data into a form encoded format. + * + * @param {any} data - data to convert + * @returns {string} - Ecodeded form data + */ +export function formEncode(data: any): string { + return Object.entries(data).map(([key, value]) => + encodeURIComponent(key) + '=' + encodeURIComponent(value) + ).join('&'); +} + /** * Use with await to pause the script for a specified amount of time (in miliseconds). * diff --git a/src/app/views/home/home.component.html b/src/app/views/home/home.component.html index 750299f..7a6add2 100644 --- a/src/app/views/home/home.component.html +++ b/src/app/views/home/home.component.html @@ -20,7 +20,7 @@ -
+
@@ -28,7 +28,7 @@ -
+

About Me

Childhood @@ -42,9 +42,9 @@

-
-

Resume & References

- Resume +
+

Resume & References

+ Resume
- Manager - Contractor - Teacher - Principle - CD Projekt Red -
-
+ Manager + Contractor + Teacher + Principle + CD Projekt Red +
+
+
+

Contact

+ +