Merge pull request #95 from huskynz/dev

HotFix contact form

astro.config.mjs

@@ -5,13 +5,14 @@ import tailwind from "@astrojs/tailwind";
 import solidJs from "@astrojs/solid-js";
 import netlify from "@astrojs/netlify";
 
+import react from "@astrojs/react";
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://www.husky.nz",
   output: "server",
   integrations: [mdx(), sitemap(), solidJs(), tailwind({
     applyBaseStyles: false
-  }),],
+  }), react()],
   adapter: netlify()
 });

astro.config.mjs.docker

@@ -5,14 +5,16 @@ import tailwind from "@astrojs/tailwind";
 import solidJs from "@astrojs/solid-js";
 import netlify from "@astrojs/netlify";
 import node from '@astrojs/node';
+import react from "@astrojs/react";
+
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://www.husky.nz",
   output: "server",
   integrations: [mdx(), sitemap(), solidJs(), tailwind({
     applyBaseStyles: false
-  }),],
+  }), react()],
     adapter: node({
     mode: 'standalone',
   }),

docker-compose.yml

@@ -1,13 +1,27 @@
-version: '3.8'
-
 services:
   website:
     image: ghcr.io/huskynz/10:${IMAGE_TAG}
     container_name: huskynz_msite
     labels:
       - "traefik.enable=true"
       - "traefik.http.routers.whoami.rule=Host(`localhost`)"
+    env_file: .env
 
+    #environment:
+    #  - GITHUB_TOKEN=${GITHUB_TOKEN}
+    #  - GITHUB_USERNAME=${GITHUB_USERNAME}
+      #- RESEND_API_KEY=${RESEND_API_KEY}
+      #- CONTACT_SEND_EMAIL=${CONTACT_SEND_EMAIL}
+      #- CONTACT_EMAIL=${CONTACT_EMAIL}
+      #- PUBLIC_TURNSTILE_SITE_KEY=${PUBLIC_TURNSTILE_SITE_KEY}
+      #- TURNSTILE_SECRET_KEY=${TURNSTILE_SECRET_KEY}
+      #- TWITCH_CHANNEL=${TWITCH_CHANNEL}
+      #- TWITCH_CLIENT_ID=${TWITCH_CLIENT_ID}
+      #- TWITCH_CLIENT_SECRET=${TWITCH_CLIENT_SECRET}
+      #- PRODUCTION_DOMAIN=${PRODUCTION_DOMAIN}
+      #- AZURE_STORAGE_ACCOUNT_NAME=${AZURE_STORAGE_ACCOUNT_NAME}
+      #- AZURE_STORAGE_ACCOUNT_KEY=${AZURE_STORAGE_ACCOUNT_KEY}
+      #- AZURE_STORAGE_CONTAINER_NAME=${AZURE_STORAGE_CONTAINER_NAME}
   reverse-proxy:
     image: traefik:v3.1
     command:
@@ -27,3 +41,5 @@ services:
       - /var/run/docker.sock:/var/run/docker.sock
       - /root/.docker/config.json:/config.json
     command: --interval 30
+
+

package.json

@@ -30,10 +30,11 @@
     "@formbricks/js": "^2.1.1",
     "@tailwindcss/typography": "^0.5.10",
     "@types/nodemailer": "^6.4.15",
-    "@types/react": "^18.3.4",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "astro": "^4.4.13",
     "astro-diagram": "^0.7.0",
+    "astro-useragent": "^4.0.2",
     "aws-sdk": "^2.1691.0",
     "clsx": "^2.1.0",
     "discord.js": "^14.16.3",

src/components/ContactForm.astro

@@ -14,49 +14,43 @@ const turnsiteSiteKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY;
       required
       class="mt-1 w-full rounded-lg border border-black/25 dark:border-white/25 bg-transparent p-2 text-black dark:text-white focus:ring-2 focus:ring-black/25 dark:focus:ring-white/25 blend"
     />
-    <div id="nameMessage" class="text-sm mt-1 hidden italic"></div>
   </div>
-  
+
   <div>
     <label for="email" class="block text-sm font-medium text-black dark:text-white">
       Email
     </label>
     <input
-      type="email" 
+      type="email"
       id="email"
       name="email"
       required
       class="mt-1 w-full rounded-lg border border-black/25 dark:border-white/25 bg-transparent p-2 text-black dark:text-white focus:ring-2 focus:ring-black/25 dark:focus:ring-white/25 blend"
     />
-    <div id="emailMessage" class="text-sm mt-1 hidden italic"></div>
   </div>
 
   <div>
     <label for="message" class="block text-sm font-medium text-black dark:text-white">
       Message
     </label>
     <textarea
