285 lines
8.3 KiB
HTML
285 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Email Testing Interface - Alberta Influence Campaign</title>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
<style>
|
|
.test-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.test-section {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.test-controls {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.test-controls button {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: #6c757d;
|
|
color: white;
|
|
}
|
|
|
|
.btn-success {
|
|
background-color: #28a745;
|
|
color: white;
|
|
}
|
|
|
|
.btn-warning {
|
|
background-color: #ffc107;
|
|
color: #212529;
|
|
}
|
|
|
|
.test-controls button:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.test-controls button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.email-preview {
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
padding: 20px;
|
|
margin-top: 20px;
|
|
background: white;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.email-preview.empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #6c757d;
|
|
font-style: italic;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group textarea {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-group textarea {
|
|
resize: vertical;
|
|
min-height: 100px;
|
|
}
|
|
|
|
.logs-section {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.log-entry {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.log-entry.test-mode {
|
|
border-left: 4px solid #ffc107;
|
|
}
|
|
|
|
.log-entry.failed {
|
|
border-left: 4px solid #dc3545;
|
|
}
|
|
|
|
.log-entry.sent {
|
|
border-left: 4px solid #28a745;
|
|
}
|
|
|
|
.log-meta {
|
|
font-size: 12px;
|
|
color: #6c757d;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: inline-block;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.status-sent {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.status-failed {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
|
|
.status-test {
|
|
background-color: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
padding: 20px;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.error-message {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.success-message {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin: 10px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<header style="text-align: center; margin-bottom: 30px;">
|
|
<h1>Email Testing Interface</h1>
|
|
<p>Test and preview emails before sending to elected officials</p>
|
|
<div id="auth-status" style="margin-top: 10px;"></div>
|
|
</header>
|
|
|
|
<!-- Quick Test Section -->
|
|
<div class="test-section">
|
|
<h2>Quick Test</h2>
|
|
<p>Send a test email to yourself to verify email configuration</p>
|
|
<div class="test-controls">
|
|
<button id="quick-test-btn" class="btn-primary">Send Quick Test Email</button>
|
|
<button id="smtp-test-btn" class="btn-secondary">Test SMTP Connection</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email Composition & Preview Section -->
|
|
<div class="test-section">
|
|
<h2>Email Preview & Test</h2>
|
|
<form id="email-test-form">
|
|
<div class="form-group">
|
|
<label for="test-recipient">Test Recipient Email:</label>
|
|
<input type="email" id="test-recipient" name="recipientEmail"
|
|
placeholder="Enter email address for testing">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="test-subject">Subject:</label>
|
|
<input type="text" id="test-subject" name="subject"
|
|
placeholder="Enter email subject" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="test-message">Message:</label>
|
|
<textarea id="test-message" name="message"
|
|
placeholder="Enter your message to elected officials..." required></textarea>
|
|
</div>
|
|
|
|
<div class="test-controls">
|
|
<button type="button" id="preview-btn" class="btn-secondary">Preview Email</button>
|
|
<button type="button" id="send-test-btn" class="btn-primary">Send Test Email</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div id="email-preview" class="email-preview empty">
|
|
Click "Preview Email" to see how your email will look
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email Logs Section -->
|
|
<div class="test-section">
|
|
<h2>Email Logs</h2>
|
|
<div class="test-controls">
|
|
<button id="refresh-logs-btn" class="btn-secondary">Refresh Logs</button>
|
|
<button id="filter-test-btn" class="btn-warning">Show Test Emails Only</button>
|
|
<button id="filter-all-btn" class="btn-success">Show All Emails</button>
|
|
</div>
|
|
<div id="email-logs" class="logs-section">
|
|
<div class="loading">Loading email logs...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Mode Status -->
|
|
<div class="test-section">
|
|
<h2>Current Configuration</h2>
|
|
<div id="config-status">
|
|
<div class="loading">Loading configuration...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success/Error Messages -->
|
|
<div id="message-container"></div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="js/auth.js"></script>
|
|
<script src="js/api-client.js"></script>
|
|
<script src="js/email-testing.js"></script>
|
|
|
|
<script>
|
|
// Initialize the email testing interface
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Check authentication
|
|
const authManager = new AuthManager();
|
|
authManager.checkAuthStatus().then(isAuthenticated => {
|
|
if (!isAuthenticated) {
|
|
window.location.href = '/login.html?redirect=/email-test.html';
|
|
return;
|
|
}
|
|
|
|
// Initialize email testing
|
|
const emailTest = new EmailTesting();
|
|
emailTest.init();
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |