2314 lines
116 KiB
JavaScript
2314 lines
116 KiB
JavaScript
// 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.applications = [];
|
|
this.users = [];
|
|
this.roles = [];
|
|
this.accountPage = 1;
|
|
this.accountPageSize = 9;
|
|
this.appPage = 1;
|
|
this.appPageSize = 9;
|
|
this.userPage = 1;
|
|
this.userPageSize = 9;
|
|
this.apiBase = '/api';
|
|
this.currentPage = 'dashboard';
|
|
this.accountSearchTerm = '';
|
|
this.applicationSearchTerm = '';
|
|
this.accountServiceFilter = '';
|
|
this.userSearchTerm = '';
|
|
this.userRoleFilter = '';
|
|
this.mobileBreakpoint = 900;
|
|
this.boundResizeHandler = null;
|
|
this.configureNotifications();
|
|
this.initPromise = this.init();
|
|
this.pendingAccountAppId = undefined;
|
|
}
|
|
|
|
configureNotifications() {
|
|
if (window.Notiflix?.Notify) {
|
|
Notiflix.Notify.init({
|
|
position: 'right-top',
|
|
timeout: 2500,
|
|
clickToClose: true,
|
|
pauseOnHover: true,
|
|
distance: '12px',
|
|
fontSize: '14px'
|
|
});
|
|
}
|
|
}
|
|
|
|
notifySuccess(message) {
|
|
if (window.Notiflix?.Notify) {
|
|
Notiflix.Notify.success(message);
|
|
} else {
|
|
alert(message);
|
|
}
|
|
}
|
|
|
|
notifyFailure(message) {
|
|
if (window.Notiflix?.Notify) {
|
|
Notiflix.Notify.failure(message);
|
|
} else {
|
|
alert(message);
|
|
}
|
|
}
|
|
|
|
notifyWarning(message) {
|
|
if (window.Notiflix?.Notify) {
|
|
Notiflix.Notify.warning(message);
|
|
} else {
|
|
alert(message);
|
|
}
|
|
}
|
|
|
|
getUserId() {
|
|
const u = this.currentUser;
|
|
const detected = u?.UserId ?? u?.userId ?? u?.id ?? u?.ID ?? u?.userid ?? u?.user_id ?? u?.user?.UserId ?? u?.user?.userId;
|
|
// Fallback: if only username/role exist (no id), use default admin id = 1
|
|
return detected ?? 1;
|
|
}
|
|
|
|
getCurrentUserRoleRaw() {
|
|
return this.currentUser?.Role
|
|
?? this.currentUser?.role
|
|
?? this.currentUser?.RoleName
|
|
?? this.currentUser?.user?.Role
|
|
?? this.currentUser?.user?.role
|
|
?? '';
|
|
}
|
|
|
|
getCurrentUserRole() {
|
|
return String(this.getCurrentUserRoleRaw() || '').trim().toLowerCase();
|
|
}
|
|
|
|
isCurrentUserAdmin() {
|
|
return this.getCurrentUserRole() === 'admin';
|
|
}
|
|
|
|
getAuthHeaders(includeJson = false) {
|
|
const headers = {
|
|
'x-user-id': String(this.getUserId()),
|
|
'x-user-role': this.getCurrentUserRole()
|
|
};
|
|
|
|
if (includeJson) {
|
|
headers['Content-Type'] = 'application/json';
|
|
}
|
|
|
|
return headers;
|
|
}
|
|
|
|
async init() {
|
|
await this.fetchApplications();
|
|
await this.fetchAccounts();
|
|
|
|
// Check if user is admin and fetch users/roles
|
|
if (this.isCurrentUserAdmin()) {
|
|
await this.fetchUsers();
|
|
await this.fetchRoles();
|
|
// Show Users menu
|
|
const usersNav = document.getElementById('usersNav');
|
|
if (usersNav) usersNav.style.display = '';
|
|
}
|
|
|
|
this.setupEventListeners();
|
|
this.setupResponsiveShell();
|
|
this.loadModals(); // Load modals từ file riêng
|
|
// Single-page navigation based on hash
|
|
this.handleRoute(location.hash || '#dashboard');
|
|
window.addEventListener('hashchange', () => this.handleRoute(location.hash));
|
|
}
|
|
|
|
handleRoute(hash) {
|
|
const route = (hash || '#dashboard').replace('#', '') || 'dashboard';
|
|
if (this.isMobileViewport()) {
|
|
this.closeMobileNav();
|
|
}
|
|
this.renderView(route);
|
|
}
|
|
|
|
renderView(page) {
|
|
this.currentPage = page;
|
|
const mainContent = document.getElementById('mainContent');
|
|
if (!mainContent) return;
|
|
|
|
if (page === 'applications') {
|
|
mainContent.innerHTML = this.getApplicationsContent();
|
|
this.setupAccountRowListeners();
|
|
this.setupAddButtonListeners();
|
|
this.setupFilters();
|
|
this.setupAppPagerListeners();
|
|
} else if (page === 'accounts') {
|
|
mainContent.innerHTML = this.getAccountsContent();
|
|
this.setupAccountRowListeners();
|
|
this.setupAddButtonListeners();
|
|
this.setupFilters();
|
|
this.setupAccountPagerListeners();
|
|
} else if (page === 'users') {
|
|
// Check if user is admin
|
|
if (!this.isCurrentUserAdmin()) {
|
|
mainContent.innerHTML = this.renderDashboard();
|
|
} else {
|
|
mainContent.innerHTML = this.getUsersContent();
|
|
this.setupUsersRowListeners();
|
|
this.setupAddButtonListeners();
|
|
this.setupUsersPagerListeners();
|
|
}
|
|
} else {
|
|
mainContent.innerHTML = this.renderDashboard();
|
|
}
|
|
|
|
this.restoreSearchFocus();
|
|
this.setActiveNav(page);
|
|
}
|
|
|
|
setActiveNav(page) {
|
|
document.querySelectorAll('[data-nav]').forEach(link => {
|
|
const isActive = link.dataset.nav === page;
|
|
link.classList.toggle('border-l-4', isActive);
|
|
link.classList.toggle('border-blue-600', isActive);
|
|
link.classList.toggle('bg-slate-200/80', isActive);
|
|
link.classList.toggle('dark:bg-slate-800', isActive);
|
|
link.classList.toggle('text-slate-900', isActive);
|
|
link.classList.toggle('dark:text-slate-50', isActive);
|
|
link.classList.toggle('font-bold', isActive);
|
|
});
|
|
}
|
|
|
|
isMobileViewport() {
|
|
return window.matchMedia(`(max-width: ${this.mobileBreakpoint}px)`).matches;
|
|
}
|
|
|
|
setupResponsiveShell() {
|
|
const menuBtn = document.getElementById('mobileMenuBtn');
|
|
const backdrop = document.getElementById('sidebarBackdrop');
|
|
|
|
if (menuBtn && !menuBtn.dataset.boundClick) {
|
|
menuBtn.addEventListener('click', () => this.toggleMobileNav());
|
|
menuBtn.dataset.boundClick = 'true';
|
|
}
|
|
|
|
if (backdrop && !backdrop.dataset.boundClick) {
|
|
backdrop.addEventListener('click', () => this.closeMobileNav());
|
|
backdrop.dataset.boundClick = 'true';
|
|
}
|
|
|
|
document.querySelectorAll('[data-nav]').forEach(link => {
|
|
if (!link.dataset.boundMobileClose) {
|
|
link.addEventListener('click', () => {
|
|
if (this.isMobileViewport()) {
|
|
this.closeMobileNav();
|
|
}
|
|
});
|
|
link.dataset.boundMobileClose = 'true';
|
|
}
|
|
});
|
|
|
|
if (!this.boundResizeHandler) {
|
|
this.boundResizeHandler = () => {
|
|
if (!this.isMobileViewport()) {
|
|
this.closeMobileNav();
|
|
}
|
|
};
|
|
window.addEventListener('resize', this.boundResizeHandler);
|
|
}
|
|
|
|
if (!this.isMobileViewport()) {
|
|
this.closeMobileNav();
|
|
}
|
|
}
|
|
|
|
toggleMobileNav() {
|
|
if (document.body.classList.contains('mobile-nav-open')) {
|
|
this.closeMobileNav();
|
|
return;
|
|
}
|
|
this.openMobileNav();
|
|
}
|
|
|
|
openMobileNav() {
|
|
if (!this.isMobileViewport()) return;
|
|
document.body.classList.add('mobile-nav-open');
|
|
const menuBtn = document.getElementById('mobileMenuBtn');
|
|
if (menuBtn) {
|
|
menuBtn.setAttribute('aria-expanded', 'true');
|
|
}
|
|
}
|
|
|
|
closeMobileNav() {
|
|
document.body.classList.remove('mobile-nav-open');
|
|
const menuBtn = document.getElementById('mobileMenuBtn');
|
|
if (menuBtn) {
|
|
menuBtn.setAttribute('aria-expanded', 'false');
|
|
}
|
|
}
|
|
|
|
async fetchApplications() {
|
|
const res = await fetch(`${this.apiBase}/applications`);
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
this.applications = data.data;
|
|
} else {
|
|
console.error('Load applications failed:', data.message);
|
|
}
|
|
}
|
|
|
|
async fetchAccounts() {
|
|
try {
|
|
const res = await fetch(`${this.apiBase}/accounts/all`);
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
this.accounts = data.data;
|
|
} else {
|
|
console.error('Load accounts failed:', data.message);
|
|
}
|
|
} catch (err) {
|
|
console.error('Fetch accounts error:', err);
|
|
}
|
|
}
|
|
|
|
async fetchUsers() {
|
|
try {
|
|
const res = await fetch(`${this.apiBase}/users`);
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
this.users = data.data;
|
|
} else {
|
|
console.error('Load users failed:', data.message);
|
|
}
|
|
} catch (err) {
|
|
console.error('Fetch users error:', err);
|
|
}
|
|
}
|
|
|
|
async fetchRoles() {
|
|
try {
|
|
const res = await fetch(`${this.apiBase}/roles`);
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
this.roles = data.data;
|
|
} else {
|
|
console.error('Load roles failed:', data.message);
|
|
}
|
|
} catch (err) {
|
|
console.error('Fetch roles error:', err);
|
|
}
|
|
}
|
|
|
|
async loadModals() {
|
|
try {
|
|
const existingContainer = document.getElementById('modalsContainer');
|
|
if (existingContainer && existingContainer.children.length) {
|
|
return;
|
|
}
|
|
|
|
const response = await fetch('../modals.html');
|
|
const modalsHTML = await response.text();
|
|
|
|
const container = existingContainer || document.createElement('div');
|
|
if (!container.id) container.id = 'modalsContainer';
|
|
container.innerHTML = modalsHTML;
|
|
if (!container.parentElement) {
|
|
document.body.appendChild(container);
|
|
}
|
|
|
|
this.setupFormListeners();
|
|
this.setupAccountRowListeners();
|
|
this.setupAddButtonListeners();
|
|
this.setupFilters();
|
|
} catch (error) {
|
|
console.error('Lỗi load modals:', error);
|
|
}
|
|
}
|
|
|
|
restoreSearchFocus() {
|
|
const accountSearch = document.getElementById('accountSearch');
|
|
const appSearch = document.getElementById('appSearch');
|
|
|
|
if (accountSearch && accountSearch.dataset.focused === 'true') {
|
|
const pos = accountSearch.selectionStart || accountSearch.value.length;
|
|
accountSearch.focus();
|
|
accountSearch.setSelectionRange(pos, pos);
|
|
}
|
|
|
|
if (appSearch && appSearch.dataset.focused === 'true') {
|
|
const pos = appSearch.selectionStart || appSearch.value.length;
|
|
appSearch.focus();
|
|
appSearch.setSelectionRange(pos, pos);
|
|
}
|
|
}
|
|
|
|
setupEventListeners() {
|
|
// Modal close buttons
|
|
document.querySelectorAll('[data-close-modal]').forEach(btn => {
|
|
btn.addEventListener('click', () => this.closeModals());
|
|
});
|
|
|
|
// Close with Escape key
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') {
|
|
this.closeMobileNav();
|
|
this.closeModals();
|
|
}
|
|
});
|
|
|
|
// Form submissions
|
|
// Logout button
|
|
const logoutBtn = document.getElementById('logoutBtn');
|
|
if (logoutBtn) {
|
|
logoutBtn.addEventListener('click', () => this.handleLogout());
|
|
}
|
|
|
|
const profileBtn = document.getElementById('profileBtn');
|
|
if (profileBtn) {
|
|
profileBtn.addEventListener('click', () => this.openProfileModal());
|
|
}
|
|
|
|
// Update account display
|
|
this.updateAccountDisplay();
|
|
|
|
// Account table row clicks
|
|
this.setupAccountRowListeners();
|
|
this.setupFilters();
|
|
this.setupResponsiveShell();
|
|
}
|
|
|
|
setupFormListeners() {
|
|
const accountForm = document.getElementById('accountForm');
|
|
if (accountForm) {
|
|
if (!accountForm.dataset.boundSubmit) {
|
|
accountForm.addEventListener('submit', (e) => this.handleAccountSubmit(e));
|
|
accountForm.dataset.boundSubmit = 'true';
|
|
}
|
|
}
|
|
|
|
const appForm = document.getElementById('appForm');
|
|
if (appForm) {
|
|
if (!appForm.dataset.boundSubmit) {
|
|
appForm.addEventListener('submit', (e) => this.handleAppSubmit(e));
|
|
appForm.dataset.boundSubmit = 'true';
|
|
}
|
|
}
|
|
|
|
// Close when clicking backdrop outside modal content
|
|
document.querySelectorAll('.modal-backdrop').forEach(backdrop => {
|
|
backdrop.addEventListener('click', (evt) => {
|
|
if (evt.target === backdrop) {
|
|
this.closeModals();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
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 || this.currentUser?.Username || 'User';
|
|
if (roleEl) roleEl.textContent = this.getCurrentUserRoleRaw() || 'Guest';
|
|
}
|
|
|
|
getFilteredAccounts() {
|
|
const svcFilter = this.accountServiceFilter || '';
|
|
const search = (this.accountSearchTerm || '').toLowerCase();
|
|
return this.accounts.filter(acc => {
|
|
const matchesService = !svcFilter || String(acc.AppId) === String(svcFilter);
|
|
if (!matchesService) return false;
|
|
if (!search) return true;
|
|
const hay = [acc.AccountUsername, acc.Email, acc.AppName, acc.AppType].map(v => (v || '').toLowerCase());
|
|
return hay.some(val => val.includes(search));
|
|
});
|
|
}
|
|
|
|
getFilteredApplications() {
|
|
const search = (this.applicationSearchTerm || '').toLowerCase();
|
|
if (!search) return this.applications;
|
|
return this.applications.filter(app => {
|
|
const hay = [app.Name, app.Type, app.Description, app.Url, app.Icon].map(v => (v || '').toLowerCase());
|
|
return hay.some(val => val.includes(search));
|
|
});
|
|
}
|
|
|
|
getPaged(items, page, pageSize) {
|
|
const total = items.length;
|
|
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
|
const current = Math.min(Math.max(1, page), totalPages);
|
|
const start = (current - 1) * pageSize;
|
|
return {
|
|
current,
|
|
total,
|
|
totalPages,
|
|
data: items.slice(start, start + pageSize),
|
|
start: total === 0 ? 0 : start + 1,
|
|
end: Math.min(total, start + pageSize)
|
|
};
|
|
}
|
|
|
|
handleLogout() {
|
|
if (confirm('Are you sure you want to logout?')) {
|
|
this.saveToStorage('currentUser', null);
|
|
localStorage.clear();
|
|
window.location.href = '../pages/login.html';
|
|
}
|
|
}
|
|
|
|
renderDashboard() {
|
|
return `
|
|
<div class="dashboard-page flex-1 flex flex-col p-4 md:p-6 space-y-6 min-h-0 overflow-auto">
|
|
<!-- Title and Stats -->
|
|
<div class="dashboard-header flex items-end justify-between shrink-0">
|
|
<div>
|
|
<h1 class="text-2xl font-extrabold text-on-surface tracking-tight leading-none">System Overview</h1>
|
|
<p class="text-xs text-on-surface-variant font-medium mt-1">Account & Service Management</p>
|
|
</div>
|
|
<div class="dashboard-actions flex gap-2">
|
|
<a href="#accounts" class="py-1.5 px-3 bg-primary text-on-primary rounded-lg text-xs font-bold flex items-center gap-1.5 shadow-sm active:scale-95 duration-100">
|
|
<span class="material-symbols-outlined text-sm">add</span>
|
|
Add Account
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Metric Grid -->
|
|
<div class="dashboard-stats grid grid-cols-4 gap-4 shrink-0">
|
|
<div class="bg-surface-container-lowest p-4 rounded-xl border border-outline-variant/15 flex flex-col">
|
|
<span class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider mb-2">Applications</span>
|
|
<div class="flex items-baseline justify-between">
|
|
<span class="text-2xl font-black text-on-surface">${this.applications.length}</span>
|
|
<span class="text-[10px] font-bold text-on-surface-variant">${this.applications.filter(a => (a.Status || a.status) === 'online').length} Active</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest p-4 rounded-xl border border-outline-variant/15 flex flex-col">
|
|
<span class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider mb-2">Total Accounts</span>
|
|
<div class="flex items-baseline justify-between">
|
|
<span class="text-2xl font-black text-on-surface">${this.accounts.length}</span>
|
|
<span class="text-[10px] font-bold text-on-surface-variant/40">Managed</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest p-4 rounded-xl border border-outline-variant/15 flex flex-col">
|
|
<span class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider mb-2">Last Updated</span>
|
|
<div class="flex items-baseline justify-between">
|
|
<span class="text-sm font-black text-on-surface">${new Date().toLocaleDateString()}</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-primary-container/10 p-4 rounded-xl border border-primary/20 flex flex-col">
|
|
<span class="text-[10px] font-bold text-primary uppercase tracking-wider mb-2">Status</span>
|
|
<div class="flex items-baseline justify-between">
|
|
<span class="text-lg font-black text-primary">Operational</span>
|
|
<span class="material-symbols-outlined text-primary text-sm">check_circle</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Activity -->
|
|
<div class="bg-surface-container-lowest rounded-xl p-5 border border-outline-variant/15 flex flex-col flex-1 min-h-0">
|
|
<div class="flex items-center justify-between mb-4 shrink-0">
|
|
<h3 class="text-sm font-bold text-on-surface flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary text-base">history</span>
|
|
Recent Accounts
|
|
</h3>
|
|
</div>
|
|
${this.accounts.length > 0 ? `
|
|
<div class="flex-1 overflow-y-auto space-y-2">
|
|
${this.accounts.slice(-5).reverse().map(acc => {
|
|
const username = acc.AccountUsername || acc.username || '-';
|
|
const service = acc.AppName || acc.service || '-';
|
|
const owner = acc.Email || acc.owner || this.currentUser?.Username || this.currentUser?.username || '-';
|
|
return `
|
|
<div class="flex gap-3 p-3 bg-surface-container-low/50 rounded-lg border-l-2 border-primary/50">
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-[11px] font-bold text-on-surface truncate">${username}</p>
|
|
<p class="text-[9px] text-on-surface-variant">${service} • ${owner}</p>
|
|
</div>
|
|
</div>
|
|
`;}).join('')}
|
|
</div>
|
|
` : `
|
|
<div class="flex-1 flex items-center justify-center text-center">
|
|
<p class="text-sm text-on-surface-variant">No accounts yet. <a href="#accounts" class="text-primary font-bold">Create one</a></p>
|
|
</div>
|
|
`}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
getAccountsContent() {
|
|
const filteredAccounts = this.getFilteredAccounts();
|
|
const currentUserId = this.getUserId();
|
|
const pageInfo = this.getPaged(filteredAccounts, this.accountPage, this.accountPageSize);
|
|
this.accountPage = pageInfo.current;
|
|
return `
|
|
<div class="accounts-page p-4 md:p-6 flex flex-col h-full overflow-hidden">
|
|
<!-- Page Header -->
|
|
<div class="page-header flex items-center justify-between mb-4 shrink-0">
|
|
<div>
|
|
<h1 class="text-xl font-extrabold text-on-surface tracking-tight">Accounts Management</h1>
|
|
<p class="text-[10px] text-on-surface-variant uppercase font-semibold tracking-widest mt-0.5">Administrative Access Control</p>
|
|
</div>
|
|
<button id="addAccountBtn" class="bg-primary hover:bg-primary-dim text-on-primary px-3 py-1.5 rounded-lg text-xs font-bold shadow-sm flex items-center gap-1.5 transition-all active:scale-95">
|
|
<span class="material-symbols-outlined text-base">person_add</span>
|
|
Add Account
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="page-filters flex items-center gap-3 mb-4">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="text-[10px] font-bold uppercase text-on-surface-variant">Service</span>
|
|
<select id="serviceFilter" class="bg-surface-container-low border-slate-200 rounded-md text-[11px] py-1 px-2 pr-6 focus:ring-1 focus:ring-primary shadow-sm">
|
|
<option value="">All Services</option>
|
|
${this.applications.map(app => `<option value="${app.AppId}">${app.Name}</option>`).join('')}
|
|
</select>
|
|
</div>
|
|
<div class="flex items-center gap-1.5 flex-1">
|
|
<span class="text-[10px] font-bold uppercase text-on-surface-variant">Search</span>
|
|
<input id="accountSearch" class="flex-1 bg-surface-container-low border-slate-200 rounded-md text-[11px] py-1 px-2 focus:ring-1 focus:ring-primary shadow-sm" placeholder="Search by owner, username, service">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Accounts Table -->
|
|
<div class="flex-1 bg-white rounded-xl border border-slate-200 shadow-sm flex flex-col overflow-hidden min-h-0">
|
|
${pageInfo.data.length > 0 ? `
|
|
<div class="table-wrap overflow-y-auto overflow-x-auto flex-1">
|
|
<table class="w-full text-left border-collapse w-full">
|
|
<thead class="sticky top-0 z-10">
|
|
<tr class="bg-slate-50 border-b border-slate-200">
|
|
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">User</th>
|
|
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">Owner</th>
|
|
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">Username</th>
|
|
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">Service</th>
|
|
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500 text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100 accounts-table-body">
|
|
${pageInfo.data.map(acc => {
|
|
const isOwnAccount = acc.UserId == currentUserId;
|
|
const actionContent = isOwnAccount
|
|
? `<button class="p-1.5 text-slate-400 transition-colors view-account hover:text-slate-600" data-account-id="${acc.AccountId}" title="View Details">
|
|
<span class="material-symbols-outlined text-lg">info</span>
|
|
</button>
|
|
<button class="p-1.5 text-slate-400 transition-colors edit-account hover:text-primary" data-account-id="${acc.AccountId}" title="Edit">
|
|
<span class="material-symbols-outlined text-lg">edit</span>
|
|
</button>
|
|
<button class="p-1.5 text-slate-400 transition-colors delete-account hover:text-error" data-account-id="${acc.AccountId}" title="Delete">
|
|
<span class="material-symbols-outlined text-lg">delete</span>
|
|
</button>`
|
|
: '<span class="text-slate-400 text-xs">-</span>';
|
|
return `
|
|
<tr class="hover:bg-slate-50/80 transition-colors group account-row" data-account-id="${acc.AccountId}" data-user-id="${acc.UserId}">
|
|
<td class="px-4 py-3 text-sm font-medium text-slate-900">${acc.Username || acc.FullName || '-'}</td>
|
|
<td class="px-4 py-3 text-sm text-slate-600">${acc.Email || '-'}</td>
|
|
<td class="px-4 py-3 text-sm text-slate-600">${acc.AccountUsername || '-'}</td>
|
|
<td class="px-4 py-3 text-sm">
|
|
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs font-semibold">${acc.AppName || '-'}</span>
|
|
</td>
|
|
<td class="px-4 py-3 text-right">
|
|
${actionContent}
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}).join('')}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="page-pager flex items-center justify-between px-4 py-2 border-t border-slate-200 bg-slate-50 text-xs text-slate-600" id="accountsPager">
|
|
<span>Showing ${pageInfo.start}-${pageInfo.end} of ${pageInfo.total}</span>
|
|
<div class="flex items-center gap-2">
|
|
<button class="account-page-btn px-2 py-1 border border-slate-200 rounded text-xs ${pageInfo.current === 1 ? 'opacity-50 cursor-not-allowed' : ''}" data-page="${pageInfo.current - 1}" ${pageInfo.current === 1 ? 'disabled' : ''}>Prev</button>
|
|
<span class="text-[11px]">Page ${pageInfo.current} / ${pageInfo.totalPages}</span>
|
|
<button class="account-page-btn px-2 py-1 border border-slate-200 rounded text-xs ${pageInfo.current === pageInfo.totalPages ? 'opacity-50 cursor-not-allowed' : ''}" data-page="${pageInfo.current + 1}" ${pageInfo.current === pageInfo.totalPages ? 'disabled' : ''}>Next</button>
|
|
</div>
|
|
</div>
|
|
` : `
|
|
<div class="flex-1 flex items-center justify-center text-center">
|
|
<div>
|
|
<p class="text-sm text-on-surface-variant mb-4">No accounts yet. Create one to get started.</p>
|
|
<button id="addAccountBtn" class="bg-primary hover:bg-primary-dim text-on-primary px-4 py-2 rounded-lg text-sm font-bold">
|
|
<span class="material-symbols-outlined text-base inline mr-2">person_add</span>
|
|
Add First Account
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`}
|
|
</div>
|
|
</div>
|
|
|
|
`;
|
|
}
|
|
|
|
getApplicationsContent() {
|
|
const filteredApps = this.getFilteredApplications();
|
|
const pageInfo = this.getPaged(filteredApps, this.appPage, this.appPageSize);
|
|
this.appPage = pageInfo.current;
|
|
return `
|
|
<div class="apps-page flex flex-col p-4 md:p-6 overflow-hidden h-full">
|
|
<!-- Header Section -->
|
|
<div class="page-header flex items-center justify-between gap-6 mb-6 shrink-0">
|
|
<div>
|
|
<h1 class="text-2xl font-extrabold text-on-surface tracking-tight">Applications</h1>
|
|
<p class="text-sm text-on-surface-variant">Manage and monitor active infrastructure services.</p>
|
|
</div>
|
|
<button id="addAppBtn" class="bg-primary hover:bg-primary-dim text-on-primary px-4 py-2 rounded-xl font-bold flex items-center gap-2 transition-all active:scale-95 shadow-sm">
|
|
<span class="material-symbols-outlined">add</span>
|
|
Add New
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Dashboard Stats -->
|
|
<div class="apps-stats grid grid-cols-3 gap-4 mb-6 shrink-0">
|
|
<div class="bg-surface-container-lowest px-4 py-3 rounded-xl shadow-sm border border-outline-variant/5 flex items-center gap-4">
|
|
<div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined text-xl">lan</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider">Active</p>
|
|
<p class="text-lg font-black text-on-surface">${this.applications.filter(a => a.status === 'online').length}</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest px-4 py-3 rounded-xl shadow-sm border border-outline-variant/5 flex items-center gap-4">
|
|
<div class="w-10 h-10 rounded-lg bg-tertiary/10 flex items-center justify-center text-tertiary">
|
|
<span class="material-symbols-outlined text-xl">bolt</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider">Total</p>
|
|
<p class="text-lg font-black text-on-surface">${this.applications.length}</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest px-4 py-3 rounded-xl shadow-sm border border-outline-variant/5 flex items-center gap-4">
|
|
<div class="w-10 h-10 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary">
|
|
<span class="material-symbols-outlined text-xl">database</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider">Health</p>
|
|
<p class="text-lg font-black text-on-surface">99.9%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Applications List -->
|
|
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant/10 overflow-hidden flex flex-col flex-1 min-h-0">
|
|
<div class="page-filters px-4 py-3 border-b border-outline-variant/10 flex items-center gap-2 bg-surface-container-low/40">
|
|
<span class="text-[10px] font-bold uppercase text-on-surface-variant">Search</span>
|
|
<input id="appSearch" class="flex-1 bg-white border border-slate-200 rounded-md text-[11px] py-1 px-2 focus:ring-1 focus:ring-primary shadow-sm" placeholder="Search by name, type, description, url">
|
|
</div>
|
|
<div class="table-wrap overflow-y-auto overflow-x-auto flex-1">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead class="sticky top-0 bg-surface-container-lowest z-10">
|
|
<tr class="bg-surface-container-low/30 border-b border-outline-variant/10">
|
|
<th class="px-6 py-2.5 text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">Name</th>
|
|
<th class="px-6 py-2.5 text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">Type</th>
|
|
<th class="px-6 py-2.5 text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">Description</th>
|
|
<th class="px-6 py-2.5 text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">URL</th>
|
|
<th class="px-6 py-2.5 text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">Status</th>
|
|
<th class="px-6 py-2.5 text-[10px] font-bold text-on-surface-variant uppercase tracking-widest text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-outline-variant/5 apps-table-body">
|
|
${pageInfo.data.map(app => `
|
|
<tr class="hover:bg-surface-container-low/30 transition-colors group">
|
|
<td class="px-6 py-3">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-surface-container-highest flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined text-sm">${app.Icon || 'apps'}</span>
|
|
</div>
|
|
<span class="font-bold text-sm text-on-surface">${app.Name}</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-3">
|
|
<span class="px-2 py-0.5 rounded-full text-[9px] font-black uppercase bg-surface-container-highest text-on-surface-variant">${app.Type}</span>
|
|
</td>
|
|
<td class="px-6 py-3 text-sm text-on-surface-variant max-w-xs truncate" title="${app.Description || ''}">${app.Description || '-'}</td>
|
|
<td class="px-6 py-3 text-sm text-primary max-w-xs truncate">${(app.Url || app.url) ? `<a href="${app.Url || app.url}" target="_blank" class="underline">${app.Url || app.url}</a>` : '-'}</td>
|
|
<td class="px-6 py-3">
|
|
<div class="flex items-center gap-1.5">
|
|
<div class="w-1.5 h-1.5 rounded-full ${(app.Status || app.status) === 'online' ? 'bg-primary' : 'bg-error'} ring-2 ${(app.Status || app.status) === 'online' ? 'ring-primary/20' : 'ring-error/20'}"></div>
|
|
<span class="text-xs font-medium ${(app.Status || app.status) === 'online' ? 'text-on-primary-fixed-variant' : 'text-error'}">${(app.Status || app.status) === 'online' ? 'Online' : 'Offline'}</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-3 text-right">
|
|
<div class="flex items-center justify-end gap-1">
|
|
<button class="p-1.5 text-on-surface-variant hover:text-on-surface transition-colors view-app" data-app-id="${app.AppId}" title="View Details">
|
|
<span class="material-symbols-outlined text-lg">info</span>
|
|
</button>
|
|
<button class="p-1.5 text-on-surface-variant hover:text-primary transition-colors edit-app" data-app-id="${app.AppId}">
|
|
<span class="material-symbols-outlined text-lg">edit</span>
|
|
</button>
|
|
<button class="p-1.5 text-on-surface-variant hover:text-error transition-colors delete-app" data-app-id="${app.AppId}">
|
|
<span class="material-symbols-outlined text-lg">delete</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="page-pager flex items-center justify-between px-4 py-2 border-t border-outline-variant/10 bg-surface-container-low/60 text-xs text-on-surface-variant" id="appsPager">
|
|
<span>Showing ${pageInfo.start}-${pageInfo.end} of ${pageInfo.total}</span>
|
|
<div class="flex items-center gap-2">
|
|
<button class="app-page-btn px-2 py-1 border border-slate-200 rounded text-xs ${pageInfo.current === 1 ? 'opacity-50 cursor-not-allowed' : ''}" data-page="${pageInfo.current - 1}" ${pageInfo.current === 1 ? 'disabled' : ''}>Prev</button>
|
|
<span class="text-[11px]">Page ${pageInfo.current} / ${pageInfo.totalPages}</span>
|
|
<button class="app-page-btn px-2 py-1 border border-slate-200 rounded text-xs ${pageInfo.current === pageInfo.totalPages ? 'opacity-50 cursor-not-allowed' : ''}" data-page="${pageInfo.current + 1}" ${pageInfo.current === pageInfo.totalPages ? 'disabled' : ''}>Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
`;
|
|
}
|
|
|
|
renderAccountsTableBody() {
|
|
const tbody = document.querySelector('.accounts-table-body');
|
|
if (!tbody) return;
|
|
const currentUserId = this.getUserId();
|
|
const pageInfo = this.getPaged(this.getFilteredAccounts(), this.accountPage, this.accountPageSize);
|
|
this.accountPage = pageInfo.current;
|
|
tbody.innerHTML = pageInfo.data.map(acc => {
|
|
const isOwnAccount = acc.UserId == currentUserId;
|
|
const actionContent = isOwnAccount
|
|
? `<button class="p-1.5 text-slate-400 transition-colors view-account hover:text-slate-600" data-account-id="${acc.AccountId}" title="View Details">
|
|
<span class="material-symbols-outlined text-lg">info</span>
|
|
</button>
|
|
<button class="p-1.5 text-slate-400 transition-colors edit-account hover:text-primary" data-account-id="${acc.AccountId}" title="Edit">
|
|
<span class="material-symbols-outlined text-lg">edit</span>
|
|
</button>
|
|
<button class="p-1.5 text-slate-400 transition-colors delete-account hover:text-error" data-account-id="${acc.AccountId}" title="Delete">
|
|
<span class="material-symbols-outlined text-lg">delete</span>
|
|
</button>`
|
|
: '<span class="text-slate-400 text-xs">-</span>';
|
|
return `
|
|
<tr class="hover:bg-slate-50/80 transition-colors group account-row" data-account-id="${acc.AccountId}" data-user-id="${acc.UserId}">
|
|
<td class="px-4 py-3 text-sm font-medium text-slate-900">${acc.Username || acc.FullName || '-'}</td>
|
|
<td class="px-4 py-3 text-sm text-slate-600">${acc.Email || '-'}</td>
|
|
<td class="px-4 py-3 text-sm text-slate-600">${acc.AccountUsername || '-'}</td>
|
|
<td class="px-4 py-3 text-sm">
|
|
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs font-semibold">${acc.AppName || '-'}</span>
|
|
</td>
|
|
<td class="px-4 py-3 text-right">
|
|
${actionContent}
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}).join('');
|
|
|
|
const pager = document.getElementById('accountsPager');
|
|
if (pager) {
|
|
pager.innerHTML = `
|
|
<span>Showing ${pageInfo.start}-${pageInfo.end} of ${pageInfo.total}</span>
|
|
<div class="flex items-center gap-2">
|
|
<button class="account-page-btn px-2 py-1 border border-slate-200 rounded text-xs ${pageInfo.current === 1 ? 'opacity-50 cursor-not-allowed' : ''}" data-page="${pageInfo.current - 1}" ${pageInfo.current === 1 ? 'disabled' : ''}>Prev</button>
|
|
<span class="text-[11px]">Page ${pageInfo.current} / ${pageInfo.totalPages}</span>
|
|
<button class="account-page-btn px-2 py-1 border border-slate-200 rounded text-xs ${pageInfo.current === pageInfo.totalPages ? 'opacity-50 cursor-not-allowed' : ''}" data-page="${pageInfo.current + 1}" ${pageInfo.current === pageInfo.totalPages ? 'disabled' : ''}>Next</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
this.setupAccountRowListeners();
|
|
this.setupAccountPagerListeners();
|
|
}
|
|
|
|
renderApplicationsTableBody() {
|
|
const tbody = document.querySelector('.apps-table-body');
|
|
if (!tbody) return;
|
|
const pageInfo = this.getPaged(this.getFilteredApplications(), this.appPage, this.appPageSize);
|
|
this.appPage = pageInfo.current;
|
|
tbody.innerHTML = pageInfo.data.map(app => `
|
|
<tr class="hover:bg-surface-container-low/30 transition-colors group">
|
|
<td class="px-6 py-3">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-surface-container-highest flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined text-sm">${app.Icon || 'apps'}</span>
|
|
</div>
|
|
<span class="font-bold text-sm text-on-surface">${app.Name}</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-3">
|
|
<span class="px-2 py-0.5 rounded-full text-[9px] font-black uppercase bg-surface-container-highest text-on-surface-variant">${app.Type}</span>
|
|
</td>
|
|
<td class="px-6 py-3 text-sm text-on-surface-variant max-w-xs truncate" title="${app.Description || ''}">${app.Description || '-'}</td>
|
|
<td class="px-6 py-3 text-sm text-primary max-w-xs truncate">${(app.Url || app.url) ? `<a href="${app.Url || app.url}" target="_blank" class="underline">${app.Url || app.url}</a>` : '-'}</td>
|
|
<td class="px-6 py-3">
|
|
<div class="flex items-center gap-1.5">
|
|
<div class="w-1.5 h-1.5 rounded-full ${(app.Status || app.status) === 'online' ? 'bg-primary' : 'bg-error'} ring-2 ${(app.Status || app.status) === 'online' ? 'ring-primary/20' : 'ring-error/20'}"></div>
|
|
<span class="text-xs font-medium ${(app.Status || app.status) === 'online' ? 'text-on-primary-fixed-variant' : 'text-error'}">${(app.Status || app.status) === 'online' ? 'Online' : 'Offline'}</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-3 text-right">
|
|
<div class="flex items-center justify-end gap-1">
|
|
<button class="p-1.5 text-on-surface-variant hover:text-on-surface transition-colors view-app" data-app-id="${app.AppId}" title="View Details">
|
|
<span class="material-symbols-outlined text-lg">info</span>
|
|
</button>
|
|
<button class="p-1.5 text-on-surface-variant hover:text-primary transition-colors edit-app" data-app-id="${app.AppId}">
|
|
<span class="material-symbols-outlined text-lg">edit</span>
|
|
</button>
|
|
<button class="p-1.5 text-on-surface-variant hover:text-error transition-colors delete-app" data-app-id="${app.AppId}">
|
|
<span class="material-symbols-outlined text-lg">delete</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`).join('');
|
|
|
|
const pager = document.getElementById('appsPager');
|
|
if (pager) {
|
|
pager.innerHTML = `
|
|
<span>Showing ${pageInfo.start}-${pageInfo.end} of ${pageInfo.total}</span>
|
|
<div class="flex items-center gap-2">
|
|
<button class="app-page-btn px-2 py-1 border border-slate-200 rounded text-xs ${pageInfo.current === 1 ? 'opacity-50 cursor-not-allowed' : ''}" data-page="${pageInfo.current - 1}" ${pageInfo.current === 1 ? 'disabled' : ''}>Prev</button>
|
|
<span class="text-[11px]">Page ${pageInfo.current} / ${pageInfo.totalPages}</span>
|
|
<button class="app-page-btn px-2 py-1 border border-slate-200 rounded text-xs ${pageInfo.current === pageInfo.totalPages ? 'opacity-50 cursor-not-allowed' : ''}" data-page="${pageInfo.current + 1}" ${pageInfo.current === pageInfo.totalPages ? 'disabled' : ''}>Next</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
this.setupAccountRowListeners();
|
|
this.setupAppPagerListeners();
|
|
}
|
|
|
|
setupAccountPagerListeners() {
|
|
document.querySelectorAll('.account-page-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const targetPage = Number(btn.dataset.page);
|
|
if (!targetPage || targetPage < 1) return;
|
|
this.accountPage = targetPage;
|
|
this.renderAccountsTableBody();
|
|
});
|
|
});
|
|
}
|
|
|
|
setupAppPagerListeners() {
|
|
document.querySelectorAll('.app-page-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const targetPage = Number(btn.dataset.page);
|
|
if (!targetPage || targetPage < 1) return;
|
|
this.appPage = targetPage;
|
|
this.renderApplicationsTableBody();
|
|
});
|
|
});
|
|
}
|
|
|
|
setupAccountRowListeners() {
|
|
// View Account listeners
|
|
document.querySelectorAll('.view-account').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
if (btn.disabled) return; // Only view own accounts
|
|
const accountId = Number(btn.dataset.accountId);
|
|
const account = this.accounts.find(a => a.AccountId === accountId);
|
|
this.currentViewAccountId = accountId;
|
|
this.currentViewAccount = account;
|
|
document.getElementById('viewAccountService').textContent = account?.AppName || '-';
|
|
document.getElementById('viewAccountOwner').textContent = account?.Email || '-';
|
|
document.getElementById('viewAccountUsername').textContent = account?.AccountUsername || '-';
|
|
const passwordEl = document.getElementById('viewAccountPassword');
|
|
const toggleBtn = document.querySelector('.toggle-password');
|
|
const toggleIcon = document.getElementById('toggleIcon');
|
|
const storedPwd = account?.AccountPassword || '';
|
|
passwordEl.dataset.password = storedPwd;
|
|
passwordEl.textContent = storedPwd ? '••••••••' : '(no password stored)';
|
|
passwordEl.dataset.visible = 'false';
|
|
if (toggleIcon) toggleIcon.textContent = 'visibility';
|
|
|
|
// Rebind toggle each time modal opens to keep state fresh
|
|
if (toggleBtn) {
|
|
toggleBtn.onclick = () => {
|
|
const currentPwd = passwordEl.dataset.password || '';
|
|
const isVisible = passwordEl.dataset.visible === 'true';
|
|
if (isVisible) {
|
|
passwordEl.textContent = currentPwd ? '••••••••' : '(no password stored)';
|
|
passwordEl.dataset.visible = 'false';
|
|
if (toggleIcon) toggleIcon.textContent = 'visibility';
|
|
} else {
|
|
passwordEl.textContent = currentPwd || '(no password stored)';
|
|
passwordEl.dataset.visible = 'true';
|
|
if (toggleIcon) toggleIcon.textContent = 'visibility_off';
|
|
}
|
|
};
|
|
}
|
|
document.getElementById('viewAccountModal').classList.add('open');
|
|
});
|
|
});
|
|
|
|
// Delete Account listeners - show confirmation modal
|
|
document.querySelectorAll('.delete-account').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
if (btn.disabled) return; // Don't delete others' accounts
|
|
const accountId = Number(btn.dataset.accountId);
|
|
const account = this.accounts.find(a => a.AccountId === accountId);
|
|
this.pendingDeleteAccountId = accountId;
|
|
document.getElementById('deleteAccountUsername').textContent = account?.AccountUsername || '';
|
|
document.getElementById('deleteAccountModal').classList.add('open');
|
|
});
|
|
});
|
|
|
|
// Confirm Delete Account
|
|
document.querySelectorAll('.confirm-delete-account').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
if (this.pendingDeleteAccountId !== undefined) {
|
|
fetch(`${this.apiBase}/accounts/${this.pendingDeleteAccountId}`, { method: 'DELETE' })
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
this.notifySuccess('Account deleted successfully');
|
|
this.closeModals();
|
|
this.refreshAccountsUI();
|
|
} else {
|
|
this.notifyFailure(data.message || 'Delete account failed');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
this.notifyFailure('Delete account failed');
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Edit Account listeners
|
|
document.querySelectorAll('.edit-account').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
if (btn.disabled) return; // Don't edit others' accounts
|
|
const accountId = Number(btn.dataset.accountId);
|
|
const account = this.accounts.find(a => a.AccountId === accountId);
|
|
// Populate form with existing data
|
|
const form = document.getElementById('accountForm');
|
|
if (form) {
|
|
const userInput = form.querySelector('#accountUsername');
|
|
const passInput = form.querySelector('#accountPassword');
|
|
const ownerInput = form.querySelector('#accountOwner');
|
|
const serviceSelect = form.querySelector('#accountService');
|
|
if (userInput) userInput.value = account?.AccountUsername || '';
|
|
if (passInput) passInput.value = account?.AccountPassword || '';
|
|
if (ownerInput) ownerInput.value = this.currentUser?.Username || this.currentUser?.username || '';
|
|
if (serviceSelect) serviceSelect.value = account?.AppId || '';
|
|
}
|
|
this.pendingAccountAppId = account?.AppId;
|
|
this.editingAccountId = account?.AccountId;
|
|
this.closeModals();
|
|
this.openAccountModal();
|
|
});
|
|
});
|
|
|
|
// Edit from View modal
|
|
document.querySelectorAll('.edit-account-from-view').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const account = this.currentViewAccount;
|
|
const form = document.getElementById('accountForm');
|
|
if (form) {
|
|
const userInput = form.querySelector('#accountUsername');
|
|
const passInput = form.querySelector('#accountPassword');
|
|
const ownerInput = form.querySelector('#accountOwner');
|
|
const serviceSelect = form.querySelector('#accountService');
|
|
if (userInput) userInput.value = account?.AccountUsername || '';
|
|
if (passInput) passInput.value = account?.AccountPassword || '';
|
|
if (ownerInput) ownerInput.value = this.currentUser?.Username || this.currentUser?.username || '';
|
|
if (serviceSelect) serviceSelect.value = account?.AppId || '';
|
|
}
|
|
this.pendingAccountAppId = account?.AppId;
|
|
this.editingAccountId = account?.AccountId;
|
|
this.closeModals();
|
|
this.openAccountModal();
|
|
});
|
|
});
|
|
|
|
// View App listeners
|
|
document.querySelectorAll('.view-app').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const appId = Number(btn.dataset.appId);
|
|
const app = this.applications.find(a => a.AppId === appId);
|
|
this.currentViewAppId = appId;
|
|
document.getElementById('viewAppName').textContent = app?.Name || '-';
|
|
document.getElementById('viewAppType').textContent = app?.Type || '-';
|
|
const iconVal = app?.Icon || app?.icon || 'apps';
|
|
const iconSymbolEl = document.getElementById('viewAppIconSymbol');
|
|
const iconNameEl = document.getElementById('viewAppIconName');
|
|
if (iconSymbolEl) iconSymbolEl.textContent = iconVal;
|
|
if (iconNameEl) iconNameEl.textContent = iconVal;
|
|
document.getElementById('viewAppDescription').textContent = app?.Description || '-';
|
|
const urlEl = document.getElementById('viewAppUrl');
|
|
const urlVal = app?.Url || app?.url;
|
|
if (urlEl) {
|
|
if (urlVal) {
|
|
urlEl.innerHTML = `<a href="${urlVal}" target="_blank" class="text-primary underline">${urlVal}</a>`;
|
|
} else {
|
|
urlEl.textContent = '-';
|
|
}
|
|
}
|
|
const statusValue = app?.Status || app?.status;
|
|
document.getElementById('viewAppStatus').textContent = statusValue === 'online' ? 'Online' : 'Offline';
|
|
document.getElementById('viewAppModal').classList.add('open');
|
|
});
|
|
});
|
|
|
|
// Delete App listeners - show confirmation modal
|
|
document.querySelectorAll('.delete-app').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const appId = Number(btn.dataset.appId);
|
|
const app = this.applications.find(a => a.AppId === appId);
|
|
this.pendingDeleteAppId = appId;
|
|
document.getElementById('deleteAppName').textContent = app?.Name || '';
|
|
document.getElementById('deleteAppModal').classList.add('open');
|
|
});
|
|
});
|
|
|
|
// Confirm Delete App
|
|
document.querySelectorAll('.confirm-delete-app').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
if (this.pendingDeleteAppId !== undefined) {
|
|
fetch(`${this.apiBase}/applications/${this.pendingDeleteAppId}`, { method: 'DELETE' })
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
this.notifySuccess('Application deleted successfully');
|
|
this.closeModals();
|
|
this.refreshApplicationsUI();
|
|
} else {
|
|
this.notifyFailure(data.message || 'Delete application failed');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
this.notifyFailure('Delete application failed');
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Edit App listeners
|
|
document.querySelectorAll('.edit-app').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const appId = Number(btn.dataset.appId);
|
|
const app = this.applications.find(a => a.AppId === appId);
|
|
document.getElementById('appName').value = app?.Name || '';
|
|
document.getElementById('appType').value = app?.Type || '';
|
|
document.getElementById('appStatus').value = app?.Status || 'online';
|
|
document.getElementById('appDescription').value = app?.Description || '';
|
|
document.getElementById('appIcon').value = app?.Icon || app?.icon || '';
|
|
document.getElementById('appUrl').value = app?.Url || app?.url || '';
|
|
this.editingAppId = app?.AppId;
|
|
this.closeModals();
|
|
this.openAppModal();
|
|
});
|
|
});
|
|
|
|
// Edit App from View modal
|
|
document.querySelectorAll('.edit-app-from-view').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const appId = this.currentViewAppId;
|
|
const app = this.applications.find(a => a.AppId === appId);
|
|
document.getElementById('appName').value = app?.Name || '';
|
|
document.getElementById('appType').value = app?.Type || '';
|
|
document.getElementById('appStatus').value = app?.Status || 'online';
|
|
document.getElementById('appDescription').value = app?.Description || '';
|
|
document.getElementById('appIcon').value = app?.Icon || app?.icon || '';
|
|
document.getElementById('appUrl').value = app?.Url || '';
|
|
this.editingAppId = app?.AppId;
|
|
this.closeModals();
|
|
this.openAppModal();
|
|
});
|
|
});
|
|
}
|
|
|
|
setupAddButtonListeners() {
|
|
// Add Account button
|
|
document.querySelectorAll('#addAccountBtn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
this.editingAccountId = undefined;
|
|
this.pendingAccountAppId = undefined;
|
|
this.openAccountModal();
|
|
});
|
|
});
|
|
|
|
// Add Application button
|
|
document.querySelectorAll('#addAppBtn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
this.editingAppId = undefined;
|
|
this.openAppModal();
|
|
});
|
|
});
|
|
}
|
|
|
|
setupFilters() {
|
|
const serviceFilter = document.getElementById('serviceFilter');
|
|
if (serviceFilter) {
|
|
serviceFilter.value = this.accountServiceFilter || '';
|
|
serviceFilter.addEventListener('change', (e) => {
|
|
this.accountServiceFilter = e.target.value;
|
|
this.renderAccountsTableBody();
|
|
});
|
|
}
|
|
|
|
const accountSearch = document.getElementById('accountSearch');
|
|
if (accountSearch) {
|
|
accountSearch.value = this.accountSearchTerm;
|
|
const handleAccountSearch = event => {
|
|
this.accountSearchTerm = event.target.value.toLowerCase();
|
|
this.renderAccountsTableBody();
|
|
};
|
|
|
|
accountSearch.addEventListener('input', handleAccountSearch);
|
|
|
|
// Restore focus/selection after renders to avoid typing interruptions
|
|
accountSearch.addEventListener('focus', () => {
|
|
accountSearch.dataset.focused = 'true';
|
|
});
|
|
accountSearch.addEventListener('blur', () => {
|
|
accountSearch.dataset.focused = 'false';
|
|
});
|
|
}
|
|
|
|
const appSearch = document.getElementById('appSearch');
|
|
if (appSearch) {
|
|
appSearch.value = this.applicationSearchTerm;
|
|
const handleApplicationSearch = event => {
|
|
this.applicationSearchTerm = event.target.value.toLowerCase();
|
|
this.renderApplicationsTableBody();
|
|
};
|
|
|
|
appSearch.addEventListener('input', handleApplicationSearch);
|
|
|
|
// Restore focus/selection after renders to avoid typing interruptions
|
|
appSearch.addEventListener('focus', () => {
|
|
appSearch.dataset.focused = 'true';
|
|
});
|
|
appSearch.addEventListener('blur', () => {
|
|
appSearch.dataset.focused = 'false';
|
|
});
|
|
}
|
|
}
|
|
|
|
async handleAccountSubmit(e) {
|
|
e.preventDefault();
|
|
const accountForm = document.getElementById('accountForm');
|
|
const userId = this.getUserId();
|
|
const appId = Number(accountForm?.querySelector('#accountService')?.value || 0);
|
|
const accountUsername = (accountForm?.querySelector('#accountUsername')?.value || '').trim();
|
|
const accountPassword = (accountForm?.querySelector('#accountPassword')?.value || '').trim();
|
|
const accountEmail = ((accountForm?.querySelector('#accountOwner')?.value || '').trim()) || this.currentUser?.Username || this.currentUser?.username || '';
|
|
if (!accountForm) {
|
|
this.notifyFailure('Account form not found.');
|
|
return;
|
|
}
|
|
if (!userId) {
|
|
this.notifyFailure('User is not authenticated. Please login again.');
|
|
return;
|
|
}
|
|
if (!appId) {
|
|
this.notifyWarning('Please select a service.');
|
|
return;
|
|
}
|
|
if (!accountUsername) {
|
|
this.notifyWarning('Please enter a username.');
|
|
return;
|
|
}
|
|
if (!accountPassword) {
|
|
this.notifyWarning('Please enter a password.');
|
|
return;
|
|
}
|
|
const payload = {
|
|
userId,
|
|
appId,
|
|
accountUsername,
|
|
accountPassword,
|
|
email: accountEmail,
|
|
accessLevel: 'user',
|
|
notes: ''
|
|
};
|
|
|
|
const isEdit = this.editingAccountId !== undefined;
|
|
const url = isEdit ? `${this.apiBase}/accounts/${this.editingAccountId}` : `${this.apiBase}/accounts`;
|
|
const method = isEdit ? 'PUT' : 'POST';
|
|
|
|
fetch(url, {
|
|
method,
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
}).then(res => res.json()).then(data => {
|
|
if (data.success) {
|
|
this.editingAccountId = undefined;
|
|
this.pendingAccountAppId = undefined;
|
|
this.notifySuccess(isEdit ? 'Account updated successfully' : 'Account created successfully');
|
|
this.closeModals();
|
|
this.refreshAccountsUI();
|
|
} else {
|
|
this.notifyFailure(data.message || 'Save account failed');
|
|
}
|
|
}).catch(err => {
|
|
console.error(err);
|
|
this.notifyFailure('Save account failed');
|
|
});
|
|
}
|
|
|
|
async refreshAccountsUI() {
|
|
await this.fetchAccounts();
|
|
if (this.currentPage === 'accounts') {
|
|
this.renderView('accounts');
|
|
}
|
|
}
|
|
|
|
async handleAppSubmit(e) {
|
|
e.preventDefault();
|
|
const payload = {
|
|
name: document.getElementById('appName').value,
|
|
type: document.getElementById('appType').value,
|
|
status: document.getElementById('appStatus').value,
|
|
icon: (document.getElementById('appIcon')?.value || 'apps').trim() || 'apps',
|
|
description: document.getElementById('appDescription')?.value || '',
|
|
url: (document.getElementById('appUrl')?.value || '').trim()
|
|
};
|
|
|
|
const isEdit = this.editingAppId !== undefined;
|
|
const url = isEdit ? `${this.apiBase}/applications/${this.editingAppId}` : `${this.apiBase}/applications`;
|
|
const method = isEdit ? 'PUT' : 'POST';
|
|
|
|
fetch(url, {
|
|
method,
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
}).then(res => res.json()).then(data => {
|
|
if (data.success) {
|
|
this.editingAppId = undefined;
|
|
this.notifySuccess(isEdit ? 'Application updated successfully' : 'Application created successfully');
|
|
this.closeModals();
|
|
this.refreshApplicationsUI();
|
|
} else {
|
|
this.notifyFailure(data.message || 'Save application failed');
|
|
}
|
|
}).catch(err => {
|
|
console.error(err);
|
|
this.notifyFailure('Save application failed');
|
|
});
|
|
}
|
|
|
|
async refreshApplicationsUI() {
|
|
await this.fetchApplications();
|
|
if (this.currentPage === 'applications') {
|
|
this.renderView('applications');
|
|
}
|
|
}
|
|
|
|
openAccountModal() {
|
|
// Refresh service options so newly added applications appear
|
|
const serviceSelect = document.getElementById('accountService');
|
|
if (serviceSelect) {
|
|
serviceSelect.innerHTML = `<option value="">Select a service</option>` +
|
|
this.applications.map(app => `<option value="${app.AppId}">${app.Name}</option>`).join('');
|
|
if (this.editingAccountId !== undefined && this.pendingAccountAppId) {
|
|
serviceSelect.value = this.pendingAccountAppId;
|
|
}
|
|
}
|
|
|
|
if (this.editingAccountId === undefined) {
|
|
const form = document.getElementById('accountForm');
|
|
if (form) {
|
|
const serviceSelect = form.querySelector('#accountService');
|
|
const ownerInput = form.querySelector('#accountOwner');
|
|
const userInput = form.querySelector('#accountUsername');
|
|
const passInput = form.querySelector('#accountPassword');
|
|
if (serviceSelect) serviceSelect.value = '';
|
|
if (ownerInput) ownerInput.value = this.currentUser?.Username || this.currentUser?.username || '';
|
|
if (userInput) userInput.value = '';
|
|
if (passInput) passInput.value = '';
|
|
}
|
|
}
|
|
document.getElementById('accountModal').classList.add('open');
|
|
}
|
|
|
|
openAppModal() {
|
|
if (this.editingAppId === undefined) {
|
|
document.getElementById('appName').value = '';
|
|
document.getElementById('appType').value = '';
|
|
document.getElementById('appStatus').value = 'online';
|
|
const iconInput = document.getElementById('appIcon');
|
|
const desc = document.getElementById('appDescription');
|
|
const url = document.getElementById('appUrl');
|
|
if (iconInput) iconInput.value = '';
|
|
if (desc) desc.value = '';
|
|
if (url) url.value = '';
|
|
}
|
|
document.getElementById('appModal').classList.add('open');
|
|
}
|
|
|
|
closeModals() {
|
|
document.querySelectorAll('.modal-backdrop').forEach(modal => {
|
|
modal.classList.remove('open');
|
|
});
|
|
}
|
|
|
|
async openProfileModal() {
|
|
try {
|
|
const response = await fetch(`${this.apiBase}/users/me`, {
|
|
headers: this.getAuthHeaders(false)
|
|
});
|
|
const data = await response.json();
|
|
|
|
if (!data.success || !data.data) {
|
|
this.notifyFailure(data.message || 'Cannot load profile');
|
|
return;
|
|
}
|
|
|
|
this.renderProfileModal(data.data);
|
|
} catch (err) {
|
|
console.error(err);
|
|
this.notifyFailure('Cannot load profile');
|
|
}
|
|
}
|
|
|
|
renderProfileModal(profile) {
|
|
const isVerified = profile?.EmailVerified === true || profile?.EmailVerified === 1;
|
|
const html = `
|
|
<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 modal-backdrop open" id="profileModal" style="display:flex;align-items:center;justify-content:center;padding:16px;">
|
|
<div class="bg-white dark:bg-slate-900 rounded-lg p-6 modal-content" style="width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;">
|
|
<h2 class="text-xl font-bold text-slate-900 dark:text-slate-50">My Profile</h2>
|
|
<p class="text-xs text-slate-500 mt-1 mb-4">Update personal info and password in one place.</p>
|
|
<form id="profileForm" class="space-y-5">
|
|
<div class="rounded-xl border border-outline-variant/20 bg-surface-container-low/40 dark:bg-slate-800/40 p-4 space-y-3">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Username</label>
|
|
<input type="text" value="${profile?.Username || ''}" readonly class="w-full px-3 py-2 border border-outline-variant/30 rounded-lg bg-surface-container-low dark:bg-slate-800 opacity-80">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Full Name</label>
|
|
<input type="text" id="profileFullName" value="${profile?.FullName || ''}" class="w-full px-3 py-2 border border-outline-variant/30 rounded-lg bg-white dark:bg-slate-900" required>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Email</label>
|
|
<input type="email" id="profileEmail" value="${profile?.Email || ''}" class="w-full px-3 py-2 border border-outline-variant/30 rounded-lg bg-white dark:bg-slate-900" required>
|
|
<p class="text-xs mt-1 ${isVerified ? 'text-green-600' : 'text-amber-600'}">
|
|
${isVerified ? 'Email is confirmed' : 'Email is not confirmed yet'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-xl border border-outline-variant/20 bg-surface-container-low/40 dark:bg-slate-800/40 p-4">
|
|
<label class="block text-sm font-semibold mb-3">Change Password</label>
|
|
<div class="space-y-3">
|
|
<div>
|
|
<label class="block text-xs font-semibold text-slate-600 dark:text-slate-300 mb-1">Current password</label>
|
|
<div class="flex items-center gap-2">
|
|
<input type="password" id="profileCurrentPassword" placeholder="Enter current password" class="flex-1 px-3 py-2 border border-outline-variant/30 rounded-lg bg-white dark:bg-slate-900">
|
|
<button type="button" data-password-toggle="profileCurrentPassword" class="shrink-0 px-2.5 py-2 border border-outline-variant/30 rounded-lg text-slate-500 hover:text-slate-700 hover:bg-slate-100 dark:hover:text-slate-200 dark:hover:bg-slate-800" aria-label="Show current password">
|
|
<span class="material-symbols-outlined text-base" id="profileCurrentPasswordIcon">visibility</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-semibold text-slate-600 dark:text-slate-300 mb-1">New password</label>
|
|
<div class="flex items-center gap-2">
|
|
<input type="password" id="profileNewPassword" placeholder="Enter new password" class="flex-1 px-3 py-2 border border-outline-variant/30 rounded-lg bg-white dark:bg-slate-900">
|
|
<button type="button" data-password-toggle="profileNewPassword" class="shrink-0 px-2.5 py-2 border border-outline-variant/30 rounded-lg text-slate-500 hover:text-slate-700 hover:bg-slate-100 dark:hover:text-slate-200 dark:hover:bg-slate-800" aria-label="Show new password">
|
|
<span class="material-symbols-outlined text-base" id="profileNewPasswordIcon">visibility</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-semibold text-slate-600 dark:text-slate-300 mb-1">Confirm new password</label>
|
|
<div class="flex items-center gap-2">
|
|
<input type="password" id="profileConfirmPassword" placeholder="Confirm new password" class="flex-1 px-3 py-2 border border-outline-variant/30 rounded-lg bg-white dark:bg-slate-900">
|
|
<button type="button" data-password-toggle="profileConfirmPassword" class="shrink-0 px-2.5 py-2 border border-outline-variant/30 rounded-lg text-slate-500 hover:text-slate-700 hover:bg-slate-100 dark:hover:text-slate-200 dark:hover:bg-slate-800" aria-label="Show confirm password">
|
|
<span class="material-symbols-outlined text-base" id="profileConfirmPasswordIcon">visibility</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-xs text-slate-500">Leave password fields empty if you only want to update profile info.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-3">
|
|
<button type="button" onclick="closeProfileModal()" class="flex-1 px-4 py-2 bg-outline/10 hover:bg-outline/20 rounded-lg transition-colors">Cancel</button>
|
|
<button type="submit" class="flex-1 px-4 py-2 bg-primary hover:bg-primary-dim text-on-primary font-bold rounded-lg transition-colors">Save</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
const containerId = 'profileModalContainer';
|
|
let container = document.getElementById(containerId);
|
|
if (!container) {
|
|
container = document.createElement('div');
|
|
container.id = containerId;
|
|
document.body.appendChild(container);
|
|
}
|
|
container.innerHTML = html;
|
|
|
|
const form = document.getElementById('profileForm');
|
|
if (form) {
|
|
form.addEventListener('submit', (e) => this.saveProfile(e));
|
|
}
|
|
|
|
this.setupProfilePasswordToggles();
|
|
|
|
const modal = document.getElementById('profileModal');
|
|
if (modal) {
|
|
modal.addEventListener('click', (e) => {
|
|
if (e.target === modal) {
|
|
closeProfileModal();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
setupProfilePasswordToggles() {
|
|
document.querySelectorAll('[data-password-toggle]').forEach((toggleBtn) => {
|
|
if (toggleBtn.dataset.bound === 'true') {
|
|
return;
|
|
}
|
|
|
|
toggleBtn.addEventListener('click', () => {
|
|
const inputId = toggleBtn.dataset.passwordToggle;
|
|
if (!inputId) return;
|
|
|
|
const input = document.getElementById(inputId);
|
|
const icon = document.getElementById(`${inputId}Icon`);
|
|
if (!input) return;
|
|
|
|
const isHidden = input.type === 'password';
|
|
input.type = isHidden ? 'text' : 'password';
|
|
if (icon) {
|
|
icon.textContent = isHidden ? 'visibility_off' : 'visibility';
|
|
}
|
|
});
|
|
|
|
toggleBtn.dataset.bound = 'true';
|
|
});
|
|
}
|
|
|
|
async saveProfile(e) {
|
|
e.preventDefault();
|
|
|
|
const fullname = document.getElementById('profileFullName')?.value.trim() || '';
|
|
const email = document.getElementById('profileEmail')?.value.trim() || '';
|
|
const currentPassword = document.getElementById('profileCurrentPassword')?.value || '';
|
|
const newPassword = document.getElementById('profileNewPassword')?.value || '';
|
|
const confirmPassword = document.getElementById('profileConfirmPassword')?.value || '';
|
|
|
|
if (!fullname || !email) {
|
|
this.notifyFailure('Full name and email are required');
|
|
return;
|
|
}
|
|
|
|
if (newPassword && newPassword !== confirmPassword) {
|
|
this.notifyFailure('New password and confirm password do not match');
|
|
return;
|
|
}
|
|
|
|
if (newPassword && !currentPassword) {
|
|
this.notifyFailure('Current password is required to change password');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`${this.apiBase}/users/me`, {
|
|
method: 'PUT',
|
|
headers: this.getAuthHeaders(true),
|
|
body: JSON.stringify({
|
|
fullname,
|
|
email,
|
|
currentPassword,
|
|
newPassword
|
|
})
|
|
});
|
|
const data = await response.json();
|
|
|
|
if (!data.success) {
|
|
this.notifyFailure(data.message || 'Update profile failed');
|
|
return;
|
|
}
|
|
|
|
if (data.user) {
|
|
this.currentUser = {
|
|
...this.currentUser,
|
|
...data.user,
|
|
role: data.user.role || data.user.Role || this.currentUser.role || this.currentUser.Role
|
|
};
|
|
this.saveToStorage('currentUser', this.currentUser);
|
|
this.updateAccountDisplay();
|
|
}
|
|
|
|
closeProfileModal();
|
|
this.notifySuccess(data.message || 'Profile updated');
|
|
|
|
if (data.verificationRequired && data.emailSent === false) {
|
|
if (data.verificationPreviewUrl) {
|
|
this.notifyWarning(`Email confirmation link (dev): ${data.verificationPreviewUrl}`);
|
|
} else {
|
|
this.notifyWarning('Email changed but verification email could not be sent.');
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
this.notifyFailure('Update profile failed');
|
|
}
|
|
}
|
|
|
|
loadFromStorage(key) {
|
|
const data = localStorage.getItem(key);
|
|
return data ? JSON.parse(data) : null;
|
|
}
|
|
|
|
saveToStorage(key, data) {
|
|
localStorage.setItem(key, JSON.stringify(data));
|
|
}
|
|
|
|
formatDateTime(value) {
|
|
if (!value) return '-';
|
|
const date = new Date(value);
|
|
if (Number.isNaN(date.getTime())) {
|
|
return String(value);
|
|
}
|
|
return date.toLocaleString();
|
|
}
|
|
|
|
// ========== Users Management ==========
|
|
getUsersContent() {
|
|
const filteredUsers = this.getFilteredUsers();
|
|
const pageInfo = this.getPaged(filteredUsers, this.userPage, this.userPageSize);
|
|
this.userPage = pageInfo.current;
|
|
return `
|
|
<div class="users-page p-4 md:p-6 w-full h-full flex flex-col overflow-hidden">
|
|
<div class="page-header flex justify-between items-center mb-6 shrink-0">
|
|
<h1 class="text-2xl font-bold text-slate-900 dark:text-slate-50">Users Management</h1>
|
|
<div class="flex items-center gap-2">
|
|
<button id="addRoleBtn" class="border border-outline-variant/40 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 font-bold py-2 px-4 rounded-lg transition-all active:scale-95 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-base">badge</span>
|
|
<span>Add Role</span>
|
|
</button>
|
|
<button id="addUserBtn" class="bg-primary hover:bg-primary-dim text-on-primary font-bold py-2 px-4 rounded-lg transition-all active:scale-95 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-base">add</span>
|
|
<span>Add User</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search and Filter -->
|
|
<div class="users-controls mb-4 flex gap-3 shrink-0">
|
|
<div class="flex-1 relative">
|
|
<input type="text" id="userSearch" placeholder="Search users..." value="${this.userSearchTerm}" class="w-full px-4 py-2 border border-outline-variant/30 rounded-lg bg-surface-container-low dark:bg-slate-800 focus:ring-2 focus:ring-primary focus:border-transparent transition-all">
|
|
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 material-symbols-outlined">search</span>
|
|
</div>
|
|
<select id="roleFilter" class="px-4 py-2 border border-outline-variant/30 rounded-lg bg-surface-container-low dark:bg-slate-800 text-sm">
|
|
<option value="">All Roles</option>
|
|
${this.roles.map(r => `<option value="${r.RoleId}" ${String(this.userRoleFilter) === String(r.RoleId) ? 'selected' : ''}>${r.RoleName}</option>`).join('')}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Users Table -->
|
|
<div class="flex-1 overflow-hidden border border-outline-variant/20 rounded-lg flex flex-col min-h-0">
|
|
<div class="table-wrap overflow-auto flex-1">
|
|
<table class="w-full text-sm">
|
|
<thead class="bg-slate-100 dark:bg-slate-800 border-b border-outline-variant/20 sticky top-0">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left font-semibold">Username</th>
|
|
<th class="px-4 py-3 text-left font-semibold">Full Name</th>
|
|
<th class="px-4 py-3 text-left font-semibold">Email</th>
|
|
<th class="px-4 py-3 text-left font-semibold">Role</th>
|
|
<th class="px-4 py-3 text-left font-semibold">Status</th>
|
|
<th class="px-4 py-3 text-center font-semibold">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="users-table-body">
|
|
${pageInfo.data.length === 0 ? `
|
|
<tr>
|
|
<td colspan="6" class="px-4 py-8 text-center text-slate-500">No users found</td>
|
|
</tr>
|
|
` : pageInfo.data.map(user => `
|
|
<tr class="border-b border-outline-variant/10 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors user-row" data-user-id="${user.UserId}">
|
|
<td class="px-4 py-3 font-medium text-slate-900 dark:text-slate-50">${user.Username}</td>
|
|
<td class="px-4 py-3 text-slate-700 dark:text-slate-300">${user.FullName || '-'}</td>
|
|
<td class="px-4 py-3 text-slate-600 dark:text-slate-400">${user.Email || '-'}</td>
|
|
<td class="px-4 py-3">
|
|
<span class="px-3 py-1 rounded-full text-xs font-semibold ${user.RoleName === 'Admin' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200'}">
|
|
${user.RoleName || user.Role || 'N/A'}
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<span class="px-3 py-1 rounded-full text-xs font-semibold ${user.IsActive ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200' : 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200'}">
|
|
${user.IsActive ? 'Active' : 'Inactive'}
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-3 text-center">
|
|
<div class="flex gap-2 justify-center">
|
|
<button class="view-user-btn p-1.5 rounded hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-300 transition-colors" title="View Details">
|
|
<span class="material-symbols-outlined text-base">info</span>
|
|
</button>
|
|
<button class="edit-user-btn p-1.5 rounded hover:bg-blue-100 dark:hover:bg-blue-900 text-blue-600 dark:text-blue-400 transition-colors" title="Edit">
|
|
<span class="material-symbols-outlined text-base">edit</span>
|
|
</button>
|
|
<button class="delete-user-btn p-1.5 rounded hover:bg-red-100 dark:hover:bg-red-900 text-red-600 dark:text-red-400 transition-colors" title="Delete" ${user.UserId === 1 ? 'disabled' : ''}>
|
|
<span class="material-symbols-outlined text-base">delete</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="page-pager flex items-center justify-between px-4 py-2 border-t border-outline-variant/20 bg-slate-50 dark:bg-slate-800/40 text-xs text-on-surface-variant" id="usersPager">
|
|
<span>Showing ${pageInfo.start}-${pageInfo.end} of ${pageInfo.total}</span>
|
|
<div class="flex items-center gap-2">
|
|
<button class="user-page-btn px-2 py-1 border border-slate-200 rounded text-xs ${pageInfo.current === 1 ? 'opacity-50 cursor-not-allowed' : ''}" data-page="${pageInfo.current - 1}" ${pageInfo.current === 1 ? 'disabled' : ''}>Prev</button>
|
|
<span class="text-[11px]">Page ${pageInfo.current} / ${pageInfo.totalPages}</span>
|
|
<button class="user-page-btn px-2 py-1 border border-slate-200 rounded text-xs ${pageInfo.current === pageInfo.totalPages ? 'opacity-50 cursor-not-allowed' : ''}" data-page="${pageInfo.current + 1}" ${pageInfo.current === pageInfo.totalPages ? 'disabled' : ''}>Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
setupUsersRowListeners() {
|
|
const userRows = document.querySelectorAll('.user-row');
|
|
userRows.forEach(row => {
|
|
const viewBtn = row.querySelector('.view-user-btn');
|
|
const editBtn = row.querySelector('.edit-user-btn');
|
|
const deleteBtn = row.querySelector('.delete-user-btn');
|
|
const userId = row.dataset.userId;
|
|
|
|
if (viewBtn) {
|
|
viewBtn.addEventListener('click', () => this.viewUserDetails(userId));
|
|
}
|
|
|
|
if (editBtn) {
|
|
editBtn.addEventListener('click', () => this.editUser(userId));
|
|
}
|
|
|
|
if (deleteBtn && !deleteBtn.disabled) {
|
|
deleteBtn.addEventListener('click', () => this.deleteUserConfirm(userId));
|
|
}
|
|
});
|
|
|
|
// Search and Filter
|
|
const searchInput = document.getElementById('userSearch');
|
|
const roleFilter = document.getElementById('roleFilter');
|
|
|
|
if (searchInput) {
|
|
searchInput.oninput = (e) => {
|
|
this.userSearchTerm = (e.target.value || '').toLowerCase();
|
|
this.userPage = 1;
|
|
this.renderUsersTableBody();
|
|
};
|
|
}
|
|
|
|
if (roleFilter) {
|
|
roleFilter.value = this.userRoleFilter || '';
|
|
roleFilter.onchange = (e) => {
|
|
this.userRoleFilter = e.target.value;
|
|
this.userPage = 1;
|
|
this.renderUsersTableBody();
|
|
};
|
|
}
|
|
|
|
// Add User Button
|
|
const addBtn = document.getElementById('addUserBtn');
|
|
if (addBtn) {
|
|
addBtn.onclick = () => this.openUserModal();
|
|
}
|
|
|
|
const addRoleBtn = document.getElementById('addRoleBtn');
|
|
if (addRoleBtn) {
|
|
addRoleBtn.onclick = () => this.openRoleModal();
|
|
}
|
|
}
|
|
|
|
getFilteredUsers() {
|
|
const search = (this.userSearchTerm || '').toLowerCase();
|
|
const roleId = this.userRoleFilter || '';
|
|
return this.users.filter(user => {
|
|
const matchesSearch = !search || [user.Username, user.FullName, user.Email].some(val => (val || '').toLowerCase().includes(search));
|
|
const matchesRole = !roleId || String(user.RoleId) === String(roleId) || String(user.RoleID) === String(roleId);
|
|
return matchesSearch && matchesRole;
|
|
});
|
|
}
|
|
|
|
renderUsersTableBody() {
|
|
const tbody = document.querySelector('.users-table-body');
|
|
if (!tbody) return;
|
|
const pageInfo = this.getPaged(this.getFilteredUsers(), this.userPage, this.userPageSize);
|
|
this.userPage = pageInfo.current;
|
|
tbody.innerHTML = pageInfo.data.length === 0 ? `
|
|
<tr>
|
|
<td colspan="6" class="px-4 py-8 text-center text-slate-500">No users found</td>
|
|
</tr>
|
|
` : pageInfo.data.map(user => `
|
|
<tr class="border-b border-outline-variant/10 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors user-row" data-user-id="${user.UserId}">
|
|
<td class="px-4 py-3 font-medium text-slate-900 dark:text-slate-50">${user.Username}</td>
|
|
<td class="px-4 py-3 text-slate-700 dark:text-slate-300">${user.FullName || '-'}</td>
|
|
<td class="px-4 py-3 text-slate-600 dark:text-slate-400">${user.Email || '-'}</td>
|
|
<td class="px-4 py-3">
|
|
<span class="px-3 py-1 rounded-full text-xs font-semibold ${user.RoleName === 'Admin' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200'}">
|
|
${user.RoleName || user.Role || 'N/A'}
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<span class="px-3 py-1 rounded-full text-xs font-semibold ${user.IsActive ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200' : 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200'}">
|
|
${user.IsActive ? 'Active' : 'Inactive'}
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-3 text-center">
|
|
<div class="flex gap-2 justify-center">
|
|
<button class="view-user-btn p-1.5 rounded hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-300 transition-colors" title="View Details">
|
|
<span class="material-symbols-outlined text-base">info</span>
|
|
</button>
|
|
<button class="edit-user-btn p-1.5 rounded hover:bg-blue-100 dark:hover:bg-blue-900 text-blue-600 dark:text-blue-400 transition-colors" title="Edit">
|
|
<span class="material-symbols-outlined text-base">edit</span>
|
|
</button>
|
|
<button class="delete-user-btn p-1.5 rounded hover:bg-red-100 dark:hover:bg-red-900 text-red-600 dark:text-red-400 transition-colors" title="Delete" ${user.UserId === 1 ? 'disabled' : ''}>
|
|
<span class="material-symbols-outlined text-base">delete</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`).join('');
|
|
|
|
const pager = document.getElementById('usersPager');
|
|
if (pager) {
|
|
pager.innerHTML = `
|
|
<span>Showing ${pageInfo.start}-${pageInfo.end} of ${pageInfo.total}</span>
|
|
<div class="flex items-center gap-2">
|
|
<button class="user-page-btn px-2 py-1 border border-slate-200 rounded text-xs ${pageInfo.current === 1 ? 'opacity-50 cursor-not-allowed' : ''}" data-page="${pageInfo.current - 1}" ${pageInfo.current === 1 ? 'disabled' : ''}>Prev</button>
|
|
<span class="text-[11px]">Page ${pageInfo.current} / ${pageInfo.totalPages}</span>
|
|
<button class="user-page-btn px-2 py-1 border border-slate-200 rounded text-xs ${pageInfo.current === pageInfo.totalPages ? 'opacity-50 cursor-not-allowed' : ''}" data-page="${pageInfo.current + 1}" ${pageInfo.current === pageInfo.totalPages ? 'disabled' : ''}>Next</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
this.setupUsersRowListeners();
|
|
this.setupUsersPagerListeners();
|
|
}
|
|
|
|
setupUsersPagerListeners() {
|
|
document.querySelectorAll('.user-page-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const targetPage = Number(btn.dataset.page);
|
|
if (!targetPage || targetPage < 1) return;
|
|
this.userPage = targetPage;
|
|
this.renderUsersTableBody();
|
|
});
|
|
});
|
|
}
|
|
|
|
openUserModal() {
|
|
this.showUserFormModal(null);
|
|
}
|
|
|
|
openRoleModal() {
|
|
this.showRoleFormModal();
|
|
}
|
|
|
|
showRoleFormModal() {
|
|
const html = `
|
|
<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 modal-backdrop open" id="roleModal">
|
|
<div class="bg-white dark:bg-slate-900 rounded-lg p-6 w-full max-w-md modal-content">
|
|
<h2 class="text-xl font-bold mb-4 text-slate-900 dark:text-slate-50">Add New Role</h2>
|
|
<form id="roleForm" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Role Name</label>
|
|
<input type="text" id="roleName" placeholder="Manager" class="w-full px-3 py-2 border border-outline-variant/30 rounded-lg bg-surface-container-low dark:bg-slate-800" required>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Description</label>
|
|
<textarea id="roleDescription" placeholder="Describe this role permissions" class="w-full px-3 py-2 border border-outline-variant/30 rounded-lg bg-surface-container-low dark:bg-slate-800 min-h-[90px]"></textarea>
|
|
</div>
|
|
<div class="flex gap-3 pt-2">
|
|
<button type="button" onclick="closeRoleModal()" class="flex-1 px-4 py-2 bg-outline/10 hover:bg-outline/20 rounded-lg transition-colors">Cancel</button>
|
|
<button type="submit" class="flex-1 px-4 py-2 bg-primary hover:bg-primary-dim text-on-primary font-bold rounded-lg transition-colors">Save Role</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
const editingContainer = document.getElementById('roleModalContainer');
|
|
if (editingContainer) {
|
|
editingContainer.innerHTML = html;
|
|
} else {
|
|
const container = document.createElement('div');
|
|
container.id = 'roleModalContainer';
|
|
document.body.appendChild(container);
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
const form = document.getElementById('roleForm');
|
|
if (form) {
|
|
form.addEventListener('submit', (e) => this.saveRole(e));
|
|
}
|
|
|
|
const modal = document.getElementById('roleModal');
|
|
if (modal) {
|
|
modal.addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeRoleModal();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
async saveRole(e) {
|
|
e.preventDefault();
|
|
|
|
const roleName = document.getElementById('roleName')?.value.trim();
|
|
const description = document.getElementById('roleDescription')?.value.trim();
|
|
|
|
if (!roleName) {
|
|
this.notifyFailure('Role name is required');
|
|
return;
|
|
}
|
|
|
|
const roleExists = this.roles.some(role =>
|
|
String(role.RoleName || '').trim().toLowerCase() === roleName.toLowerCase()
|
|
);
|
|
if (roleExists) {
|
|
this.notifyWarning('Role already exists');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`${this.apiBase}/roles`, {
|
|
method: 'POST',
|
|
headers: this.getAuthHeaders(true),
|
|
body: JSON.stringify({ roleName, description: description || null })
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (!response.ok || !data.success) {
|
|
this.notifyFailure(data.message || 'Create role failed');
|
|
return;
|
|
}
|
|
|
|
this.notifySuccess('Role created');
|
|
closeRoleModal();
|
|
await this.fetchRoles();
|
|
if (this.currentPage === 'users') {
|
|
this.renderView('users');
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
this.notifyFailure('Create role failed');
|
|
}
|
|
}
|
|
|
|
showUserFormModal(userId) {
|
|
const user = userId ? this.users.find(u => u.UserId == userId) : null;
|
|
|
|
const html = `
|
|
<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 modal-backdrop open" id="userModal">
|
|
<div class="bg-white dark:bg-slate-900 rounded-lg p-6 w-full max-w-md modal-content">
|
|
<h2 class="text-xl font-bold mb-4 text-slate-900 dark:text-slate-50">${user ? 'Edit User' : 'Add New User'}</h2>
|
|
<form id="userForm" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Username</label>
|
|
<input type="text" id="userUsername" placeholder="Username" class="w-full px-3 py-2 border border-outline-variant/30 rounded-lg bg-surface-container-low dark:bg-slate-800" ${user ? 'readonly' : ''} value="${user?.Username || ''}">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Full Name</label>
|
|
<input type="text" id="userFullName" placeholder="Full Name" class="w-full px-3 py-2 border border-outline-variant/30 rounded-lg bg-surface-container-low dark:bg-slate-800" value="${user?.FullName || ''}">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Email</label>
|
|
<input type="email" id="userEmail" placeholder="Email" class="w-full px-3 py-2 border border-outline-variant/30 rounded-lg bg-surface-container-low dark:bg-slate-800" value="${user?.Email || ''}">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">${user ? 'New Password' : 'Password'}</label>
|
|
<div class="flex items-center gap-2">
|
|
<input type="password" id="userPassword" placeholder="${user ? 'Leave blank to keep current password' : 'Password'}" class="flex-1 px-3 py-2 border border-outline-variant/30 rounded-lg bg-surface-container-low dark:bg-slate-800" ${user ? '' : 'required'}>
|
|
<button type="button" id="userPasswordToggle" class="p-2 rounded-lg border border-outline-variant/30 hover:bg-slate-100 dark:hover:bg-slate-700" title="Show/Hide password">
|
|
<span class="material-symbols-outlined text-base" id="userPasswordToggleIcon">visibility</span>
|
|
</button>
|
|
</div>
|
|
<p class="text-xs text-slate-500 mt-1">${user ? 'Enter a new password only when you want to reset it.' : 'Password is required for new user.'}</p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Role</label>
|
|
<select id="userRole" class="w-full px-3 py-2 border border-outline-variant/30 rounded-lg bg-surface-container-low dark:bg-slate-800">
|
|
${this.roles.map(r => `<option value="${r.RoleId}" ${user?.RoleId === r.RoleId ? 'selected' : ''}>${r.RoleName}</option>`).join('')}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="flex items-center gap-2">
|
|
<input type="checkbox" id="userActive" class="w-4 h-4" ${user && user.IsActive ? 'checked' : 'checked'}>
|
|
<span class="text-sm">Active</span>
|
|
</label>
|
|
</div>
|
|
<div class="flex gap-3 pt-4">
|
|
<button type="button" onclick="closeUserModal()" class="flex-1 px-4 py-2 bg-outline/10 hover:bg-outline/20 rounded-lg transition-colors">Cancel</button>
|
|
<button type="submit" class="flex-1 px-4 py-2 bg-primary hover:bg-primary-dim text-on-primary font-bold rounded-lg transition-colors">Save</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Insert modal in DOM
|
|
const editingContainer = document.getElementById('userModalContainer');
|
|
if (editingContainer) {
|
|
editingContainer.innerHTML = html;
|
|
} else {
|
|
const container = document.createElement('div');
|
|
container.id = 'userModalContainer';
|
|
document.body.appendChild(container);
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
// Add form submit listener
|
|
const form = document.getElementById('userForm');
|
|
if (form) {
|
|
form.addEventListener('submit', (e) => this.saveUser(e, userId));
|
|
}
|
|
|
|
const passwordInput = document.getElementById('userPassword');
|
|
const passwordToggleBtn = document.getElementById('userPasswordToggle');
|
|
const passwordToggleIcon = document.getElementById('userPasswordToggleIcon');
|
|
if (passwordInput && passwordToggleBtn) {
|
|
passwordToggleBtn.addEventListener('click', () => {
|
|
const isHidden = passwordInput.type === 'password';
|
|
passwordInput.type = isHidden ? 'text' : 'password';
|
|
if (passwordToggleIcon) {
|
|
passwordToggleIcon.textContent = isHidden ? 'visibility_off' : 'visibility';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Close on backdrop click
|
|
const modal = document.getElementById('userModal');
|
|
if (modal) {
|
|
modal.addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeUserModal();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
async saveUser(e, userId) {
|
|
e.preventDefault();
|
|
|
|
const username = document.getElementById('userUsername').value.trim();
|
|
const fullname = document.getElementById('userFullName').value.trim();
|
|
const email = document.getElementById('userEmail').value.trim();
|
|
const password = document.getElementById('userPassword')?.value.trim();
|
|
const roleId = document.getElementById('userRole').value;
|
|
const isActive = document.getElementById('userActive').checked;
|
|
|
|
// Validate required fields
|
|
if (!username || !fullname) {
|
|
this.notifyFailure('Username and Full Name are required');
|
|
return;
|
|
}
|
|
|
|
// Password required for new user
|
|
if (!userId && !password) {
|
|
this.notifyFailure('Password is required for new user');
|
|
return;
|
|
}
|
|
|
|
const method = userId ? 'PUT' : 'POST';
|
|
const url = userId ? `${this.apiBase}/users/${userId}` : `${this.apiBase}/users`;
|
|
|
|
const payload = userId
|
|
? {
|
|
email: email || null,
|
|
fullname,
|
|
roleId: parseInt(roleId),
|
|
status: 'Active',
|
|
isActive,
|
|
...(password ? { password } : {})
|
|
}
|
|
: { username, password, email: email || null, fullname, roleId: parseInt(roleId) };
|
|
|
|
try {
|
|
const response = await fetch(url, {
|
|
method,
|
|
headers: this.getAuthHeaders(true),
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
this.notifySuccess(userId ? 'User updated' : 'User created');
|
|
closeUserModal();
|
|
this.refreshUsersUI();
|
|
} else {
|
|
this.notifyFailure(data.message || 'Save failed');
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
this.notifyFailure('Save failed');
|
|
}
|
|
}
|
|
|
|
async editUser(userId) {
|
|
this.showUserFormModal(userId);
|
|
}
|
|
|
|
async viewUserDetails(userId) {
|
|
try {
|
|
const response = await fetch(`${this.apiBase}/users/${userId}`, {
|
|
headers: this.getAuthHeaders(false)
|
|
});
|
|
const data = await response.json();
|
|
|
|
if (!data.success || !data.data) {
|
|
this.notifyFailure(data.message || 'Cannot load user details');
|
|
return;
|
|
}
|
|
|
|
this.showUserDetailsModal(data.data);
|
|
} catch (err) {
|
|
console.error(err);
|
|
this.notifyFailure('Cannot load user details');
|
|
}
|
|
}
|
|
|
|
showUserDetailsModal(user) {
|
|
const html = `
|
|
<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 modal-backdrop open" id="userDetailsModal">
|
|
<div class="bg-white dark:bg-slate-900 rounded-lg p-6 w-full max-w-md modal-content">
|
|
<h2 class="text-xl font-bold mb-4 text-slate-900 dark:text-slate-50">User Details</h2>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Username</label>
|
|
<div id="userDetailUsername" class="w-full px-3 py-2 border border-outline-variant/30 rounded-lg bg-surface-container-low dark:bg-slate-800"></div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Full Name</label>
|
|
<div id="userDetailFullName" class="w-full px-3 py-2 border border-outline-variant/30 rounded-lg bg-surface-container-low dark:bg-slate-800"></div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Email</label>
|
|
<div id="userDetailEmail" class="w-full px-3 py-2 border border-outline-variant/30 rounded-lg bg-surface-container-low dark:bg-slate-800"></div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Role</label>
|
|
<div id="userDetailRole" class="w-full px-3 py-2 border border-outline-variant/30 rounded-lg bg-surface-container-low dark:bg-slate-800"></div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Status</label>
|
|
<div id="userDetailStatus" class="w-full px-3 py-2 border border-outline-variant/30 rounded-lg bg-surface-container-low dark:bg-slate-800"></div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Password</label>
|
|
<div class="flex items-center gap-2">
|
|
<div id="userDetailPassword" data-visible="false" class="flex-1 px-3 py-2 border border-outline-variant/30 rounded-lg bg-surface-container-low dark:bg-slate-800">••••••••</div>
|
|
<button type="button" id="userDetailPasswordToggle" class="p-2 rounded-lg border border-outline-variant/30 hover:bg-slate-100 dark:hover:bg-slate-700" title="Show/Hide password">
|
|
<span class="material-symbols-outlined text-base" id="userDetailPasswordToggleIcon">visibility</span>
|
|
</button>
|
|
</div>
|
|
<p class="text-xs text-slate-500 mt-1">Mật khẩu text thường (không phải hash) nếu tài khoản đã được lưu theo chuẩn mới.</p>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Created Date</label>
|
|
<div id="userDetailCreatedDate" class="w-full px-3 py-2 border border-outline-variant/30 rounded-lg bg-surface-container-low dark:bg-slate-800"></div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">Last Login</label>
|
|
<div id="userDetailLastLogin" class="w-full px-3 py-2 border border-outline-variant/30 rounded-lg bg-surface-container-low dark:bg-slate-800"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-3 pt-2">
|
|
<button type="button" onclick="closeUserDetailsModal()" class="flex-1 px-4 py-2 bg-outline/10 hover:bg-outline/20 rounded-lg transition-colors">Close</button>
|
|
<button type="button" id="userDetailEditBtn" class="flex-1 px-4 py-2 bg-primary hover:bg-primary-dim text-on-primary font-bold rounded-lg transition-colors">Edit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
const detailsContainer = document.getElementById('userDetailsModalContainer');
|
|
if (detailsContainer) {
|
|
detailsContainer.innerHTML = html;
|
|
} else {
|
|
const container = document.createElement('div');
|
|
container.id = 'userDetailsModalContainer';
|
|
container.innerHTML = html;
|
|
document.body.appendChild(container);
|
|
}
|
|
|
|
const passwordValue = user?.Password || '';
|
|
const hasReadablePassword = user?.PasswordAvailable === true || Boolean(passwordValue);
|
|
const usernameEl = document.getElementById('userDetailUsername');
|
|
const fullNameEl = document.getElementById('userDetailFullName');
|
|
const emailEl = document.getElementById('userDetailEmail');
|
|
const roleEl = document.getElementById('userDetailRole');
|
|
const statusEl = document.getElementById('userDetailStatus');
|
|
const createdDateEl = document.getElementById('userDetailCreatedDate');
|
|
const lastLoginEl = document.getElementById('userDetailLastLogin');
|
|
const passwordEl = document.getElementById('userDetailPassword');
|
|
const passwordToggleBtn = document.getElementById('userDetailPasswordToggle');
|
|
const passwordToggleIcon = document.getElementById('userDetailPasswordToggleIcon');
|
|
const editBtn = document.getElementById('userDetailEditBtn');
|
|
const detailsModal = document.getElementById('userDetailsModal');
|
|
|
|
if (usernameEl) usernameEl.textContent = user?.Username || '-';
|
|
if (fullNameEl) fullNameEl.textContent = user?.FullName || '-';
|
|
if (emailEl) emailEl.textContent = user?.Email || '-';
|
|
if (roleEl) roleEl.textContent = user?.RoleName || user?.Role || '-';
|
|
if (statusEl) statusEl.textContent = user?.IsActive ? 'Active' : 'Inactive';
|
|
if (createdDateEl) createdDateEl.textContent = this.formatDateTime(user?.CreatedDate);
|
|
if (lastLoginEl) lastLoginEl.textContent = this.formatDateTime(user?.LastLogin);
|
|
if (passwordEl) {
|
|
passwordEl.dataset.password = passwordValue;
|
|
passwordEl.dataset.visible = 'false';
|
|
passwordEl.textContent = hasReadablePassword ? '••••••••' : '(khong the hien thi - can reset password 1 lan)';
|
|
}
|
|
|
|
if (passwordToggleBtn && passwordEl) {
|
|
passwordToggleBtn.addEventListener('click', () => {
|
|
if (!hasReadablePassword) {
|
|
return;
|
|
}
|
|
const isVisible = passwordEl.dataset.visible === 'true';
|
|
if (isVisible) {
|
|
passwordEl.textContent = '••••••••';
|
|
passwordEl.dataset.visible = 'false';
|
|
if (passwordToggleIcon) passwordToggleIcon.textContent = 'visibility';
|
|
} else {
|
|
passwordEl.textContent = passwordValue;
|
|
passwordEl.dataset.visible = 'true';
|
|
if (passwordToggleIcon) passwordToggleIcon.textContent = 'visibility_off';
|
|
}
|
|
});
|
|
}
|
|
|
|
if (passwordToggleBtn && !hasReadablePassword) {
|
|
passwordToggleBtn.disabled = true;
|
|
passwordToggleBtn.classList.add('opacity-50', 'cursor-not-allowed');
|
|
}
|
|
|
|
if (editBtn) {
|
|
editBtn.addEventListener('click', () => {
|
|
closeUserDetailsModal();
|
|
this.editUser(user?.UserId);
|
|
});
|
|
}
|
|
|
|
if (detailsModal) {
|
|
detailsModal.addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeUserDetailsModal();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
async deleteUserConfirm(userId) {
|
|
const user = this.users.find(u => u.UserId == userId);
|
|
if (!user) return;
|
|
|
|
if (confirm(`Are you sure you want to delete user "${user.Username}"?`)) {
|
|
await this.deleteUser(userId);
|
|
}
|
|
}
|
|
|
|
async deleteUser(userId) {
|
|
try {
|
|
const response = await fetch(`${this.apiBase}/users/${userId}`, {
|
|
method: 'DELETE',
|
|
headers: this.getAuthHeaders(false)
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
this.notifySuccess('User deleted');
|
|
this.refreshUsersUI();
|
|
} else {
|
|
this.notifyFailure(data.message || 'Delete failed');
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
this.notifyFailure('Delete failed');
|
|
}
|
|
}
|
|
|
|
async refreshUsersUI() {
|
|
await this.fetchUsers();
|
|
if (this.currentPage === 'users') {
|
|
this.renderView('users');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Global modal close functions
|
|
function closeAllModals() {
|
|
document.querySelectorAll('.modal-backdrop').forEach(modal => {
|
|
modal.classList.remove('open');
|
|
});
|
|
}
|
|
|
|
function closeAccountModal() {
|
|
document.getElementById('accountModal').classList.remove('open');
|
|
}
|
|
|
|
function closeViewAccountModal() {
|
|
document.getElementById('viewAccountModal').classList.remove('open');
|
|
}
|
|
|
|
function closeDeleteAccountModal() {
|
|
document.getElementById('deleteAccountModal').classList.remove('open');
|
|
}
|
|
|
|
function closeAppModal() {
|
|
document.getElementById('appModal').classList.remove('open');
|
|
}
|
|
|
|
function closeViewAppModal() {
|
|
document.getElementById('viewAppModal').classList.remove('open');
|
|
}
|
|
|
|
function closeDeleteAppModal() {
|
|
document.getElementById('deleteAppModal').classList.remove('open');
|
|
}
|
|
|
|
function closeUserModal() {
|
|
const userModalContainer = document.getElementById('userModalContainer');
|
|
if (userModalContainer) {
|
|
userModalContainer.innerHTML = '';
|
|
}
|
|
}
|
|
|
|
function closeRoleModal() {
|
|
const roleModalContainer = document.getElementById('roleModalContainer');
|
|
if (roleModalContainer) {
|
|
roleModalContainer.innerHTML = '';
|
|
}
|
|
}
|
|
|
|
function closeUserDetailsModal() {
|
|
const detailsContainer = document.getElementById('userDetailsModalContainer');
|
|
if (detailsContainer) {
|
|
detailsContainer.innerHTML = '';
|
|
}
|
|
}
|
|
|
|
function closeProfileModal() {
|
|
const profileContainer = document.getElementById('profileModalContainer');
|
|
if (profileContainer) {
|
|
profileContainer.innerHTML = '';
|
|
}
|
|
}
|
|
|
|
// Initialize app when DOM is ready
|
|
let app;
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
app = new AccountManager();
|
|
});
|