feat: enhance contact form security and add animated hero
This commit is contained in:
parent
ea18dcdb8e
commit
8497cd819d
19 changed files with 320 additions and 112 deletions
10
app/app.vue
10
app/app.vue
|
|
@ -2,11 +2,9 @@
|
|||
<UApp>
|
||||
<div data-theme="night">
|
||||
<main>
|
||||
<!-- The content of the current page will be rendered here -->
|
||||
<NuxtPage />
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer p-10 bg-base-300 text-base-content">
|
||||
<div>
|
||||
<span class="footer-title">Social</span>
|
||||
|
|
@ -60,10 +58,6 @@
|
|||
</UApp>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/* Global */
|
||||
</script>
|
||||
<script setup></script>
|
||||
|
||||
<style>
|
||||
/* Global */
|
||||
</style>
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,52 @@
|
|||
<template>
|
||||
<div class="max-w-xl mx-auto">
|
||||
<form @submit.prevent="sendTextMessage">
|
||||
<!-- Name Input -->
|
||||
<div class="form-control mb-4">
|
||||
<input
|
||||
v-model="userName"
|
||||
type="text"
|
||||
placeholder="Your Name"
|
||||
aria-label="Your Name"
|
||||
pattern="^[\x20-\x7E]*$"
|
||||
class="input input-bordered w-full"
|
||||
:disabled="isMessageSent"
|
||||
required
|
||||
@input="trackActivity('k')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="form-control"
|
||||
style="
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
"
|
||||
>
|
||||
<input
|
||||
v-model="website"
|
||||
type="text"
|
||||
name="website"
|
||||
placeholder="Website"
|
||||
tabindex="-1"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Message Textarea -->
|
||||
<div class="form-control mb-4">
|
||||
<textarea
|
||||
v-model="userMessage"
|
||||
class="textarea textarea-bordered h-32 w-full"
|
||||
placeholder="Your message..."
|
||||
aria-label="Your message..."
|
||||
aria-label="Your message (only printable ASCII characters allowed)"
|
||||
:disabled="isMessageSent"
|
||||
maxlength="140"
|
||||
pattern="^[\x20-\x7E\n\r]*$"
|
||||
title="Only printable ASCII characters are allowed."
|
||||
required
|
||||
></textarea>
|
||||
@input="trackActivity('k')"
|
||||
/>
|
||||
<div
|
||||
class="text-right text-sm mt-1"
|
||||
:class="{ 'text-error': userMessage.length > 140 }"
|
||||
|
|
@ -35,7 +55,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phone Number and Verification (conditionally enabled) -->
|
||||
<div class="flex flex-col md:flex-row gap-4 mb-4">
|
||||
<div class="form-control w-full md:w-1/2">
|
||||
<div class="join w-full">
|
||||
|
|
@ -59,7 +78,7 @@
|
|||
"
|
||||
@click="sendCode"
|
||||
>
|
||||
<span v-if="isSendingCode" class="loading loading-spinner"></span>
|
||||
<span v-if="isSendingCode" class="loading loading-spinner" />
|
||||
Send Code
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -80,14 +99,13 @@
|
|||
:disabled="!isCodeSent || isVerified || isVerifying"
|
||||
@click="verifyCode"
|
||||
>
|
||||
<span v-if="isVerifying" class="loading loading-spinner"></span>
|
||||
<span v-if="isVerifying" class="loading loading-spinner" />
|
||||
Verify
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit and Status Messages -->
|
||||
<div class="text-center">
|
||||
<div v-if="errorMessage" class="alert alert-error mb-4">
|
||||
<svg
|
||||
|
|
@ -126,7 +144,7 @@
|
|||
class="btn btn-primary w-full"
|
||||
:disabled="!isVerified || isSendingMessage || isMessageSent"
|
||||
>
|
||||
<span v-if="isSendingMessage" class="loading loading-spinner"></span>
|
||||
<span v-if="isSendingMessage" class="loading loading-spinner" />
|
||||
Text Me! (Rob ☺️)
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -135,15 +153,14 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
|
||||
// --- Form State ---
|
||||
const userName = ref("");
|
||||
const phoneNumber = ref("");
|
||||
const verificationCode = ref("");
|
||||
const userMessage = ref("");
|
||||
const website = ref("");
|
||||
|
||||
// --- UI State ---
|
||||
const isSendingCode = ref(false);
|
||||
const isCodeSent = ref(false);
|
||||
const isVerifying = ref(false);
|
||||
|
|
@ -152,24 +169,24 @@ const isSendingMessage = ref(false);
|
|||
const isMessageSent = ref(false);
|
||||
const errorMessage = ref("");
|
||||
|
||||
// --- Computed Properties ---
|
||||
const formStartTime = ref(0);
|
||||
const hasInteracted = ref(false);
|
||||
const mouseActivity = ref(0);
|
||||
const keyboardActivity = ref(0);
|
||||
|
||||
const isNameAndMessageEntered = computed(() => {
|
||||
const printableAsciiRegex = /^[\x20-\x7E\n\r]*$/;
|
||||
return (
|
||||
userName.value.trim() !== "" &&
|
||||
userMessage.value.trim() !== "" &&
|
||||
userMessage.value.length <= 140 &&
|
||||
printableAsciiRegex.test(userMessage.value)
|
||||
userMessage.value.length <= 140
|
||||
);
|
||||
});
|
||||
|
||||
const isPhoneNumberIncomplete = computed(() => {
|
||||
// Count only the digits in the phone number
|
||||
const digitCount = (phoneNumber.value.match(/\d/g) || []).length;
|
||||
return digitCount < 10;
|
||||
return digitCount < 10 || digitCount > 11;
|
||||
});
|
||||
|
||||
// --- Functions ---
|
||||
const clearError = () => {
|
||||
errorMessage.value = "";
|
||||
};
|
||||
|
|
@ -177,12 +194,14 @@ const clearError = () => {
|
|||
const sendCode = async () => {
|
||||
clearError();
|
||||
if (!phoneNumber.value) {
|
||||
errorMessage.value = "Please enter a valid phone number.";
|
||||
errorMessage.value = "Please enter a valid US phone number.";
|
||||
return;
|
||||
}
|
||||
isSendingCode.value = true;
|
||||
try {
|
||||
const response = await $fetch("/api/send-otp", {
|
||||
const endpoint = atob("L2FwaS9zZW5kLW90cA==");
|
||||
console.log("Using endpoint", endpoint);
|
||||
const response = await $fetch(endpoint, {
|
||||
method: "POST",
|
||||
body: { phoneNumber: phoneNumber.value },
|
||||
});
|
||||
|
|
@ -207,7 +226,9 @@ const verifyCode = async () => {
|
|||
}
|
||||
isVerifying.value = true;
|
||||
try {
|
||||
const response = await $fetch("/api/verify-otp", {
|
||||
const endpoint = atob("L2FwaS92ZXJpZnktb3Rw");
|
||||
console.log("Using endpoint", endpoint);
|
||||
const response = await $fetch(endpoint, {
|
||||
method: "POST",
|
||||
body: {
|
||||
code: verificationCode.value,
|
||||
|
|
@ -216,7 +237,7 @@ const verifyCode = async () => {
|
|||
});
|
||||
if (response.success) {
|
||||
isVerified.value = true;
|
||||
errorMessage.value = ""; // Clear error on success
|
||||
errorMessage.value = "";
|
||||
}
|
||||
} catch (error) {
|
||||
errorMessage.value =
|
||||
|
|
@ -229,6 +250,7 @@ const verifyCode = async () => {
|
|||
|
||||
const sendTextMessage = async () => {
|
||||
clearError();
|
||||
|
||||
if (!isNameAndMessageEntered.value) {
|
||||
errorMessage.value =
|
||||
"Please fill out your name and a valid message before sending.";
|
||||
|
|
@ -237,13 +259,21 @@ const sendTextMessage = async () => {
|
|||
isSendingMessage.value = true;
|
||||
|
||||
try {
|
||||
const response = await $fetch("/api/send-message", {
|
||||
const endpoint = atob("L2FwaS9zZW5kLW1lc3NhZ2U=");
|
||||
console.log("Using endpoint", endpoint);
|
||||
const response = await $fetch(endpoint, {
|
||||
method: "POST",
|
||||
body: {
|
||||
name: userName.value,
|
||||
message: userMessage.value,
|
||||
phoneNumber: phoneNumber.value,
|
||||
code: verificationCode.value,
|
||||
website: website.value,
|
||||
interactionData: {
|
||||
timeSpent: Date.now() - formStartTime.value,
|
||||
mouseActivity: mouseActivity.value,
|
||||
keyboardActivity: keyboardActivity.value,
|
||||
},
|
||||
},
|
||||
});
|
||||
if (response.success) {
|
||||
|
|
@ -259,4 +289,25 @@ const sendTextMessage = async () => {
|
|||
isSendingMessage.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const trackActivity = (type) => {
|
||||
if (type === "m") mouseActivity.value++;
|
||||
if (type === "k") keyboardActivity.value++;
|
||||
hasInteracted.value = true;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
formStartTime.value = Date.now();
|
||||
|
||||
const events = [
|
||||
["mousemove", () => trackActivity("m")],
|
||||
["click", () => trackActivity("m")],
|
||||
["keydown", () => trackActivity("k")],
|
||||
["keyup", () => trackActivity("k")],
|
||||
];
|
||||
|
||||
events.forEach(([event, handler]) => {
|
||||
document.addEventListener(event, handler, { passive: true });
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,19 @@
|
|||
<template>
|
||||
<!-- Project Card -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">{{ title }}</h2>
|
||||
<p>{{ description }}</p>
|
||||
<div class="card-actions justify-end">
|
||||
<button
|
||||
v-if="liveDemoLink"
|
||||
class="btn btn-primary"
|
||||
<button
|
||||
v-if="liveDemoLink"
|
||||
class="btn btn-primary"
|
||||
@click="openLink(liveDemoLink)"
|
||||
>
|
||||
Live Demo
|
||||
</button>
|
||||
<button
|
||||
v-if="sourceCodeLink"
|
||||
class="btn btn-secondary"
|
||||
<button
|
||||
v-if="sourceCodeLink"
|
||||
class="btn btn-secondary"
|
||||
@click="openLink(sourceCodeLink)"
|
||||
>
|
||||
Source Code
|
||||
|
|
@ -25,7 +24,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
defineProps({
|
||||
title: { type: String, default: "Lorem Ipsum" },
|
||||
description: {
|
||||
type: String,
|
||||
|
|
@ -35,9 +34,7 @@ const props = defineProps({
|
|||
liveDemoLink: { type: [String, null], default: null },
|
||||
sourceCodeLink: { type: [String, null], default: null },
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function openLink(url) {
|
||||
window.open(url, "_blank");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero min-h-screen bg-base-200">
|
||||
<div class="hero-content text-center">
|
||||
<section class="hero min-h-screen bg-base-200 relative overflow-hidden">
|
||||
<div class="absolute inset-0 z-0 animated-background"></div>
|
||||
<div class="hero-content text-center relative z-10">
|
||||
<div class="max-w-md">
|
||||
<h1 class="text-5xl font-bold">
|
||||
Hi, I'm <span class="text-primary">Rob</span>!
|
||||
</h1>
|
||||
<p class="py-6 text-2xl">I'm <span id="typed-text"></span></p>
|
||||
<p class="py-6 text-2xl">I'm <span id="typed-text" /></p>
|
||||
<button class="btn btn-primary">View My Work</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Me Section -->
|
||||
<section id="about" class="py-20 bg-base-100">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">About Me</h2>
|
||||
|
|
@ -51,7 +50,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Current Projects Section -->
|
||||
<section id="projects" class="py-20 bg-base-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">Current Projects</h2>
|
||||
|
|
@ -60,13 +58,16 @@
|
|||
title="PKMNTradeClub"
|
||||
description="A web app to facilitate trading between players of Pokémon TCG Pocket, which frustratingly lacks trade matching features. Currently in development!"
|
||||
/>
|
||||
<ProjectCard
|
||||
title="Home Lab & Self-Hosted Solutions"
|
||||
description="A collection of hardware, projects, and experiments to learn and explore new technologies and concepts, as well as augment and enhance my personal tech space."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Inactive Projects Section -->
|
||||
<section id="projects" class="py-20 bg-base-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">Inactive Projects</h2>
|
||||
<h2 class="text-4xl font-bold text-center mb-12">Past Projects</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<ProjectCard
|
||||
title="PokeEmerald Mods"
|
||||
|
|
@ -84,7 +85,6 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="py-20 bg-base-100">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">Get In Touch</h2>
|
||||
|
|
@ -134,8 +134,18 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
/* Ensuring the hero section takes the full viewport height */
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.hero .hero-content {
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.animated-background {
|
||||
background-image: url("/NZclouds.webp"), url("/NZclouds-static.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,16 @@
|
|||
import ScrollReveal from 'scrollreveal';
|
||||
import ScrollReveal from "scrollreveal";
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
const defaultOptions = {
|
||||
origin: 'bottom',
|
||||
distance: '80px',
|
||||
origin: "bottom",
|
||||
distance: "80px",
|
||||
duration: 1000,
|
||||
delay: 200,
|
||||
easing: 'cubic-bezier(0.5, 0, 0, 1)',
|
||||
easing: "cubic-bezier(0.5, 0, 0, 1)",
|
||||
reset: true,
|
||||
};
|
||||
|
||||
const sr = ScrollReveal(defaultOptions);
|
||||
|
||||
// You can make it available to the rest of your Nuxt application
|
||||
// by returning it in the `provide` object.
|
||||
// This makes it accessible as `$sr` in your components.
|
||||
nuxtApp.provide('sr', sr);
|
||||
nuxtApp.provide("sr", sr);
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue