update buttons and add success feedback for contact form

alexsguardian · Dec 15, 2024 · 9dcbf67 · 9dcbf67
1 parent c8f5ebb
commit 9dcbf67
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 21 deletions.
diff --git a/.astro/content.d.ts b/.astro/content.d.ts
@@ -162,5 +162,5 @@ declare module 'astro:content' {
 
 	type AnyEntryMap = ContentEntryMap & DataEntryMap;
 
-	export type ContentConfig = typeof import("./../src/content.config.mjs");
+	export type ContentConfig = typeof import("../src/content.config.mjs");
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "@astrojs/node": "^9.0.0",
     "@astrojs/sitemap": "^3.2.1",
     "@astrojs/vue": "^5.0.2",
+    "canvas-confetti": "^1.9.3",
     "dompurify": "^3.2.2",
     "jsdom": "^25.0.1",
     "motion": "^11.12.0",

diff --git a/src/components/CallToAction.astro b/src/components/CallToAction.astro
@@ -1,12 +1,23 @@
+---
+import { Icon } from 'astro-icon/components';
+---
+
 <div class="container">
   <div class="mb-32 mt-24 flex flex-col items-center gap-12 rounded-xl p-12 md:p-24 text-[var(--neutral-900)] bg-gradient-to-r from-[var(--highlight-blue-300)] to-[var(--highlight-purple-200)]">
     <h2 class="text-center text-3xl md:text-5xl">Contact us today!</h2>
-    <a href="/contact">
+    <a href="/contact" class="flex items-center text-center !no-underline">
       <button 
-        class=`rounded-md border border-[var(--neutral-800)] py-2 px-4 text-center text-2xl transition-all shadow-sm hover:shadow-lg text-[var(--neutral-900)] hover:text-[var(--neutral-200)] hover:bg-[var(--highlight-blue-400)] hover:border-[var(--neutral-800)] focus:text-white focus:bg-[var(--highlight-blue-400)] focus:border-[var(--neutral-800)] active:border-[var(--neutral-800)] active:text-[var(--neutral-200)] active:bg-[var(--highlight-blue-400)] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none` 
+        class=`group relative flex items-center rounded-md border border-[var(--neutral-800)] py-2 px-4 text-center text-2xl transition-all shadow-sm hover:shadow-lg text-[var(--neutral-900)] hover:text-[var(--neutral-200)] hover:border-[var(--neutral-200)] focus:text-[var(--neutral-200)] focus:bg-[var(--highlight-blue-400)] focus:border-[var(--neutral-800)] active:border-[var(--neutral-800)] active:text-[var(--neutral-200)] active:bg-[var(--highlight-blue-400)] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none`
         type="button"
         >
         Contact Us
+        <span 
+        class="inline-flex items-center pl-2 max-w-0 overflow-hidden transition-all duration-300 ease-in-out group-hover:max-w-[3rem]"
+      >
+        <Icon
+          name="mdi:keyboard-arrow-right"
+          class="h-8 w-8 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100"
+        />
       </button>
     </a>
   </div>

diff --git a/src/components/ContactForm.vue b/src/components/ContactForm.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
+import confetti from "canvas-confetti";
 
 const responseMessage = ref<string>();
 const isSubmitting = ref<boolean>(false);
 const formVisible = ref<boolean>(true);
 
-const TURNSTILE_SITE_KEY = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY || '{TURNSTILE_SITE_KEY}';
+const turnstileKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY || '{TURNSTILE_SITE_KEY}';
 
 const formData = ref({
   name: '',
@@ -27,7 +28,7 @@ onMounted(() => {
   script.onload = () => {
     if (window.turnstile) {
       window.turnstile.render("#turnstile-container", {
-        sitekey: TURNSTILE_SITE_KEY,
+        sitekey: turnstileKey,
         callback: (token: string) => {
           formData.value.turnstileToken = token;
         },
@@ -61,7 +62,7 @@ async function submit(e: Event) {
   e.preventDefault();
 
   if (!formData.value.turnstileToken) {
-    responseMessage.value = "Please complete the Turnstile challenge.";
+    responseMessage.value = "Please complete the Turnstile challenge. C-100";
     return;
   };
 
@@ -91,7 +92,7 @@ async function submit(e: Event) {
 
     if (response.ok) {
       responseMessage.value = "Message sent successfully!";
-      formVisible.value = false;
+      formVisible.value = false; // Trigger success state
     } else {
       responseMessage.value = `${data.message || "Something went wrong"}`;
     }
@@ -101,15 +102,27 @@ async function submit(e: Event) {
     isSubmitting.value = false;
   };
 };
+
+// Watch for formVisible changes to trigger confetti
+watch(formVisible, (newVal) => {
+  if (newVal === false) {
+    // Launch confetti
+    confetti({
+      particleCount: 100,
+      spread: 70,
+      origin: { y: 0.6 }
+    });
+  }
+});
 </script>
 
 <template>
   <div class="flex flex-col max-w-xl mx-auto rounded-lg backdrop-blur border border-[var(--highlight-blue-200)] dark:border-[var(--highlight-blue-400)] bg-[var(--neutral-100)] dark:bg-[var(--highlight-blue-900)] shadow p-4 sm:p-6 lg:p-8 w-full">
 
-    <!-- Show the form if formVisible is true -->
     <form v-if="formVisible" @submit="submit">
+      <!-- Form Inputs -->
       <div class="mb-[15px]">
-        <label for="name">Name <span class="text-red-600">*</span></label>
+        <label for="name">Name <span class="text-[var(--highlight-red-300)]">*</span></label>
         <input 
           type="text" 
           id="name" 
@@ -123,7 +136,7 @@ async function submit(e: Event) {
       </div>
 
       <div class="mb-[15px]">
-        <label for="email">Email <span class="text-red-600">*</span></label>
+        <label for="email">Email <span class="text-[var(--highlight-red-300)]">*</span></label>
         <input 
           type="email" 
           id="email" 
@@ -192,7 +205,7 @@ async function submit(e: Event) {
       </div>
 
       <div class="mb-[15px]">
-        <label for="message">Message <span class="text-red-600">*</span></label>
+        <label for="message">Message <span class="text-[var(--highlight-red-300)]">*</span></label>
         <textarea 
           id="message" 
           name="message" 
@@ -231,15 +244,14 @@ async function submit(e: Event) {
 
     <!-- Show a success message if formVisible is false -->
     <div v-else class="success-message">
-      <div class="flex justify-center items-center">
+      <div class="flex justify-center items-center mb-4">
         <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
           <path fill="hsl(136, 48%, 46%)" d="M20 12a8 8 0 0 1-8 8a8 8 0 0 1-8-8a8 8 0 0 1 8-8c.76 0 1.5.11 2.2.31l1.57-1.57A9.8 9.8 0 0 0 12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10M7.91 10.08L6.5 11.5L11 16L21 6l-1.41-1.42L11 13.17z"/>
         </svg>
       </div>
       <h2 class="flex justify-center items-center mb-4">Message Sent!</h2>
       <p class="flex justify-center text-center mb-2">Thank you for contacting us!</p>
       <p class="flex justify-center text-center">We will get back to you within 1-2 business days.</p>
-      <!-- <p v-if="responseMessage">{{ responseMessage }}</p> -->
     </div>
   </div>
-</template>
+</template>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -16,9 +16,15 @@ const { src = '/hero.webp' } = Astro.props;
         </h3>
         <div class="flex flex-col gap-3 min-[500px]:flex-row">
           <a href="/contact" class="!no-underline">
-            <button class=`flex items-center rounded-md bg-[var(--highlight-blue-400)] py-2 px-8 border border-transparent text-center text-lg text-[var(--neutral-200)] transition-all shadow-sm hover:shadow-lg focus:bg-[var(--highlight-blue-500)] focus:shadow-none active:bg-[var(--highlight-blue-500)] hover:bg-[var(--highlight-blue-500)] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none` type="button">
+            <button class=`group relative flex items-center rounded-md bg-[var(--highlight-blue-400)] py-4 px-4 border border-transparent text-center text-lg text-[var(--neutral-200)] transition-all shadow-sm hover:shadow-lg focus:bg-[var(--highlight-blue-500)] focus:shadow-none active:bg-[var(--highlight-blue-500)] hover:bg-[var(--highlight-blue-500)] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none` type="button">
               Contact Us
-              <Icon name="mdi:keyboard-arrow-right" class="pl-2 h-10 w-10"/>    
+              <span 
+              class="inline-flex items-center pl-2 max-w-0 overflow-hidden transition-all duration-300 ease-in-out group-hover:max-w-[3rem]"
+            >
+              <Icon
+                name="mdi:keyboard-arrow-right"
+                class="h-6 w-6 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100"
+              />
             </button>
           </a>
         </div>

diff --git a/src/pages/api/contact.ts b/src/pages/api/contact.ts
@@ -10,7 +10,7 @@ const emailUser = import.meta.env.EMAIL_USER || '{EMAIL_USER}';
 const emailPass = import.meta.env.EMAIL_PASS || '{EMAIL_PASS}';
 const emailHost = import.meta.env.EMAIL_HOST || '{EMAIL_HOST}';
 const emailPort = import.meta.env.EMAIL_PORT || '{EMAIL_PORT}';
-const TURNSTILE_SECRET_KEY = import.meta.env.TURNSTILE_SEC_KEY || '{TURNSTILE_SEC_KEY}';
+const turnstileSec = import.meta.env.TURNSTILE_SEC_KEY || '{TURNSTILE_SEC_KEY}';
 
 // Set character limits
 const nameMaxLength = 100;
@@ -39,7 +39,7 @@ export const POST: APIRoute = async ({ request }) => {
 
   if (!turnstileToken) {
     return new Response(
-      JSON.stringify({ message: "Turnstile validation token missing. C-100" }),
+      JSON.stringify({ message: "Turnstile validation token missing. C-101" }),
       { status: 400 }
     );
   }
@@ -51,7 +51,7 @@ export const POST: APIRoute = async ({ request }) => {
       "Content-Type": "application/x-www-form-urlencoded",
     },
     body: new URLSearchParams({
-      secret: TURNSTILE_SECRET_KEY,
+      secret: turnstileSec,
       response: turnstileToken,
       remoteip: request.headers["cf-connecting-ip"] || request.headers["x-forwarded-for"],
     }),
@@ -61,7 +61,7 @@ export const POST: APIRoute = async ({ request }) => {
 
   if (!verifyData.success) {
     return new Response(
-      JSON.stringify({ message: "Turnstile verification failed. C-101" }),
+      JSON.stringify({ message: "Turnstile verification failed. C-102" }),
       { status: 400 }
     );
   }