44107c0734
Some checks failed
Build and publish / build (push) Failing after 19s
Source moved verbatim from mp/shop/ on 2026-04-29; mp was the first concrete adapter consuming the libreshop toolkit. Builds and publishes git.librete.ch/libreshop/shop on every main / v* push via the standard .gitea/workflows/build.yml shared across libreshop components.
113 lines
3.3 KiB
Vue
113 lines
3.3 KiB
Vue
<template>
|
|
<form @submit.prevent="handleSubmit" class="space-y-6">
|
|
<div>
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name *</label>
|
|
<input
|
|
id="name"
|
|
v-model="form.name"
|
|
type="text"
|
|
required
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
|
|
placeholder="Ihr Name"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">E-Mail *</label>
|
|
<input
|
|
id="email"
|
|
v-model="form.email"
|
|
type="email"
|
|
required
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
|
|
placeholder="ihre@email.de"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Betreff</label>
|
|
<input
|
|
id="subject"
|
|
v-model="form.subject"
|
|
type="text"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
|
|
placeholder="Betreff Ihrer Nachricht"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Nachricht *</label>
|
|
<textarea
|
|
id="message"
|
|
v-model="form.message"
|
|
required
|
|
rows="5"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent resize-none"
|
|
placeholder="Ihre Nachricht an uns..."
|
|
></textarea>
|
|
</div>
|
|
|
|
<!-- Honeypot field for spam protection -->
|
|
<div class="hidden" aria-hidden="true">
|
|
<input v-model="form.honeypot" type="text" name="website" tabindex="-1" autocomplete="off" />
|
|
</div>
|
|
|
|
<div v-if="status === 'success'" class="p-4 bg-green-50 text-green-800 rounded-lg">Vielen Dank für Ihre Nachricht! Wir werden uns so schnell wie möglich bei Ihnen melden.</div>
|
|
|
|
<div v-if="status === 'error'" class="p-4 bg-red-50 text-red-800 rounded-lg">Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut oder kontaktieren Sie uns direkt per E-Mail.</div>
|
|
|
|
<button type="submit" :disabled="isSubmitting" class="w-full sm:w-auto px-8 py-3 bg-gray-900 text-white font-semibold rounded-full hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
|
|
<span v-if="isSubmitting">Wird gesendet...</span>
|
|
<span v-else>Nachricht senden</span>
|
|
</button>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const form = reactive({
|
|
name: "",
|
|
email: "",
|
|
subject: "",
|
|
message: "",
|
|
honeypot: "", // spam protection
|
|
});
|
|
|
|
const isSubmitting = ref(false);
|
|
const status = ref<"idle" | "success" | "error">("idle");
|
|
|
|
async function handleSubmit() {
|
|
// Check honeypot
|
|
if (form.honeypot) {
|
|
status.value = "success"; // Fake success for bots
|
|
return;
|
|
}
|
|
|
|
isSubmitting.value = true;
|
|
status.value = "idle";
|
|
|
|
try {
|
|
await $fetch("/api/contact", {
|
|
method: "POST",
|
|
body: {
|
|
name: form.name,
|
|
email: form.email,
|
|
subject: form.subject || "Kontaktanfrage über Website",
|
|
message: form.message,
|
|
},
|
|
});
|
|
|
|
status.value = "success";
|
|
// Reset form
|
|
form.name = "";
|
|
form.email = "";
|
|
form.subject = "";
|
|
form.message = "";
|
|
} catch (error) {
|
|
console.error("Contact form error:", error);
|
|
status.value = "error";
|
|
} finally {
|
|
isSubmitting.value = false;
|
|
}
|
|
}
|
|
</script>
|