// Application State const state = { view: 'login', // login, admin-login, portfolio, admin-dashboard user: null, isAdmin: false, customers: [], logs: [], error: null, currentSection: 'home' }; // API Functions const api = { async login(username, password, isAdmin = false) { const response = await fetch('/api/auth.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'login', username, password, isAdmin }) }); return response.json(); }, async logout() { const response = await fetch('/api/auth.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'logout' }) }); return response.json(); }, async checkSession() { const response = await fetch('/api/auth.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'check_session' }) }); return response.json(); }, async getCustomers() { const response = await fetch('/api/users.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'list' }) }); return response.json(); }, async createCustomer(username, password) { const response = await fetch('/api/users.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'create', username, password }) }); return response.json(); }, async updateCustomer(id, username, password) { const response = await fetch('/api/users.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'update', id, username, password }) }); return response.json(); }, async deleteCustomer(id) { const response = await fetch('/api/users.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'delete', id }) }); return response.json(); }, async getLogs() { const response = await fetch('/api/logs.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'list' }) }); return response.json(); }, async logActivity(section) { const response = await fetch('/api/logs.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'log', section }) }); return response.json(); } }; // View Functions function render() { const app = document.getElementById('app'); if (state.view === 'login') { app.innerHTML = renderLogin(); } else if (state.view === 'admin-login') { app.innerHTML = renderAdminLogin(); } else if (state.view === 'portfolio') { app.innerHTML = renderPortfolio(); } else if (state.view === 'admin-dashboard') { app.innerHTML = renderAdminDashboard(); } attachEventListeners(); } function renderLogin() { return `

Portfolio Access

${state.error ? `
${state.error}
` : ''}
`; } function renderAdminLogin() { return `

Admin Login

${state.error ? `
${state.error}
` : ''}
`; } function renderPortfolio() { const sections = [ { id: 'home', label: 'Home', icon: '🏠' }, { id: 'resume', label: 'Resume', icon: '📄' }, { id: 'contact', label: 'Contact', icon: '✉️' }, { id: 'timeline', label: 'Work History', icon: '📅' }, { id: 'process', label: 'Process & Skills', icon: '⚙️' }, { id: 'case-study-1', label: 'Case Study 1', icon: '📊' }, { id: 'case-study-2', label: 'Case Study 2', icon: '📊' }, { id: 'case-study-3', label: 'Case Study 3', icon: '📊' } ]; return `
${renderPortfolioSection()}
`; } function renderPortfolioSection() { const content = { 'home': `

Welcome to My Portfolio

Product Designer specializing in user-centered design and innovative solutions.

`, 'resume': `

Resume

Your resume content will go here. Add your education, experience, and qualifications.

`, 'contact': `

Contact Information

Your contact information will go here. Add email, phone, LinkedIn, etc.

`, 'timeline': `

Work History Timeline

Your interactive work history timeline will go here.

`, 'process': `

Process & Skills

Your process overview and skills will go here.

`, 'case-study-1': `

Case Study 1

Your first detailed case study will go here.

`, 'case-study-2': `

Case Study 2

Your second detailed case study will go here.

`, 'case-study-3': `

Case Study 3

Your third detailed case study will go here.

` }; return content[state.currentSection] || content['home']; } function renderAdminDashboard() { const activeTab = state.adminTab || 'customers'; return `
${activeTab === 'customers' ? renderCustomersTab() : renderLogsTab()}
`; } function renderCustomersTab() { return `

Customer Accounts

${state.customers.length === 0 ? ` ` : state.customers.map(customer => ` `).join('')}
Username Created Actions
No customers yet
${customer.username} ${new Date(customer.created_at).toLocaleDateString()}
`; } function renderLogsTab() { return `

Activity Logs

