508 lines
21 KiB
HTML
508 lines
21 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 Compose Form Test</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container mt-4">
|
|
<h1>Email Compose Form JavaScript Test</h1>
|
|
|
|
<!-- Mock form for testing JavaScript -->
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-envelope me-2"></i>
|
|
Compose Email
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="post" id="email-compose-form" action="/test/">
|
|
<input type="hidden" name="csrfmiddlewaretoken" value="test-token">
|
|
|
|
<!-- Subject Field -->
|
|
<div class="mb-3">
|
|
<label for="id_subject" class="form-label fw-bold">
|
|
Subject
|
|
</label>
|
|
<input type="text" class="form-control" id="id_subject" name="subject">
|
|
</div>
|
|
|
|
<!-- Recipients Field -->
|
|
<div class="mb-3">
|
|
<label class="form-label fw-bold">
|
|
Recipients
|
|
</label>
|
|
<div class="border rounded p-3 bg-light" style="max-height: 200px; overflow-y: auto;">
|
|
<div class="form-check mb-2">
|
|
<input type="checkbox" class="form-check-input" name="recipients" value="user1@example.com" id="recipient1">
|
|
<label class="form-check-label" for="recipient1">user1@example.com</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input type="checkbox" class="form-check-input" name="recipients" value="user2@example.com" id="recipient2">
|
|
<label class="form-check-label" for="recipient2">user2@example.com</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Message Field -->
|
|
<div class="mb-3">
|
|
<label for="id_message" class="form-label fw-bold">
|
|
Message
|
|
</label>
|
|
<textarea class="form-control" id="id_message" name="message" rows="5"></textarea>
|
|
</div>
|
|
|
|
<!-- Options Checkboxes -->
|
|
<div class="mb-4">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" name="include_candidate_info" id="id_include_candidate_info">
|
|
<label class="form-check-label" for="id_include_candidate_info">
|
|
Include candidate information
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" name="include_meeting_details" id="id_include_meeting_details">
|
|
<label class="form-check-label" for="id_include_meeting_details">
|
|
Include meeting details
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="text-muted small">
|
|
<i class="fas fa-info-circle me-1"></i>
|
|
Email will be sent to all selected recipients
|
|
</div>
|
|
<div>
|
|
<button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal">
|
|
<i class="fas fa-times me-1"></i>
|
|
Cancel
|
|
</button>
|
|
<button type="submit" class="btn btn-primary" id="send-email-btn">
|
|
<i class="fas fa-paper-plane me-1"></i>
|
|
Send Email
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading Overlay -->
|
|
<div id="email-loading-overlay" class="d-none">
|
|
<div class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
|
|
<div class="text-center">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
<div class="mt-2">
|
|
Sending email...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success/Error Messages Container -->
|
|
<div id="email-messages-container"></div>
|
|
</div>
|
|
|
|
<!-- Test Results -->
|
|
<div class="mt-4">
|
|
<h3>Test Results</h3>
|
|
<div id="test-results"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.card {
|
|
border: none;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.card-header {
|
|
border-radius: 8px 8px 0 0 !important;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: #00636e;
|
|
box-shadow: 0 0 0 0.2rem rgba(0,99,110,0.25);
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #00636e;
|
|
border-color: #00636e;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #004a53;
|
|
border-color: #004a53;
|
|
}
|
|
|
|
.form-check-input:checked {
|
|
background-color: #00636e;
|
|
border-color: #00636e;
|
|
}
|
|
|
|
.border {
|
|
border-color: #dee2e6 !important;
|
|
}
|
|
|
|
.bg-light {
|
|
background-color: #f8f9fa !important;
|
|
}
|
|
|
|
.text-danger {
|
|
color: #dc3545 !important;
|
|
}
|
|
|
|
.spinner-border {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
}
|
|
</style>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const form = document.getElementById('email-compose-form');
|
|
const sendBtn = document.getElementById('send-email-btn');
|
|
const loadingOverlay = document.getElementById('email-loading-overlay');
|
|
const messagesContainer = document.getElementById('email-messages-container');
|
|
const testResults = document.getElementById('test-results');
|
|
|
|
// Test results tracking
|
|
let tests = [];
|
|
|
|
function addTestResult(testName, passed, message) {
|
|
tests.push({ name: testName, passed, message });
|
|
updateTestResults();
|
|
}
|
|
|
|
function updateTestResults() {
|
|
const passedTests = tests.filter(t => t.passed).length;
|
|
const totalTests = tests.length;
|
|
|
|
testResults.innerHTML = `
|
|
<div class="alert alert-info">
|
|
<strong>Tests: ${passedTests}/${totalTests} passed</strong>
|
|
</div>
|
|
<ul class="list-group">
|
|
${tests.map(test => `
|
|
<li class="list-group-item ${test.passed ? 'list-group-item-success' : 'list-group-item-danger'}">
|
|
<i class="fas fa-${test.passed ? 'check' : 'times'} me-2"></i>
|
|
<strong>${test.name}:</strong> ${test.message}
|
|
</li>
|
|
`).join('')}
|
|
</ul>
|
|
`;
|
|
}
|
|
|
|
if (form) {
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
addTestResult('Form Submit Handler', true, 'Form submission intercepted successfully');
|
|
|
|
// Show loading state
|
|
if (sendBtn) {
|
|
sendBtn.disabled = true;
|
|
sendBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Sending...';
|
|
addTestResult('Loading State', true, 'Button loading state activated');
|
|
}
|
|
|
|
if (loadingOverlay) {
|
|
loadingOverlay.classList.remove('d-none');
|
|
addTestResult('Loading Overlay', true, 'Loading overlay displayed');
|
|
}
|
|
|
|
// Clear previous messages
|
|
if (messagesContainer) {
|
|
messagesContainer.innerHTML = '';
|
|
}
|
|
|
|
// Mock form submission
|
|
setTimeout(() => {
|
|
// Hide loading state
|
|
if (sendBtn) {
|
|
sendBtn.disabled = false;
|
|
sendBtn.innerHTML = '<i class="fas fa-paper-plane me-1"></i> Send Email';
|
|
}
|
|
|
|
if (loadingOverlay) {
|
|
loadingOverlay.classList.add('d-none');
|
|
}
|
|
|
|
// Show success message
|
|
showMessage('Email sent successfully!', 'success');
|
|
addTestResult('Success Message', true, 'Success message displayed');
|
|
}, 2000);
|
|
});
|
|
}
|
|
|
|
function showMessage(message, type) {
|
|
if (!messagesContainer) return;
|
|
|
|
const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
|
|
const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-triangle';
|
|
|
|
const messageHtml = `
|
|
<div class="alert ${alertClass} alert-dismissible fade show" role="alert">
|
|
<i class="fas ${icon} me-2"></i>
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
`;
|
|
|
|
messagesContainer.innerHTML = messageHtml;
|
|
|
|
// Auto-hide success messages after 5 seconds
|
|
if (type === 'success') {
|
|
setTimeout(() => {
|
|
const alert = messagesContainer.querySelector('.alert');
|
|
if (alert) {
|
|
const bsAlert = bootstrap.Alert(alert);
|
|
bsAlert.close();
|
|
addTestResult('Auto-hide Message', true, 'Message auto-hidden after 5 seconds');
|
|
}
|
|
}, 5000);
|
|
}
|
|
}
|
|
|
|
// Form validation
|
|
function validateForm() {
|
|
let isValid = true;
|
|
const subject = form.querySelector('#id_subject');
|
|
const message = form.querySelector('#id_message');
|
|
const recipients = form.querySelectorAll('input[name="recipients"]:checked');
|
|
|
|
// Clear previous validation states
|
|
form.querySelectorAll('.is-invalid').forEach(field => {
|
|
field.classList.remove('is-invalid');
|
|
});
|
|
form.querySelectorAll('.invalid-feedback').forEach(feedback => {
|
|
feedback.remove();
|
|
});
|
|
|
|
// Validate subject
|
|
if (!subject || !subject.value.trim()) {
|
|
showFieldError(subject, 'Subject is required');
|
|
isValid = false;
|
|
addTestResult('Subject Validation', false, 'Subject validation triggered - field empty');
|
|
} else {
|
|
addTestResult('Subject Validation', true, 'Subject validation passed');
|
|
}
|
|
|
|
// Validate message
|
|
if (!message || !message.value.trim()) {
|
|
showFieldError(message, 'Message is required');
|
|
isValid = false;
|
|
addTestResult('Message Validation', false, 'Message validation triggered - field empty');
|
|
} else {
|
|
addTestResult('Message Validation', true, 'Message validation passed');
|
|
}
|
|
|
|
// Validate recipients
|
|
if (recipients.length === 0) {
|
|
const recipientsContainer = form.querySelector('.border.rounded.p-3.bg-light');
|
|
if (recipientsContainer) {
|
|
recipientsContainer.classList.add('border-danger');
|
|
showFieldError(recipientsContainer, 'Please select at least one recipient');
|
|
}
|
|
isValid = false;
|
|
addTestResult('Recipients Validation', false, 'Recipients validation triggered - none selected');
|
|
} else {
|
|
addTestResult('Recipients Validation', true, `Recipients validation passed - ${recipients.length} selected`);
|
|
}
|
|
|
|
return isValid;
|
|
}
|
|
|
|
function showFieldError(field, message) {
|
|
if (!field) return;
|
|
|
|
field.classList.add('is-invalid');
|
|
|
|
const feedback = document.createElement('div');
|
|
feedback.className = 'invalid-feedback';
|
|
feedback.textContent = message;
|
|
|
|
if (field.classList.contains('border')) {
|
|
// For container elements (like recipients)
|
|
field.parentNode.appendChild(feedback);
|
|
} else {
|
|
// For form fields
|
|
field.parentNode.appendChild(feedback);
|
|
}
|
|
}
|
|
|
|
// Character counter for message field
|
|
function setupCharacterCounter() {
|
|
const messageField = form.querySelector('#id_message');
|
|
if (!messageField) return;
|
|
|
|
const counter = document.createElement('div');
|
|
counter.className = 'text-muted small mt-1';
|
|
counter.id = 'message-counter';
|
|
|
|
messageField.parentNode.appendChild(counter);
|
|
|
|
function updateCounter() {
|
|
const length = messageField.value.length;
|
|
const maxLength = 5000; // Adjust as needed
|
|
counter.textContent = `${length} / ${maxLength} characters`;
|
|
|
|
if (length > maxLength * 0.9) {
|
|
counter.classList.add('text-warning');
|
|
counter.classList.remove('text-muted');
|
|
} else {
|
|
counter.classList.remove('text-warning');
|
|
counter.classList.add('text-muted');
|
|
}
|
|
}
|
|
|
|
messageField.addEventListener('input', updateCounter);
|
|
updateCounter(); // Initial count
|
|
addTestResult('Character Counter', true, 'Character counter initialized');
|
|
}
|
|
|
|
// Auto-save functionality
|
|
let autoSaveTimer;
|
|
function setupAutoSave() {
|
|
const subject = form.querySelector('#id_subject');
|
|
const message = form.querySelector('#id_message');
|
|
|
|
if (!subject || !message) return;
|
|
|
|
function saveDraft() {
|
|
const draftData = {
|
|
subject: subject.value,
|
|
message: message.value,
|
|
recipients: Array.from(form.querySelectorAll('input[name="recipients"]:checked')).map(cb => cb.value),
|
|
include_candidate_info: form.querySelector('#id_include_candidate_info').checked,
|
|
include_meeting_details: form.querySelector('#id_include_meeting_details').checked
|
|
};
|
|
|
|
localStorage.setItem('email_draft_test', JSON.stringify(draftData));
|
|
addTestResult('Auto-save', true, 'Draft saved to localStorage');
|
|
}
|
|
|
|
function autoSave() {
|
|
clearTimeout(autoSaveTimer);
|
|
autoSaveTimer = setTimeout(saveDraft, 2000); // Save after 2 seconds of inactivity
|
|
}
|
|
|
|
[subject, message].forEach(field => {
|
|
field.addEventListener('input', autoSave);
|
|
});
|
|
|
|
form.addEventListener('change', autoSave);
|
|
addTestResult('Auto-save Setup', true, 'Auto-save functionality initialized');
|
|
}
|
|
|
|
function loadDraft() {
|
|
const draftData = localStorage.getItem('email_draft_test');
|
|
if (!draftData) return;
|
|
|
|
try {
|
|
const draft = JSON.parse(draftData);
|
|
|
|
const subject = form.querySelector('#id_subject');
|
|
const message = form.querySelector('#id_message');
|
|
|
|
if (subject && draft.subject) subject.value = draft.subject;
|
|
if (message && draft.message) message.value = draft.message;
|
|
|
|
// Restore recipients
|
|
if (draft.recipients) {
|
|
form.querySelectorAll('input[name="recipients"]').forEach(cb => {
|
|
cb.checked = draft.recipients.includes(cb.value);
|
|
});
|
|
}
|
|
|
|
// Restore checkboxes
|
|
if (draft.include_candidate_info) {
|
|
form.querySelector('#id_include_candidate_info').checked = draft.include_candidate_info;
|
|
}
|
|
if (draft.include_meeting_details) {
|
|
form.querySelector('#id_include_meeting_details').checked = draft.include_meeting_details;
|
|
}
|
|
|
|
addTestResult('Draft Loading', true, 'Draft loaded from localStorage');
|
|
showMessage('Draft restored from local storage', 'success');
|
|
} catch (e) {
|
|
console.error('Error loading draft:', e);
|
|
addTestResult('Draft Loading', false, 'Error loading draft: ' + e.message);
|
|
}
|
|
}
|
|
|
|
function clearDraft() {
|
|
localStorage.removeItem('email_draft_test');
|
|
}
|
|
|
|
// Initialize form enhancements
|
|
setupCharacterCounter();
|
|
setupAutoSave();
|
|
|
|
// Load draft on page load
|
|
setTimeout(loadDraft, 100);
|
|
|
|
// Clear draft on successful submission
|
|
const originalSubmitHandler = form.onsubmit;
|
|
form.addEventListener('submit', function(e) {
|
|
const isValid = validateForm();
|
|
if (!isValid) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
return false;
|
|
}
|
|
|
|
// Clear draft on successful submission
|
|
setTimeout(clearDraft, 2000);
|
|
});
|
|
|
|
// Add keyboard shortcuts
|
|
document.addEventListener('keydown', function(e) {
|
|
// Ctrl/Cmd + Enter to submit
|
|
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
|
|
const activeElement = document.activeElement;
|
|
if (activeElement && (activeElement.tagName === 'TEXTAREA' || activeElement.tagName === 'INPUT')) {
|
|
form.dispatchEvent(new Event('submit'));
|
|
addTestResult('Keyboard Shortcut', true, 'Ctrl+Enter shortcut triggered');
|
|
}
|
|
}
|
|
|
|
// Escape to cancel/close modal
|
|
if (e.key === 'Escape') {
|
|
addTestResult('Keyboard Shortcut', true, 'Escape key pressed');
|
|
}
|
|
});
|
|
|
|
// Test validation with empty form
|
|
setTimeout(() => {
|
|
addTestResult('Initial Validation Test', validateForm() === false, 'Empty form correctly rejected');
|
|
}, 500);
|
|
|
|
console.log('Email compose form initialized');
|
|
addTestResult('Initialization', true, 'Email compose form JavaScript initialized successfully');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|