-  id="message"
-  name="message"
-  required
-  maxlength="500"
-  class="mt-1 w-full h-[170px] resize-none rounded-lg border border-black/25 dark:border-white/25 bg-transparent p-2 text-black dark:text-white focus:ring-2 focus:ring-black/25 dark:focus:ring-white/25 blend"
-></textarea>
-    <div id="charCount" class="text-sm text-gray-500 dark:text-gray-400 mt-1">
-      500 characters remaining
-    </div>
+      id="message"
+      name="message"
+      rows="4"
+      required
+      class="mt-1 w-full rounded-lg border border-black/25 dark:border-white/25 bg-transparent p-2 text-black dark:text-white focus:ring-2 focus:ring-black/25 dark:focus:ring-white/25 blend"
+    ></textarea>
   </div>
 
   <!-- Turnstile Widget -->
   <div class="flex justify-center">
     <div
-      id="turnstile-widget"
       class="cf-turnstile"
       data-sitekey={turnsiteSiteKey}
       data-theme="auto"
     ></div>
   </div>
-  
+
   <button
     type="submit"
     class="w-full rounded-lg bg-black dark:bg-white text-white dark:text-black py-2 px-4 hover:opacity-75 blend transition-all"
@@ -73,7 +67,67 @@ const turnsiteSiteKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY;
 <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
 
 <script>
-  import { initializeContactForm } from '@components/contactutils';
-  const turnsiteSiteKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY;
-  initializeContactForm(turnsiteSiteKey);
+  const form = document.getElementById('contactForm') as HTMLFormElement;
+  const statusDiv = document.getElementById('formStatus') as HTMLDivElement;
+  const statusText = statusDiv.querySelector('p') as HTMLParagraphElement;
+
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+
+    // Get turnstile token
+    const turnstileResponse = document.querySelector<HTMLElement>('[name="cf-turnstile-response"]')?.getAttribute('value');
+
+    if (!turnstileResponse) {
+      statusDiv.classList.remove('hidden');
+      statusText.textContent = 'Please complete the captcha';
+      statusText.className = 'text-sm text-red-600 dark:text-red-400';
+      return;
+    }
+
+    // Show loading state
+    const submitButton = form.querySelector('button[type="submit"]') as HTMLButtonElement;
+    const originalButtonText = submitButton.textContent;
+    submitButton.textContent = 'Sending...';
+    submitButton.disabled = true;
+
+    const formData = new FormData(form);
+    const data = {
+      name: formData.get('name'),
+      email: formData.get('email'),
+      message: formData.get('message'),
+      turnstileToken: turnstileResponse
+    };
+
+    try {
+      const response = await fetch('/api/send-email', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      });
+
+      const result = await response.json();
+
+      if (response.ok) {
+        // Success
+        statusDiv.classList.remove('hidden');
+        statusText.textContent = 'Message sent successfully!';
+        statusText.className = 'text-sm text-green-600 dark:text-green-400';
+        form.reset();
+        // Reset turnstile
+        window.turnstile.reset();
+      } else {
+        // Error
+        throw new Error(result.error || 'Failed to send message');
+      }
+    } catch (error) {
+      statusDiv.classList.remove('hidden');
+      statusText.textContent = error.message;
+      statusText.className = 'text-sm text-red-600 dark:text-red-400';
+    } finally {
+      submitButton.textContent = originalButtonText;
+      submitButton.disabled = false;
+    }
+  });
 </script>

src/components/TwitchEmbed.astro

@@ -4,6 +4,8 @@ import fetch from 'node-fetch';
 const twitchChannel = import.meta.env.TWITCH_CHANNEL;
 const clientId = import.meta.env.TWITCH_CLIENT_ID;
 const clientSecret = import.meta.env.TWITCH_CLIENT_SECRET;
+const productionDomain = import.meta.env.PRODUCTION_DOMAIN;
+const controls = "false";
 
 // Fetch Twitch access token
 const getAccessToken = async () => {
@@ -77,7 +79,7 @@ if (accessToken) {
     <h1 class="text-2xl font-bold text-center mb-4 text-white">I'm Live Right Now Over On Twitch</h1> <!-- Added header -->
     <div class="w-full max-w-4xl">  
       <iframe
-        src={`https://player.twitch.tv/?channel=${twitchChannel}&parent=www.husky.nz&controls=false`}
+        src={`https://player.twitch.tv/?channel=${twitchChannel}&parent=${productionDomain}&controls=${controls}`}
         frameborder="0"
         allowfullscreen="true"
         scrolling="no"