${state.logs.length === 0 ? ` ` : state.logs.map(log => ` `).join('')}
Username Section Timestamp
No activity logged yet
${log.username} ${log.section} ${new Date(log.created_at).toLocaleString()}
`; } // Event Handlers function attachEventListeners() { const loginForm = document.getElementById('login-form'); if (loginForm) { loginForm.addEventListener('submit', handleLogin); } const adminLoginForm = document.getElementById('admin-login-form'); if (adminLoginForm) { adminLoginForm.addEventListener('submit', handleAdminLogin); } const customerForm = document.getElementById('customer-form'); if (customerForm) { customerForm.addEventListener('submit', handleCustomerSubmit); } } async function handleLogin(e) { e.preventDefault(); state.error = null; const username = document.getElementById('username').value; const password = document.getElementById('password').value; const result = await api.login(username, password, false); if (result.success) { state.user = result.user; state.isAdmin = false; state.view = 'portfolio'; state.currentSection = 'home'; await api.logActivity('login'); render(); } else { state.error = 'The username and password you entered aren\'t valid. Please try again.'; render(); } } async function handleAdminLogin(e) { e.preventDefault(); state.error = null; const username = document.getElementById('admin-username').value; const password = document.getElementById('admin-password').value; const result = await api.login(username, password, true); if (result.success) { state.user = result.user; state.isAdmin = true; state.view = 'admin-dashboard'; await loadAdminData(); render(); } else { state.error = 'Invalid admin credentials.'; render(); } } async function handleLogout() { await api.logout(); state.user = null; state.isAdmin = false; state.view = 'login'; state.error = null; render(); } async function loadAdminData() { const customersResult = await api.getCustomers(); if (customersResult.success) { state.customers = customersResult.customers; } const logsResult = await api.getLogs(); if (logsResult.success) { state.logs = logsResult.logs; } } function navigateTo(view) { state.view = view; state.error = null; render(); } async function navigateToSection(section) { state.currentSection = section; await api.logActivity(section); render(); } function switchAdminTab(tab) { state.adminTab = tab; render(); } function showAddCustomerModal() { document.getElementById('modal-title').textContent = 'Add Customer'; document.getElementById('customer-id').value = ''; document.getElementById('customer-username').value = ''; document.getElementById('customer-password').value = ''; document.getElementById('customer-modal').classList.remove('hidden'); } function editCustomer(id, username) { document.getElementById('modal-title').textContent = 'Edit Customer'; document.getElementById('customer-id').value = id; document.getElementById('customer-username').value = username; document.getElementById('customer-password').value = ''; document.getElementById('customer-password').placeholder = 'Leave blank to keep current password'; document.getElementById('customer-modal').classList.remove('hidden'); } function closeCustomerModal() { document.getElementById('customer-modal').classList.add('hidden'); } async function handleCustomerSubmit(e) { e.preventDefault(); const id = document.getElementById('customer-id').value; const username = document.getElementById('customer-username').value; const password = document.getElementById('customer-password').value; let result; if (id) { result = await api.updateCustomer(id, username, password); } else { result = await api.createCustomer(username, password); } if (result.success) { closeCustomerModal(); await loadAdminData(); render(); } else { alert(result.message || 'An error occurred'); } } async function deleteCustomer(id) { if (!confirm('Are you sure you want to delete this customer?')) { return; } const result = await api.deleteCustomer(id); if (result.success) { await loadAdminData(); render(); } else { alert(result.message || 'An error occurred'); } } // Initialize app async function init() { // Check URL for admin route if (window.location.pathname.includes('/admin')) { state.view = 'admin-login'; } // Check for existing session const sessionResult = await api.checkSession(); if (sessionResult.success && sessionResult.user) { state.user = sessionResult.user; state.isAdmin = sessionResult.isAdmin; if (state.isAdmin) { state.view = 'admin-dashboard'; await loadAdminData(); } else { state.view = 'portfolio'; state.currentSection = 'home'; } } render(); } // Handle browser back/forward window.addEventListener('popstate', () => { if (window.location.pathname.includes('/admin')) { if (!state.isAdmin) { state.view = 'admin-login'; render(); } } else { if (state.isAdmin) { state.view = 'login'; render(); } } }); // Start the app init();