${escapeHtml(response.response_text)}
${userCommentHtml}
${screenshotHtml}
`;
// Add event listener for upvote button
const upvoteBtn = card.querySelector('.upvote-btn');
upvoteBtn.addEventListener('click', function() {
toggleUpvote(response.id, this);
});
// Add event listener for verify button if present
const verifyBtn = card.querySelector('.verify-btn');
if (verifyBtn) {
verifyBtn.addEventListener('click', function() {
handleVerifyClick(response.id, this.dataset.verificationToken, this.dataset.repEmail);
});
}
// Add event listener for screenshot image if present
const screenshotImg = card.querySelector('.screenshot-image');
if (screenshotImg) {
screenshotImg.addEventListener('click', function() {
viewImage(this.dataset.imageUrl);
});
}
return card;
}
// Toggle upvote
async function toggleUpvote(responseId, button) {
const isUpvoted = button.classList.contains('upvoted');
const url = `/api/responses/${responseId}/upvote`;
try {
const response = await fetch(url, {
method: isUpvoted ? 'DELETE' : 'POST',
headers: {
'Content-Type': 'application/json'
}
});
const data = await response.json();
if (data.success) {
// Update button state
button.classList.toggle('upvoted');
button.querySelector('.upvote-count').textContent = data.upvoteCount;
// Reload stats
loadResponseStats();
} else {
showError(data.error || 'Failed to update upvote');
}
} catch (error) {
console.error('Error toggling upvote:', error);
showError('Failed to update upvote');
}
}
// Load more responses
function loadMoreResponses() {
currentOffset += LIMIT;
loadResponses(false);
}
// Open submit modal
function openSubmitModal() {
console.log('openSubmitModal called');
const modal = document.getElementById('submit-modal');
if (modal) {
modal.style.display = 'block';
console.log('Modal displayed');
} else {
console.error('Modal element not found');
}
}
// Close submit modal
function closeSubmitModal() {
document.getElementById('submit-modal').style.display = 'none';
document.getElementById('submit-response-form').reset();
// Reset postal code lookup
document.getElementById('rep-select-group').style.display = 'none';
document.getElementById('rep-select').innerHTML = '';
loadedRepresentatives = [];
// Reset hidden fields
document.getElementById('representative-email').value = '';
// Reset verification checkbox
const verificationCheckbox = document.getElementById('send-verification');
verificationCheckbox.disabled = false;
verificationCheckbox.checked = false;
}
// Handle response submission
async function handleSubmitResponse(e) {
e.preventDefault();
const formData = new FormData(e.target);
// Note: Both send_verification checkbox and representative_email hidden field
// are already included in FormData from the form
// send_verification will be 'on' if checked, undefined if not checked
// representative_email will be populated by handleRepresentativeSelect()
// Get verification status for UI feedback
const sendVerification = document.getElementById('send-verification').checked;
const repEmail = document.getElementById('representative-email').value;
try {
const response = await fetch(`/api/campaigns/${currentCampaignSlug}/responses`, {
method: 'POST',
body: formData
});
const data = await response.json();
if (data.success) {
let message = data.message || 'Response submitted successfully! It will appear after moderation.';
if (sendVerification && repEmail) {
message += ' A verification email has been sent to the representative.';
}
showSuccess(message);
closeSubmitModal();
// Don't reload responses since submission is pending approval
} else {
showError(data.error || 'Failed to submit response');
}
} catch (error) {
console.error('Error submitting response:', error);
showError('Failed to submit response');
}
}
// Handle verify button click
async function handleVerifyClick(responseId, verificationToken, representativeEmail) {
// Mask email to show only first 3 characters and domain
// e.g., "john.doe@example.com" becomes "joh***@example.com"
const maskEmail = (email) => {
const [localPart, domain] = email.split('@');
if (localPart.length <= 3) {
return `${localPart}***@${domain}`;
}
return `${localPart.substring(0, 3)}***@${domain}`;
};
const maskedEmail = maskEmail(representativeEmail);
// Step 1: Prompt the representative to verify their identity by entering their email
const emailPrompt = prompt(
'To send a verification email, please enter the representative\'s email address.\n\n' +
'This email must match the representative email on file for this response.\n\n' +
`Email on file: ${maskedEmail}`,
''
);
// User cancelled
if (emailPrompt === null) {
return;
}
// Trim and lowercase for comparison
const enteredEmail = emailPrompt.trim().toLowerCase();
const storedEmail = representativeEmail.trim().toLowerCase();
// Check if email is empty
if (!enteredEmail) {
showError('Email address is required to send verification.');
return;
}
// Validate email format
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(enteredEmail)) {
showError('Please enter a valid email address.');
return;
}
// Check if email matches
if (enteredEmail !== storedEmail) {
showError(
'The email you entered does not match the representative email on file.\n\n' +
`Expected: ${representativeEmail}\n` +
`You entered: ${emailPrompt.trim()}\n\n` +
'Verification email cannot be sent.'
);
return;
}
// Step 2: Email matches - confirm sending verification email
const confirmSend = confirm(
'Email verified! Ready to send verification email.\n\n' +
`A verification email will be sent to: ${representativeEmail}\n\n` +
'The representative will receive an email with a link to verify this response as authentic.\n\n' +
'Do you want to send the verification email?'
);
if (!confirmSend) {
return;
}
// Make request to resend verification email
try {
const response = await fetch(`/api/responses/${responseId}/resend-verification`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
});
const data = await response.json();
if (response.ok && data.success) {
showSuccess(
'Verification email sent successfully!\n\n' +
`An email has been sent to ${representativeEmail} with a verification link.\n\n` +
'The representative must click the link in the email to complete verification.'
);
} else {
showError(data.error || 'Failed to send verification email. Please try again.');
}
} catch (error) {
console.error('Error sending verification email:', error);
showError('An error occurred while sending the verification email. Please try again.');
}
}
// View image in modal/new tab
function viewImage(url) {
window.open(url, '_blank');
}
// Utility functions
function showLoading(show) {
document.getElementById('loading').style.display = show ? 'block' : 'none';
}
function showEmptyState() {
document.getElementById('empty-state').style.display = 'block';
document.getElementById('responses-container').innerHTML = '';
document.getElementById('load-more-container').style.display = 'none';
}
function showError(message) {
// Simple alert for now - could integrate with existing error display system
alert('Error: ' + message);
}
function showSuccess(message) {
// Simple alert for now - could integrate with existing success display system
alert(message);
}
function escapeHtml(text) {
if (!text) return '';
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// Close modal when clicking outside
window.onclick = function(event) {
const modal = document.getElementById('submit-modal');
if (event.target === modal) {
closeSubmitModal();
}
};