Refactor contact API route to enhance captcha validation

- Added hCaptcha integration for client-side validation and backend verification.
- Implemented Nodemailer for contact form submissions via email.

app/api/contact/route.ts

@@ -0,0 +1,54 @@
+import {NextRequest, NextResponse} from 'next/server';
+
+const HCAPTCHA_SECRET = process.env.HCAPTCHA_SECRET ?? '';
+const SHARED_API_KEY = process.env.SHARED_API_KEY ?? '';
+
+export async function POST(req: NextRequest) {
+    try {
+        const body = await req.json();
+        const origin = req.headers.get("origin") || "http://localhost:3000";
+        const captchaToken = body.captcha;
+
+        if (!captchaToken) {
+            return NextResponse.json({success: false, error: 'Captcha is required'}, {status: 400});
+        }
+
+        // Step 1: Verify hCaptcha token with their API
+        const verifyResponse = await fetch('https://api.hcaptcha.com/siteverify', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+            body: new URLSearchParams({
+                secret: HCAPTCHA_SECRET,
+                response: captchaToken,
+            }),
+        });
+
+        const captchaResult = await verifyResponse.json();
+
+        if (!captchaResult.success) {
+            return NextResponse.json({success: false, error: 'Captcha verification failed'}, {status: 403});
+        }
+
+        // Step 2: Forward valid contact request to Spring Boot backend
+        const backendRes = await fetch('http://localhost:8080/api/contact', {
+            method: 'POST',
+            headers: {
+                "Origin": origin,
+                'Content-Type': 'application/json',
+                'X-Frontend-Key': SHARED_API_KEY,
+            },
+            body: JSON.stringify(body),
+        });
+
+        const backendText = await backendRes.text();
+
+        if (!backendRes.ok) {
+            return NextResponse.json({success: false, error: backendText}, {status: backendRes.status});
+        }
+
+        return NextResponse.json({success: true, message: backendText});
+    } catch (err: any) {
+        console.error('[ContactAPI] error:', err);
+        return NextResponse.json({success: false, error: err.message}, {status: 500});
+    }
+}

components/Contact/Section/ContactFormSection.tsx

@@ -1,99 +1,190 @@
 'use client';
 
-import React from "react";
+import React, { useState } from "react";
-import {motion} from "framer-motion";
+import { motion } from "framer-motion";
-import {useThemeColors} from "@/utils/useThemeColors";
+import { useThemeColors } from "@/utils/useThemeColors";
+import HCaptcha from "@hcaptcha/react-hcaptcha";
 
 const ContactFormSection = () => {
     const colors = useThemeColors();
 
+    const [form, setForm] = useState({
+        name: "",
+        email: "",
+        company: "",
+        phone: "",
+        website: "",
+        message: "",
+    });
+
+    const [captchaToken, setCaptchaToken] = useState("");
+    const [submitted, setSubmitted] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState("");
+
+    const isDev = process.env.NODE_ENV === "development";
+    const hCaptchaSiteKey = isDev
+        ? "10000000-ffff-ffff-ffff-000000000001" // hCaptcha test sitekey
+        : "ES_ff59a664dc764f92870bf2c7b4eab7c5";
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        setForm({ ...form, [e.target.name]: e.target.value });
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setLoading(true);
+        setError("");
+
+        if (!captchaToken) {
+            setError("Bitte löse das CAPTCHA, um fortzufahren.");
+            setLoading(false);
+            return;
+        }
+
+        try {
+            const res = await fetch("/api/contact", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ ...form, captcha: captchaToken }),
+            });
+
+            if (res.ok) {
+                setSubmitted(true);
+                setForm({ name: "", email: "", company: "", phone: "", website: "", message: "" });
+            } else {
+                const resJson = await res.json();
+                setError(resJson?.error || "Ein Fehler ist aufgetreten. Bitte versuche es später erneut.");
+            }
+        } catch (_err) {
+            setError("Serverfehler. Bitte versuche es später erneut.");
+        }
+
+        setLoading(false);
+    };
+
     return (
         <div className="w-full px-6 sm:px-12 py-20 text-left transition-theme">
             <motion.h2
                 className="text-2xl sm:text-3xl font-bold mb-2"
-                style={{color: colors.primaryText}}
+                style={{ color: colors.primaryText }}
-                initial={{opacity: 0, y: 20}}
+                initial={{ opacity: 0, y: 20 }}
-                whileInView={{opacity: 1, y: 0}}
+                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{once: true}}
+                viewport={{ once: true }}
-                transition={{duration: 0.5}}
+                transition={{ duration: 0.5 }}
             >
                 Schreib uns eine Nachricht
             </motion.h2>
 
             <motion.p
                 className="text-sm mb-8 max-w-xl"
