Added contact form (Closes #3)

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

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

@@ -0,0 +1,17 @@
+<form>
+	<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">
+	</div>
+	<div class="form-group">
+		<label for="subjectInput">Subject</label>
+		<input type="text" class="form-control" id="subjectInput" name="subject" placeholder="Interested in Services" [(ngModel)]="subject">
+	</div>
+	<div class="form-group">
+		<label for="messageInput">Message</label>
+		<textarea class="form-control" id="messageInput" name="message" rows="5" [(ngModel)]="message"></textarea>
+	</div>
+	<button type="button" class="btn btn-primary float-right" (click)="send()" [disabled]="loading || !email || !subject || !message">
+		Send
+	</button>
+</form>

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;
+	}
+}

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({

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(<any>value)
+	).join('&');
+}
+
 /**
  * Use with await to pause the script for a specified amount of time (in miliseconds).
  *

src/app/views/home/home.component.html

@@ -20,7 +20,7 @@
                 </mat-card-content>
             </mat-card>
         </div>
-        <div class="p-3">
+        <div class="p-4">
             <console height="12rem"></console>
         </div>
 <!--		<div class="p-3">-->
@@ -28,7 +28,7 @@
 <!--			<iframe class="border-0" src="https://gitlab.zakscode.com/explore" width="100%" height="75vh">-->
 <!--			</iframe>-->
 <!--		</div>-->
-        <div class="p-3">
+        <div class="p-4">
             <h3>About Me</h3>
             <div>
 				<img alt="Childhood" class="float-right m-3 m-md-0 ml-md-3" src="assets/img/keyboard-in-hand.jpg" height="150px" width="auto" style="border-radius: 50%">
@@ -42,9 +42,9 @@
 				</p>
             </div>
         </div>
-        <div class="p-3 overflow-hidden">
+		<div class="p-4 overflow-hidden">
-            <h3>Resume & References</h3>
+			<h3>Resume & References</h3>
-            <a class="mb-3 btn btn-outline-primary" href="https://docs.google.com/document/d/1xP6HASPerXKMJM_x6-PhHVvoYgq-Hym5IRO7g47EX8o/edit?usp=sharing" target="_blank">Resume</a>
+			<a class="mb-3 btn btn-outline-primary" href="https://docs.google.com/document/d/1xP6HASPerXKMJM_x6-PhHVvoYgq-Hym5IRO7g47EX8o/edit?usp=sharing" target="_blank">Resume</a>
 			<ul class="d-md-none list-group">
 				<a class="list-group-item list-group-item-action border-info text-info" href="https://docs.google.com/document/d/1xP6HASPerXKMJM_x6-PhHVvoYgq-Hym5IRO7g47EX8o/edit?usp=sharing" target="_blank">Resume</a>
 				<a class="list-group-item list-group-item-action border-info text-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyNWw0UDFzT0ZTeVU/view?usp=sharing" target="_blank">Manager</a>
@@ -54,13 +54,17 @@
 				<a class="list-group-item list-group-item-action border-info text-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyMHdaM1BjZ1MwbWxva2lOY290NElwanN4b2JV/view?usp=sharing" target="_blank">CD Projekt Red</a>
 			</ul>
 			<div class="d-none d-md-block btn-group" role="group" aria-label="Basic example">
-                <a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyNWw0UDFzT0ZTeVU/view?usp=sharing" target="_blank">Manager</a>
+				<a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyNWw0UDFzT0ZTeVU/view?usp=sharing" target="_blank">Manager</a>
-                <a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyaFBhcXBEaGp6YWc/view?usp=sharing" target="_blank">Contractor</a>
+				<a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyaFBhcXBEaGp6YWc/view?usp=sharing" target="_blank">Contractor</a>
-                <a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyM0YtTWcxQzk0dEE/view?usp=sharing" target="_blank">Teacher</a>
+				<a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyM0YtTWcxQzk0dEE/view?usp=sharing" target="_blank">Teacher</a>
-                <a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyX2owd0xURjh3RlE/view?usp=sharing" target="_blank">Principle</a>
+				<a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyX2owd0xURjh3RlE/view?usp=sharing" target="_blank">Principle</a>
-                <a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyMHdaM1BjZ1MwbWxva2lOY290NElwanN4b2JV/view?usp=sharing" target="_blank">CD Projekt Red</a>
+				<a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyMHdaM1BjZ1MwbWxva2lOY290NElwanN4b2JV/view?usp=sharing" target="_blank">CD Projekt Red</a>
-            </div>
+			</div>
-        </div>
+		</div>
+		<div class="p-4 overflow-hidden">
+			<h3>Contact</h3>
+			<contact-form></contact-form>
+		</div>
         <footer class="p-1 bg-dark text-center" style="color: grey">
             Copyright © Zakary Timson 2022 | All Rights Reserved
         </footer>