othman.suseno/calypso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0537709576ed1f0cca14053be61b5dfc8d7cb541
calypso/src/web/user-access-management-code.html
Othman H. Suseno 0537709576 add instruction and srs
2025-12-24 23:55:55 +07:00

400 lines
20 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>User &amp; Access Management - Backup Appliance</title>
<!-- Google Fonts: Manrope -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&amp;display=swap" rel="stylesheet"/>
<!-- Material Symbols -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- Theme Configuration -->
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#137fec",
"background-light": "#f6f7f8",
"background-dark": "#101922",
"surface-dark": "#1c2630",
"surface-darker": "#111a22",
"border-dark": "#324d67",
},
fontFamily: {
"display": ["Manrope", "sans-serif"]
},
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
},
},
}
</script>
<style>
/* Custom scrollbar for dark mode cockpit feel */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #101922;
}
::-webkit-scrollbar-thumb {
background: #324d67;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #137fec;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-white font-display overflow-hidden h-screen w-full flex">
<!-- Sidebar -->
<aside class="w-64 h-full bg-surface-darker flex flex-col border-r border-border-dark flex-shrink-0 z-20">
<div class="p-6 flex flex-col gap-6">
<!-- Appliance Identity -->
<div class="flex items-center gap-3">
<div class="bg-primary/20 p-2 rounded-lg">
<span class="material-symbols-outlined text-primary text-3xl">dns</span>
</div>
<div class="flex flex-col">
<h1 class="text-white text-base font-bold leading-tight">Backup Appliance</h1>
<p class="text-slate-400 text-xs font-medium">Host: node-01.local</p>
</div>
</div>
<!-- Navigation -->
<nav class="flex flex-col gap-2">
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-300 hover:bg-surface-dark hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:text-primary transition-colors">dashboard</span>
<span class="text-sm font-medium">Dashboard</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-300 hover:bg-surface-dark hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:text-primary transition-colors">hard_drive</span>
<span class="text-sm font-medium">Storage</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-300 hover:bg-surface-dark hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:text-primary transition-colors">lan</span>
<span class="text-sm font-medium">Network</span>
</a>
<!-- Active State -->
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary/10 text-primary border border-primary/20" href="#">
<span class="material-symbols-outlined fill-1">manage_accounts</span>
<span class="text-sm font-bold">User &amp; Access</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-300 hover:bg-surface-dark hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:text-primary transition-colors">security</span>
<span class="text-sm font-medium">Data Protection</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-300 hover:bg-surface-dark hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:text-primary transition-colors">settings</span>
<span class="text-sm font-medium">System</span>
</a>
</nav>
</div>
<!-- User Profile (Bottom Sidebar) -->
<div class="mt-auto p-4 border-t border-border-dark">
<div class="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-surface-dark cursor-pointer transition-colors">
<div class="h-8 w-8 rounded-full bg-cover bg-center ring-2 ring-border-dark" data-alt="Administrator profile picture" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDzrQIWpC-TosfbyD0BB4efX7Qu00RduKrfteJ7r7YTjzmO5t98e3qOPYXvr-Zjxa_fzls8Vqy3Hl1Pfh01M45iBNGvfTswlOkJk9PDvJVHmngkOauGp61DKXrkfvVOymrFoPmFYGfx1o5Lxv1H078E95PFapYKZVO9Dh_0319rQLN4KFjOhjY4VDWOARbEKkbjGfT2reaOHVXhkc9A3XRRhd4opmYGmUrR68VVk0SOQ_2eFoZd69WnYjLTa44FoyzvpOE7Mps_JLg');"></div>
<div class="flex flex-col min-w-0">
<span class="text-sm font-semibold text-white truncate">Admin User</span>
<span class="text-xs text-slate-400 truncate">System Administrator</span>
</div>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="flex-1 flex flex-col h-full overflow-hidden bg-background-dark">
<!-- Scrollable content -->
<div class="flex-1 overflow-y-auto">
<div class="max-w-[1200px] mx-auto w-full p-8 flex flex-col gap-6">
<!-- Page Header -->
<header class="flex flex-wrap justify-between items-end gap-4 border-b border-border-dark pb-6">
<div class="flex flex-col gap-2">
<nav class="flex items-center gap-2 text-sm text-slate-400 mb-1">
<span>System</span>
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
<span class="text-white">Access Control</span>
</nav>
<h1 class="text-3xl font-black text-white leading-tight">User &amp; Access Management</h1>
<p class="text-slate-400 text-base max-w-2xl">Manage local accounts, define RBAC roles, and configure directory services (LDAP/AD) integration.</p>
</div>
<div class="flex gap-3">
<button class="flex items-center justify-center gap-2 px-4 py-2 bg-surface-dark border border-border-dark rounded-lg text-white hover:bg-border-dark transition-colors font-semibold">
<span class="material-symbols-outlined text-[20px]">history</span>
Audit Log
</button>
</div>
</header>
<!-- Content Container -->
<div class="flex flex-col gap-6">
<!-- Tabs -->
<div class="flex border-b border-border-dark gap-8">
<button class="flex items-center gap-2 pb-3 border-b-[3px] border-primary text-white hover:text-white transition-colors">
<span class="material-symbols-outlined text-[20px]">group</span>
<span class="text-sm font-bold">Local Users &amp; Groups</span>
</button>
<button class="flex items-center gap-2 pb-3 border-b-[3px] border-transparent text-slate-400 hover:text-white hover:border-slate-600 transition-colors">
<span class="material-symbols-outlined text-[20px]">badge</span>
<span class="text-sm font-bold">Directory Services</span>
</button>
<button class="flex items-center gap-2 pb-3 border-b-[3px] border-transparent text-slate-400 hover:text-white hover:border-slate-600 transition-colors">
<span class="material-symbols-outlined text-[20px]">lock</span>
<span class="text-sm font-bold">Authentication &amp; SSO</span>
</button>
</div>
<!-- Toolbar Area -->
<div class="flex flex-wrap gap-4 items-center justify-between">
<!-- Search & Filter -->
<div class="flex flex-1 max-w-xl gap-3">
<div class="relative flex-1">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">search</span>
<input class="w-full bg-surface-dark border border-border-dark rounded-lg pl-10 pr-4 py-2.5 text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm" placeholder="Search users by name, role, or group..." type="text"/>
</div>
<button class="flex items-center gap-2 px-4 py-2.5 bg-surface-dark border border-border-dark rounded-lg text-slate-300 hover:text-white hover:border-slate-500 transition-colors">
<span class="material-symbols-outlined text-[20px]">filter_list</span>
<span class="text-sm font-medium">Filter</span>
</button>
</div>
<!-- Primary Action -->
<button class="flex items-center gap-2 bg-primary hover:bg-blue-600 text-white px-5 py-2.5 rounded-lg font-bold shadow-lg shadow-blue-500/20 transition-all">
<span class="material-symbols-outlined text-[20px]">person_add</span>
Create User
</button>
</div>
<!-- Users Table -->
<div class="rounded-xl border border-border-dark bg-surface-darker overflow-hidden shadow-sm">
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="bg-surface-dark border-b border-border-dark text-left">
<th class="px-6 py-4 text-xs font-bold text-slate-400 uppercase tracking-wider w-24">Status</th>
<th class="px-6 py-4 text-xs font-bold text-slate-400 uppercase tracking-wider">Username</th>
<th class="px-6 py-4 text-xs font-bold text-slate-400 uppercase tracking-wider">Full Name</th>
<th class="px-6 py-4 text-xs font-bold text-slate-400 uppercase tracking-wider">Role</th>
<th class="px-6 py-4 text-xs font-bold text-slate-400 uppercase tracking-wider">Groups</th>
<th class="px-6 py-4 text-xs font-bold text-slate-400 uppercase tracking-wider">Last Login</th>
<th class="px-6 py-4 text-xs font-bold text-slate-400 uppercase tracking-wider text-right">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-border-dark">
<!-- Row 1: Active Admin -->
<tr class="group hover:bg-surface-dark transition-colors">
<td class="px-6 py-4">
<div class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full bg-green-500/10 text-green-500 text-xs font-bold border border-green-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span>
Active
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white text-xs font-bold" data-alt="Avatar gradient">AD</div>
<span class="text-white font-medium">admin</span>
</div>
</td>
<td class="px-6 py-4 text-slate-300 text-sm">System Administrator</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 text-xs font-medium px-2.5 py-1 rounded-md bg-purple-500/10 text-purple-400 border border-purple-500/20">
<span class="material-symbols-outlined text-[14px]">verified_user</span>
Superuser
</span>
</td>
<td class="px-6 py-4 text-slate-400 text-sm">wheel, system</td>
<td class="px-6 py-4 text-slate-400 text-sm">Just now</td>
<td class="px-6 py-4 text-right">
<button class="p-2 text-slate-400 hover:text-white hover:bg-border-dark rounded-lg transition-colors">
<span class="material-symbols-outlined text-[20px]">more_vert</span>
</button>
</td>
</tr>
<!-- Row 2: Operator -->
<tr class="group hover:bg-surface-dark transition-colors">
<td class="px-6 py-4">
<div class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full bg-green-500/10 text-green-500 text-xs font-bold border border-green-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
Active
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center text-slate-300 text-xs font-bold" data-alt="Avatar placeholder">JD</div>
<span class="text-white font-medium">jdoe</span>
</div>
</td>
<td class="px-6 py-4 text-slate-300 text-sm">John Doe</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 text-xs font-medium px-2.5 py-1 rounded-md bg-blue-500/10 text-blue-400 border border-blue-500/20">
<span class="material-symbols-outlined text-[14px]">engineering</span>
Operator
</span>
</td>
<td class="px-6 py-4 text-slate-400 text-sm">operators, backup</td>
<td class="px-6 py-4 text-slate-400 text-sm">2 days ago</td>
<td class="px-6 py-4 text-right">
<button class="p-2 text-slate-400 hover:text-white hover:bg-border-dark rounded-lg transition-colors">
<span class="material-symbols-outlined text-[20px]">more_vert</span>
</button>
</td>
</tr>
<!-- Row 3: Service Account (Locked) -->
<tr class="group hover:bg-surface-dark transition-colors">
<td class="px-6 py-4">
<div class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full bg-red-500/10 text-red-500 text-xs font-bold border border-red-500/20">
<span class="material-symbols-outlined text-[14px]">lock</span>
Locked
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center text-slate-300 text-xs font-bold" data-alt="Avatar placeholder">BS</div>
<span class="text-white font-medium">backup_svc</span>
</div>
</td>
<td class="px-6 py-4 text-slate-300 text-sm">Backup Service Account</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 text-xs font-medium px-2.5 py-1 rounded-md bg-slate-700 text-slate-300 border border-slate-600">
<span class="material-symbols-outlined text-[14px]">smart_toy</span>
Service
</span>
</td>
<td class="px-6 py-4 text-slate-400 text-sm">services</td>
<td class="px-6 py-4 text-slate-400 text-sm">Never</td>
<td class="px-6 py-4 text-right">
<button class="p-2 text-slate-400 hover:text-white hover:bg-border-dark rounded-lg transition-colors">
<span class="material-symbols-outlined text-[20px]">more_vert</span>
</button>
</td>
</tr>
<!-- Row 4: Auditor -->
<tr class="group hover:bg-surface-dark transition-colors">
<td class="px-6 py-4">
<div class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full bg-green-500/10 text-green-500 text-xs font-bold border border-green-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
Active
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center text-slate-300 text-xs font-bold" data-alt="Avatar placeholder">AS</div>
<span class="text-white font-medium">asmith</span>
</div>
</td>
<td class="px-6 py-4 text-slate-300 text-sm">Alice Smith</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 text-xs font-medium px-2.5 py-1 rounded-md bg-yellow-500/10 text-yellow-500 border border-yellow-500/20">
<span class="material-symbols-outlined text-[14px]">visibility</span>
Auditor
</span>
</td>
<td class="px-6 py-4 text-slate-400 text-sm">auditors</td>
<td class="px-6 py-4 text-slate-400 text-sm">1 week ago</td>
<td class="px-6 py-4 text-right">
<button class="p-2 text-slate-400 hover:text-white hover:bg-border-dark rounded-lg transition-colors">
<span class="material-symbols-outlined text-[20px]">more_vert</span>
</button>
</td>
</tr>
<!-- Row 5: Storage Admin -->
<tr class="group hover:bg-surface-dark transition-colors">
<td class="px-6 py-4">
<div class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full bg-green-500/10 text-green-500 text-xs font-bold border border-green-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
Active
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center text-slate-300 text-xs font-bold" data-alt="Avatar placeholder">RR</div>
<span class="text-white font-medium">rroe</span>
</div>
</td>
<td class="px-6 py-4 text-slate-300 text-sm">Richard Roe</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 text-xs font-medium px-2.5 py-1 rounded-md bg-teal-500/10 text-teal-500 border border-teal-500/20">
<span class="material-symbols-outlined text-[14px]">storage</span>
Storage Admin
</span>
</td>
<td class="px-6 py-4 text-slate-400 text-sm">storage_admins</td>
<td class="px-6 py-4 text-slate-400 text-sm">5 hours ago</td>
<td class="px-6 py-4 text-right">
<button class="p-2 text-slate-400 hover:text-white hover:bg-border-dark rounded-lg transition-colors">
<span class="material-symbols-outlined text-[20px]">more_vert</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="px-6 py-4 border-t border-border-dark flex items-center justify-between bg-surface-dark">
<span class="text-sm text-slate-400">Showing <span class="font-bold text-white">1-5</span> of <span class="font-bold text-white">24</span> users</span>
<div class="flex gap-2">
<button class="p-2 rounded-lg text-slate-400 hover:bg-border-dark hover:text-white disabled:opacity-50 disabled:cursor-not-allowed">
<span class="material-symbols-outlined text-[20px]">chevron_left</span>
</button>
<button class="p-2 rounded-lg text-slate-400 hover:bg-border-dark hover:text-white">
<span class="material-symbols-outlined text-[20px]">chevron_right</span>
</button>
</div>
</div>
</div>
</div>
<!-- Info Cards (Simulating Dashboard widgets) -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-2">
<!-- Directory Status -->
<div class="bg-surface-darker p-5 rounded-xl border border-border-dark flex flex-col gap-4">
<div class="flex justify-between items-start">
<div class="flex items-center gap-3">
<div class="p-2 bg-slate-800 rounded-lg text-slate-300">
<span class="material-symbols-outlined">domain</span>
</div>
<h3 class="text-white font-bold">Directory Service</h3>
</div>
<span class="px-2 py-1 rounded text-xs font-bold bg-slate-800 text-slate-400 border border-slate-700">Inactive</span>
</div>
<p class="text-sm text-slate-400">No LDAP or Active Directory server is currently connected. Local authentication is being used.</p>
<div class="mt-auto pt-2">
<a class="text-primary text-sm font-bold hover:underline flex items-center gap-1" href="#">
Configure Directory
<span class="material-symbols-outlined text-[16px]">arrow_forward</span>
</a>
</div>
</div>
<!-- MFA Status -->
<div class="bg-surface-darker p-5 rounded-xl border border-border-dark flex flex-col gap-4">
<div class="flex justify-between items-start">
<div class="flex items-center gap-3">
<div class="p-2 bg-orange-500/10 rounded-lg text-orange-500">
<span class="material-symbols-outlined">shield</span>
</div>
<h3 class="text-white font-bold">Security Policy</h3>
</div>
<span class="px-2 py-1 rounded text-xs font-bold bg-green-500/10 text-green-500 border border-green-500/20">Good</span>
</div>
<div class="flex flex-col gap-2">
<div class="flex justify-between items-center text-sm">
<span class="text-slate-400">Multi-Factor Auth</span>
<span class="text-green-500 font-medium">Enforced</span>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-slate-400">Password Rotation</span>
<span class="text-white font-medium">90 Days</span>
</div>
</div>
<div class="mt-auto pt-2">
<a class="text-primary text-sm font-bold hover:underline flex items-center gap-1" href="#">
Manage Policies
<span class="material-symbols-outlined text-[16px]">arrow_forward</span>
</a>
</div>
</div>
</div>
</div>
</div>
</main>
</body></html>
Reference in New Issue View Git Blame Copy Permalink