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
@@ -42,9 +42,9 @@
-
+
+
+
Contact
+
+