updated contact form logic
This commit is contained in:
becarta
252
public/test-contact-form.html
Normal file
252
public/test-contact-form.html
Normal file
@@ -0,0 +1,252 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Contact Form Test</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
button {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.success {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
}
|
||||
.error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
}
|
||||
.debug {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #ddd;
|
||||
padding: 15px;
|
||||
margin-top: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
#debug-log {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Contact Form Test</h1>
|
||||
|
||||
<div id="success-message" class="success">
|
||||
Your message has been sent successfully!
|
||||
</div>
|
||||
|
||||
<div id="error-message" class="error">
|
||||
There was an error sending your message. Please try again.
|
||||
</div>
|
||||
|
||||
<form id="contact-form">
|
||||
<input type="hidden" name="csrf_token" id="csrf_token" value="">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="message">Message:</label>
|
||||
<textarea id="message" name="message" rows="5" required></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input type="checkbox" id="disclaimer" name="disclaimer" required>
|
||||
I agree to the terms and conditions
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="submit">Send Message</button>
|
||||
</form>
|
||||
|
||||
<div class="debug">
|
||||
<h3>Debug Log</h3>
|
||||
<div id="debug-log"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Debug logging function
|
||||
function log(message) {
|
||||
const debugLog = document.getElementById('debug-log');
|
||||
const timestamp = new Date().toISOString();
|
||||
debugLog.innerHTML += `[${timestamp}] ${message}\n`;
|
||||
console.log(message);
|
||||
}
|
||||
|
||||
// Fetch CSRF token
|
||||
async function fetchCsrfToken() {
|
||||
log('Fetching CSRF token...');
|
||||
try {
|
||||
const response = await fetch('/api/contact?csrf=true');
|
||||
log(`CSRF response status: ${response.status}`);
|
||||
|
||||
if (!response.ok) {
|
||||
log(`CSRF request failed: ${response.statusText}`);
|
||||
return '';
|
||||
}
|
||||
|
||||
const text = await response.text();
|
||||
log(`CSRF response text: ${text}`);
|
||||
|
||||
try {
|
||||
const data = JSON.parse(text);
|
||||
log(`CSRF token received: ${data.csrfToken ? 'yes' : 'no'}`);
|
||||
return data.csrfToken;
|
||||
} catch (parseError) {
|
||||
log(`Error parsing CSRF response: ${parseError.message}`);
|
||||
return '';
|
||||
}
|
||||
} catch (error) {
|
||||
log(`Error fetching CSRF token: ${error.message}`);
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize form
|
||||
async function initForm() {
|
||||
log('Initializing form...');
|
||||
const csrfToken = await fetchCsrfToken();
|
||||
|
||||
if (csrfToken) {
|
||||
document.getElementById('csrf_token').value = csrfToken;
|
||||
log('CSRF token set in form');
|
||||
} else {
|
||||
log('Failed to get CSRF token');
|
||||
}
|
||||
|
||||
// Set default values for testing
|
||||
document.getElementById('name').value = 'Test User';
|
||||
document.getElementById('email').value = 'richard@bergsma.it';
|
||||
document.getElementById('message').value = 'This is a test message from the test-contact-form.html page. ' + new Date().toISOString();
|
||||
|
||||
log('Form initialized with test values');
|
||||
}
|
||||
|
||||
// Handle form submission
|
||||
async function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
log('Form submitted');
|
||||
|
||||
// Reset messages
|
||||
document.getElementById('success-message').style.display = 'none';
|
||||
document.getElementById('error-message').style.display = 'none';
|
||||
|
||||
// Get form data
|
||||
const form = document.getElementById('contact-form');
|
||||
const formData = new FormData(form);
|
||||
|
||||
// Log form data
|
||||
log('Form data:');
|
||||
for (const [key, value] of formData.entries()) {
|
||||
log(`${key}: ${value}`);
|
||||
}
|
||||
|
||||
// Add timestamp
|
||||
formData.append('timestamp', Date.now().toString());
|
||||
|
||||
try {
|
||||
log('Sending form data to /api/contact');
|
||||
const response = await fetch('/api/contact', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
log(`Response status: ${response.status}`);
|
||||
const text = await response.text();
|
||||
log(`Response text: ${text}`);
|
||||
|
||||
try {
|
||||
const result = JSON.parse(text);
|
||||
log(`Response parsed: ${JSON.stringify(result)}`);
|
||||
|
||||
if (result.success) {
|
||||
log('Form submission successful');
|
||||
document.getElementById('success-message').style.display = 'block';
|
||||
form.reset();
|
||||
|
||||
// Get a new CSRF token
|
||||
const newToken = await fetchCsrfToken();
|
||||
if (newToken) {
|
||||
document.getElementById('csrf_token').value = newToken;
|
||||
}
|
||||
} else {
|
||||
log(`Form submission failed: ${JSON.stringify(result.errors || {})}`);
|
||||
document.getElementById('error-message').style.display = 'block';
|
||||
|
||||
if (result.errors && result.errors.csrf) {
|
||||
log('CSRF token invalid, getting new token');
|
||||
const newToken = await fetchCsrfToken();
|
||||
if (newToken) {
|
||||
document.getElementById('csrf_token').value = newToken;
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (parseError) {
|
||||
log(`Error parsing response: ${parseError.message}`);
|
||||
document.getElementById('error-message').style.display = 'block';
|
||||
}
|
||||
} catch (error) {
|
||||
log(`Error submitting form: ${error.message}`);
|
||||
document.getElementById('error-message').style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
log('DOM loaded');
|
||||
initForm();
|
||||
|
||||
// Add form submit handler
|
||||
document.getElementById('contact-form').addEventListener('submit', handleSubmit);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user