Peter123/reservierungssystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reservierungssystem: E-Mail-Feld & Bild-Captcha hinzugefuegt

Browse Source 
Aenderungen:
- E-Mail-Feld im Reservierungs-Formular hinzugefuegt (Pflichtfeld)
- Math-Captcha durch Bild-Captcha (4 Zeichen) ersetzt
- E-Mail-Validierung im Backend
- Captcha-Validierung fuer Reservierungen
- Pillow zu Dockerfile hinzugefuegt
This commit is contained in:
Peter
2026-05-16 13:29:25 +00:00
parent f26d02573e
commit ea90a3c9e3
6 changed files with 137 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/index.html
+47 -18
View File
@@ -74,6 +74,15 @@
.btn-secondary:hover { background: var(--bg); }
.btn-icon {
padding: 0.25rem 0.5rem;
font-size: 1.2rem;
background: transparent;
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
}
/* Login Modal */
.modal {
display: none;
@@ -198,26 +207,34 @@
color: var(--text-light);
}
/* Captcha */
/* Bild-Captcha */
.captcha-box {
background: var(--bg);
padding: 1rem;
padding: 1.5rem;
border-radius: 8px;
margin-bottom: 1rem;
margin-bottom: 1.5rem;
text-align: center;
}
.captcha-question {
font-size: 1.5rem;
font-weight: 600;
color: var(--primary);
margin-bottom: 0.5rem;
.captcha-image {
border-radius: 8px;
margin-bottom: 1rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.captcha-row {
display: flex;
gap: 0.5rem;
justify-content: center;
align-items: center;
}
.captcha-input {
width: 120px;
width: 140px;
text-align: center;
font-size: 1.25rem;
letter-spacing: 0.2em;
text-transform: uppercase;
}
/* Guest View Restrictions */
@@ -302,31 +319,39 @@
<div id="bookingSection" style="display: none;">
<h2 style="margin: 2rem 0 1rem;">Tisch reservieren</h2>
<!-- Bild-Captcha -->
<div class="captcha-box">
<div class="captcha-question" id="captchaQuestion">Lade Captcha...</div>
<input type="number" class="captcha-input" id="captchaAnswer" placeholder="?" required>
<img id="captchaImage" class="captcha-image" src="" alt="Captcha" width="180" height="60">
<div class="captcha-row">
<input type="text" class="captcha-input" id="captchaAnswer" placeholder="CODE" maxlength="4" required>
<button type="button" class="btn-icon" onclick="loadCaptcha()" title="Neues Captcha">🔄</button>
</div>
<input type="hidden" id="captchaToken">
</div>
<form id="bookingForm" onsubmit="handleBooking(event)">
<div class="form-group">
<label>Name</label>
<label>Name *</label>
<input type="text" id="bookingName" required placeholder="Max Mustermann">
</div>
<div class="form-group">
<label>E-Mail *</label>
<input type="email" id="bookingEmail" required placeholder="max@beispiel.de">
</div>
<div class="form-group">
<label>Telefon</label>
<input type="tel" id="bookingPhone" placeholder="+49 123 456789">
</div>
<div class="form-group">
<label>Datum</label>
<label>Datum *</label>
<input type="date" id="bookingDate" required>
</div>
<div class="form-group">
<label>Zeit</label>
<label>Zeit *</label>
<input type="time" id="bookingTime" required>
</div>
<div class="form-group">
<label>Personen</label>
<label>Personen *</label>
<input type="number" id="bookingGuests" min="1" max="20" value="2" required>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%">Reservierung anfragen</button>
@@ -401,15 +426,17 @@
document.getElementById('bookingSection').scrollIntoView({ behavior: 'smooth' });
}
// Captcha
// Bild-Captcha laden
async function loadCaptcha() {
try {
const res = await fetch('/api/captcha');
const data = await res.json();
document.getElementById('captchaQuestion').textContent = data.question;
document.getElementById('captchaImage').src = data.image;
document.getElementById('captchaToken').value = data.token;
document.getElementById('captchaAnswer').value = '';
} catch (e) {
document.getElementById('captchaQuestion').textContent = 'Captcha nicht verfügbar';
console.error('Captcha Fehler:', e);
document.getElementById('captchaImage').alt = 'Captcha nicht verfuegbar';
}
}
@@ -458,10 +485,12 @@
const data = {
name: document.getElementById('bookingName').value,
email: document.getElementById('bookingEmail').value,
phone: document.getElementById('bookingPhone').value,
date: document.getElementById('bookingDate').value,
time_from: document.getElementById('bookingTime').value,
guests: parseInt(document.getElementById('bookingGuests').value),
room_id: selectedRoom,
captcha_token: captchaToken,
captcha_answer: captchaAnswer
};