-                style={{color: colors.secondaryText}}
+                style={{ color: colors.secondaryText }}
-                initial={{opacity: 0, y: 10}}
+                initial={{ opacity: 0, y: 10 }}
-                whileInView={{opacity: 1, y: 0}}
+                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{once: true}}
+                viewport={{ once: true }}
-                transition={{duration: 0.5, delay: 0.2}}
+                transition={{ duration: 0.5, delay: 0.2 }}
             >
                 Wir freuen uns über dein Interesse und melden uns schnellstmöglich bei dir zurück.
             </motion.p>
 
-            <form className="space-y-6">
+            {submitted ? (
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="text-green-600 font-semibold text-lg">✅ Deine Nachricht wurde erfolgreich gesendet!</div>
-                    {["Dein Name", "Deine E-Mail"].map((label, index) => (
+            ) : (
-                        <motion.div
+                <form className="space-y-6" onSubmit={handleSubmit}>
-                            key={index}
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                            initial={{opacity: 0, y: 10}}
+                        {[
-                            whileInView={{opacity: 1, y: 0}}
+                            { label: "Dein Name *", name: "name", type: "text", required: true, placeholder: "Max Mustermann" },
-                            viewport={{once: true}}
+                            { label: "Deine E-Mail *", name: "email", type: "email", required: true, placeholder: "max@example.com" },
-                            transition={{duration: 0.5, delay: index * 0.1}}
+                            { label: "Firmenname (optional)", name: "company", type: "text", required: false, placeholder: "Mustermann GmbH" },
-                        >
+                            { label: "Telefonnummer (optional)", name: "phone", type: "tel", required: false, placeholder: "+49 123 456789" },
-                            <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
+                            { label: "Webseite (optional)", name: "website", type: "url", required: false, placeholder: "https://..." },
-                                {label}
+                        ].map((field, index) => (
-                            </label>
+                            <motion.div
-                            <input
+                                key={field.name}
-                                type={index === 0 ? "text" : "email"}
+                                initial={{ opacity: 0, y: 10 }}
-                                placeholder={index === 0 ? "Max Mustermann" : "max@example.com"}
+                                whileInView={{ opacity: 1, y: 0 }}
-                                className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
+                                viewport={{ once: true }}
-                                style={{
+                                transition={{ duration: 0.5, delay: index * 0.1 }}
-                                    backgroundColor: colors.inputFieldBg,
+                            >
-                                    border: `1px solid ${colors.inputBorder}`,
+                                <label className="block font-semibold mb-1" style={{ color: colors.primaryText }}>
-                                    color: colors.primaryText,
+                                    {field.label}
-                                }}
+                                </label>
-                            />
+                                <input
-                        </motion.div>
+                                    type={field.type}
-                    ))}
+                                    name={field.name}
-                </div>
+                                    value={form[field.name as keyof typeof form]}
+                                    onChange={handleChange}
+                                    required={field.required}
+                                    placeholder={field.placeholder}
+                                    className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
+                                    style={{
+                                        backgroundColor: colors.inputFieldBg,
+                                        border: `1px solid ${colors.inputBorder}`,
+                                        color: colors.primaryText,
+                                    }}
+                                />
+                            </motion.div>
+                        ))}
+                    </div>
 
-                <motion.div
+                    <motion.div
-                    initial={{opacity: 0, y: 10}}
+                        initial={{ opacity: 0, y: 10 }}
-                    whileInView={{opacity: 1, y: 0}}
+                        whileInView={{ opacity: 1, y: 0 }}
-                    viewport={{once: true}}
+                        viewport={{ once: true }}
-                    transition={{duration: 0.5, delay: 0.3}}
+                        transition={{ duration: 0.5, delay: 0.6 }}
-                >
-                    <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
-                        Deine Nachricht
-                    </label>
-                    <textarea
-                        rows={4}
-                        placeholder="Worum geht es?"
-                        className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
-                        style={{
-                            backgroundColor: colors.inputFieldBg,
-                            border: `1px solid ${colors.inputBorder}`,
-                            color: colors.primaryText,
-                        }}
-                    />
-                </motion.div>
-
-                <motion.div
-                    className="pt-4 flex justify-end"
-                    initial={{opacity: 0, y: 10}}
-                    whileInView={{opacity: 1, y: 0}}
-                    viewport={{once: true}}
-                    transition={{duration: 0.5, delay: 0.4}}
-                >
-                    <button
-                        type="submit"
-                        className="px-6 py-3 bg-blue-600 text-white text-sm sm:text-base font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-all"
                     >
-                        📩 Nachricht senden
+                        <label className="block font-semibold mb-1" style={{ color: colors.primaryText }}>
-                    </button>
+                            Deine Nachricht *
-                </motion.div>
+                        </label>
-            </form>
+                        <textarea
+                            name="message"
+                            rows={4}
+                            required
+                            value={form.message}
+                            onChange={handleChange}
+                            placeholder="Worum geht es?"
+                            className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
+                            style={{
+                                backgroundColor: colors.inputFieldBg,
+                                border: `1px solid ${colors.inputBorder}`,
+                                color: colors.primaryText,
+                            }}
+                        />
+                    </motion.div>
+
+                    <motion.div
+                        className="pt-2"
+                        initial={{ opacity: 0, y: 10 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        viewport={{ once: true }}
+                        transition={{ duration: 0.5, delay: 0.7 }}
+                    >
+                        <HCaptcha sitekey={hCaptchaSiteKey} onVerify={setCaptchaToken} />
+                    </motion.div>
+
+                    {error && (
+                        <div className="text-red-600 font-medium pt-2">
+                            ❌ {error}
+                        </div>
+                    )}
+
+                    <motion.div
+                        className="pt-4 flex justify-end"
+                        initial={{ opacity: 0, y: 10 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        viewport={{ once: true }}
+                        transition={{ duration: 0.5, delay: 0.8 }}
+                    >
+                        <button
+                            type="submit"
+                            disabled={loading}
+                            className="px-6 py-3 bg-blue-600 text-white text-sm sm:text-base font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-all disabled:opacity-50"
+                        >
+                            {loading ? "Sende..." : "📩 Nachricht senden"}
+                        </button>
+                    </motion.div>
+                </form>
+            )}
         </div>
     );
 };

eslint.config.mjs

@@ -1,16 +1,27 @@
-import { dirname } from "path";
+import {dirname} from "path";
-import { fileURLToPath } from "url";
+import {fileURLToPath} from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import {FlatCompat} from "@eslint/eslintrc";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
 const compat = new FlatCompat({
-  baseDirectory: __dirname,
+    baseDirectory: __dirname,
 });
 
 const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
+    ...compat.extends("next/core-web-vitals", "next/typescript"),
+    ...compat.config({
+        rules: {
+            '@typescript-eslint/no-unused-vars': [
+                'warn',
+                {
+                    argsIgnorePattern: '^_',
+                    varsIgnorePattern: '^_'
+                }
+            ]
+        }
+    })
 ];
 
 export default eslintConfig;

package-lock.json

@@ -13,6 +13,7 @@
         "framer-motion": "^12.6.5",
         "js-cookie": "^3.0.5",
         "next": "15.1.7",
+        "nodemailer": "^6.10.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-icons": "^5.4.0",
@@ -20,10 +21,12 @@
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
+        "@hcaptcha/react-hcaptcha": "^1.12.0",
         "@tailwindcss/postcss": "^4.0.17",
         "@types/aos": "^3.0.7",
         "@types/js-cookie": "^3.0.6",
         "@types/node": "^20",
+        "@types/nodemailer": "^6.4.17",
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "autoprefixer": "^10.4.21",
@@ -47,6 +50,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
+      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.0.tgz",
@@ -218,6 +234,28 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@hcaptcha/loader": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@hcaptcha/loader/-/loader-2.0.0.tgz",
+      "integrity": "sha512-fFQH6ApU/zCCl6Y1bnbsxsp1Er/lKX+qlgljrpWDeFcenpEtoP68hExlKSXECospzKLeSWcr06cbTjlR/x3IJA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@hcaptcha/react-hcaptcha": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/@hcaptcha/react-hcaptcha/-/react-hcaptcha-1.12.0.tgz",
+      "integrity": "sha512-QiHnQQ52k8SJJSHkc3cq4TlYzag7oPd4f5ZqnjVSe4fJDSlZaOQFtu5F5AYisVslwaitdDELPVLRsRJxiiI0Aw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.9",
+        "@hcaptcha/loader": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1268,6 +1306,16 @@
         "undici-types": "~6.19.2"
       }
     },
