Gitlab-Migration/rheinsw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove try-catch block

Browse Source
This commit is contained in:
Thatsaphorn
2025-04-28 08:32:38 +02:00
parent 4ebd3c57eb
commit f35724be35
1 changed files with 83 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
frontend/components/Contact/Section/ContactFormSection.tsx
View File

@@ -1,8 +1,8 @@
'use client'; 'use client';
import React, { useState } 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"; import HCaptcha from "@hcaptcha/react-hcaptcha";
const ContactFormSection = () => { const ContactFormSection = () => {
@@ -28,7 +28,7 @@ const ContactFormSection = () => {
: "ES_ff59a664dc764f92870bf2c7b4eab7c5"; : "ES_ff59a664dc764f92870bf2c7b4eab7c5";
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setForm({ ...form, [e.target.name]: e.target.value }); setForm({...form, [e.target.name]: e.target.value});
}; };
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
@@ -42,23 +42,21 @@ const ContactFormSection = () => {
return; return;
} }
try {
const res = await fetch("/api/contact", { const res = await fetch("/api/contact", {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, headers: {"Content-Type": "application/json"},
body: JSON.stringify({ ...form, captcha: captchaToken }), body: JSON.stringify({...form, captcha: captchaToken}),
}); });
if (res.ok) { if (res.ok) {
setSubmitted(true); setSubmitted(true);
setForm({ name: "", email: "", company: "", phone: "", website: "", message: "" }); setForm({name: "", email: "", company: "", phone: "", website: "", message: ""});
} else { } else {
const resJson = await res.json(); const resJson = await res.json();
setError(resJson?.error || "Ein Fehler ist aufgetreten. Bitte versuche es später erneut."); 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); setLoading(false);
}; };
@@ -67,46 +65,77 @@ const ContactFormSection = () => {
<div className="w-full px-6 sm:px-12 py-20 text-left transition-theme"> <div className="w-full px-6 sm:px-12 py-20 text-left transition-theme">
<motion.h2 <motion.h2
className="text-2xl sm:text-3xl font-bold mb-2" 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 Schreib uns eine Nachricht
</motion.h2> </motion.h2>
<motion.p <motion.p
className="text-sm mb-8 max-w-xl" 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. Wir freuen uns über dein Interesse und melden uns schnellstmöglich bei dir zurück.
</motion.p> </motion.p>
{submitted ? ( {submitted ? (
<div className="text-green-600 font-semibold text-lg">✅ Deine Nachricht wurde erfolgreich gesendet!</div> <div className="text-green-600 font-semibold text-lg">✅ Deine Nachricht wurde erfolgreich
gesendet!</div>
) : ( ) : (
<form className="space-y-6" onSubmit={handleSubmit}> <form className="space-y-6" onSubmit={handleSubmit}>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <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: "Dein Name *",
{ label: "Firmenname (optional)", name: "company", type: "text", required: false, placeholder: "Mustermann GmbH" }, name: "name",
{ label: "Telefonnummer (optional)", name: "phone", type: "tel", required: false, placeholder: "+49 123 456789" }, type: "text",
{ label: "Webseite (optional)", name: "website", type: "url", required: false, placeholder: "https://..." }, 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) => ( ].map((field, index) => (
<motion.div <motion.div
key={field.name} key={field.name}
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: index * 0.1 }} transition={{duration: 0.5, delay: index * 0.1}}
> >
<label className="block font-semibold mb-1" style={{ color: colors.primaryText }}> <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
{field.label} {field.label}
</label> </label>
<input <input
@@ -128,12 +157,12 @@ const ContactFormSection = () => {
</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.6 }} transition={{duration: 0.5, delay: 0.6}}
> >
<label className="block font-semibold mb-1" style={{ color: colors.primaryText }}> <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
Deine Nachricht * Deine Nachricht *
</label> </label>
<textarea <textarea
@@ -154,12 +183,12 @@ const ContactFormSection = () => {
<motion.div <motion.div
className="pt-2" className="pt-2"
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.7 }} transition={{duration: 0.5, delay: 0.7}}
> >
<HCaptcha sitekey={hCaptchaSiteKey} onVerify={setCaptchaToken} /> <HCaptcha sitekey={hCaptchaSiteKey} onVerify={setCaptchaToken}/>
</motion.div> </motion.div>
{error && ( {error && (
@@ -170,10 +199,10 @@ const ContactFormSection = () => {
<motion.div <motion.div
className="pt-4 flex justify-end" className="pt-4 flex justify-end"
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.8 }} transition={{duration: 0.5, delay: 0.8}}
> >
<button <button
type="submit" type="submit"