// VaultSentinel - Account Management Application // Main JavaScript functionality class AccountManager { constructor() { // Check if user is logged in const currentUser = this.loadFromStorage('currentUser'); if (!currentUser) { window.location.href = '../pages/login.html'; return; } this.currentUser = currentUser; this.accounts = this.loadFromStorage('accounts') || []; this.applications = this.loadFromStorage('applications') || [ { id: 1, name: 'AWS', type: 'Cloud', status: 'online', icon: 'cloud' }, { id: 2, name: 'GitHub', type: 'VCS', status: 'online', icon: 'code' }, { id: 3, name: 'Google Workspace', type: 'Collaboration', status: 'online', icon: 'mail' }, { id: 4, name: 'Nginx Proxy', type: 'Infra', status: 'offline', icon: 'dns' }, ]; this.currentPage = 'dashboard'; this.init(); } init() { this.setupEventListeners(); // Render dashboard content const mainContent = document.getElementById('mainContent'); if (mainContent) { mainContent.innerHTML = this.renderDashboard(); } } setupEventListeners() { // Account modal const addAccountBtn = document.getElementById('addAccountBtn'); if (addAccountBtn) { addAccountBtn.addEventListener('click', () => this.openAccountModal()); } // Application modal const addAppBtn = document.getElementById('addAppBtn'); if (addAppBtn) { addAppBtn.addEventListener('click', () => this.openAppModal()); } // Modal close buttons document.querySelectorAll('[data-close-modal]').forEach(btn => { btn.addEventListener('click', () => this.closeModals()); }); // Form submissions const accountForm = document.getElementById('accountForm'); if (accountForm) { accountForm.addEventListener('submit', (e) => this.handleAccountSubmit(e)); } const appForm = document.getElementById('appForm'); if (appForm) { appForm.addEventListener('submit', (e) => this.handleAppSubmit(e)); } // Logout button const logoutBtn = document.getElementById('logoutBtn'); if (logoutBtn) { logoutBtn.addEventListener('click', () => this.handleLogout()); } // Update account display this.updateAccountDisplay(); // Account table row clicks this.setupAccountRowListeners(); } updateAccountDisplay() { // Use the logged-in user from constructor const usernameEl = document.getElementById('accountUsername'); const roleEl = document.getElementById('accountRole'); if (usernameEl) usernameEl.textContent = this.currentUser?.username || 'User'; if (roleEl) roleEl.textContent = this.currentUser?.role || 'Administrator'; } handleLogout() { if (confirm('Are you sure you want to logout?')) { this.saveToStorage('currentUser', null); localStorage.clear(); window.location.href = '../pages/login.html'; } } renderDashboard() { return `

System Overview

Account & Service Management

add Add Account
Applications
${this.applications.length} ${this.applications.filter(a => a.status === 'online').length} Active
Total Accounts
${this.accounts.length} Managed
Last Updated
${new Date().toLocaleDateString()}
Status
Operational check_circle

history Recent Accounts

${this.accounts.length > 0 ? `
${this.accounts.slice(-5).reverse().map(acc => `

${acc.username}

${acc.service} • ${acc.owner}

`).join('')}
` : `

No accounts yet. Create one

`}
`; } getAccountsContent() { return `

Accounts Management

Administrative Access Control

Service
${this.accounts.length > 0 ? `
${this.accounts.map((acc, idx) => ` `).join('')}
Owner Username Service Actions
` : `

No accounts yet. Create one to get started.

`}
`; } getApplicationsContent() { return `

Applications

Manage and monitor active infrastructure services.

lan

Active

${this.applications.filter(a => a.status === 'online').length}

bolt

Total

${this.applications.length}

database

Health

99.9%

${this.applications.map((app, idx) => ` `).join('')}
Name Type Status Actions
${app.icon}
${app.name}
${app.type}
${app.status === 'online' ? 'Online' : 'Offline'}
`; } setupAccountRowListeners() { document.querySelectorAll('.delete-account').forEach(btn => { btn.addEventListener('click', (e) => { const accountId = btn.dataset.accountId; if (confirm('Delete this account?')) { this.accounts.splice(accountId, 1); this.saveToStorage('accounts', this.accounts); location.href = './accounts.html'; } }); }); document.querySelectorAll('.edit-account').forEach(btn => { btn.addEventListener('click', (e) => { const accountId = btn.dataset.accountId; const account = this.accounts[accountId]; // Populate form with existing data document.getElementById('accountUsername').value = account.username; document.getElementById('accountPassword').value = account.password; document.getElementById('accountOwner').value = account.owner; document.getElementById('accountService').value = account.service; this.editingAccountId = accountId; this.openAccountModal(); }); }); document.querySelectorAll('.delete-app').forEach(btn => { btn.addEventListener('click', (e) => { const appId = btn.dataset.appId; if (confirm('Delete this application?')) { this.applications.splice(appId, 1); this.saveToStorage('applications', this.applications); location.href = './applications.html'; } }); }); document.querySelectorAll('.edit-app').forEach(btn => { btn.addEventListener('click', (e) => { const appId = btn.dataset.appId; const app = this.applications[appId]; document.getElementById('appName').value = app.name; document.getElementById('appType').value = app.type; document.getElementById('appStatus').value = app.status; this.editingAppId = appId; this.openAppModal(); }); }); } handleAccountSubmit(e) { e.preventDefault(); const newAccount = { service: document.getElementById('accountService').value, owner: document.getElementById('accountOwner').value, username: document.getElementById('accountUsername').value, password: document.getElementById('accountPassword').value, dateCreated: new Date().toLocaleDateString() }; if (this.editingAccountId !== undefined) { this.accounts[this.editingAccountId] = newAccount; this.editingAccountId = undefined; } else { this.accounts.push(newAccount); } this.saveToStorage('accounts', this.accounts); this.closeModals(); location.href = './accounts.html'; } handleAppSubmit(e) { e.preventDefault(); const newApp = { name: document.getElementById('appName').value, type: document.getElementById('appType').value, status: document.getElementById('appStatus').value, icon: 'cloud' }; if (this.editingAppId !== undefined) { this.applications[this.editingAppId] = newApp; this.editingAppId = undefined; } else { this.applications.push(newApp); } this.saveToStorage('applications', this.applications); this.closeModals(); location.href = './applications.html'; } openAccountModal() { this.editingAccountId = undefined; document.getElementById('accountService').value = ''; document.getElementById('accountOwner').value = ''; document.getElementById('accountUsername').value = ''; document.getElementById('accountPassword').value = ''; document.getElementById('accountModal').classList.remove('hidden'); } openAppModal() { this.editingAppId = undefined; document.getElementById('appName').value = ''; document.getElementById('appType').value = ''; document.getElementById('appStatus').value = 'online'; document.getElementById('appModal').classList.remove('hidden'); } closeModals() { document.querySelectorAll('.modal-backdrop').forEach(modal => { modal.classList.add('hidden'); }); } loadFromStorage(key) { const data = localStorage.getItem(key); return data ? JSON.parse(data) : null; } saveToStorage(key, data) { localStorage.setItem(key, JSON.stringify(data)); } } // Initialize app when DOM is ready let app; document.addEventListener('DOMContentLoaded', () => { app = new AccountManager(); });