fomat
This commit is contained in:
12
public/index.html
Normal file
12
public/index.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Redirecting...</title>
|
||||
<script>
|
||||
window.location.href = './pages/login.html';
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
Redirecting to login...
|
||||
</body>
|
||||
</html>
|
||||
970
public/js/app.js
Normal file
970
public/js/app.js
Normal file
@@ -0,0 +1,970 @@
|
||||
// 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.apiBase = '/api';
|
||||
this.currentPage = 'dashboard';
|
||||
this.accountSearchTerm = '';
|
||||
this.applicationSearchTerm = '';
|
||||
this.accountServiceFilter = '';
|
||||
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;
|
||||
}
|
||||
|
||||
async init() {
|
||||
await this.fetchApplications();
|
||||
await this.fetchAccounts();
|
||||
this.setupEventListeners();
|
||||
this.loadModals(); // Load modals từ file riêng
|
||||
// Render dashboard content (only for index.html)
|
||||
const mainContent = document.getElementById('mainContent');
|
||||
if (mainContent && window.location.pathname.endsWith('index.html')) {
|
||||
mainContent.innerHTML = this.renderDashboard();
|
||||
}
|
||||
}
|
||||
|
||||
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() {
|
||||
const userId = this.getUserId();
|
||||
if (!userId) return;
|
||||
const res = await fetch(`${this.apiBase}/accounts/user/${userId}`);
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
this.accounts = data.data;
|
||||
} else {
|
||||
console.error('Load accounts failed:', data.message);
|
||||
}
|
||||
}
|
||||
|
||||
async loadModals() {
|
||||
try {
|
||||
const response = await fetch('../modals.html');
|
||||
const modalsHTML = await response.text();
|
||||
const modalsContainer = document.getElementById('modalsContainer');
|
||||
if (modalsContainer) {
|
||||
modalsContainer.innerHTML = modalsHTML;
|
||||
// Re-attach event listeners after modals are loaded
|
||||
setTimeout(() => {
|
||||
this.setupAccountRowListeners();
|
||||
this.setupFormListeners();
|
||||
}, 50);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Lỗi load modals:', error);
|
||||
}
|
||||
}
|
||||
|
||||
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.closeModals();
|
||||
}
|
||||
});
|
||||
|
||||
// Form submissions
|
||||
const accountForm = document.getElementById('accountForm');
|
||||
if (accountForm) {
|
||||
accountForm.addEventListener('submit', (e) => this.handleAccountSubmit(e));
|
||||
}
|
||||
|
||||
const appForm = document.getElementById('appForm');
|
||||
if (appForm) {
|
||||
appForm.addEventListener('submit', (e) => this.handleAppSubmit(e));
|
||||
}
|
||||
|
||||
// Logout button
|
||||
const logoutBtn = document.getElementById('logoutBtn');
|
||||
if (logoutBtn) {
|
||||
logoutBtn.addEventListener('click', () => this.handleLogout());
|
||||
}
|
||||
|
||||
// Update account display
|
||||
this.updateAccountDisplay();
|
||||
|
||||
// Account table row clicks
|
||||
this.setupAccountRowListeners();
|
||||
this.setupFilters();
|
||||
}
|
||||
|
||||
setupFormListeners() {
|
||||
const accountForm = document.getElementById('accountForm');
|
||||
if (accountForm) {
|
||||
accountForm.addEventListener('submit', (e) => this.handleAccountSubmit(e));
|
||||
}
|
||||
|
||||
const appForm = document.getElementById('appForm');
|
||||
if (appForm) {
|
||||
appForm.addEventListener('submit', (e) => this.handleAppSubmit(e));
|
||||
}
|
||||
|
||||
// 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.currentUser?.role || this.currentUser?.Role || 'Administrator';
|
||||
}
|
||||
|
||||
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));
|
||||
});
|
||||
}
|
||||
|
||||
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="flex-1 flex flex-col p-6 space-y-6 min-h-0 overflow-auto">
|
||||
<!-- Title and Stats -->
|
||||
<div class="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="flex gap-2">
|
||||
<a href="./accounts.html" 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="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.html" class="text-primary font-bold">Create one</a></p>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
getAccountsContent() {
|
||||
const filteredAccounts = this.getFilteredAccounts();
|
||||
return `
|
||||
<div class="p-4 md:p-6 flex flex-col h-full overflow-hidden">
|
||||
<!-- Page Header -->
|
||||
<div class="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="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">
|
||||
${filteredAccounts.length > 0 ? `
|
||||
<div class="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">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">
|
||||
${filteredAccounts.map(acc => `
|
||||
<tr class="hover:bg-slate-50/80 transition-colors group account-row" data-account-id="${acc.AccountId}">
|
||||
<td class="px-4 py-3 text-sm font-medium text-slate-900">${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">
|
||||
<button class="p-1.5 text-slate-400 hover:text-slate-600 transition-colors view-account" 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 hover:text-primary transition-colors edit-account" data-account-id="${acc.AccountId}">
|
||||
<span class="material-symbols-outlined text-lg">edit</span>
|
||||
</button>
|
||||
<button class="p-1.5 text-slate-400 hover:text-error transition-colors delete-account" data-account-id="${acc.AccountId}">
|
||||
<span class="material-symbols-outlined text-lg">delete</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
</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();
|
||||
return `
|
||||
<div class="flex flex-col p-6 overflow-hidden h-full">
|
||||
<!-- Header Section -->
|
||||
<div class="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="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="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="overflow-y-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">
|
||||
${filteredApps.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>
|
||||
</div>
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
setupAccountRowListeners() {
|
||||
// View Account listeners
|
||||
document.querySelectorAll('.view-account').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
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 || '-';
|
||||
document.getElementById('viewAccountPassword').textContent = '••••••••';
|
||||
document.getElementById('viewAccountPassword').dataset.visible = 'false';
|
||||
document.getElementById('toggleIcon').textContent = 'visibility';
|
||||
document.getElementById('viewAccountModal').classList.add('open');
|
||||
});
|
||||
});
|
||||
|
||||
// Delete Account listeners - show confirmation modal
|
||||
document.querySelectorAll('.delete-account').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
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) => {
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
||||
// Toggle Password Visibility
|
||||
document.querySelectorAll('.toggle-password').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const passwordEl = document.getElementById('viewAccountPassword');
|
||||
const toggleIcon = document.getElementById('toggleIcon');
|
||||
const isVisible = passwordEl.dataset.visible === 'true';
|
||||
|
||||
if (isVisible) {
|
||||
passwordEl.textContent = '••••••••';
|
||||
passwordEl.dataset.visible = 'false';
|
||||
toggleIcon.textContent = 'visibility';
|
||||
} else {
|
||||
passwordEl.textContent = this.currentViewAccount?.AccountPassword || '';
|
||||
passwordEl.dataset.visible = 'true';
|
||||
toggleIcon.textContent = 'visibility_off';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 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.refreshAccountsUI();
|
||||
});
|
||||
}
|
||||
|
||||
const accountSearch = document.getElementById('accountSearch');
|
||||
if (accountSearch) {
|
||||
accountSearch.value = this.accountSearchTerm;
|
||||
accountSearch.addEventListener('input', (e) => {
|
||||
this.accountSearchTerm = e.target.value.toLowerCase();
|
||||
this.refreshAccountsUI();
|
||||
});
|
||||
}
|
||||
|
||||
const appSearch = document.getElementById('appSearch');
|
||||
if (appSearch) {
|
||||
appSearch.value = this.applicationSearchTerm;
|
||||
appSearch.addEventListener('input', (e) => {
|
||||
this.applicationSearchTerm = e.target.value.toLowerCase();
|
||||
this.refreshApplicationsUI();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
const mainContent = document.getElementById('mainContent');
|
||||
if (mainContent) {
|
||||
mainContent.innerHTML = this.getAccountsContent();
|
||||
this.setupAccountRowListeners();
|
||||
this.setupAddButtonListeners();
|
||||
this.setupFilters();
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
const mainContent = document.getElementById('mainContent');
|
||||
if (mainContent) {
|
||||
mainContent.innerHTML = this.getApplicationsContent();
|
||||
this.setupAccountRowListeners();
|
||||
this.setupAddButtonListeners();
|
||||
this.setupFilters();
|
||||
}
|
||||
}
|
||||
|
||||
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');
|
||||
});
|
||||
}
|
||||
|
||||
loadFromStorage(key) {
|
||||
const data = localStorage.getItem(key);
|
||||
return data ? JSON.parse(data) : null;
|
||||
}
|
||||
|
||||
saveToStorage(key, data) {
|
||||
localStorage.setItem(key, JSON.stringify(data));
|
||||
}
|
||||
}
|
||||
|
||||
// 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');
|
||||
}
|
||||
|
||||
// Initialize app when DOM is ready
|
||||
let app;
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
app = new AccountManager();
|
||||
});
|
||||
199
public/modals.html
Normal file
199
public/modals.html
Normal file
@@ -0,0 +1,199 @@
|
||||
<!-- Add Account Modal -->
|
||||
<div class="modal-backdrop fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-sm" id="accountModal">
|
||||
<div class="modal-content w-full max-w-lg bg-white rounded-xl shadow-2xl border border-slate-200 overflow-hidden m-4">
|
||||
<div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50">
|
||||
<h3 class="text-base font-extrabold text-slate-900">Add New Account</h3>
|
||||
<button class="p-1.5 rounded-lg hover:bg-slate-200 text-slate-400 transition-colors" onclick="closeAccountModal()">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<form id="accountForm" class="p-6 space-y-4">
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Service</label>
|
||||
<select id="accountService" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3" required>
|
||||
<option value="">Select a service</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Owner Name</label>
|
||||
<input type="text" id="accountOwner" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3 bg-slate-50" required placeholder="Current user" readonly>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Username</label>
|
||||
<input type="text" id="accountUsername" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3" required placeholder="username">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Password</label>
|
||||
<input type="password" id="accountPassword" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3" required placeholder="••••••••">
|
||||
</div>
|
||||
<div class="flex gap-3 pt-4">
|
||||
<button type="button" class="flex-1 px-4 py-2 text-xs font-bold text-slate-600 border border-slate-200 rounded-lg" onclick="closeAccountModal()">Cancel</button>
|
||||
<button type="submit" class="flex-1 px-4 py-2 bg-primary hover:bg-primary-dim text-on-primary rounded-lg text-xs font-bold">Save Account</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- View Account Modal -->
|
||||
<div class="modal-backdrop fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-sm" id="viewAccountModal">
|
||||
<div class="modal-content w-full max-w-lg bg-white rounded-xl shadow-2xl border border-slate-200 overflow-hidden m-4">
|
||||
<div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50">
|
||||
<h3 class="text-base font-extrabold text-slate-900">Account Details</h3>
|
||||
<button class="p-1.5 rounded-lg hover:bg-slate-200 text-slate-400 transition-colors" onclick="closeViewAccountModal()">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-6 space-y-4">
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Service</label>
|
||||
<div id="viewAccountService" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3 bg-slate-50 text-slate-600">-</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Owner Name</label>
|
||||
<div id="viewAccountOwner" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3 bg-slate-50 text-slate-600">-</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Username</label>
|
||||
<div id="viewAccountUsername" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3 bg-slate-50 text-slate-600">-</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Password</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<div id="viewAccountPassword" class="flex-1 border border-slate-200 rounded-lg text-sm py-2.5 px-3 bg-slate-50 text-slate-600">••••••••</div>
|
||||
<button type="button" class="p-2 rounded-lg hover:bg-slate-100 text-slate-400 transition-colors toggle-password">
|
||||
<span class="material-symbols-outlined text-lg" id="toggleIcon">visibility</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 pt-4">
|
||||
<button type="button" class="flex-1 px-4 py-2 text-xs font-bold text-slate-600 border border-slate-200 rounded-lg" onclick="closeViewAccountModal()">Close</button>
|
||||
<button type="button" class="flex-1 px-4 py-2 bg-primary hover:bg-primary-dim text-on-primary rounded-lg text-xs font-bold edit-account-from-view">Edit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Account Modal -->
|
||||
<div class="modal-backdrop fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-sm" id="deleteAccountModal">
|
||||
<div class="modal-content w-full max-w-md bg-white rounded-xl shadow-2xl border border-slate-200 overflow-hidden m-4">
|
||||
<div class="px-6 py-4 border-b border-slate-100 bg-red-50 flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-red-600 text-2xl">warning</span>
|
||||
<h3 class="text-base font-extrabold text-red-700">Delete Account</h3>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-sm text-slate-600 mb-6">Are you sure you want to delete the account for <strong id="deleteAccountUsername">-</strong>? This action cannot be undone.</p>
|
||||
<div class="flex gap-3">
|
||||
<button type="button" class="flex-1 px-4 py-2 text-xs font-bold text-slate-600 border border-slate-200 rounded-lg" onclick="closeDeleteAccountModal()">Cancel</button>
|
||||
<button type="button" class="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-xs font-bold confirm-delete-account">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add App Modal -->
|
||||
<div class="modal-backdrop fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-sm" id="appModal">
|
||||
<div class="modal-content w-full max-w-lg bg-white rounded-xl shadow-2xl border border-slate-200 overflow-hidden m-4">
|
||||
<div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50">
|
||||
<h3 class="text-base font-extrabold text-slate-900">Add New Application</h3>
|
||||
<button class="p-1.5 rounded-lg hover:bg-slate-200 text-slate-400 transition-colors" onclick="closeAppModal()">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<form id="appForm" class="p-6 space-y-4">
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Application Name</label>
|
||||
<input type="text" id="appName" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3" required placeholder="AWS Services">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Type</label>
|
||||
<input type="text" id="appType" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3" required placeholder="Cloud">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Icon (Material Symbol)</label>
|
||||
<input type="text" id="appIcon" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3" placeholder="apps, cloud, security">
|
||||
<p class="text-[10px] text-slate-400 mt-1">Nhập tên icon từ https://fonts.google.com/icons (ví dụ: cloud, apps, security).</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Description</label>
|
||||
<textarea id="appDescription" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3 h-20 resize-none" placeholder="Short description"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">URL</label>
|
||||
<input type="text" id="appUrl" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3" placeholder="https://example.com or 172.20.235.176">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Status</label>
|
||||
<select id="appStatus" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3">
|
||||
<option value="online">Online</option>
|
||||
<option value="offline">Offline</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex gap-3 pt-4">
|
||||
<button type="button" class="flex-1 px-4 py-2 text-xs font-bold text-slate-600 border border-slate-200 rounded-lg" onclick="closeAppModal()">Cancel</button>
|
||||
<button type="submit" class="flex-1 px-4 py-2 bg-primary hover:bg-primary-dim text-on-primary rounded-lg text-xs font-bold">Save Application</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- View App Modal -->
|
||||
<div class="modal-backdrop fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-sm" id="viewAppModal">
|
||||
<div class="modal-content w-full max-w-lg bg-white rounded-xl shadow-2xl border border-slate-200 overflow-hidden m-4">
|
||||
<div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50">
|
||||
<h3 class="text-base font-extrabold text-slate-900">Application Details</h3>
|
||||
<button class="p-1.5 rounded-lg hover:bg-slate-200 text-slate-400 transition-colors" onclick="closeViewAppModal()">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-6 space-y-4">
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Application Name</label>
|
||||
<div id="viewAppName" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3 bg-slate-50 text-slate-600">-</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Type</label>
|
||||
<div id="viewAppType" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3 bg-slate-50 text-slate-600">-</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Icon</label>
|
||||
<div id="viewAppIcon" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3 bg-slate-50 text-slate-600 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-base" id="viewAppIconSymbol">apps</span>
|
||||
<span id="viewAppIconName" class="text-sm text-slate-600">apps</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Description</label>
|
||||
<div id="viewAppDescription" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3 bg-slate-50 text-slate-600 break-words">-</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">URL</label>
|
||||
<div id="viewAppUrl" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3 bg-slate-50 text-slate-600 break-all">-</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Status</label>
|
||||
<div id="viewAppStatus" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3 bg-slate-50 text-slate-600">-</div>
|
||||
</div>
|
||||
<div class="flex gap-3 pt-4">
|
||||
<button type="button" class="flex-1 px-4 py-2 text-xs font-bold text-slate-600 border border-slate-200 rounded-lg" onclick="closeViewAppModal()">Close</button>
|
||||
<button type="button" class="flex-1 px-4 py-2 bg-primary hover:bg-primary-dim text-on-primary rounded-lg text-xs font-bold edit-app-from-view">Edit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete App Modal -->
|
||||
<div class="modal-backdrop fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-sm" id="deleteAppModal">
|
||||
<div class="modal-content w-full max-w-md bg-white rounded-xl shadow-2xl border border-slate-200 overflow-hidden m-4">
|
||||
<div class="px-6 py-4 border-b border-slate-100 bg-red-50 flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-red-600 text-2xl">warning</span>
|
||||
<h3 class="text-base font-extrabold text-red-700">Delete Application</h3>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-sm text-slate-600 mb-6">Are you sure you want to delete <strong id="deleteAppName">-</strong>? This action cannot be undone.</p>
|
||||
<div class="flex gap-3">
|
||||
<button type="button" class="flex-1 px-4 py-2 text-xs font-bold text-slate-600 border border-slate-200 rounded-lg" onclick="closeDeleteAppModal()">Cancel</button>
|
||||
<button type="button" class="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-xs font-bold confirm-delete-app">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
252
public/pages/accounts.html
Normal file
252
public/pages/accounts.html
Normal file
@@ -0,0 +1,252 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="light" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Robot Manager Account - Accounts Management</title>
|
||||
<!-- Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
|
||||
<!-- Material Symbols -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap" rel="stylesheet"/>
|
||||
<!-- Notiflix Notify -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notiflix@3.2.7/dist/notiflix-3.2.7.min.css" />
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/notiflix@3.2.7/dist/notiflix-aio-3.2.7.min.js"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"on-secondary-fixed-variant": "#4e5c71",
|
||||
"on-secondary": "#f8f8ff",
|
||||
"secondary-fixed-dim": "#c7d5ed",
|
||||
"surface-variant": "#d9e4ea",
|
||||
"surface-tint": "#3755c3",
|
||||
"primary-container": "#dde1ff",
|
||||
"primary-dim": "#2848b7",
|
||||
"on-background": "#2a3439",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-fixed-dim": "#d4cdee",
|
||||
"on-tertiary-container": "#514d68",
|
||||
"error-container": "#fe8983",
|
||||
"on-secondary-container": "#455367",
|
||||
"outline": "#717c82",
|
||||
"on-primary": "#f8f7ff",
|
||||
"on-primary-container": "#2747b6",
|
||||
"inverse-primary": "#6d89fa",
|
||||
"on-surface": "#2a3439",
|
||||
"primary-fixed": "#dde1ff",
|
||||
"on-primary-fixed": "#0732a3",
|
||||
"secondary-dim": "#465468",
|
||||
"surface-container-high": "#e1e9ee",
|
||||
"surface-container-highest": "#d9e4ea",
|
||||
"on-primary-fixed-variant": "#3352c0",
|
||||
"on-error-container": "#752121",
|
||||
"secondary": "#526074",
|
||||
"tertiary-fixed": "#e3dbfd",
|
||||
"primary": "#3755c3",
|
||||
"surface-dim": "#cfdce3",
|
||||
"tertiary": "#605c78",
|
||||
"on-error": "#fff7f6",
|
||||
"secondary-fixed": "#d5e3fc",
|
||||
"error-dim": "#4e0309",
|
||||
"surface-bright": "#f7f9fb",
|
||||
"on-surface-variant": "#566166",
|
||||
"on-tertiary": "#fcf7ff",
|
||||
"tertiary-container": "#e3dbfd",
|
||||
"inverse-on-surface": "#9a9d9f",
|
||||
"on-tertiary-fixed-variant": "#5b5672",
|
||||
"tertiary-dim": "#54506b",
|
||||
"outline-variant": "#a9b4b9",
|
||||
"on-secondary-fixed": "#324053",
|
||||
"inverse-surface": "#0b0f10",
|
||||
"on-tertiary-fixed": "#3e3a54",
|
||||
"primary-fixed-dim": "#cad2ff",
|
||||
"surface-container": "#e8eff3",
|
||||
"secondary-container": "#d5e3fc",
|
||||
"surface-container-low": "#f0f4f7",
|
||||
"background": "#f7f9fb",
|
||||
"error": "#9f403d",
|
||||
"surface": "#f7f9fb"
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; font-size: 1.25rem; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-flex; white-space: nowrap; word-wrap: normal; direction: ltr; }
|
||||
body { font-family: 'Inter', sans-serif; height: 100vh; overflow: hidden; }
|
||||
h1, h2, h3, .brand-logo { font-family: 'Manrope', sans-serif; }
|
||||
.modal-backdrop { opacity: 0; transition: opacity 0.2s ease-in-out; pointer-events: none; }
|
||||
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
|
||||
.modal-content { transform: scale(0.95); transition: transform 0.2s ease-in-out; }
|
||||
.modal-backdrop.open .modal-content { transform: scale(1); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface antialiased flex h-screen w-screen">
|
||||
<aside class="h-screen w-56 flex flex-col bg-slate-100 dark:bg-slate-900 font-manrope text-sm font-medium border-r border-outline-variant/10 shrink-0">
|
||||
<div class="flex flex-col h-full py-6">
|
||||
<div class="px-6 mb-8">
|
||||
<div class="text-lg font-black text-slate-900 dark:text-slate-50 tracking-tight leading-none">Robot Account</div>
|
||||
<div class="text-[10px] uppercase tracking-widest text-on-surface-variant mt-1.5 font-bold">Admin Console</div>
|
||||
</div>
|
||||
<nav class="flex-1 px-3 space-y-1">
|
||||
<a href="./index.html" class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200/50 transition-all group cursor-pointer">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a href="./applications.html" class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200/50 transition-all group cursor-pointer">
|
||||
<span class="material-symbols-outlined">apps</span>
|
||||
<span>Applications</span>
|
||||
</a>
|
||||
<a href="./accounts.html" class="flex items-center gap-3 px-3 py-2 border-l-4 border-blue-600 bg-slate-200/80 dark:bg-slate-800 text-slate-900 dark:text-slate-50 font-bold group transition-all cursor-pointer">
|
||||
<span class="material-symbols-outlined">manage_accounts</span>
|
||||
<span>Accounts</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-6 pt-4 border-t border-outline-variant/10">
|
||||
<div class="text-[10px] font-bold text-on-surface-variant/40 uppercase tracking-widest">v1.0.0</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="flex-1 flex flex-col h-screen min-w-0">
|
||||
<header class="h-14 flex items-center justify-between px-6 bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-xl border-b border-outline-variant/10 shrink-0">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<div class="flex items-center bg-surface-container-high px-3 py-1.5 rounded-full w-64 group focus-within:ring-2 ring-primary/20 transition-all">
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-base">search</span>
|
||||
<input id="searchInput" class="bg-transparent border-none focus:ring-0 text-xs w-full placeholder:text-on-surface-variant/60 py-0" placeholder="Search resources..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 dark:bg-slate-800">
|
||||
<span class="material-symbols-outlined text-slate-600 dark:text-slate-400">account_circle</span>
|
||||
<div class="flex flex-col">
|
||||
<span id="accountUsername" class="text-xs font-semibold text-slate-900 dark:text-slate-50">User Account</span>
|
||||
<span id="accountRole" class="text-[10px] text-slate-500 dark:text-slate-400">Administrator</span>
|
||||
</div>
|
||||
</div>
|
||||
<button id="logoutBtn" class="p-2 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-red-100 dark:hover:bg-red-950 hover:text-red-700 dark:hover:text-red-300 transition-colors" title="Logout">
|
||||
<span class="material-symbols-outlined">logout</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="mainContent" class="flex-1 overflow-hidden"></div>
|
||||
<div id="modalsContainer">
|
||||
<!-- Add Account Modal -->
|
||||
<div class="modal-backdrop fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-sm" id="accountModal">
|
||||
<div class="modal-content w-full max-w-lg bg-white rounded-xl shadow-2xl border border-slate-200 overflow-hidden m-4">
|
||||
<div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50">
|
||||
<h3 class="text-base font-extrabold text-slate-900">Add New Account</h3>
|
||||
<button class="p-1.5 rounded-lg hover:bg-slate-200 text-slate-400 transition-colors" onclick="closeAccountModal()">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<form id="accountForm" class="p-6 space-y-4">
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Service</label>
|
||||
<select id="accountService" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3" required>
|
||||
<option value="">Select a service</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Owner Name</label>
|
||||
<input type="text" id="accountOwner" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3" required placeholder="John Doe">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Username</label>
|
||||
<input type="text" id="accountUsername" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3" required placeholder="username">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Password</label>
|
||||
<input type="password" id="accountPassword" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3" required placeholder="••••••••">
|
||||
</div>
|
||||
<div class="flex gap-3 pt-4">
|
||||
<button type="button" class="flex-1 px-4 py-2 text-xs font-bold text-slate-600 border border-slate-200 rounded-lg" onclick="closeAccountModal()">Cancel</button>
|
||||
<button type="submit" class="flex-1 px-4 py-2 bg-primary hover:bg-primary-dim text-on-primary rounded-lg text-xs font-bold">Save Account</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- View Account Modal -->
|
||||
<div class="modal-backdrop fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-sm" id="viewAccountModal">
|
||||
<div class="modal-content w-full max-w-lg bg-white rounded-xl shadow-2xl border border-slate-200 overflow-hidden m-4">
|
||||
<div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50">
|
||||
<h3 class="text-base font-extrabold text-slate-900">Account Details</h3>
|
||||
<button class="p-1.5 rounded-lg hover:bg-slate-200 text-slate-400 transition-colors" onclick="closeViewAccountModal()">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-6 space-y-4">
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Service</label>
|
||||
<div id="viewAccountService" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3 bg-slate-50 text-slate-600">-</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Owner Name</label>
|
||||
<div id="viewAccountOwner" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3 bg-slate-50 text-slate-600">-</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Username</label>
|
||||
<div id="viewAccountUsername" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3 bg-slate-50 text-slate-600">-</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Password</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<div id="viewAccountPassword" class="flex-1 border border-slate-200 rounded-lg text-sm py-2.5 px-3 bg-slate-50 text-slate-600">••••••••</div>
|
||||
<button type="button" class="p-2 rounded-lg hover:bg-slate-100 text-slate-400 transition-colors toggle-password">
|
||||
<span class="material-symbols-outlined text-lg" id="toggleIcon">visibility</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 pt-4">
|
||||
<button type="button" class="flex-1 px-4 py-2 text-xs font-bold text-slate-600 border border-slate-200 rounded-lg" onclick="closeViewAccountModal()">Close</button>
|
||||
<button type="button" class="flex-1 px-4 py-2 bg-primary hover:bg-primary-dim text-on-primary rounded-lg text-xs font-bold edit-account-from-view">Edit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Account Modal -->
|
||||
<div class="modal-backdrop fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-sm" id="deleteAccountModal">
|
||||
<div class="modal-content w-full max-w-md bg-white rounded-xl shadow-2xl border border-slate-200 overflow-hidden m-4">
|
||||
<div class="px-6 py-4 border-b border-slate-100 bg-red-50 flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-red-600 text-2xl">warning</span>
|
||||
<h3 class="text-base font-extrabold text-red-700">Delete Account</h3>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-sm text-slate-600 mb-6">Are you sure you want to delete the account for <strong id="deleteAccountUsername">-</strong>? This action cannot be undone.</p>
|
||||
<div class="flex gap-3">
|
||||
<button type="button" class="flex-1 px-4 py-2 text-xs font-bold text-slate-600 border border-slate-200 rounded-lg" onclick="closeDeleteAccountModal()">Cancel</button>
|
||||
<button type="button" class="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-xs font-bold confirm-delete-account">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="../js/app.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
if (app) {
|
||||
const mainContent = document.getElementById('mainContent');
|
||||
const modalsContainer = document.getElementById('modalsContainer');
|
||||
await app.initPromise;
|
||||
if (mainContent) {
|
||||
mainContent.innerHTML = app.getAccountsContent();
|
||||
app.setupAccountRowListeners();
|
||||
app.setupAddButtonListeners();
|
||||
app.setupFilters();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
239
public/pages/applications.html
Normal file
239
public/pages/applications.html
Normal file
@@ -0,0 +1,239 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="light" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Robot Manager Account - Applications Management</title>
|
||||
<!-- Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"/>
|
||||
<!-- Material Symbols -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap" rel="stylesheet"/>
|
||||
<!-- Notiflix Notify -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notiflix@3.2.7/dist/notiflix-3.2.7.min.css" />
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/notiflix@3.2.7/dist/notiflix-aio-3.2.7.min.js"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"on-secondary-fixed-variant": "#4e5c71",
|
||||
"on-secondary": "#f8f8ff",
|
||||
"secondary-fixed-dim": "#c7d5ed",
|
||||
"surface-variant": "#d9e4ea",
|
||||
"surface-tint": "#3755c3",
|
||||
"primary-container": "#dde1ff",
|
||||
"primary-dim": "#2848b7",
|
||||
"on-background": "#2a3439",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-fixed-dim": "#d4cdee",
|
||||
"on-tertiary-container": "#514d68",
|
||||
"error-container": "#fe8983",
|
||||
"on-secondary-container": "#455367",
|
||||
"outline": "#717c82",
|
||||
"on-primary": "#f8f7ff",
|
||||
"on-primary-container": "#2747b6",
|
||||
"inverse-primary": "#6d89fa",
|
||||
"on-surface": "#2a3439",
|
||||
"primary-fixed": "#dde1ff",
|
||||
"on-primary-fixed": "#0732a3",
|
||||
"secondary-dim": "#465468",
|
||||
"surface-container-high": "#e1e9ee",
|
||||
"surface-container-highest": "#d9e4ea",
|
||||
"on-primary-fixed-variant": "#3352c0",
|
||||
"on-error-container": "#752121",
|
||||
"secondary": "#526074",
|
||||
"tertiary-fixed": "#e3dbfd",
|
||||
"primary": "#3755c3",
|
||||
"surface-dim": "#cfdce3",
|
||||
"tertiary": "#605c78",
|
||||
"on-error": "#fff7f6",
|
||||
"secondary-fixed": "#d5e3fc",
|
||||
"error-dim": "#4e0309",
|
||||
"surface-bright": "#f7f9fb",
|
||||
"on-surface-variant": "#566166",
|
||||
"on-tertiary": "#fcf7ff",
|
||||
"tertiary-container": "#e3dbfd",
|
||||
"inverse-on-surface": "#9a9d9f",
|
||||
"on-tertiary-fixed-variant": "#5b5672",
|
||||
"tertiary-dim": "#54506b",
|
||||
"outline-variant": "#a9b4b9",
|
||||
"on-secondary-fixed": "#324053",
|
||||
"inverse-surface": "#0b0f10",
|
||||
"on-tertiary-fixed": "#3e3a54",
|
||||
"primary-fixed-dim": "#cad2ff",
|
||||
"surface-container": "#e8eff3",
|
||||
"secondary-container": "#d5e3fc",
|
||||
"surface-container-low": "#f0f4f7",
|
||||
"background": "#f7f9fb",
|
||||
"error": "#9f403d",
|
||||
"surface": "#f7f9fb"
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; font-size: 1.25rem; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-flex; white-space: nowrap; word-wrap: normal; direction: ltr; }
|
||||
body { font-family: 'Inter', sans-serif; height: 100vh; overflow: hidden; }
|
||||
h1, h2, h3, .brand-logo { font-family: 'Manrope', sans-serif; }
|
||||
.modal-backdrop { opacity: 0; transition: opacity 0.2s ease-in-out; pointer-events: none; }
|
||||
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
|
||||
.modal-content { transform: scale(0.95); transition: transform 0.2s ease-in-out; }
|
||||
.modal-backdrop.open .modal-content { transform: scale(1); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface antialiased flex h-screen w-screen">
|
||||
<aside class="h-screen w-56 flex flex-col bg-slate-100 dark:bg-slate-900 font-manrope text-sm font-medium border-r border-outline-variant/10 shrink-0">
|
||||
<div class="flex flex-col h-full py-6">
|
||||
<div class="px-6 mb-8">
|
||||
<div class="text-lg font-black text-slate-900 dark:text-slate-50 tracking-tight leading-none">Robot Account</div>
|
||||
<div class="text-[10px] uppercase tracking-widest text-on-surface-variant mt-1.5 font-bold">Admin Console</div>
|
||||
</div>
|
||||
<nav class="flex-1 px-3 space-y-1">
|
||||
<a href="./index.html" class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200/50 transition-all group cursor-pointer">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a href="./applications.html" class="flex items-center gap-3 px-3 py-2 border-l-4 border-blue-600 bg-slate-200/80 dark:bg-slate-800 text-slate-900 dark:text-slate-50 font-bold group transition-all cursor-pointer">
|
||||
<span class="material-symbols-outlined">apps</span>
|
||||
<span>Applications</span>
|
||||
</a>
|
||||
<a href="./accounts.html" class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200/50 transition-all group cursor-pointer">
|
||||
<span class="material-symbols-outlined">manage_accounts</span>
|
||||
<span>Accounts</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-6 pt-4 border-t border-outline-variant/10">
|
||||
<div class="text-[10px] font-bold text-on-surface-variant/40 uppercase tracking-widest">v1.0.0</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="flex-1 flex flex-col h-screen min-w-0">
|
||||
<header class="h-14 flex items-center justify-between px-6 bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-xl border-b border-outline-variant/10 shrink-0">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<div class="flex items-center bg-surface-container-high px-3 py-1.5 rounded-full w-64 group focus-within:ring-2 ring-primary/20 transition-all">
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-base">search</span>
|
||||
<input id="searchInput" class="bg-transparent border-none focus:ring-0 text-xs w-full placeholder:text-on-surface-variant/60 py-0" placeholder="Search resources..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 dark:bg-slate-800">
|
||||
<span class="material-symbols-outlined text-slate-600 dark:text-slate-400">account_circle</span>
|
||||
<div class="flex flex-col">
|
||||
<span id="accountUsername" class="text-xs font-semibold text-slate-900 dark:text-slate-50">User Account</span>
|
||||
<span id="accountRole" class="text-[10px] text-slate-500 dark:text-slate-400">Administrator</span>
|
||||
</div>
|
||||
</div>
|
||||
<button id="logoutBtn" class="p-2 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-red-100 dark:hover:bg-red-950 hover:text-red-700 dark:hover:text-red-300 transition-colors" title="Logout">
|
||||
<span class="material-symbols-outlined">logout</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="mainContent" class="flex-1 overflow-hidden"></div>
|
||||
<div id="modalsContainer">
|
||||
<!-- Add App Modal -->
|
||||
<div class="modal-backdrop fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-sm" id="appModal">
|
||||
<div class="modal-content w-full max-w-lg bg-white rounded-xl shadow-2xl border border-slate-200 overflow-hidden m-4">
|
||||
<div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50">
|
||||
<h3 class="text-base font-extrabold text-slate-900">Add New Application</h3>
|
||||
<button class="p-1.5 rounded-lg hover:bg-slate-200 text-slate-400 transition-colors" onclick="closeAppModal()">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<form id="appForm" class="p-6 space-y-4">
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Application Name</label>
|
||||
<input type="text" id="appName" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3" required placeholder="AWS Services">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Type</label>
|
||||
<input type="text" id="appType" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3" required placeholder="Cloud">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Status</label>
|
||||
<select id="appStatus" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3">
|
||||
<option value="online">Online</option>
|
||||
<option value="offline">Offline</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex gap-3 pt-4">
|
||||
<button type="button" class="flex-1 px-4 py-2 text-xs font-bold text-slate-600 border border-slate-200 rounded-lg" onclick="closeAppModal()">Cancel</button>
|
||||
<button type="submit" class="flex-1 px-4 py-2 bg-primary hover:bg-primary-dim text-on-primary rounded-lg text-xs font-bold">Save Application</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- View App Modal -->
|
||||
<div class="modal-backdrop fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-sm" id="viewAppModal">
|
||||
<div class="modal-content w-full max-w-lg bg-white rounded-xl shadow-2xl border border-slate-200 overflow-hidden m-4">
|
||||
<div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50">
|
||||
<h3 class="text-base font-extrabold text-slate-900">Application Details</h3>
|
||||
<button class="p-1.5 rounded-lg hover:bg-slate-200 text-slate-400 transition-colors" onclick="closeViewAppModal()">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-6 space-y-4">
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Application Name</label>
|
||||
<div id="viewAppName" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3 bg-slate-50 text-slate-600">-</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Type</label>
|
||||
<div id="viewAppType" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3 bg-slate-50 text-slate-600">-</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold uppercase text-slate-500 tracking-widest block mb-1">Status</label>
|
||||
<div id="viewAppStatus" class="w-full border border-slate-200 rounded-lg text-sm py-2.5 px-3 bg-slate-50 text-slate-600">-</div>
|
||||
</div>
|
||||
<div class="flex gap-3 pt-4">
|
||||
<button type="button" class="flex-1 px-4 py-2 text-xs font-bold text-slate-600 border border-slate-200 rounded-lg" onclick="closeViewAppModal()">Close</button>
|
||||
<button type="button" class="flex-1 px-4 py-2 bg-primary hover:bg-primary-dim text-on-primary rounded-lg text-xs font-bold edit-app-from-view">Edit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete App Modal -->
|
||||
<div class="modal-backdrop fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-sm" id="deleteAppModal">
|
||||
<div class="modal-content w-full max-w-md bg-white rounded-xl shadow-2xl border border-slate-200 overflow-hidden m-4">
|
||||
<div class="px-6 py-4 border-b border-slate-100 bg-red-50 flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-red-600 text-2xl">warning</span>
|
||||
<h3 class="text-base font-extrabold text-red-700">Delete Application</h3>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-sm text-slate-600 mb-6">Are you sure you want to delete <strong id="deleteAppName">-</strong>? This action cannot be undone.</p>
|
||||
<div class="flex gap-3">
|
||||
<button type="button" class="flex-1 px-4 py-2 text-xs font-bold text-slate-600 border border-slate-200 rounded-lg" onclick="closeDeleteAppModal()">Cancel</button>
|
||||
<button type="button" class="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-xs font-bold confirm-delete-app">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="../js/app.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
if (app) {
|
||||
const mainContent = document.getElementById('mainContent');
|
||||
await app.initPromise;
|
||||
if (mainContent) {
|
||||
mainContent.innerHTML = app.getApplicationsContent();
|
||||
app.setupAccountRowListeners();
|
||||
app.setupAddButtonListeners();
|
||||
app.setupFilters();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
179
public/pages/index.html
Normal file
179
public/pages/index.html
Normal file
@@ -0,0 +1,179 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="light" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Robot Manager Account - Account Management System</title>
|
||||
<!-- Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"/>
|
||||
<!-- Material Symbols -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap" rel="stylesheet"/>
|
||||
<!-- Notiflix Notify -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notiflix@3.2.7/dist/notiflix-3.2.7.min.css" />
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/notiflix@3.2.7/dist/notiflix-aio-3.2.7.min.js"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"on-secondary-fixed-variant": "#4e5c71",
|
||||
"on-secondary": "#f8f8ff",
|
||||
"secondary-fixed-dim": "#c7d5ed",
|
||||
"surface-variant": "#d9e4ea",
|
||||
"surface-tint": "#3755c3",
|
||||
"primary-container": "#dde1ff",
|
||||
"primary-dim": "#2848b7",
|
||||
"on-background": "#2a3439",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-fixed-dim": "#d4cdee",
|
||||
"on-tertiary-container": "#514d68",
|
||||
"error-container": "#fe8983",
|
||||
"on-secondary-container": "#455367",
|
||||
"outline": "#717c82",
|
||||
"on-primary": "#f8f7ff",
|
||||
"on-primary-container": "#2747b6",
|
||||
"inverse-primary": "#6d89fa",
|
||||
"on-surface": "#2a3439",
|
||||
"primary-fixed": "#dde1ff",
|
||||
"on-primary-fixed": "#0732a3",
|
||||
"secondary-dim": "#465468",
|
||||
"surface-container-high": "#e1e9ee",
|
||||
"surface-container-highest": "#d9e4ea",
|
||||
"on-primary-fixed-variant": "#3352c0",
|
||||
"on-error-container": "#752121",
|
||||
"secondary": "#526074",
|
||||
"tertiary-fixed": "#e3dbfd",
|
||||
"primary": "#3755c3",
|
||||
"surface-dim": "#cfdce3",
|
||||
"tertiary": "#605c78",
|
||||
"on-error": "#fff7f6",
|
||||
"secondary-fixed": "#d5e3fc",
|
||||
"error-dim": "#4e0309",
|
||||
"surface-bright": "#f7f9fb",
|
||||
"on-surface-variant": "#566166",
|
||||
"on-tertiary": "#fcf7ff",
|
||||
"tertiary-container": "#e3dbfd",
|
||||
"inverse-on-surface": "#9a9d9f",
|
||||
"on-tertiary-fixed-variant": "#5b5672",
|
||||
"tertiary-dim": "#54506b",
|
||||
"outline-variant": "#a9b4b9",
|
||||
"on-secondary-fixed": "#324053",
|
||||
"inverse-surface": "#0b0f10",
|
||||
"on-tertiary-fixed": "#3e3a54",
|
||||
"primary-fixed-dim": "#cad2ff",
|
||||
"surface-container": "#e8eff3",
|
||||
"secondary-container": "#d5e3fc",
|
||||
"surface-container-low": "#f0f4f7",
|
||||
"background": "#f7f9fb",
|
||||
"error": "#9f403d",
|
||||
"surface": "#f7f9fb"
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-family: 'Material Symbols Outlined';
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-flex;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; height: 100vh; overflow: hidden; }
|
||||
h1, h2, h3, .brand-logo { font-family: 'Manrope', sans-serif; }
|
||||
.modal-backdrop {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
.modal-backdrop.open {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.modal-content {
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
.modal-backdrop.open .modal-content {
|
||||
transform: scale(1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface antialiased flex h-screen w-screen">
|
||||
<!-- SideNavBar -->
|
||||
<aside class="h-screen w-56 flex flex-col bg-slate-100 dark:bg-slate-900 font-manrope text-sm font-medium border-r border-outline-variant/10 shrink-0">
|
||||
<div class="flex flex-col h-full py-6">
|
||||
<!-- Header -->
|
||||
<div class="px-6 mb-8">
|
||||
<div class="text-lg font-black text-slate-900 dark:text-slate-50 tracking-tight leading-none">Robot Account</div>
|
||||
<div class="text-[10px] uppercase tracking-widest text-on-surface-variant mt-1.5 font-bold">Admin Console</div>
|
||||
</div>
|
||||
<!-- Primary Nav -->
|
||||
<nav class="flex-1 px-3 space-y-1">
|
||||
<a href="#" onclick="location.reload(); return false;" class="flex items-center gap-3 px-3 py-2 border-l-4 border-blue-600 bg-slate-200/80 dark:bg-slate-800 text-slate-900 dark:text-slate-50 font-bold group transition-all cursor-pointer">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a href="./applications.html" class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200/50 transition-all group cursor-pointer">
|
||||
<span class="material-symbols-outlined">apps</span>
|
||||
<span>Applications</span>
|
||||
</a>
|
||||
<a href="./accounts.html" class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 hover:bg-slate-200/50 transition-all group cursor-pointer">
|
||||
<span class="material-symbols-outlined">manage_accounts</span>
|
||||
<span>Accounts</span>
|
||||
</a>
|
||||
</nav>
|
||||
<!-- Footer -->
|
||||
<div class="px-6 pt-4 border-t border-outline-variant/10">
|
||||
<div class="text-[10px] font-bold text-on-surface-variant/40 uppercase tracking-widest">v1.0.0</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 flex flex-col h-screen min-w-0">
|
||||
<!-- TopAppBar -->
|
||||
<header class="h-14 flex items-center justify-between px-6 bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-xl border-b border-outline-variant/10 shrink-0">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<div class="flex items-center bg-surface-container-high px-3 py-1.5 rounded-full w-64 group focus-within:ring-2 ring-primary/20 transition-all">
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-base">search</span>
|
||||
<input id="searchInput" class="bg-transparent border-none focus:ring-0 text-xs w-full placeholder:text-on-surface-variant/60 py-0" placeholder="Search resources..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 dark:bg-slate-800">
|
||||
<span class="material-symbols-outlined text-slate-600 dark:text-slate-400">account_circle</span>
|
||||
<div class="flex flex-col">
|
||||
<span id="accountUsername" class="text-xs font-semibold text-slate-900 dark:text-slate-50">User Account</span>
|
||||
<span id="accountRole" class="text-[10px] text-slate-500 dark:text-slate-400">Administrator</span>
|
||||
</div>
|
||||
</div>
|
||||
<button id="logoutBtn" class="p-2 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-red-100 dark:hover:bg-red-950 hover:text-red-700 dark:hover:text-red-300 transition-colors" title="Logout">
|
||||
<span class="material-symbols-outlined">logout</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div id="mainContent" class="flex-1 overflow-hidden">
|
||||
<!-- Content will be rendered here by JavaScript -->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="../js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
254
public/pages/login.html
Normal file
254
public/pages/login.html
Normal file
@@ -0,0 +1,254 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="light" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Robotics Account - Login</title>
|
||||
<!-- Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"/>
|
||||
<!-- Material Symbols -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap" rel="stylesheet"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"on-secondary-fixed-variant": "#4e5c71",
|
||||
"on-secondary": "#f8f8ff",
|
||||
"secondary-fixed-dim": "#c7d5ed",
|
||||
"surface-variant": "#d9e4ea",
|
||||
"surface-tint": "#3755c3",
|
||||
"primary-container": "#dde1ff",
|
||||
"primary-dim": "#2848b7",
|
||||
"on-background": "#2a3439",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"tertiary-fixed-dim": "#d4cdee",
|
||||
"on-tertiary-container": "#514d68",
|
||||
"error-container": "#fe8983",
|
||||
"on-secondary-container": "#455367",
|
||||
"outline": "#717c82",
|
||||
"on-primary": "#f8f7ff",
|
||||
"on-primary-container": "#2747b6",
|
||||
"inverse-primary": "#6d89fa",
|
||||
"on-surface": "#2a3439",
|
||||
"primary-fixed": "#dde1ff",
|
||||
"on-primary-fixed": "#0732a3",
|
||||
"secondary-dim": "#465468",
|
||||
"surface-container-high": "#e1e9ee",
|
||||
"surface-container-highest": "#d9e4ea",
|
||||
"on-primary-fixed-variant": "#3352c0",
|
||||
"on-error-container": "#752121",
|
||||
"secondary": "#526074",
|
||||
"tertiary-fixed": "#e3dbfd",
|
||||
"primary": "#3755c3",
|
||||
"surface-dim": "#cfdce3",
|
||||
"tertiary": "#605c78",
|
||||
"on-error": "#fff7f6",
|
||||
"secondary-fixed": "#d5e3fc",
|
||||
"error-dim": "#4e0309",
|
||||
"surface-bright": "#f7f9fb",
|
||||
"on-surface-variant": "#566166",
|
||||
"on-tertiary": "#fcf7ff",
|
||||
"tertiary-container": "#e3dbfd",
|
||||
"inverse-on-surface": "#9a9d9f",
|
||||
"on-tertiary-fixed-variant": "#5b5672",
|
||||
"tertiary-dim": "#54506b",
|
||||
"outline-variant": "#a9b4b9",
|
||||
"on-secondary-fixed": "#324053",
|
||||
"inverse-surface": "#0b0f10",
|
||||
"on-tertiary-fixed": "#3e3a54",
|
||||
"primary-fixed-dim": "#cad2ff",
|
||||
"surface-container": "#e8eff3",
|
||||
"secondary-container": "#d5e3fc",
|
||||
"surface-container-low": "#f0f4f7",
|
||||
"background": "#f7f9fb",
|
||||
"error": "#9f403d",
|
||||
"surface": "#f7f9fb"
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-family: 'Material Symbols Outlined';
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-flex;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; min-height: 100vh; }
|
||||
h1, h2, h3 { font-family: 'Manrope', sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gradient-to-br from-blue-50 via-background to-purple-50 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 antialiased">
|
||||
<div class="min-h-screen flex items-center justify-center px-4">
|
||||
<div class="w-full max-w-md">
|
||||
<!-- Login Card -->
|
||||
<div class="bg-white dark:bg-slate-900 rounded-2xl shadow-lg border border-outline-variant/10 p-8">
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-8">
|
||||
<div class="flex justify-center mb-4">
|
||||
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary text-4xl">security</span>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-2xl font-black text-slate-900 dark:text-slate-50 tracking-tight">Robotics Account Manager</h1>
|
||||
<p class="text-xs uppercase tracking-widest text-on-surface-variant font-bold mt-2">Account Management System</p>
|
||||
</div>
|
||||
|
||||
<!-- Login Form -->
|
||||
<form id="loginForm" class="space-y-5">
|
||||
<!-- Username/Email Input -->
|
||||
<div>
|
||||
<label for="username" class="block text-xs font-bold text-on-surface-variant uppercase tracking-wider mb-2">Username or Email</label>
|
||||
<div class="relative">
|
||||
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant/60">
|
||||
<span class="material-symbols-outlined text-base">person</span>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
placeholder="Enter your username"
|
||||
required
|
||||
class="w-full pl-10 pr-4 py-2.5 bg-surface-container-low border border-outline-variant/30 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-all text-sm font-medium"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Password Input -->
|
||||
<div>
|
||||
<label for="password" class="block text-xs font-bold text-on-surface-variant uppercase tracking-wider mb-2">Password</label>
|
||||
<div class="relative">
|
||||
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant/60">
|
||||
<span class="material-symbols-outlined text-base">lock</span>
|
||||
</span>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
class="w-full pl-10 pr-4 py-2.5 bg-surface-container-low border border-outline-variant/30 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-all text-sm font-medium"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Remember Me Checkbox -->
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="remember"
|
||||
name="remember"
|
||||
class="w-4 h-4 rounded border-outline-variant/30 text-primary focus:ring-2 focus:ring-primary/50 cursor-pointer"
|
||||
/>
|
||||
<label for="remember" class="ml-2.5 text-xs font-medium text-on-surface-variant cursor-pointer">Remember me</label>
|
||||
</div>
|
||||
|
||||
<!-- Login Button -->
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full bg-primary hover:bg-primary-dim text-on-primary font-bold py-2.5 px-4 rounded-lg transition-all active:scale-95 duration-100 flex items-center justify-center gap-2 mt-6"
|
||||
>
|
||||
<span class="material-symbols-outlined text-sm">login</span>
|
||||
<span>Sign In</span>
|
||||
</button>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div id="errorMessage" class="hidden bg-error-container/20 text-error/80 border border-error/30 rounded-lg px-4 py-3 text-xs font-medium"></div>
|
||||
</form>
|
||||
|
||||
<!-- Footer -->
|
||||
<!-- <div class="mt-8 pt-6 border-t border-outline-variant/10 text-center">
|
||||
<p class="text-[10px] text-on-surface-variant/60">Default credentials for demo: admin / admin</p>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- Bottom info -->
|
||||
<div class="text-center mt-6">
|
||||
<p class="text-xs text-on-surface-variant/60">v1.0.0</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Simple login functionality
|
||||
const loginForm = document.getElementById('loginForm');
|
||||
const errorMessage = document.getElementById('errorMessage');
|
||||
const usernameInput = document.getElementById('username');
|
||||
const passwordInput = document.getElementById('password');
|
||||
const rememberCheckbox = document.getElementById('remember');
|
||||
|
||||
// Demo credentials
|
||||
const validCredentials = {
|
||||
username: 'admin',
|
||||
password: 'admin'
|
||||
};
|
||||
|
||||
// Check if already logged in
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const currentUser = localStorage.getItem('currentUser');
|
||||
if (currentUser) {
|
||||
window.location.href = './index.html';
|
||||
}
|
||||
|
||||
// Restore remembered username
|
||||
const rememberedUsername = localStorage.getItem('rememberedUsername');
|
||||
if (rememberedUsername) {
|
||||
usernameInput.value = rememberedUsername;
|
||||
rememberCheckbox.checked = true;
|
||||
}
|
||||
});
|
||||
|
||||
loginForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
errorMessage.classList.add('hidden');
|
||||
|
||||
const username = usernameInput.value.trim();
|
||||
const password = passwordInput.value;
|
||||
|
||||
// Validate credentials
|
||||
if (username === validCredentials.username && password === validCredentials.password) {
|
||||
// Store user info
|
||||
const userData = {
|
||||
username: username,
|
||||
role: 'Administrator',
|
||||
loginTime: new Date().toISOString()
|
||||
};
|
||||
|
||||
localStorage.setItem('currentUser', JSON.stringify(userData));
|
||||
|
||||
// Handle remember me
|
||||
if (rememberCheckbox.checked) {
|
||||
localStorage.setItem('rememberedUsername', username);
|
||||
} else {
|
||||
localStorage.removeItem('rememberedUsername');
|
||||
}
|
||||
|
||||
// Redirect to dashboard
|
||||
window.location.href = './index.html';
|
||||
} else {
|
||||
// Show error
|
||||
errorMessage.textContent = 'Invalid username or password. Try admin / admin';
|
||||
errorMessage.classList.remove('hidden');
|
||||
passwordInput.value = '';
|
||||
passwordInput.focus();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user