ztimson/zakscode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

Added contact form (Closes #3)

Browse Source
This commit is contained in:
Zakary Timson
2022-05-03 18:07:04 -04:00
parent cf05d96812
commit 3ecad74d10
6 changed files with 86 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.module.ts
View File

@@ -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

17
src/app/components/contact-form/contact-form.component.html Normal file
View File

@@ -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>

32
src/app/components/contact-form/contact-form.component.ts Normal file
View File

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

8
src/app/material.module.ts
View File

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

12
src/app/misc/utils.ts
View File

@@ -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).
*

28
src/app/views/home/home.component.html
View File

@@ -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">
<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>
<div class="p-4 overflow-hidden">
<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>
<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_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_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>
</div>
</div>
<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_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_iz0vkzXmAyMHdaM1BjZ1MwbWxva2lOY290NElwanN4b2JV/view?usp=sharing" target="_blank">CD Projekt Red</a>
</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>