first
This commit is contained in:
585
accounts.html
Normal file
585
accounts.html
Normal file
@@ -0,0 +1,585 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="light" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>VaultSentinel - 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"/>
|
||||
<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; overflow: hidden; height: 100vh; }
|
||||
h1, h2, h3 { font-family: 'Manrope', sans-serif; }
|
||||
.modal-backdrop {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
}
|
||||
.modal-backdrop.open {
|
||||
display: flex !important;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface antialiased flex h-screen w-screen">
|
||||
<!-- SideNavBar (shared with all pages) -->
|
||||
<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">VaultSentinel</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="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 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-3">
|
||||
<button class="p-1.5 rounded-full text-slate-500 hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="p-1.5 rounded-full text-slate-500 hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content Area -->
|
||||
<div class="flex-1 flex flex-col p-6 space-y-6 min-h-0 overflow-auto">
|
||||
<div class="flex items-center justify-between gap-6 mb-6 shrink-0">
|
||||
<div>
|
||||
<h2 class="text-2xl font-extrabold text-on-surface tracking-tight">Accounts Management</h2>
|
||||
<p class="text-sm text-on-surface-variant">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="filterService" class="bg-surface-container-low border 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>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex-1"></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">
|
||||
<div class="overflow-y-auto overflow-x-auto flex-1">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead class="sticky top-0 z-10">
|
||||
<tr class="bg-slate-50 border-b border-slate-200">
|
||||
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">User Owner</th>
|
||||
<th class="px-4 py-2.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">Account 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 id="accountList" class="divide-y divide-slate-100">
|
||||
<!-- Accounts will be inserted here -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- End Content Area -->
|
||||
</main>
|
||||
|
||||
<!-- Add/Edit Account Modal -->
|
||||
<div class="modal-backdrop fixed inset-0 z-[100] flex items-center justify-center bg-on-surface/30 backdrop-blur-[2px] hidden" id="accountModal">
|
||||
<div class="w-full max-w-[640px] bg-surface-container-lowest rounded-xl shadow-[0px_12px_32px_rgba(42,52,57,0.12)] border-none overflow-hidden m-4">
|
||||
<!-- Modal Header -->
|
||||
<div class="px-8 py-6 border-b border-surface-container flex justify-between items-start">
|
||||
<div>
|
||||
<span class="text-[0.625rem] font-bold uppercase tracking-[0.1em] text-on-surface-variant block mb-1">Account Management</span>
|
||||
<h2 class="text-2xl font-extrabold text-on-surface tracking-tight" id="accountModalTitle">Add New Account</h2>
|
||||
</div>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors text-on-surface-variant" onclick="closeModal()">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal Content -->
|
||||
<form id="accountForm" class="p-8 space-y-6">
|
||||
<div>
|
||||
<label class="text-[0.65rem] font-bold uppercase tracking-widest text-on-surface-variant ml-1 block mb-2">Service</label>
|
||||
<div class="flex items-center h-12 px-4 bg-surface-container-highest rounded-lg border border-transparent focus-within:border-primary/40 focus-within:shadow-[0_0_0_2px_rgba(55,85,195,0.05)] transition-all">
|
||||
<span class="material-symbols-outlined text-on-surface-variant mr-3 text-sm">cloud</span>
|
||||
<select id="accountService" class="flex-1 bg-transparent border-none focus:ring-0 text-sm font-medium text-on-surface p-0" required>
|
||||
<option value="">Select a service</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-[0.65rem] font-bold uppercase tracking-widest text-on-surface-variant ml-1 block mb-2">Owner Name</label>
|
||||
<div class="flex items-center h-12 px-4 bg-surface-container-highest rounded-lg border border-transparent focus-within:border-primary/40 focus-within:shadow-[0_0_0_2px_rgba(55,85,195,0.05)] transition-all">
|
||||
<span class="material-symbols-outlined text-on-surface-variant mr-3 text-sm">person</span>
|
||||
<input type="text" id="accountOwner" class="flex-1 bg-transparent border-none focus:ring-0 text-sm font-medium text-on-surface placeholder:text-on-surface-variant/60 p-0" required placeholder="John Doe">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-[0.65rem] font-bold uppercase tracking-widest text-on-surface-variant ml-1 block mb-2">Username</label>
|
||||
<div class="flex items-center h-12 px-4 bg-surface-container-highest rounded-lg border border-transparent focus-within:border-primary/40 focus-within:shadow-[0_0_0_2px_rgba(55,85,195,0.05)] transition-all">
|
||||
<span class="material-symbols-outlined text-on-surface-variant mr-3 text-sm">alternate_email</span>
|
||||
<input type="text" id="accountUsername" class="flex-1 bg-transparent border-none focus:ring-0 text-sm font-medium text-on-surface placeholder:text-on-surface-variant/60 p-0" required placeholder="username">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-[0.65rem] font-bold uppercase tracking-widest text-on-surface-variant ml-1 block mb-2">Password</label>
|
||||
<div class="flex items-center h-12 px-4 bg-surface-container-highest rounded-lg border border-transparent focus-within:border-primary/40 focus-within:shadow-[0_0_0_2px_rgba(55,85,195,0.05)] transition-all">
|
||||
<span class="material-symbols-outlined text-on-surface-variant mr-3 text-sm">lock</span>
|
||||
<input type="password" id="accountPassword" class="flex-1 bg-transparent border-none focus:ring-0 text-sm font-medium text-on-surface placeholder:text-on-surface-variant/60 p-0" required placeholder="••••••••">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Modal Footer -->
|
||||
<div class="px-8 py-6 bg-surface-container-low flex items-center justify-end gap-3">
|
||||
<button class="px-5 h-11 text-sm font-bold text-on-surface-variant hover:bg-surface-container transition-all rounded-lg" onclick="closeModal()">
|
||||
Close
|
||||
</button>
|
||||
<button onclick="document.getElementById('accountForm').dispatchEvent(new Event('submit'))" class="px-6 h-11 text-sm font-bold text-on-primary bg-gradient-to-br from-primary to-primary-dim rounded-lg shadow-sm hover:opacity-90 active:scale-[0.98] transition-all flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-base">save</span>
|
||||
Save Account
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- View Account Details Modal -->
|
||||
<div class="modal-backdrop fixed inset-0 z-[100] flex items-center justify-center bg-on-surface/30 backdrop-blur-[2px] hidden" id="viewAccountModal">
|
||||
<div class="w-full max-w-[640px] bg-surface-container-lowest rounded-xl shadow-[0px_12px_32px_rgba(42,52,57,0.12)] border-none overflow-hidden m-4">
|
||||
<!-- Modal Header -->
|
||||
<div class="px-8 py-6 border-b border-surface-container flex justify-between items-start">
|
||||
<div>
|
||||
<span class="text-[0.625rem] font-bold uppercase tracking-[0.1em] text-on-surface-variant block mb-1">Account Details</span>
|
||||
<h2 class="text-2xl font-extrabold text-on-surface tracking-tight" id="viewAccountName">Account Owner</h2>
|
||||
</div>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors text-on-surface-variant" onclick="closeViewAccountModal()">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal Content -->
|
||||
<div class="p-8 space-y-6">
|
||||
<!-- Service Info Section -->
|
||||
<div class="flex items-center gap-5 p-5 bg-surface-container-low rounded-xl">
|
||||
<div class="w-14 h-14 bg-white rounded-xl shadow-sm flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary text-3xl">cloud</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="text-xs font-bold text-on-surface-variant uppercase tracking-wider mb-0.5">Service</div>
|
||||
<div class="text-xl font-bold text-on-surface" id="viewAccountService">-</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Details Grid -->
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="text-[0.65rem] font-bold uppercase tracking-widest text-on-surface-variant block mb-2">Username</label>
|
||||
<div class="flex items-center h-12 px-4 bg-surface-container-highest rounded-lg">
|
||||
<span class="material-symbols-outlined text-on-surface-variant mr-3 text-sm">alternate_email</span>
|
||||
<span class="text-sm font-medium text-on-surface" id="viewAccountUsername">-</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[0.65rem] font-bold uppercase tracking-widest text-on-surface-variant block mb-2">Password</label>
|
||||
<div class="flex items-center justify-between h-12 px-4 bg-surface-container-highest rounded-lg">
|
||||
<div class="flex items-center flex-1">
|
||||
<span class="material-symbols-outlined text-on-surface-variant mr-3 text-sm">lock</span>
|
||||
<span class="text-sm font-medium text-on-surface" id="viewAccountPassword">••••••••</span>
|
||||
</div>
|
||||
<button class="p-1 text-on-surface-variant hover:text-on-surface transition-colors" onclick="togglePasswordVisibility()">
|
||||
<span class="material-symbols-outlined text-sm" id="passwordToggleIcon">visibility</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Footer -->
|
||||
<div class="px-8 py-6 bg-surface-container-low flex items-center justify-end gap-3">
|
||||
<button class="px-5 h-11 text-sm font-bold text-on-surface-variant hover:bg-surface-container transition-all rounded-lg" onclick="closeViewAccountModal()">
|
||||
Close
|
||||
</button>
|
||||
<button onclick="editCurrentAccount()" class="px-6 h-11 text-sm font-bold text-on-primary bg-gradient-to-br from-primary to-primary-dim rounded-lg shadow-sm hover:opacity-90 active:scale-[0.98] transition-all flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-base">edit</span>
|
||||
Edit Account
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirm Modal -->
|
||||
<div class="modal-backdrop fixed inset-0 z-[100] flex items-center justify-center bg-on-surface/30 backdrop-blur-[2px] hidden" id="deleteConfirmModal">
|
||||
<div class="w-full max-w-[480px] bg-surface-container-lowest rounded-xl shadow-[0px_12px_32px_rgba(42,52,57,0.12)] border-none overflow-hidden m-4">
|
||||
<!-- Modal Header -->
|
||||
<div class="px-8 py-6 border-b border-surface-container bg-error/5">
|
||||
<h3 class="text-base font-extrabold text-error flex items-center gap-2">
|
||||
<span class="material-symbols-outlined">warning</span>
|
||||
Delete Account
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<!-- Modal Content -->
|
||||
<div class="px-8 py-6">
|
||||
<p class="text-sm text-on-surface-variant">Are you sure you want to delete <strong id="deleteAccountUsername" class="text-on-surface"></strong>? This action cannot be undone.</p>
|
||||
</div>
|
||||
|
||||
<!-- Modal Footer -->
|
||||
<div class="px-8 py-6 bg-surface-container-low flex items-center justify-end gap-3">
|
||||
<button class="px-5 h-11 text-sm font-bold text-on-surface-variant hover:bg-surface-container transition-all rounded-lg" onclick="closeDeleteModal()">
|
||||
Cancel
|
||||
</button>
|
||||
<button onclick="confirmDelete()" class="px-6 h-11 text-sm font-bold text-on-error bg-gradient-to-br from-error to-error-dim rounded-lg shadow-sm hover:opacity-90 active:scale-[0.98] transition-all flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-base">delete</span>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
class AccountManager {
|
||||
constructor() {
|
||||
this.accounts = this.loadAccounts() || [];
|
||||
this.applications = this.loadApplications() || [
|
||||
{ name: 'AWS' },
|
||||
{ name: 'GitHub' },
|
||||
{ name: 'Google Workspace' },
|
||||
{ name: 'Nginx Proxy' },
|
||||
];
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupSelects();
|
||||
this.render();
|
||||
this.setupEventListeners();
|
||||
}
|
||||
|
||||
setupSelects() {
|
||||
const serviceSelect = document.getElementById('accountService');
|
||||
const filterSelect = document.getElementById('filterService');
|
||||
|
||||
this.applications.forEach(app => {
|
||||
const option = new Option(app.name, app.name);
|
||||
serviceSelect.add(option);
|
||||
filterSelect.add(new Option(app.name, app.name));
|
||||
});
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
document.getElementById('addAccountBtn').addEventListener('click', () => this.openModal());
|
||||
document.getElementById('accountForm').addEventListener('submit', (e) => this.handleSubmit(e));
|
||||
document.getElementById('filterService').addEventListener('change', (e) => this.filterByService(e.target.value));
|
||||
}
|
||||
|
||||
render() {
|
||||
this.renderTable(this.accounts);
|
||||
this.setupActionButtons();
|
||||
}
|
||||
|
||||
renderTable(accounts) {
|
||||
const tbody = document.getElementById('accountList');
|
||||
if (accounts.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="4" class="px-4 py-8 text-center text-slate-500">No accounts yet. Create one to get started.</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = accounts.map((acc, idx) => `
|
||||
<tr class="hover:bg-slate-50/80 transition-colors group">
|
||||
<td class="px-4 py-3 text-sm font-medium text-slate-900">${acc.owner}</td>
|
||||
<td class="px-4 py-3 text-sm text-slate-600">${acc.username}</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.service}</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="p-1.5 text-on-surface-variant hover:text-on-surface transition-colors view-account" data-idx="${idx}" 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-idx="${idx}">
|
||||
<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-idx="${idx}">
|
||||
<span class="material-symbols-outlined text-lg">delete</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
setupActionButtons() {
|
||||
document.querySelectorAll('.view-account').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const idx = btn.dataset.idx;
|
||||
const acc = this.accounts[idx];
|
||||
window.currentViewAccount = acc;
|
||||
window.currentViewAccountIdx = idx;
|
||||
window.currentAccountPasswordVisible = false;
|
||||
document.getElementById('viewAccountName').textContent = acc.owner;
|
||||
document.getElementById('viewAccountService').textContent = acc.service;
|
||||
document.getElementById('viewAccountUsername').textContent = acc.username;
|
||||
document.getElementById('viewAccountPassword').textContent = '••••••••';
|
||||
document.getElementById('viewAccountPassword').dataset.visible = 'false';
|
||||
document.getElementById('passwordToggleIcon').textContent = 'visibility';
|
||||
document.getElementById('viewAccountModal').classList.add('open');
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.delete-account').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const idx = btn.dataset.idx;
|
||||
const acc = this.accounts[idx];
|
||||
window.pendingDeleteIdx = idx;
|
||||
document.getElementById('deleteAccountUsername').textContent = acc.username;
|
||||
document.getElementById('deleteConfirmModal').classList.add('open');
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.edit-account').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const idx = btn.dataset.idx;
|
||||
const acc = this.accounts[idx];
|
||||
document.getElementById('accountService').value = acc.service;
|
||||
document.getElementById('accountOwner').value = acc.owner;
|
||||
document.getElementById('accountUsername').value = acc.username;
|
||||
document.getElementById('accountPassword').value = acc.password;
|
||||
document.getElementById('accountModalTitle').textContent = 'Edit Account';
|
||||
this.editingIdx = idx;
|
||||
this.openModal();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
filterByService(service) {
|
||||
const filtered = service ? this.accounts.filter(a => a.service === service) : this.accounts;
|
||||
this.renderTable(filtered);
|
||||
this.setupActionButtons();
|
||||
}
|
||||
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
const account = {
|
||||
service: document.getElementById('accountService').value,
|
||||
owner: document.getElementById('accountOwner').value,
|
||||
username: document.getElementById('accountUsername').value,
|
||||
password: document.getElementById('accountPassword').value,
|
||||
dateCreated: new Date().toLocaleDateString()
|
||||
};
|
||||
|
||||
if (this.editingIdx !== undefined) {
|
||||
this.accounts[this.editingIdx] = account;
|
||||
this.editingIdx = undefined;
|
||||
} else {
|
||||
this.accounts.push(account);
|
||||
}
|
||||
|
||||
this.saveAccounts();
|
||||
this.closeModal();
|
||||
this.render();
|
||||
}
|
||||
|
||||
openModal() {
|
||||
if (this.editingIdx === undefined) {
|
||||
document.getElementById('accountForm').reset();
|
||||
document.getElementById('accountModalTitle').textContent = 'Add New Account';
|
||||
}
|
||||
document.getElementById('accountModal').classList.add('open');
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
document.getElementById('accountModal').classList.remove('open');
|
||||
this.editingIdx = undefined;
|
||||
}
|
||||
|
||||
loadAccounts() {
|
||||
return JSON.parse(localStorage.getItem('accounts'));
|
||||
}
|
||||
|
||||
loadApplications() {
|
||||
return JSON.parse(localStorage.getItem('applications'));
|
||||
}
|
||||
|
||||
saveAccounts() {
|
||||
localStorage.setItem('accounts', JSON.stringify(this.accounts));
|
||||
}
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('accountModal').classList.remove('open');
|
||||
}
|
||||
|
||||
function closeDeleteModal() {
|
||||
document.getElementById('deleteConfirmModal').classList.remove('open');
|
||||
window.pendingDeleteIdx = null;
|
||||
}
|
||||
|
||||
function confirmDelete() {
|
||||
const idx = window.pendingDeleteIdx;
|
||||
if (idx !== null && idx !== undefined) {
|
||||
accountManager.accounts.splice(idx, 1);
|
||||
accountManager.saveAccounts();
|
||||
accountManager.render();
|
||||
closeDeleteModal();
|
||||
}
|
||||
}
|
||||
|
||||
function closeViewAccountModal() {
|
||||
document.getElementById('viewAccountModal').classList.remove('open');
|
||||
window.currentAccountPasswordVisible = false;
|
||||
}
|
||||
|
||||
function togglePasswordVisibility() {
|
||||
const passwordEl = document.getElementById('viewAccountPassword');
|
||||
const toggleIcon = document.getElementById('passwordToggleIcon');
|
||||
window.currentAccountPasswordVisible = !window.currentAccountPasswordVisible;
|
||||
|
||||
if (window.currentAccountPasswordVisible) {
|
||||
passwordEl.textContent = window.currentViewAccount.password;
|
||||
toggleIcon.textContent = 'visibility_off';
|
||||
} else {
|
||||
passwordEl.textContent = '••••••••';
|
||||
toggleIcon.textContent = 'visibility';
|
||||
}
|
||||
}
|
||||
|
||||
function editCurrentAccount() {
|
||||
const idx = window.currentViewAccountIdx;
|
||||
const acc = window.currentViewAccount;
|
||||
closeViewAccountModal();
|
||||
document.getElementById('accountService').value = acc.service;
|
||||
document.getElementById('accountOwner').value = acc.owner;
|
||||
document.getElementById('accountUsername').value = acc.username;
|
||||
document.getElementById('accountPassword').value = acc.password;
|
||||
document.getElementById('accountModalTitle').textContent = 'Edit Account';
|
||||
accountManager.editingIdx = idx;
|
||||
accountManager.openModal();
|
||||
}
|
||||
|
||||
let accountManager;
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
accountManager = new AccountManager();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user