Fixed external email receivers

app/beach/BeachRegistrationForm.tsx

@@ -3,7 +3,7 @@
 'use client';
 
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
-import React, { useRef, useActionState, useEffect } from 'react';
+import React, { useRef, useActionState, useEffect, useState } from 'react';
 import { FaUser, FaEnvelope, FaPhone, FaUsers, FaTrophy, FaCheckCircle, FaExclamationTriangle } from "react-icons/fa";
 import { submitRegistration } from './actions';
 import { SiteConfig } from '../lib/config';
@@ -12,6 +12,7 @@ export default function BeachRegistrationForm({ config, turnstileSiteKey }: { co
     const [state, formAction, isPending] = useActionState(submitRegistration, null);
     const formRef = useRef<HTMLFormElement>(null);
     const turnstileRef = useRef<TurnstileInstance>(null);
+    const [token, setToken] = useState<string | null>(null);
 
     const classesData = Array.isArray(config.beachPage?.classes)
         ? config.beachPage.classes
@@ -22,13 +23,13 @@ export default function BeachRegistrationForm({ config, turnstileSiteKey }: { co
         ];
 
     useEffect(() => {
-        // Rensa endast vid lyckad inskickning
         if (state?.success) {
             formRef.current?.reset();
             turnstileRef.current?.reset();
+            setToken(null);
         } else if (state?.success === false) {
-            // Återställ Turnstile så de kan försöka igen vid fel
             turnstileRef.current?.reset();
+            setToken(null);
         }
     }, [state]);
 
@@ -131,7 +132,15 @@ export default function BeachRegistrationForm({ config, turnstileSiteKey }: { co
 
                     <input type="text" name="website" className="hidden" tabIndex={-1} />
 
-                    <div className="flex justify-center py-2"><Turnstile ref={turnstileRef} siteKey={turnstileSiteKey} options={{ theme: 'light' }} /></div>
+                    <div className="flex justify-center py-2">
+                        <Turnstile
+                            ref={turnstileRef}
+                            siteKey={turnstileSiteKey}
+                            onSuccess={(token) => setToken(token)}
+                            onExpire={() => setToken(null)}
+                            options={{ theme: 'light' }}
+                        />
+                    </div>
 
                     {state && (
                         <div className={`flex items-center gap-3 p-5 rounded-2xl font-bold transition-all ${state.success ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
@@ -142,7 +151,7 @@ export default function BeachRegistrationForm({ config, turnstileSiteKey }: { co
 
                     <button
                         type="submit"
-                        disabled={isPending}
+                        disabled={isPending || !token}
                         className="w-full py-5 bg-[#39979f] text-white rounded-2xl font-bold text-xl uppercase tracking-wide shadow-xl hover:bg-[#fdb84b] hover:text-[#39979f] transition-all active:scale-[0.98] disabled:bg-gray-300 disabled:text-gray-500"
                     >
                         {isPending ? 'Skickar...' : 'Skicka anmälan'}

app/beach/actions.ts

@@ -41,7 +41,7 @@ export async function submitRegistration(prevState: unknown, formData: FormData)
             headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
             body: new URLSearchParams({
                 secret: secretKey,
-                response: turnstileToken?.toString() || '',
+                response: String(turnstileToken || ''),
             }),
         });
 
@@ -52,7 +52,7 @@ export async function submitRegistration(prevState: unknown, formData: FormData)
             return {
                 success: false,
                 message: 'Säkerhetsverifieringen misslyckades. Ladda om sidan och försök igen.',
-                values: rawData // Returnerar värdena så användaren slipper skriva om dem
+                values: rawData
             };
         }
     } catch (error) {
@@ -75,10 +75,16 @@ export async function submitRegistration(prevState: unknown, formData: FormData)
 
     // 5. Nodemailer setup
     const transporter = nodemailer.createTransport({
-        host: process.env.SMTP_HOST || 'localhost',
-        port: 25,
+        host: process.env.SMTP_HOST,
+        port: 587,
         secure: false,
-        tls: { rejectUnauthorized: false }
+        auth: {
+            user: process.env.SMTP_USER,
+            pass: process.env.SMTP_PASS,
+        },
+        tls: {
+            rejectUnauthorized: false
+        }
     });
 
     try {
@@ -95,7 +101,7 @@ export async function submitRegistration(prevState: unknown, formData: FormData)
 
         // Mail till klubben
         await transporter.sendMail({
-            from: `"Beach-anmälan: ${rawData.name}" <no-reply@lerbergetsvolleyboll.se>`,
+            from: `"Beach-anmälan: ${rawData.name}" <${process.env.SMTP_USER}>`,
             to: 'beach@lerbergetsvolleyboll.se',
             replyTo: rawData.email,
             subject: `Anmälan: ${rawData.team}`,
@@ -143,7 +149,7 @@ export async function submitRegistration(prevState: unknown, formData: FormData)
 
         // Bekräftelse till användaren
         await transporter.sendMail({
-            from: `"LVS" <no-reply@lerbergetsvolleyboll.se>`,
+            from: `"LVS" <${process.env.SMTP_USER}>`,
             to: rawData.email,
             replyTo: `"LVS Beach" <beach@lerbergetsvolleyboll.se>`,
             subject: `Vi har tagit emot din anmälan för ${rawData.team}`,

app/components/Header.tsx

@@ -12,7 +12,7 @@ export default function Header() {
                         src={logo}
                         loading="eager"
                         alt="Lerbergets Volleybollsällskap"
-                        className="max-h-24 min-h-16 my-4 md:max-h-32 md:min-h-24 md:my-6 mx-auto block transition-all duration-500 ease-out group-hover:scale-105 group-active:scale-95"
+                        className="w-auto max-h-24 min-h-16 my-4 md:max-h-32 md:min-h-24 md:my-6 mx-auto block transition-all duration-500 ease-out group-hover:scale-105 group-active:scale-95"
                     />
                 </Link>
             </div>