Account Settings

Manage your account preferences and view your activity history

Account Information

Update your account details and security settings

Change Password

Your Activity History

View all your actions and changes in the system

User history functionality will be implemented here.

All Users Activity History

View activity history for all users in the system

Admin history functionality will be implemented here.

Add Custom Domain

Add your custom domain for professional email sending with DKIM authentication

Enter your domain without www (e.g., example.com)

Your Domains

Manage your verified domains and view sending statistics

Loading domains...

Email Statistics

View your email sending performance and analytics

Loading statistics...

', ''); document.getElementById('nav-container').innerHTML = modifiedData; }); loadUserInfo(); initializeTabs(); initializePasswordForm(); }); function initializeTabs() { console.log('Initializing tabs...'); const tabs = document.querySelectorAll('.tab-button'); const contents = document.querySelectorAll('.tab-content'); tabs.forEach(tab => { tab.addEventListener('click', () => { // Remove active class from all tabs tabs.forEach(t => { t.classList.remove('active', 'border-blue-500', 'text-blue-500'); t.classList.add('border-transparent', 'text-gray-500'); }); // Hide all content contents.forEach(content => content.classList.remove('active')); // Activate clicked tab tab.classList.add('active', 'border-blue-500', 'text-blue-500'); tab.classList.remove('border-transparent', 'text-gray-500'); // Show corresponding content const tabId = tab.id; let contentId; if (tabId === 'account-tab') { contentId = 'account-settings-content'; } else if (tabId === 'history-tab') { contentId = 'user-history-content'; } else if (tabId === 'admin-history-tab') { contentId = 'admin-history-content'; } else if (tabId === 'domain-email-tab') { contentId = 'domain-email-content'; loadDomains(); loadEmailStats(); } if (contentId) { document.getElementById(contentId).classList.add('active'); } }); }); } async function loadUserInfo() { console.log('Loading user info...'); try { const token = localStorage.getItem('sf_auth_token'); if (!token) { showAlert('Please log in to access account settings', 'error'); setTimeout(() => { window.location.href = '/login'; }, 2000); return; } const response = await fetch('/api/auth/me', { headers: { 'Authorization': `Bearer ${token}` } }); if (response.ok) { const data = await response.json(); const user = data.user; document.getElementById('user-name').value = user.name; document.getElementById('user-email').value = user.email; document.getElementById('user-role').value = user.role.charAt(0).toUpperCase() + user.role.slice(1); document.getElementById('user-created').value = new Date(user.createdAt).toLocaleDateString(); // Show/hide admin tab based on role const adminTab = document.getElementById('admin-history-tab'); if (user.role === 'admin') { adminTab.classList.remove('hidden'); } else { adminTab.classList.add('hidden'); } console.log('User info loaded successfully'); } else if (response.status === 401) { showAlert('Session expired. Please log in again.', 'error'); setTimeout(() => { window.location.href = '/login'; }, 2000); } else { showAlert('Error loading user information', 'error'); } } catch (error) { console.error('Error loading user info:', error); showAlert('Error loading user information', 'error'); } } function initializePasswordForm() { console.log('Initializing password form...'); document.getElementById('password-form').addEventListener('submit', async (e) => { e.preventDefault(); const formData = new FormData(e.target); const currentPassword = formData.get('currentPassword'); const newPassword = formData.get('newPassword'); const confirmPassword = formData.get('confirmPassword'); if (newPassword !== confirmPassword) { showAlert('New passwords do not match', 'error'); return; } if (newPassword.length < 8) { showAlert('New password must be at least 8 characters long', 'error'); return; } try { const token = localStorage.getItem('sf_auth_token'); const response = await fetch('/api/auth/change-password', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` }, body: JSON.stringify({ currentPassword, newPassword }) }); const result = await response.json(); if (response.ok) { showAlert('Password updated successfully', 'success'); e.target.reset(); } else { showAlert(result.error || 'Failed to update password', 'error'); } } catch (error) { console.error('Error updating password:', error); showAlert('Error updating password', 'error'); } }); } function showAlert(message, type) { const alertContainer = document.getElementById('alert-container'); const alertId = 'alert-' + Date.now(); const alertClass = type === 'success' ? 'bg-green-500' : 'bg-red-500'; const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'; const alert = document.createElement('div'); alert.id = alertId; alert.className = `${alertClass} text-white px-6 py-3 rounded-lg shadow-lg mb-4 flex items-center`; alert.innerHTML = ` ${message} `; alertContainer.appendChild(alert); setTimeout(() => { if (document.getElementById(alertId)) { document.getElementById(alertId).remove(); } }, 5000); } // Domain Email Management Functions async function loadDomains() { try { const token = localStorage.getItem('sf_auth_token'); const response = await fetch('/api/domains', { headers: { 'Authorization': `Bearer ${token}` } }); if (response.ok) { const data = await response.json(); displayDomains(data.domains || []); } else { showAlert('Error loading domains', 'error'); } } catch (error) { console.error('Error loading domains:', error); showAlert('Error loading domains', 'error'); } } function displayDomains(domains) { const loading = document.getElementById('domains-loading'); const content = document.getElementById('domains-content'); const list = document.getElementById('domains-list'); loading.classList.add('hidden'); content.classList.remove('hidden'); if (domains.length === 0) { list.innerHTML = `

