Added contact form (Closes #3)
This commit is contained in:
parent
cf05d96812
commit
3ecad74d10
@ -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
17
src/app/components/contact-form/contact-form.component.html
Normal 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
32
src/app/components/contact-form/contact-form.component.ts
Normal 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;
|
||||
}
|
||||
}
|
||||
@ -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({
|
||||
|
||||
@ -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).
|
||||
*
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user