ragusa-it/ragusaitweb
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

fix: updated contact information in imprint & /contact page

Browse Source
This commit is contained in:
Melvin Ragusa
2026-01-24 10:47:40 +01:00
parent 516f29f312
commit 77fd62447c
3 changed files with 77 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/pages/Contact.tsx
View File

@@ -1,10 +1,10 @@
import { useState, type FormEvent } from 'react';
import { motion } from 'motion/react';
import emailjs from '@emailjs/browser';
import { useTranslation } from '../i18n';
import { config } from '../config';
import { Button, Input, Textarea } from '../components/ui';
import styles from './Contact.module.css';
import { useState, type FormEvent } from "react";
import { motion } from "motion/react";
import emailjs from "@emailjs/browser";
import { useTranslation } from "../i18n";
import { config } from "../config";
import { Button, Input, Textarea } from "../components/ui";
import styles from "./Contact.module.css";
interface FormData {
name: string;
@@ -23,34 +23,36 @@ interface FormErrors {
export function Contact() {
const { t } = useTranslation();
const [formData, setFormData] = useState<FormData>({
name: '',
email: '',
subject: '',
message: '',
name: "",
email: "",
subject: "",
message: "",
});
const [errors, setErrors] = useState<FormErrors>({});
const [isSubmitting, setIsSubmitting] = useState(false);
const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');
const [submitStatus, setSubmitStatus] = useState<
"idle" | "success" | "error"
>("idle");
const validateForm = (): boolean => {
const newErrors: FormErrors = {};
if (!formData.name.trim()) {
newErrors.name = 'Required';
newErrors.name = "Required";
}
if (!formData.email.trim()) {
newErrors.email = 'Required';
newErrors.email = "Required";
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
newErrors.email = 'Invalid email';
newErrors.email = "Invalid email";
}
if (!formData.subject.trim()) {
newErrors.subject = 'Required';
newErrors.subject = "Required";
}
if (!formData.message.trim()) {
newErrors.message = 'Required';
newErrors.message = "Required";
}
setErrors(newErrors);
@@ -63,7 +65,7 @@ export function Contact() {
if (!validateForm()) return;
setIsSubmitting(true);
setSubmitStatus('idle');
setSubmitStatus("idle");
try {
const templateParams = {
@@ -79,7 +81,7 @@ export function Contact() {
config.emailJs.serviceId,
config.emailJs.templateIdAdmin,
templateParams,
{ publicKey: config.emailJs.publicKey }
{ publicKey: config.emailJs.publicKey },
);
// Send Auto-reply to User
@@ -87,14 +89,14 @@ export function Contact() {
config.emailJs.serviceId,
config.emailJs.templateIdUser,
templateParams,
{ publicKey: config.emailJs.publicKey }
{ publicKey: config.emailJs.publicKey },
);
setSubmitStatus('success');
setFormData({ name: '', email: '', subject: '', message: '' });
setSubmitStatus("success");
setFormData({ name: "", email: "", subject: "", message: "" });
} catch (error) {
console.error('EmailJS Error:', error);
setSubmitStatus('error');
console.error("EmailJS Error:", error);
setSubmitStatus("error");
} finally {
setIsSubmitting(false);
}
@@ -141,7 +143,7 @@ export function Contact() {
label={t.contact.form.name}
placeholder={t.contact.form.namePlaceholder}
value={formData.name}
onChange={(e) => handleChange('name', e.target.value)}
onChange={(e) => handleChange("name", e.target.value)}
error={errors.name}
/>
@@ -150,7 +152,7 @@ export function Contact() {
type="email"
placeholder={t.contact.form.emailPlaceholder}
value={formData.email}
onChange={(e) => handleChange('email', e.target.value)}
onChange={(e) => handleChange("email", e.target.value)}
error={errors.email}
/>
@@ -158,7 +160,7 @@ export function Contact() {
label={t.contact.form.subject}
placeholder={t.contact.form.subjectPlaceholder}
value={formData.subject}
onChange={(e) => handleChange('subject', e.target.value)}
onChange={(e) => handleChange("subject", e.target.value)}
error={errors.subject}
/>
@@ -166,7 +168,7 @@ export function Contact() {
label={t.contact.form.message}
placeholder={t.contact.form.messagePlaceholder}
value={formData.message}
onChange={(e) => handleChange('message', e.target.value)}
onChange={(e) => handleChange("message", e.target.value)}
error={errors.message}
rows={6}
/>
@@ -178,10 +180,12 @@ export function Contact() {
isLoading={isSubmitting}
disabled={isSubmitting}
>
{isSubmitting ? t.contact.form.sending : t.contact.form.submit}
{isSubmitting
? t.contact.form.sending
: t.contact.form.submit}
</Button>
{submitStatus === 'success' && (
{submitStatus === "success" && (
<motion.p
className={styles.success}
initial={{ opacity: 0, y: 10 }}
@@ -191,7 +195,7 @@ export function Contact() {
</motion.p>
)}
{submitStatus === 'error' && (
{submitStatus === "error" && (
<motion.p
className={styles.error}
initial={{ opacity: 0, y: 10 }}
@@ -215,14 +219,21 @@ export function Contact() {
<div className={styles.infoList}>
<div className={styles.infoItem}>
<div className={styles.infoIcon}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
>
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
<polyline points="22,6 12,13 2,6" />
</svg>
</div>
<div>
<h3>{t.contact.info.email}</h3>
<a href="mailto:info@ragusa-it.dev">info@ragusa-it.dev</a>
<a href="mailto:kontakt@ragusa-it.dev">
kontakt@ragusa-it.dev
</a>
</div>
</div>