rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feat: Kontaktformular im Impressum + /api/contact Endpoint ohne Auth (SW by-v986)

Browse source
This commit is contained in:
rene 2026-05-15 16:46:37 +02:00
parent 0f09f5a8dd
commit 3fae57a0e2
5 changed files with 158 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

104
backend/static/js/pages/impressum.js
View file

@ -24,11 +24,58 @@ window.Page_impressum = (() => {
<section style="margin-bottom:var(--space-6)">
<h2 style="font-size:var(--text-base);font-weight:var(--weight-semibold);
color:var(--c-text);margin:0 0 var(--space-2)">Kontakt</h2>
<p style="font-size:var(--text-sm);color:var(--c-text-secondary);line-height:1.7;margin:0">
<p style="font-size:var(--text-sm);color:var(--c-text-secondary);line-height:1.7;margin:0 0 var(--space-4)">
E-Mail: <a href="mailto:hallo@banyaro.app"
style="color:var(--c-primary)">hallo@banyaro.app</a><br>
Wir antworten in der Regel innerhalb von 24 Stunden.
Oder nutze das Formular — wir antworten in der Regel innerhalb von 24 Stunden.
</p>
<form id="contact-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
<div>
<label style="display:block;font-size:var(--text-xs);font-weight:600;margin-bottom:4px;color:var(--c-text)">Name *</label>
<input id="cf-name" type="text" required maxlength="100"
placeholder="Dein Name"
style="width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
border:1.5px solid var(--c-border);background:var(--c-surface);
color:var(--c-text);font-size:var(--text-sm);box-sizing:border-box">
</div>
<div>
<label style="display:block;font-size:var(--text-xs);font-weight:600;margin-bottom:4px;color:var(--c-text)">E-Mail *</label>
<input id="cf-email" type="email" required maxlength="200"
placeholder="deine@email.de"
style="width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
border:1.5px solid var(--c-border);background:var(--c-surface);
color:var(--c-text);font-size:var(--text-sm);box-sizing:border-box">
</div>
</div>
<div>
<label style="display:block;font-size:var(--text-xs);font-weight:600;margin-bottom:4px;color:var(--c-text)">Betreff *</label>
<input id="cf-subject" type="text" required maxlength="150"
placeholder="Worum geht es?"
style="width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
border:1.5px solid var(--c-border);background:var(--c-surface);
color:var(--c-text);font-size:var(--text-sm);box-sizing:border-box">
</div>
<div>
<label style="display:block;font-size:var(--text-xs);font-weight:600;margin-bottom:4px;color:var(--c-text)">Nachricht *</label>
<textarea id="cf-message" required maxlength="3000" rows="5"
placeholder="Deine Nachricht…"
style="width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
border:1.5px solid var(--c-border);background:var(--c-surface);
color:var(--c-text);font-size:var(--text-sm);resize:vertical;
font-family:inherit;box-sizing:border-box"></textarea>
</div>
<div id="cf-status" style="display:none;padding:var(--space-2) var(--space-3);
border-radius:var(--radius-md);font-size:var(--text-sm)"></div>
<button id="cf-submit" type="submit"
style="align-self:flex-start;padding:var(--space-2) var(--space-5);
border-radius:var(--radius-full);border:none;cursor:pointer;
background:var(--c-primary);color:#fff;font-size:var(--text-sm);
font-weight:600">
Nachricht senden
</button>
</form>
</section>
<section style="margin-bottom:var(--space-6)">
@ -72,7 +119,58 @@ window.Page_impressum = (() => {
`;
}
function _initContactForm(container) {
const form = container.querySelector('#contact-form');
const statusEl = container.querySelector('#cf-status');
const submitBtn = container.querySelector('#cf-submit');
if (!form) return;
form.addEventListener('submit', async e => {
e.preventDefault();
const name = container.querySelector('#cf-name').value.trim();
const email = container.querySelector('#cf-email').value.trim();
const subject = container.querySelector('#cf-subject').value.trim();
const message = container.querySelector('#cf-message').value.trim();
submitBtn.disabled = true;
submitBtn.textContent = 'Wird gesendet…';
statusEl.style.display = 'none';
try {
const res = await fetch('/api/contact', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, email, subject, message }),
});
if (!res.ok) {
const err = await res.json().catch(() => ({}));
throw new Error(err.detail || 'Fehler beim Senden.');
}
statusEl.style.display = 'block';
statusEl.style.background = 'var(--c-success-bg, #f0fdf4)';
statusEl.style.color = 'var(--c-success, #16a34a)';
statusEl.textContent = '✓ Nachricht gesendet — wir melden uns bald!';
form.reset();
} catch (err) {
statusEl.style.display = 'block';
statusEl.style.background = '#fef2f2';
statusEl.style.color = '#dc2626';
statusEl.textContent = err.message || 'Fehler beim Senden. Bitte versuche es später erneut.';
submitBtn.disabled = false;
submitBtn.textContent = 'Nachricht senden';
}
});
}
const _origInit = init;
function refresh() {}
return { init, refresh };
return {
init(container) {
_origInit(container);
_initContactForm(container);
},
refresh
};
})();