407 lines
17 KiB
HTML
407 lines
17 KiB
HTML
{% load i18n %}
|
|
{{ form.media }}
|
|
|
|
<div class="w-full max-w-2xl mx-auto">
|
|
<!-- Messages -->
|
|
{% if messages %}
|
|
<div class="space-y-2 mb-4" role="alert" aria-live="polite">
|
|
{% for message in messages %}
|
|
<div class="alert {% if message.tags == 'error' %}bg-red-50 border-red-200 text-red-800{% elif message.tags == 'success' %}bg-green-50 border-green-200 text-green-800{% elif message.tags == 'warning' %}bg-yellow-50 border-yellow-200 text-yellow-800{% else %}bg-blue-50 border-blue-200 text-blue-800{% endif %} border rounded-lg px-4 py-3 flex items-start justify-between gap-2">
|
|
<span class="flex-1 text-sm">{{ message }}</span>
|
|
<button type="button"
|
|
class="text-gray-400 hover:text-gray-600 p-1 shrink-0 touch-target"
|
|
onclick="this.parentElement.remove()"
|
|
aria-label="{% trans 'Dismiss' %}">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Form Card -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="p-6">
|
|
<form hx-boost="true" method="post" id="email-compose-form" action="{% url 'compose_application_email' job.slug %}"
|
|
hx-include="#application-form"
|
|
hx-push-url="false"
|
|
hx-swap="outerHTML"
|
|
hx-on::after-request="closeEmailModal()"
|
|
class="space-y-6">
|
|
{% csrf_token %}
|
|
|
|
<!-- Recipients Field -->
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "To" %}
|
|
</label>
|
|
<div class="border-2 border-gray-300 rounded-lg p-4 bg-gray-50 max-h-48 overflow-y-auto">
|
|
<!-- Hidden inputs for all recipients -->
|
|
{% for choice in form.to %}
|
|
<input type="hidden" name="{{ form.to.name }}" value="{{ choice.data.value }}">
|
|
{% endfor %}
|
|
|
|
<!-- Show first recipient only -->
|
|
{% for choice in form.to|slice:":1" %}
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<div class="w-4 h-4 rounded border-2 border-temple-red bg-temple-red flex items-center justify-center">
|
|
<i data-lucide="check" class="w-3 h-3 text-white"></i>
|
|
</div>
|
|
<span class="text-sm text-gray-700">{{ choice.choice_label }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<!-- Summary of remaining recipients -->
|
|
{% if form.to|length > 1 %}
|
|
<div class="flex items-center gap-2 text-gray-600 text-sm mt-2 pt-2 border-t border-gray-200">
|
|
<i data-lucide="info" class="w-4 h-4 text-temple-red"></i>
|
|
{% with remaining=form.to|length|add:"-1" %}
|
|
{% blocktrans count total=remaining %}
|
|
And {{ total }} other recipient
|
|
{% plural %}
|
|
And {{ total }} other recipients
|
|
{% endblocktrans %}
|
|
{% endwith %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if form.to.errors %}
|
|
<div class="text-red-600 text-sm mt-2">
|
|
{% for error in form.to.errors %}
|
|
<span class="block">{{ error }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Subject Field -->
|
|
<div>
|
|
<label for="{{ form.subject.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Subject" %}
|
|
</label>
|
|
<div class="relative">
|
|
<input type="text"
|
|
name="{{ form.subject.name }}"
|
|
id="{{ form.subject.id_for_label }}"
|
|
class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-300 focus:border-temple-red focus:ring-2 focus:ring-temple-red/20 focus:outline-none transition text-gray-900 placeholder-gray-400 text-sm"
|
|
placeholder="{% trans 'Enter email subject...' %}"
|
|
value="{{ form.subject.value|default:'' }}"
|
|
required>
|
|
{% if form.subject.errors %}
|
|
<div class="text-red-600 text-sm mt-2">
|
|
{% for error in form.subject.errors %}
|
|
<span class="block">{{ error }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Message Field -->
|
|
<div>
|
|
<label for="{{ form.message.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{% trans "Message" %}
|
|
</label>
|
|
<div class="relative">
|
|
<textarea
|
|
name="{{ form.message.name }}"
|
|
id="{{ form.message.id_for_label }}"
|
|
rows="8"
|
|
class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-300 focus:border-temple-red focus:ring-2 focus:ring-temple-red/20 focus:outline-none transition text-gray-900 placeholder-gray-400 text-sm resize-y"
|
|
placeholder="{% trans 'Write your message here...' %}"
|
|
required>{{ form.message.value|default:'' }}</textarea>
|
|
{% if form.message.errors %}
|
|
<div class="text-red-600 text-sm mt-2">
|
|
{% for error in form.message.errors %}
|
|
<span class="block">{{ error }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 pt-4 border-t border-gray-200">
|
|
<div class="flex items-center gap-2 text-gray-600 text-sm">
|
|
<i data-lucide="info" class="w-4 h-4 text-temple-red"></i>
|
|
{% trans "Email will be sent to all selected recipients" %}
|
|
</div>
|
|
<div class="flex items-center gap-3 w-full sm:w-auto">
|
|
<button type="button"
|
|
class="flex-1 sm:flex-none flex items-center justify-center gap-2 px-6 py-2.5 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 hover:border-gray-400 transition font-medium"
|
|
onclick="closeEmailModal()">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
{% trans "Cancel" %}
|
|
</button>
|
|
<button type="submit"
|
|
class="flex-1 sm:flex-none flex items-center justify-center gap-2 px-6 py-2.5 rounded-lg bg-temple-red text-white hover:bg-red-700 transition font-medium shadow-sm"
|
|
id="send-email-btn">
|
|
<i data-lucide="send" class="w-4 h-4"></i>
|
|
{% trans "Send Email" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading Overlay -->
|
|
<div id="email-loading-overlay" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center">
|
|
<div class="bg-white rounded-xl shadow-lg p-8 max-w-sm w-full mx-4">
|
|
<div class="flex flex-col items-center gap-4">
|
|
<div class="w-12 h-12 rounded-full border-4 border-temple-red border-t-transparent animate-spin" role="status">
|
|
<span class="sr-only">{% trans "Loading..." %}</span>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-lg font-semibold text-gray-800">{% trans "Sending email..." %}</p>
|
|
<p class="text-sm text-gray-600 mt-1">{% trans "Please wait..." %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success/Error Messages Container -->
|
|
<div id="email-messages-container" class="fixed bottom-4 right-4 z-50 space-y-2 max-w-md"></div>
|
|
</div>
|
|
|
|
|
|
<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');
|
|
|
|
// Initialize Lucide icons
|
|
lucide.createIcons();
|
|
|
|
if (form) {
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Show loading state
|
|
if (sendBtn) {
|
|
sendBtn.disabled = true;
|
|
sendBtn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> {% trans "Sending..." %}';
|
|
lucide.createIcons();
|
|
}
|
|
|
|
if (loadingOverlay) {
|
|
loadingOverlay.classList.remove('hidden');
|
|
}
|
|
|
|
// Clear previous messages
|
|
if (messagesContainer) {
|
|
messagesContainer.innerHTML = '';
|
|
}
|
|
|
|
// Submit form via fetch
|
|
const formData = new FormData(form);
|
|
|
|
fetch(form.action || window.location.href, {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'HX-Request': 'true'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Hide loading state
|
|
if (sendBtn) {
|
|
sendBtn.disabled = false;
|
|
sendBtn.innerHTML = '<i data-lucide="send" class="w-4 h-4"></i> {% trans "Send Email" %}';
|
|
lucide.createIcons();
|
|
}
|
|
|
|
if (loadingOverlay) {
|
|
loadingOverlay.classList.add('hidden');
|
|
}
|
|
|
|
// Show result message
|
|
if (data.success || data.status === 'queued') {
|
|
showMessage(data.message || 'Email enqueued successfully!', 'success');
|
|
|
|
// Close modal after a short delay
|
|
setTimeout(() => {
|
|
closeEmailModal();
|
|
}, 1500);
|
|
} else {
|
|
showMessage(data.error || data.message || 'Failed to send email. Please try again.', 'danger');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
|
|
// Hide loading state
|
|
if (sendBtn) {
|
|
sendBtn.disabled = false;
|
|
sendBtn.innerHTML = '<i data-lucide="send" class="w-4 h-4"></i> {% trans "Send Email" %}';
|
|
lucide.createIcons();
|
|
}
|
|
|
|
if (loadingOverlay) {
|
|
loadingOverlay.classList.add('hidden');
|
|
}
|
|
|
|
showMessage('An error occurred while sending the email. Please try again.', 'danger');
|
|
});
|
|
});
|
|
}
|
|
|
|
function showMessage(message, type) {
|
|
if (!messagesContainer) return;
|
|
|
|
const bgColor = type === 'success' ? 'bg-green-50 border-green-200 text-green-800' : 'bg-red-50 border-red-200 text-red-800';
|
|
const icon = type === 'success' ? 'check-circle' : 'alert-triangle';
|
|
|
|
const messageDiv = document.createElement('div');
|
|
messageDiv.className = `alert ${bgColor} border rounded-lg px-4 py-3 flex items-start gap-2 shadow-lg transform transition-all duration-300 translate-x-full`;
|
|
messageDiv.innerHTML = `
|
|
<i data-lucide="${icon}" class="w-5 h-5 shrink-0 mt-0.5"></i>
|
|
<span class="flex-1 text-sm">${message}</span>
|
|
<button type="button" class="text-gray-400 hover:text-gray-600 p-1 shrink-0" onclick="this.parentElement.remove()">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
</button>
|
|
`;
|
|
|
|
messagesContainer.appendChild(messageDiv);
|
|
lucide.createIcons();
|
|
|
|
// Animate in
|
|
requestAnimationFrame(() => {
|
|
messageDiv.classList.remove('translate-x-full');
|
|
});
|
|
|
|
// Auto-hide success messages after 5 seconds
|
|
if (type === 'success') {
|
|
setTimeout(() => {
|
|
messageDiv.style.opacity = '0';
|
|
messageDiv.style.transform = 'translateX(100%)';
|
|
setTimeout(() => messageDiv.remove(), 300);
|
|
}, 5000);
|
|
}
|
|
}
|
|
|
|
// Character counter for message field
|
|
function setupCharacterCounter() {
|
|
const messageField = form.querySelector('#{{ form.message.id_for_label }}');
|
|
if (!messageField) return;
|
|
|
|
const counter = document.createElement('div');
|
|
counter.className = 'text-gray-500 text-sm mt-2 text-right';
|
|
counter.id = 'message-counter';
|
|
|
|
messageField.parentNode.appendChild(counter);
|
|
|
|
function updateCounter() {
|
|
const length = messageField.value.length;
|
|
const maxLength = 5000;
|
|
counter.textContent = `${length} / ${maxLength} characters`;
|
|
|
|
if (length > maxLength * 0.9) {
|
|
counter.className = 'text-yellow-600 text-sm mt-2 text-right';
|
|
} else {
|
|
counter.className = 'text-gray-500 text-sm mt-2 text-right';
|
|
}
|
|
}
|
|
|
|
messageField.addEventListener('input', updateCounter);
|
|
updateCounter();
|
|
}
|
|
|
|
// Auto-save functionality
|
|
let autoSaveTimer;
|
|
function setupAutoSave() {
|
|
const subject = form.querySelector('#{{ form.subject.id_for_label }}');
|
|
const message = form.querySelector('#{{ form.message.id_for_label }}');
|
|
|
|
if (!subject || !message) return;
|
|
|
|
function saveDraft() {
|
|
const draftData = {
|
|
subject: subject.value,
|
|
message: message.value,
|
|
timestamp: new Date().toISOString()
|
|
};
|
|
localStorage.setItem('email_draft_' + window.location.pathname, JSON.stringify(draftData));
|
|
}
|
|
|
|
function autoSave() {
|
|
clearTimeout(autoSaveTimer);
|
|
autoSaveTimer = setTimeout(saveDraft, 2000);
|
|
}
|
|
|
|
[subject, message].forEach(field => {
|
|
field.addEventListener('input', autoSave);
|
|
});
|
|
|
|
form.addEventListener('change', autoSave);
|
|
}
|
|
|
|
function loadDraft() {
|
|
const draftData = localStorage.getItem('email_draft_' + window.location.pathname);
|
|
if (!draftData) return;
|
|
|
|
try {
|
|
const draft = JSON.parse(draftData);
|
|
|
|
const subject = form.querySelector('#{{ form.subject.id_for_label }}');
|
|
const message = form.querySelector('#{{ form.message.id_for_label }}');
|
|
|
|
if (subject && draft.subject) subject.value = draft.subject;
|
|
if (message && draft.message) message.value = draft.message;
|
|
|
|
// Show draft restored notification
|
|
showMessage('Draft restored from local storage', 'success');
|
|
} catch (e) {
|
|
console.error('Error loading draft:', e);
|
|
}
|
|
}
|
|
|
|
function clearDraft() {
|
|
localStorage.removeItem('email_draft_' + window.location.pathname);
|
|
}
|
|
|
|
// Initialize form enhancements
|
|
setupCharacterCounter();
|
|
setupAutoSave();
|
|
|
|
// Load draft on page load
|
|
setTimeout(loadDraft, 100);
|
|
|
|
// Clear draft on successful submission
|
|
form.addEventListener('submit', function() {
|
|
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'));
|
|
}
|
|
}
|
|
|
|
// Escape to cancel/close modal
|
|
if (e.key === 'Escape') {
|
|
closeEmailModal();
|
|
}
|
|
});
|
|
|
|
console.log('Email compose form initialized');
|
|
});
|
|
|
|
// Global function to close email modal
|
|
function closeEmailModal() {
|
|
const modal = document.querySelector('[id^="emailModal"]');
|
|
if (modal) {
|
|
modal.classList.add('hidden');
|
|
document.body.style.overflow = '';
|
|
}
|
|
}
|
|
</script> |