| Server IP : 3.111.61.48 / Your IP : 216.73.216.67 Web Server : Apache System : Linux ip-10-0-5-176 6.8.0-1057-aws #60~22.04.1-Ubuntu SMP Wed May 27 08:16:59 UTC 2026 x86_64 User : ubuntu ( 1000) PHP Version : 8.2.31 Disable Function : exec,passthru,shell_exec,system MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /var/www/vhost/itmtrsrv.arukustech.com/public/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Management - Server Monitor</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #2563eb; /* Bright blue */
--primary-hover: #1d4ed8;
--bg: #f1f5f9;
--sidebar: #0f172a;
--header-bg: #1e293b;
--card: #ffffff;
--text-main: #1e293b;
--text-muted: #94a3b8;
--border: #e2e8f0;
--danger: #ef4444;
--success: #10b981;
}
body {
font-family: 'Inter', system-ui, sans-serif;
background-color: var(--bg);
color: var(--text-main);
margin: 0;
display: flex;
min-height: 100vh;
}
/* --- FIXED HEADER --- */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: var(--header-bg);
color: white;
padding: 0 2.5rem;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1100;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
header h2 { margin: 0; font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
/* --- CATEGORIZED SIDEBAR --- */
.sidebar {
width: 260px;
height: 100vh;
background: linear-gradient(180deg,#111827,#1f2937);
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
overflow-y: auto;
z-index: 1000;
padding-top: 0;
transition: transform 0.3s ease;
box-shadow: 3px 5px 4px rgba(0,0,0,.2);
}
.nav-category {
padding: 24px 24px 8px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
font-weight: 700;
}
.nav-menu { flex-grow: 1; }
.nav-item {
padding: 12px 20px;
margin: 4px 16px;
display: flex;
align-items: center;
gap: 12px;
color: #94a3b8;
text-decoration: none;
border-radius: 8px;
transition: all 0.2s;
font-weight: 500;
font-size: 0.95rem;
}
.nav-item i { width: 20px; text-align: center; font-size: 1.1rem; }
.nav-item:hover { background: rgba(255,255,255,0.05); color: white; }
.nav-item.active {
background: var(--primary);
color: white;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
/* --- MAIN CONTENT --- */
.main-content {
margin-left: 260px;
margin-top: 60px;
flex-grow: 1;
padding: 40px;
padding-bottom: 80px;
box-sizing: border-box;
}
/* --- FIXED FOOTER --- */
footer {
position: fixed;
bottom: 0;
left: 260px; /* for sidebar width */
right: 0;
height: 45px;
background: white;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: flex-end; /* ?? key change */
padding: 0 40px;
font-size: 0.8rem;
color: #64748b;
z-index: 1050;
}
.card {
background: var(--card);
border-radius: 12px;
padding: 25px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
margin-bottom: 25px;
border: 1px solid var(--border);
}
.card-title {
font-size: 0.9rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
}
/* --- FORMS --- */
.form-group { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
input, select {
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: 8px;
outline: none;
font-size: 0.9rem;
min-width: 200px;
background: #f8fafc;
transition: all 0.2s;
}
input:focus { border-color: var(--primary); background: white; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.btn-add {
background: var(--primary);
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
}
.btn-add:hover { background: var(--primary-hover); }
/* --- TABLE --- */
.table-container { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
background: #f8fafc;
padding: 14px 20px;
text-align: left;
font-size: 0.75rem;
text-transform: uppercase;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
}
td { padding: 16px 20px; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
/* --- BADGES --- */
.role-badge {
padding: 4px 10px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
.admin { background: #fee2e2; color: #ef4444; }
.viewer { background: #dcfce7; color: #10b981; }
.btn-del {
color: #94a3b8;
background: none;
border: 1px solid var(--border);
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
transition: 0.2s;
}
.btn-del:hover { color: var(--danger); border-color: var(--danger); background: #fff1f2; }
@media (max-width: 768px) {
header {
padding: 0 12px;
height: 60px;
}
header h2 {
font-size: 1rem;
display: flex;
align-items: center;
}
.sidebar {
width: 250px !important;
height: 100vh;
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 1200;
top: 0;
left: 0;
}
.sidebar.active {
transform: translateX(0);
}
.nav-item {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 12px 18px;
margin: 6px 12px;
}
.nav-item i {
width: 20px;
margin-right: 10px;
}
.nav-item span {
display: inline !important;
}
.nav-category {
display: block !important;
}
.main-content {
margin-left: 0 !important;
width: 100% !important;
padding: 80px 15px 80px;
}
.form-group {
flex-direction: column;
}
input,
select,
button {
width: 100%;
box-sizing: border-box;
}
footer {
left: 0 !important;
justify-content: center;
padding: 0 10px;
font-size: 0.75rem;
}
table {
min-width: 700px;
}
}
</style>
</head>
<body>
<header>
<h2>
<i class="fas fa-bars menu-toggle" onclick="toggleSidebar()" style="cursor:pointer;margin-right:10px;"></i>
<i class="fas fa-microchip"></i>
User Management
</h2>
<div style="font-size: 0.85rem; color: #cbd5e1;"><i class="fas fa-users-cog"></i> Access Control Panel</div>
</header>
<nav class="sidebar">
<!-- Top Section -->
<div>
<!-- Logo / Brand -->
<div style="padding:28px 24px;border-bottom:1px solid rgba(255,255,255,0.08);">
<h2 style="margin:0;font-size:24px;font-weight:700;color:#ffffff;letter-spacing:0.5px;">
<i class="fas fa-network-wired" style="color:#60a5fa;"></i>
InfraPanel
</h2>
<p style="margin:8px 0 0;color:#9ca3af;font-size:13px;">
Infrastructure Monitoring
</p>
</div>
<!-- Navigation -->
<div style="padding:20px 14px;">
<!-- Main -->
<div style="margin-bottom:10px;padding:0 12px;color:#6b7280;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;">
Main
</div>
<a href="index.html"
style="display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:8px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;text-decoration:none;font-weight:600;box-shadow:0 6px 18px rgba(37,99,235,0.35);">
<i class="fas fa-th-large" style="font-size:18px;"></i>
<span>Dashboard</span>
</a>
<!-- Operations -->
<div style="margin:22px 0 10px;padding:0 12px;color:#6b7280;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;">
Operations
</div>
<a href="admin.html"
class="admin-only"
style="display:flex;align-items:center;gap:14px;padding:13px 16px;margin-bottom:8px;border-radius:14px;color:#d1d5db;text-decoration:none;font-weight:500;transition:0.3s;background:rgba(255,255,255,0.03);">
<i class="fas fa-server" style="font-size:17px;color:#60a5fa;"></i>
<span>Manage Servers</span>
</a>
<a href="user.html"
class="admin-only"
style="display:flex;align-items:center;gap:14px;padding:13px 16px;margin-bottom:8px;border-radius:14px;color:#d1d5db;text-decoration:none;font-weight:500;transition:0.3s;background:rgba(255,255,255,0.03);">
<i class="fas fa-users-cog" style="font-size:17px;color:#34d399;"></i>
<span>User Management</span>
</a>
<!-- Reports -->
<div style="margin:22px 0 10px;padding:0 12px;color:#6b7280;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;">
Reports
</div>
<a href="alerts.html"
class="admin-only"
style="display:flex;align-items:center;gap:14px;padding:13px 16px;margin-bottom:8px;border-radius:14px;color:#d1d5db;text-decoration:none;font-weight:500;background:rgba(255,255,255,0.03);">
<i class="fas fa-history" style="font-size:17px;color:#fbbf24;"></i>
<span>Alert History</span>
</a>
<a href="reports.html"
class="admin-only"
style="display:flex;align-items:center;gap:14px;padding:13px 16px;margin-bottom:8px;border-radius:14px;color:#d1d5db;text-decoration:none;font-weight:500;background:rgba(255,255,255,0.03);">
<i class="fas fa-chart-line" style="font-size:17px;color:#c084fc;"></i>
<span>Reports</span>
</a>
</div>
</div>
<!-- Bottom Logout -->
<div style="padding:18px;border-top:1px solid rgba(255,255,255,0.08);">
<a href="#"
onclick="logout()"
style="display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:rgba(239,68,68,0.12);color:#f87171;text-decoration:none;font-weight:600;">
<i class="fas fa-sign-out-alt"></i>
<span>Logout</span>
</a>
</div>
</nav>
<div class="main-content">
<h2 style="margin-top: 0; margin-bottom: 25px;">User Account Directory</h2>
<div class="card">
<div class="card-title"><i class="fas fa-plus-circle"></i> Provision New Account</div>
<div class="form-group">
<input type="email" id="email" placeholder="Email Address">
<input type="password" id="password" placeholder="Temporary Password">
<select id="role">
<option value="viewer">Viewer</option>
<option value="Admin">Administrator</option>
</select>
<button class="btn-add" onclick="addUser()">
<i class="fas fa-plus"></i> Create User
</button>
</div>
</div>
<div class="card">
<div class="card-title"><i class="fas fa-list"></i> Registered Directory</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>User Identity</th>
<th>Access Level</th>
<th>Creation Date</th>
<th style="text-align: right;">Operations</th>
</tr>
</thead>
<tbody id="userTable"></tbody>
</table>
</div>
</div>
</div>
<footer>
© 2026 | Designed by <strong>Company Pvt. Ltd.</strong>
</footer>
<script>
const token = localStorage.getItem("token");
function logout() {
localStorage.removeItem("token");
window.location.href = "login.html";
}
function toggleSidebar() {
document.querySelector(".sidebar").classList.toggle("active");
}
async function loadUsers() {
try {
const res = await fetch('/api/v1/admin/users', {
headers: { 'Authorization': 'Bearer ' + token }
});
if (res.status === 401 || res.status === 403) {
alert("Security Alert: Unauthorized Access");
window.location.href = "index.html";
return;
}
const users = await res.json();
const table = document.getElementById("userTable");
table.innerHTML = users.map(u => `
<tr>
<td><div style="font-weight: 600;">${u.email}</div></td>
<td><span class="role-badge ${u.role.toLowerCase()}">${u.role}</span></td>
<td style="color: var(--text-muted)">${new Date(u.created_at).toLocaleDateString('en-GB', { day:'2-digit', month:'short', year:'numeric' })}</td>
<td style="text-align: right;">
<button class="btn-del" onclick="deleteUser(${u.id})" title="Revoke Access">
<i class="fas fa-trash-alt"></i>
</button>
</td>
</tr>
`).join('');
} catch (e) {
console.error("Failed to load users", e);
}
}
async function addUser() {
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const role = document.getElementById("role").value;
if (!email || !password) {
alert("Mandatory fields missing.");
return;
}
const res = await fetch('/api/v1/admin/add-user', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token
},
body: JSON.stringify({ email, password, role })
});
if (res.ok) {
document.getElementById("email").value = "";
document.getElementById("password").value = "";
loadUsers();
} else {
alert("Provisioning failed. Email might already be registered.");
}
}
async function deleteUser(id) {
if(!confirm("Confirm permanent access revocation for this user?")) return;
const res = await fetch(`/api/v1/admin/delete-user/${id}`, {
method: 'DELETE',
headers: { 'Authorization': 'Bearer ' + token }
});
if (res.ok) {
loadUsers();
}
}
if (!token) window.location.href = "login.html";
else loadUsers();
// SECURITY: DISABLE RIGHT-CLICK
document.addEventListener('contextmenu', event => event.preventDefault());
document.onkeydown = function(e) {
if (e.keyCode == 123 || (e.ctrlKey && e.shiftKey && (e.keyCode == 'I'.charCodeAt(0) || e.keyCode == 'J'.charCodeAt(0))) || (e.ctrlKey && e.keyCode == 'U'.charCodeAt(0))) {
return false;
}
};
</script>
</body>
</html>