Integrate hCaptcha and email handling into contact form

- Added hCaptcha integration for client-side validation and backend verification. - Implemented Nodemailer for contact form submissions via email.
2025-04-21 02:07:19 +02:00
parent 21e83d6ee7
commit 3ecdde1455
4 changed files with 286 additions and 118 deletions
--- a/app/api/contact/route.ts
+++ b/app/api/contact/route.ts
@@ -0,0 +1,63 @@
+import {NextRequest, NextResponse} from "next/server";
+import nodemailer from "nodemailer";
+
+export async function POST(req: NextRequest) {
+    const {captcha, ...data} = await req.json();
+    const {name, email, company, phone, website, message} = data;
+
+    const isDev = process.env.NODE_ENV === "development";
+    const hCaptchaSecret = isDev
+        ? "0x0000000000000000000000000000000000000000" // hCaptcha test secret
+        : "ES_ff59a664dc764f92870bf2c7b4eab7c5";
+
+    // ✅ hCaptcha verification
+    const captchaRes = await fetch("https://hcaptcha.com/siteverify", {
+        method: "POST",
+        headers: {"Content-Type": "application/x-www-form-urlencoded"},
+        body: `response=${captcha}&secret=${hCaptchaSecret}`,
+    });
+
+    const captchaResult = await captchaRes.json();
+    if (!captchaResult.success) {
+        return NextResponse.json({success: false, error: "CAPTCHA-Verifizierung fehlgeschlagen."}, {status: 403});
+    }
+
+    // ✅ Send mail with Ethereal (for dev) or real SMTP later
+    const testAccount = await nodemailer.createTestAccount();
+    const transporter = nodemailer.createTransport({
+        host: testAccount.smtp.host,
+        port: testAccount.smtp.port,
+        secure: testAccount.smtp.secure,
+        auth: {
+            user: testAccount.user,
+            pass: testAccount.pass,
+        },
+    });
+
+    const mailToMe = {
+        from: email,
+        to: "thatsaphorn@outlook.de",
+        subject: "Neue Nachricht vom Kontaktformular",
+        html: `
+            <p><strong>Name:</strong> ${name}</p>
+            <p><strong>E-Mail:</strong> ${email}</p>
+            <p><strong>Firma:</strong> ${company || "—"}</p>
+            <p><strong>Telefon:</strong> ${phone || "—"}</p>
+            <p><strong>Webseite:</strong> ${website || "—"}</p>
+            <p><strong>Nachricht:</strong></p>
+            <p>${message}</p>
+        `,
+    };
+
+    try {
+        const info = await transporter.sendMail(mailToMe);
+
+        return NextResponse.json({
+            success: true,
+            previewUrl: nodemailer.getTestMessageUrl(info),
+        });
+    } catch (err) {
+        console.error("Mail send error:", err);
+        return NextResponse.json({success: false, error: "Mailversand fehlgeschlagen."}, {status: 500});
+    }
+}
--- a/components/Contact/Section/ContactFormSection.tsx
+++ b/components/Contact/Section/ContactFormSection.tsx
@@ -1,12 +1,68 @@
 'use client';

-import React from "react";
+import React, {useState} from "react";
 import {motion} from "framer-motion";
 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
@@ -31,21 +87,93 @@ const ContactFormSection = () => {
                Wir freuen uns über dein Interesse und melden uns schnellstmöglich bei dir zurück.
            </motion.p>

-            <form className="space-y-6">
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {submitted ? (
+                <div className="text-green-600 font-semibold text-lg">✅ Deine Nachricht wurde erfolgreich
+                    gesendet!</div>
+            ) : (
+                <form className="space-y-6" onSubmit={handleSubmit}>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        {[
+                            {
+                                label: "Dein Name *",
+                                name: "name",
+                                type: "text",
+                                required: true,
+                                placeholder: "Max Mustermann"
+                            },
+                            {
+                                label: "Deine E-Mail *",
+                                name: "email",
+                                type: "email",
+                                required: true,
+                                placeholder: "max@example.com"
+                            },
+                            {
+                                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: "Webseite (optional)",
+                                name: "website",
+                                type: "url",
+                                required: false,
+                                placeholder: "https://..."
+                            },
+                        ].map((field, index) => (
+                            <motion.div
+                                key={field.name}
+                                initial={{opacity: 0, y: 10}}
+                                whileInView={{opacity: 1, y: 0}}
+                                viewport={{once: true}}
+                                transition={{duration: 0.5, delay: index * 0.1}}
+                            >
+                                <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
+                                    {field.label}
+                                </label>
+                                <input
+                                    type={field.type}
+                                    name={field.name}
+                                    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
                        initial={{opacity: 0, y: 10}}
                        whileInView={{opacity: 1, y: 0}}
                        viewport={{once: true}}
-                        transition={{duration: 0.5, delay: 0.1}}
+                        transition={{duration: 0.5, delay: 0.6}}
                    >
                        <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
-                            Dein Name *
+                            Deine Nachricht *
                        </label>
-                        <input
-                            type="text"
+                        <textarea
+                            name="message"
+                            rows={4}
                            required
-                            placeholder="Max Mustermann"
+                            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,
@@ -56,128 +184,38 @@ const ContactFormSection = () => {
                    </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.2}}
+                        transition={{duration: 0.5, delay: 0.7}}
                    >
-                        <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
-                            Deine E-Mail *
-                        </label>
-                        <input
-                            type="email"
-                            required
-                            placeholder="max@example.com"
-                            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,
-                            }}
-                        />
+                        <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.3}}
+                        transition={{duration: 0.5, delay: 0.8}}
                    >
-                        <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
-                            Firmenname (optional)
-                        </label>
-                        <input
-                            type="text"
-                            placeholder="Mustermann GmbH"
-                            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,
-                            }}
-                        />
+                        <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>
-
-                    <motion.div
-                        initial={{opacity: 0, y: 10}}
-                        whileInView={{opacity: 1, y: 0}}
-                        viewport={{once: true}}
-                        transition={{duration: 0.5, delay: 0.4}}
-                    >
-                        <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
-                            Telefonnummer (optional)
-                        </label>
-                        <input
-                            type="tel"
-                            placeholder="+49 123 456789"
-                            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
-                        initial={{opacity: 0, y: 10}}
-                        whileInView={{opacity: 1, y: 0}}
-                        viewport={{once: true}}
-                        transition={{duration: 0.5, delay: 0.5}}
-                    >
-                        <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
-                            Webseite (optional)
-                        </label>
-                        <input
-                            type="url"
-                            placeholder="https://deinewebseite.de"
-                            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
-                    initial={{opacity: 0, y: 10}}
-                    whileInView={{opacity: 1, y: 0}}
-                    viewport={{once: true}}
-                    transition={{duration: 0.5, delay: 0.6}}
-                >
-                    <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
-                        Deine Nachricht *
-                    </label>
-                    <textarea
-                        rows={4}
-                        required
-                        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.7}}
-                >
-                    <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
-                    </button>
-                </motion.div>
-            </form>
+                </form>
+            )}
        </div>
    );
 };
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,15 +20,18 @@
      },
      "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",
        "eslint": "^9",
        "eslint-config-next": "15.1.7",
+        "nodemailer": "^6.10.1",
        "postcss": "^8.5.3",
        "tailwindcss": "^3.4.17",
        "typescript": "^5"
@@ -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,16 @@
      "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==",
+      "dev": true,
+      "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 +5701,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",
--- a/package.json
+++ b/package.json
@@ -21,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",