307 lines
12 KiB
HTML
307 lines
12 KiB
HTML
{% macro email_templates_tab(templates) %}
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<!-- Template Selection -->
|
|
<div class="mb-4">
|
|
<label for="templateSelect" class="form-label">Select Template</label>
|
|
<select class="form-select" id="templateSelect">
|
|
<option value="">Choose a template...</option>
|
|
{% for template in templates %}
|
|
<option value="{{ template.id }}"
|
|
data-subject="{{ template.subject }}"
|
|
data-body="{{ template.body }}"
|
|
data-type="{{ template.name }}">
|
|
{{ template.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Available Variables -->
|
|
<div class="card mb-4" id="availableVariables" style="display: none;">
|
|
<div class="card-header bg-light">
|
|
<h6 class="mb-0">Available Variables</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-muted mb-2">Use these variables in your template by wrapping them in double curly braces, e.g., <code>{{ '{{ user.username }}' }}</code></p>
|
|
<div id="variableList" class="mb-0">
|
|
<!-- Variables will be populated here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Template Editor -->
|
|
<div class="card">
|
|
<div class="card-header bg-light">
|
|
<h6 class="mb-0">Template Editor</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="templateSubject" class="form-label">Subject</label>
|
|
<input type="text" class="form-control" id="templateSubject" placeholder="Enter email subject">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="templateBody" class="form-label">Body</label>
|
|
<textarea id="templateBody" class="form-control"></textarea>
|
|
</div>
|
|
<div class="text-end">
|
|
<button type="button" class="btn btn-primary" id="saveTemplate">
|
|
<i class="fas fa-save me-2"></i>Save Template
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dependencies -->
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
|
|
|
|
<script>
|
|
// Template variables mapping
|
|
const templateVariables = {
|
|
'Account Created': {
|
|
'user.username': 'The username of the created account',
|
|
'user.email': 'The email address of the created account'
|
|
},
|
|
'Password Reset': {
|
|
'user.username': 'The username of the account',
|
|
'reset_link': 'The password reset link'
|
|
},
|
|
'Account Deleted': {
|
|
'user.username': 'The username of the deleted account',
|
|
'deleted_at': 'The date and time of deletion'
|
|
},
|
|
'Account Updated': {
|
|
'user.username': 'The username of the updated account',
|
|
'updated_fields': 'The fields that were updated'
|
|
},
|
|
'Room Invite': {
|
|
'user.username': 'The username of the invited user',
|
|
'room.name': 'The name of the room',
|
|
'inviter.username': 'The username of the user who sent the invite'
|
|
},
|
|
'Room Invite Removed': {
|
|
'user.username': 'The username of the user',
|
|
'room.name': 'The name of the room',
|
|
'remover.username': 'The username of the user who removed the invite'
|
|
},
|
|
'Conversation Invite': {
|
|
'user.username': 'The username of the invited user',
|
|
'conversation.name': 'The name of the conversation',
|
|
'inviter.username': 'The username of the user who sent the invite'
|
|
},
|
|
'Conversation Invite Removed': {
|
|
'user.username': 'The username of the user',
|
|
'conversation.name': 'The name of the conversation',
|
|
'remover.username': 'The username of the user who removed the invite'
|
|
},
|
|
'Conversation Message': {
|
|
'user.username': 'The username of the recipient',
|
|
'sender.username': 'The username of the message sender',
|
|
'message.content': 'The content of the message',
|
|
'conversation.name': 'The name of the conversation',
|
|
'message_link': 'The link to view the message'
|
|
}
|
|
};
|
|
|
|
// Function to update available variables display
|
|
function updateAvailableVariables(templateType) {
|
|
const variables = templateVariables[templateType] || {};
|
|
const variableList = document.getElementById('variableList');
|
|
const availableVariables = document.getElementById('availableVariables');
|
|
|
|
if (Object.keys(variables).length === 0) {
|
|
availableVariables.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
let html = '<div class="row">';
|
|
for (const [variable, description] of Object.entries(variables)) {
|
|
html += `
|
|
<div class="col-md-6 mb-2">
|
|
<div class="card h-100">
|
|
<div class="card-body p-2">
|
|
<code class="text-primary">{{ '{{ ' }}${variable}{{ ' }}' }}</code>
|
|
<p class="text-muted small mb-0">${description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
html += '</div>';
|
|
|
|
variableList.innerHTML = html;
|
|
availableVariables.style.display = 'block';
|
|
}
|
|
|
|
// Wait for document and jQuery to be ready
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize Summernote
|
|
$('#templateBody').summernote({
|
|
height: 300,
|
|
toolbar: [
|
|
['style', ['style']],
|
|
['font', ['bold', 'underline', 'italic', 'clear']],
|
|
['color', ['color']],
|
|
['para', ['ul', 'ol', 'paragraph']],
|
|
['table', ['table']],
|
|
['insert', ['link']],
|
|
['view', ['fullscreen', 'codeview', 'help']]
|
|
],
|
|
styleTags: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
|
|
placeholder: 'Enter your email template content here...',
|
|
callbacks: {
|
|
onImageUpload: function(files) {
|
|
// Disable image upload for email templates
|
|
return false;
|
|
}
|
|
},
|
|
popover: {
|
|
image: [],
|
|
link: [],
|
|
air: []
|
|
}
|
|
});
|
|
|
|
// Handle template selection
|
|
$('#templateSelect').on('change', function() {
|
|
const selectedOption = this.options[this.selectedIndex];
|
|
const subject = selectedOption.dataset.subject || '';
|
|
const body = selectedOption.dataset.body || '';
|
|
const templateType = selectedOption.dataset.type || '';
|
|
|
|
$('#templateSubject').val(subject);
|
|
$('#templateBody').summernote('code', body);
|
|
updateAvailableVariables(templateType);
|
|
});
|
|
|
|
// Check for initially selected template
|
|
const templateSelect = document.getElementById('templateSelect');
|
|
if (templateSelect.value) {
|
|
const selectedOption = templateSelect.options[templateSelect.selectedIndex];
|
|
const templateType = selectedOption.dataset.type || '';
|
|
updateAvailableVariables(templateType);
|
|
}
|
|
|
|
// Handle template save
|
|
$('#saveTemplate').on('click', function() {
|
|
const templateId = $('#templateSelect').val();
|
|
const subject = $('#templateSubject').val();
|
|
const body = $('#templateBody').summernote('code');
|
|
|
|
if (!templateId) {
|
|
alert('Please select a template first');
|
|
return;
|
|
}
|
|
|
|
// Show loading state
|
|
const saveButton = this;
|
|
const originalText = saveButton.innerHTML;
|
|
saveButton.disabled = true;
|
|
saveButton.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Saving...';
|
|
|
|
// Send AJAX request
|
|
fetch(`/settings/email-templates/${templateId}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').content
|
|
},
|
|
body: JSON.stringify({
|
|
subject: subject,
|
|
body: body
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.error) {
|
|
throw new Error(data.error);
|
|
}
|
|
|
|
// Show success message
|
|
const alert = document.createElement('div');
|
|
alert.className = 'alert alert-success alert-dismissible fade show mt-3';
|
|
alert.innerHTML = `
|
|
<i class="fas fa-check-circle me-2"></i>Template saved successfully
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
`;
|
|
document.querySelector('.card-body').appendChild(alert);
|
|
|
|
// Update the select option's data attributes
|
|
const option = document.getElementById('templateSelect').options[document.getElementById('templateSelect').selectedIndex];
|
|
option.dataset.subject = subject;
|
|
option.dataset.body = body;
|
|
})
|
|
.catch(error => {
|
|
// Show error message
|
|
const alert = document.createElement('div');
|
|
alert.className = 'alert alert-danger alert-dismissible fade show mt-3';
|
|
alert.innerHTML = `
|
|
<i class="fas fa-exclamation-circle me-2"></i>${error.message || 'Failed to save template'}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
`;
|
|
document.querySelector('.card-body').appendChild(alert);
|
|
})
|
|
.finally(() => {
|
|
// Restore button state
|
|
saveButton.disabled = false;
|
|
saveButton.innerHTML = originalText;
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
/* Summernote custom styles */
|
|
.note-editor {
|
|
margin-bottom: 0;
|
|
}
|
|
.note-editor.note-frame {
|
|
border-color: #dee2e6;
|
|
border-radius: 0.375rem;
|
|
}
|
|
.note-editor.note-frame:focus-within {
|
|
border-color: #86b7fe;
|
|
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
|
}
|
|
.note-toolbar {
|
|
background-color: #f8f9fa;
|
|
border-top-left-radius: 0.375rem;
|
|
border-top-right-radius: 0.375rem;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
.note-editing-area {
|
|
background-color: #fff;
|
|
}
|
|
.note-statusbar {
|
|
border-top: 1px solid #dee2e6;
|
|
}
|
|
.note-placeholder {
|
|
color: #6c757d;
|
|
}
|
|
/* Variable card styles */
|
|
#variableList .card {
|
|
border: 1px solid #dee2e6;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
#variableList .card:hover {
|
|
border-color: #86b7fe;
|
|
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
|
|
}
|
|
#variableList code {
|
|
font-size: 0.9em;
|
|
padding: 0.2em 0.4em;
|
|
background-color: #f8f9fa;
|
|
border-radius: 0.25rem;
|
|
}
|
|
</style>
|
|
{% endmacro %} |