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

Website updates

Browse Source
This commit is contained in:
Zakary Timson
2024-01-04 19:56:46 -05:00
parent 4b3e89fa59
commit 6b28ed61bd
19 changed files with 187 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/contact.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts">
import Icon from '@/components/icon.vue';
import {environment} from '@/environments/environment';
import {ref} from 'vue';
const disable = ref(false);
@ -10,7 +11,7 @@ const data = ref({
subject: '',
message: '',
});
const errors = ref({
const errors = ref<any>({
banner: false,
name: false,
email: false,
@ -29,6 +30,27 @@ function validateEmail(email: string) {
return /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email);
}
function send(name: string, email: string, subject: string, message: string) {
function formEncode(data: any): string {
return Object.entries(data).map(([key, value]) =>
encodeURIComponent(key) + '=' + encodeURIComponent(<any>value)
).join('&');
}
return fetch('https://postmail.invotes.com/send', {
method: 'post',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: formEncode({
access_token: environment.postMailKey,
subject: `ZaksCode: ${subject}`,
text: `App: ZaksCode\nFrom: ${name} <${email}>\nSubject: ${subject}\n\nMessage:\n${message}`
})
}).then(async resp => {
if(!resp.ok) throw new Error(resp.statusText);
return await resp.text();
});
}
function submit() {
disable.value = true;
const d = data.value;
@ -42,39 +64,51 @@ function submit() {
};
if(errors.value.name || errors.value.email || errors.value.subject || errors.value.message) return disable.value = false;
// Email.send(d.name, d.email, d.subject, d.message).then(() => {
// done.value = true;
// }).catch(err => {
// console.error(err);
// errors.value.banner = err?.message || err.toString();
// disable.value = false;
// });
send(d.name, d.email, d.subject, d.message).then(() => {
done.value = true;
}).catch(err => {
console.error(err);
errors.value.banner = err?.message || err.toString();
disable.value = false;
});
}
</script>
<template>
<!-- Success Banner -->
<div v-if="done" class="alert alert-success">
<span>Success! We sent you a copy & we will be intouch shortly.</span>
<span>Success! We will be intouch shortly.</span>
</div>
<!-- Error Banner -->
<div v-if="errors?.banner" class="alert alert-danger">
{{ errors.banner }}
Error: {{ (errors as any).banner }}
</div>
<!-- Contact Form -->
<form>
<div class="d-flex flex-wrap justify-content-between mb-2">
<div class="input-group mb-2 mb-sm-0" style="width: 49%; min-width: 250px">
<span class="input-group-text"><icon name="user"/></span>
<input class="form-control" type="text" placeholder="Name" v-model="data.name" v-bind:class="{'is-invalid': errors?.name}" :disabled="!!user || disable" required>
<div class="d-flex flex-column flex-md-row flex-wrap justify-content-between">
<!-- Name -->
<div class="mb-2 p-0 pe-md-1 p-md-0" style="flex: 1 0 0;">
<div class="input-group">
<span class="input-group-text"><icon name="user"/></span>
<input class="form-control" type="text" placeholder="Name" v-model="data.name" v-bind:class="{'is-invalid': errors?.name}" :disabled="disable" required>
</div>
</div>
<div class="input-group" style="width: 49%; min-width: 250px">
<span class="input-group-text"><icon name="envelope"/></span>
<input class="form-control" type="email" placeholder="Email" v-model="data.email" v-bind:class="{'is-invalid': errors?.email}" :disabled="!!user || disable" required>
<!-- Email -->
<div class="mb-2 p-0 ps-md-1" style="flex: 1 0 0;">
<div class="input-group">
<span class="input-group-text"><icon name="envelope"/></span>
<input class="form-control" type="email" placeholder="Email" v-model="data.email" v-bind:class="{'is-invalid': errors?.email}" :disabled="disable" required>
</div>
</div>
</div>
<!-- Subject -->
<div class="input-group mb-2">
<span class="input-group-text"><icon name="book"/></span>
<input class="form-control" type="text" placeholder="Subject" v-model="data.subject" v-bind:class="{'is-invalid': errors?.subject}" :disabled="disable" required>
</div>
<!-- Message Body -->
<textarea class="form-control" placeholder="Message" rows="5" v-model="data.message" v-bind:class="{'is-invalid': errors?.message}" :disabled="disable" required></textarea>
<!-- Buttons -->
<div class="text-end pt-3">
<button type="button" class="btn rounded-pill ms-3" @click="reset()">Reset</button>
<button type="button" class="btn btn-primary rounded-pill ms-3" @click="submit" :disabled="disable">Send Message</button>