+    "node_modules/@types/nodemailer": {
+      "version": "6.4.17",
+      "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-6.4.17.tgz",
+      "integrity": "sha512-I9CCaIp6DTldEg7vyUTZi8+9Vo0hi1/T8gv3C89yk1rSAAzoKQ8H8ki/jBYJSFoH/BisgLP8tkZMlQ91CIquww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/react": {
       "version": "19.0.12",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.12.tgz",
@@ -5010,6 +5058,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/nodemailer": {
+      "version": "6.10.1",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.10.1.tgz",
+      "integrity": "sha512-Z+iLaBGVaSjbIzQ4pX6XV41HrooLsQ10ZWPUehGmuantvzWoDVBnmsdUcOIDM1t+yPor5pDhVlDESgOMEGxhHA==",
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -5643,6 +5700,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",

package.json

@@ -14,6 +14,7 @@
     "framer-motion": "^12.6.5",
     "js-cookie": "^3.0.5",
     "next": "15.1.7",
+    "nodemailer": "^6.10.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-icons": "^5.4.0",
@@ -21,10 +22,12 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@hcaptcha/react-hcaptcha": "^1.12.0",
     "@tailwindcss/postcss": "^4.0.17",
     "@types/aos": "^3.0.7",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
+    "@types/nodemailer": "^6.4.17",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "autoprefixer": "^10.4.21",