render turnstile widget based on active theme when page is loaded !noci

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

Hide file tree

Showing 2 changed files with 39 additions and 17 deletions.
diff --git a/src/components/ContactForm.vue b/src/components/ContactForm.vue
@@ -8,6 +8,8 @@ const formVisible = ref<boolean>(true);
 
 const turnstileKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY || '{TURNSTILE_SITE_KEY}';
 
+const isDarkMode = ref(false);
+
 const formData = ref({
   name: '',
   email: '',
@@ -18,28 +20,47 @@ const formData = ref({
   turnstileToken: ''
 });
 
+
+function renderTurnstile() {
+  const container = document.getElementById('turnstile-container');
+  if (!container) return;
+
+  // Clear any existing widget if present
+  container.innerHTML = '';
+
+  // Render Turnstile widget based on active site theme since auto mode doesn't seem to read the current theme handling properly.
+  if (window.turnstile) {
+    window.turnstile.render("#turnstile-container", {
+      sitekey: turnstileKey,
+      callback: (token: string) => {
+        formData.value.turnstileToken = token;
+      },
+      "error-callback": () => {
+        responseMessage.value = "Turnstile validation failed. Please try again.";
+      },
+      theme: isDarkMode.value ? "dark" : "light"
+    });
+  }
+}
+
 onMounted(() => {
+  isDarkMode.value = document.body.classList.contains('darkmode');
+
   const script = document.createElement("script");
   script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js";
   script.async = true;
   script.defer = true;
   document.head.appendChild(script);
 
   script.onload = () => {
-    if (window.turnstile) {
-      window.turnstile.render("#turnstile-container", {
-        sitekey: turnstileKey,
-        callback: (token: string) => {
-          formData.value.turnstileToken = token;
-        },
-        "error-callback": () => {
-          responseMessage.value = "Turnstile validation failed. Please try again.";
-        },
-      });
-    };
+    renderTurnstile();
   };
 });
 
+watch(isDarkMode, () => {
+  renderTurnstile();
+});
+
 function formatPhoneNumber(value: string): string {
   const cleaned = value.replace(/\D/g, ''); 
   const match = cleaned.match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
@@ -216,12 +237,13 @@ watch(formVisible, (newVal) => {
           aria-label="Message Input (Required)" 
           class="py-3 px-4 block w-full text-md rounded-lg border border-[var(--highlight-blue-200)] dark:border-[var(--highlight-blue-400)] bg-[var(--neutral-100)] dark:bg-[var(--highlight-blue-700)]"
         />
+        <p class="text-sm text-right">{{ formData.message.length }} / {{ messageMaxLength }}</p>
       </div>
 
       <div class="mt-3 flex">
-        <div class="ml-3 mb-3">
+        <div class="ml-3 mb-4">
           <p class="text-sm text-[var(--neutral-600)] dark:[var(--neutral-400)]">
-            By submitting this contact form, you acknowledge and agree to the collection of your personal information per our <a href="/privacy">privacy policy</a>.
+            By submitting this contact form, you acknowledge and agree to the collection of your information per our <a href="/privacy">privacy policy</a>.
           </p>
         </div>
       </div>

diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -1,8 +1,8 @@
 ---
-import ResponsiveToggle from './ResponsiveToggle.astro'
-import { DarkMode } from 'accessible-astro-components'
-import { Image } from 'astro:assets'
-import logo from '../assets/img/logo.svg'
+import ResponsiveToggle from './ResponsiveToggle.astro';
+import { DarkMode } from 'accessible-astro-components';
+import { Image } from 'astro:assets';
+import logo from '../assets/img/logo.svg';
 ---
 
 <div id="main-navigation" class="is-desktop py-8">