No domains added yet

Add your first domain to start sending professional emails

`; return; } list.innerHTML = domains.map(domain => `

${domain.domain_name}

${domain.verified ? 'Verified' : 'Pending Verification'} • ${domain.emails_sent || 0} emails sent

${domain.verified ? 'Verified' : 'Pending' }
`).join(''); } async function loadEmailStats() { try { const token = localStorage.getItem('sf_auth_token'); const response = await fetch('/api/email/stats', { headers: { 'Authorization': `Bearer ${token}` } }); if (response.ok) { const data = await response.json(); displayEmailStats(data); } else { showAlert('Error loading email statistics', 'error'); } } catch (error) { console.error('Error loading email stats:', error); showAlert('Error loading email statistics', 'error'); } } function displayEmailStats(stats) { const loading = document.getElementById('email-stats-loading'); const content = document.getElementById('email-stats-content'); loading.classList.add('hidden'); content.classList.remove('hidden'); document.getElementById('total-sent').textContent = stats.total || 0; document.getElementById('delivered').textContent = stats.delivered || 0; document.getElementById('opened').textContent = stats.opened || 0; document.getElementById('clicked').textContent = stats.clicked || 0; document.getElementById('delivery-rate').textContent = stats.rates.deliveryRate + '%'; document.getElementById('open-rate').textContent = stats.rates.openRate + '%'; document.getElementById('click-rate').textContent = stats.rates.clickRate + '%'; } async function addDomain(formData) { try { const token = localStorage.getItem('sf_auth_token'); const response = await fetch('/api/domains', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` }, body: JSON.stringify(formData) }); const result = await response.json(); if (response.ok) { showAlert('Domain added successfully! Please add the DNS records and verify.', 'success'); showDomainRecords(result.domain.id, result.cnameRecords); loadDomains(); } else { showAlert(result.error || 'Failed to add domain', 'error'); } } catch (error) { console.error('Error adding domain:', error); showAlert('Error adding domain', 'error'); } } function showDomainRecords(domainId, cnameRecords) { const modal = document.createElement('div'); modal.className = 'fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50'; modal.innerHTML = `

DNS Records Required

Add these CNAME records to your domain's DNS settings to verify ownership and enable DKIM signing:

${cnameRecords.map(record => ` `).join('')}
Type Host Target
${record.type} ${record.host} ${record.target}
`; document.body.appendChild(modal); } async function verifyDomain(domainId) { try { const token = localStorage.getItem('sf_auth_token'); const response = await fetch(`/api/domains/${domainId}/verify`, { method: 'POST', headers: { 'Authorization': `Bearer ${token}` } }); const result = await response.json(); if (response.ok && result.verified) { showAlert('Domain verified successfully! You can now send emails from this domain.', 'success'); document.querySelector('.fixed').remove(); loadDomains(); } else { showAlert(result.message || 'Domain verification failed. Please check your DNS records.', 'error'); } } catch (error) { console.error('Error verifying domain:', error); showAlert('Error verifying domain', 'error'); } } async function deleteDomain(domainId) { if (!confirm('Are you sure you want to delete this domain? This action cannot be undone.')) { return; } try { const token = localStorage.getItem('sf_auth_token'); const response = await fetch(`/api/domains/${domainId}`, { method: 'DELETE', headers: { 'Authorization': `Bearer ${token}` } }); if (response.ok) { showAlert('Domain deleted successfully', 'success'); loadDomains(); } else { const result = await response.json(); showAlert(result.error || 'Failed to delete domain', 'error'); } } catch (error) { console.error('Error deleting domain:', error); showAlert('Error deleting domain', 'error'); } } // Initialize domain email form function initializeDomainEmailForm() { document.getElementById('add-domain-form').addEventListener('submit', async (e) => { e.preventDefault(); const formData = new FormData(e.target); const domainData = { domainName: formData.get('domainName') }; await addDomain(domainData); e.target.reset(); }); } // Initialize on page load document.addEventListener('DOMContentLoaded', function() { loadUserInfo(); initializeTabs(); initializePasswordForm(); initializeDomainEmailForm(); }); console.log('Settings page JavaScript loaded');