Create dashboard.js

Author: GitTimeraider

static/dashboard.js

@@ -0,0 +1,329 @@
+// Dashboard functionality for DirectAdmin Email Forwarder
+let currentForwarders = [];
+let emailAccounts = [];
+
+// Load email accounts for destination dropdown
+async function loadEmailAccounts() {
+    try {
+        const response = await fetch('/api/email-accounts');
+        const data = await response.json();
+
+        if (response.ok && data.accounts) {
+            emailAccounts = data.accounts;
+            updateDestinationDropdown();
+        } else {
+            console.error('Failed to load email accounts:', data.error);
+            showMessage('Failed to load email accounts', 'error');
+        }
+    } catch (error) {
+        console.error('Error loading email accounts:', error);
+    }
+}
+
+// Update destination dropdown with email accounts
+function updateDestinationDropdown() {
+    const select = document.getElementById('destination');
+    if (!select) return;
+
+    // Clear existing options
+    select.innerHTML = '';
+
+    // Add placeholder
+    const placeholder = document.createElement('option');
+    placeholder.value = '';
+    placeholder.textContent = 'Select destination...';
+    placeholder.disabled = true;
+    placeholder.selected = true;
+    select.appendChild(placeholder);
+
+    // Add email account options
+    if (emailAccounts.length > 0) {
+        emailAccounts.forEach(email => {
+            const option = document.createElement('option');
+            option.value = email;
+            option.textContent = email;
+            select.appendChild(option);
+        });
+    }
+
+    // Add separator
+    const separator = document.createElement('option');
+    separator.disabled = true;
+    separator.textContent = '──────────────';
+    select.appendChild(separator);
+
+    // Add custom email option
+    const customOption = document.createElement('option');
+    customOption.value = 'custom';
+    customOption.textContent = 'Enter custom email address...';
+    select.appendChild(customOption);
+
+    // Handle selection changes
+    select.addEventListener('change', function() {
+        const customInput = document.getElementById('customDestination');
+        if (this.value === 'custom') {
+            customInput.style.display = 'block';
+            customInput.required = true;
+            customInput.focus();
+        } else {
+            customInput.style.display = 'none';
+            customInput.required = false;
+            customInput.value = '';
+        }
+    });
+}
+
+// Load forwarders from API
+async function loadForwarders() {
+    const tbody = document.querySelector('#forwardersTable tbody');
+    if (!tbody) return;
+
+    try {
+        const response = await fetch('/api/forwarders');
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        console.log('Forwarders response:', data);
+
+        // Extract forwarders array from response
+        if (data && Array.isArray(data.forwarders)) {
+            currentForwarders = data.forwarders;
+        } else {
+            console.warn('Unexpected forwarders format:', data);
+            currentForwarders = [];
+        }
+
+        displayForwarders();
+
+    } catch (error) {
+        console.error('Error loading forwarders:', error);
+        tbody.innerHTML = '<tr><td colspan="3" class="error-message">Failed to load forwarders. Please check your DirectAdmin settings.</td></tr>';
+    }
+}
+
+// Display forwarders in the table
+function displayForwarders() {
+    const tbody = document.querySelector('#forwardersTable tbody');
+    if (!tbody) return;
+
+    tbody.innerHTML = '';
+
+    if (currentForwarders.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="3" class="no-data">No email forwarders configured</td></tr>';
+        return;
+    }
+
+    currentForwarders.forEach(forwarder => {
+        const row = document.createElement('tr');
+
+        // Create cells
+        const fromCell = document.createElement('td');
+        fromCell.textContent = forwarder.address || 'Unknown';
+
+        const toCell = document.createElement('td');
+        toCell.textContent = forwarder.destination || 'Unknown';
+
+        const actionsCell = document.createElement('td');
+        const deleteBtn = document.createElement('button');
+        deleteBtn.className = 'btn-danger btn-sm';
+        deleteBtn.textContent = 'Delete';
+        deleteBtn.onclick = () => deleteForwarder(forwarder.address);
+        actionsCell.appendChild(deleteBtn);
+
+        row.appendChild(fromCell);
+        row.appendChild(toCell);
+        row.appendChild(actionsCell);
+        tbody.appendChild(row);
+    });
+}
+
+// Create new forwarder
+async function createForwarder(event) {
+    event.preventDefault();
+
+    const form = event.target;
+    const addressInput = form.querySelector('#address');
+    const destinationSelect = form.querySelector('#destination');
+    const customDestInput = form.querySelector('#customDestination');
+    const submitButton = form.querySelector('button[type="submit"]');
+
+    // Get the actual destination
+    let destination = destinationSelect.value;
+    if (destination === 'custom') {
+        destination = customDestInput.value.trim();
+        if (!destination) {
+            showMessage('Please enter a custom email address', 'error');
+            customDestInput.focus();
+            return;
+        }
+    }
+
+    // Validate
+    if (!addressInput.value.trim() || !destination) {
+        showMessage('Please fill in all required fields', 'error');
+        return;
+    }
+
+    // Disable form during submission
+    submitButton.disabled = true;
+    submitButton.textContent = 'Creating...';
+
+    try {
+        const response = await fetch('/api/forwarders', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                address: addressInput.value.trim(),
+                destination: destination
+            })
+        });
+
+        const data = await response.json();
+
+        if (response.ok) {
+            // Clear form
+            form.reset();
+            customDestInput.style.display = 'none';
+
+            // Reload forwarders
+            await loadForwarders();
+
+            // Show success message
+            showMessage(data.message || 'Forwarder created successfully', 'success');
+        } else {
+            showMessage(data.error || 'Failed to create forwarder', 'error');
+        }
+    } catch (error) {
+        console.error('Error creating forwarder:', error);
+        showMessage('Failed to create forwarder. Please try again.', 'error');
+    } finally {
+        // Re-enable form
+        submitButton.disabled = false;
+        submitButton.textContent = 'Create Forwarder';
+    }
+}
+
+// Delete forwarder
+async function deleteForwarder(address) {
+    if (!address) {
+        console.error('No address provided for deletion');
+        return;
+    }
+
+    if (!confirm(`Are you sure you want to delete the forwarder for ${address}?`)) {
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/forwarders', {
+            method: 'DELETE',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                address: address
+            })
+        });
+
+        const data = await response.json();
+
+        if (response.ok) {
+            await loadForwarders();
+            showMessage(data.message || 'Forwarder deleted successfully', 'success');
+        } else {
+            showMessage(data.error || 'Failed to delete forwarder', 'error');
+        }
+    } catch (error) {
+        console.error('Error deleting forwarder:', error);
+        showMessage('Failed to delete forwarder. Please try again.', 'error');
+    }
+}
+
+// Show message to user
+function showMessage(message, type = 'info') {
+    const container = document.getElementById('messageContainer');
+    if (!container) {
+        console.error('Message container not found');
+        return;
+    }
+
+    // Create message element
+    const div = document.createElement('div');
+    div.className = `alert alert-${type}`;
+    div.textContent = message;
+
+    // Add close button
+    const closeBtn = document.createElement('span');
+    closeBtn.innerHTML = '&times;';
+    closeBtn.style.float = 'right';
+    closeBtn.style.cursor = 'pointer';
+    closeBtn.style.marginLeft = '15px';
+    closeBtn.onclick = () => div.remove();
+    div.appendChild(closeBtn);
+
+    // Clear existing messages and add new one
+    container.innerHTML = '';
+    container.appendChild(div);
+
+    // Auto-hide after 5 seconds
+    setTimeout(() => {
+        if (div.parentNode) {
+            div.remove();
+        }
+    }, 5000);
+}
+
+// Initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('Dashboard JS loaded');
+
+    // Check if we're on the dashboard page
+    const forwardersTable = document.getElementById('forwardersTable');
+    if (!forwardersTable) {
+        console.log('Not on dashboard page, skipping initialization');
+        return;
+    }
+
+    console.log('Initializing dashboard...');
+
+    // Load initial data
+    loadEmailAccounts();
+    loadForwarders();
+
+    // Set up auto-refresh every 60 seconds
+    setInterval(loadForwarders, 60000);
+
+    // Set up form handler
+    const form = document.getElementById('createForwarderForm');
+    if (form) {
+        form.addEventListener('submit', createForwarder);
+    } else {
+        console.error('Create forwarder form not found');
+    }
+
+    // Set up manual refresh button (if you want one)
+    const refreshBtn = document.getElementById('refreshBtn');
+    if (refreshBtn) {
+        refreshBtn.addEventListener('click', () => {
+            loadForwarders();
+            showMessage('Forwarders refreshed', 'info');
+        });
+    }
+});
+
+// Utility function to escape HTML (prevent XSS)
+function escapeHtml(unsafe) {
+    if (!unsafe) return '';
+    return unsafe
+        .toString()
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}