From e69e5663ce4739af5f5d59a9ef3f85b986bee7be Mon Sep 17 00:00:00 2001 From: Josh-Heaps Date: Mon, 9 Feb 2026 14:38:58 -0700 Subject: [PATCH] Add fleshed out admin page --- Media.JoshHeaps.Net/Api/AdminApi.cs | 184 +++++++++ .../Database/012_user_roles.sql | 16 +- Media.JoshHeaps.Net/Pages/Admin.cshtml | 40 ++ .../Pages/AuthenticatedPageModel.cs | 2 +- Media.JoshHeaps.Net/Pages/Landing.cshtml | 28 ++ Media.JoshHeaps.Net/Pages/Landing.cshtml.cs | 15 +- Media.JoshHeaps.Net/wwwroot/css/admin.css | 355 ++++++++++++++++++ Media.JoshHeaps.Net/wwwroot/js/admin.js | 155 ++++++++ 8 files changed, 788 insertions(+), 7 deletions(-) create mode 100644 Media.JoshHeaps.Net/Api/AdminApi.cs create mode 100644 Media.JoshHeaps.Net/wwwroot/css/admin.css create mode 100644 Media.JoshHeaps.Net/wwwroot/js/admin.js diff --git a/Media.JoshHeaps.Net/Api/AdminApi.cs b/Media.JoshHeaps.Net/Api/AdminApi.cs new file mode 100644 index 0000000..a1701e3 --- /dev/null +++ b/Media.JoshHeaps.Net/Api/AdminApi.cs @@ -0,0 +1,184 @@ +using Microsoft.AspNetCore.Mvc; +using System.Security.Claims; + +namespace Media.JoshHeaps.Net.Api; + +[ApiController] +[Route("api/admin")] +public class AdminApi(DbExecutor dbExecutor) : ControllerBase +{ + [HttpGet("users")] + public async Task GetUsers([FromQuery] int page = 1, [FromQuery] int pageSize = 20) + { + var authUserId = GetUserIdFromAuth(); + if (authUserId == null) return Unauthorized(); + + if (!await IsAdmin(authUserId.Value)) return Forbid(); + + if (page < 1) page = 1; + if (pageSize < 1 || pageSize > 100) pageSize = 20; + var offset = (page - 1) * pageSize; + + var totalCount = await dbExecutor.ExecuteAsync( + "SELECT COUNT(*) FROM app.users"); + + var users = await dbExecutor.ExecuteListReaderAsync( + @"SELECT u.id, u.username, u.email, u.is_active + FROM app.users u + ORDER BY u.id + LIMIT @PageSize OFFSET @Offset", + reader => new + { + Id = reader.GetInt64(0), + Username = reader.GetString(1), + Email = reader.GetString(2), + IsActive = reader.GetBoolean(3) + }, + new { PageSize = pageSize, Offset = offset }); + + // Fetch all roles for these users in one query using a subquery + var userRoles = users.Count > 0 + ? await dbExecutor.ExecuteListReaderAsync( + @"SELECT ur.user_id, r.id, r.name + FROM app.user_roles ur + JOIN app.roles r ON ur.role_id = r.id + WHERE ur.user_id IN ( + SELECT u.id FROM app.users u ORDER BY u.id LIMIT @PageSize OFFSET @Offset + )", + reader => new + { + UserId = reader.GetInt64(0), + RoleId = reader.GetInt64(1), + RoleName = reader.GetString(2) + }, + new { PageSize = pageSize, Offset = offset }) + : []; + + var result = users.Select(u => new + { + u.Id, + u.Username, + u.Email, + u.IsActive, + Roles = userRoles.Where(r => r.UserId == u.Id) + .Select(r => new { Id = r.RoleId, Name = r.RoleName }) + .ToList() + }); + + return Ok(new { users = result, totalCount }); + } + + [HttpGet("roles")] + public async Task GetRoles() + { + var userId = GetUserIdFromAuth(); + if (userId == null) return Unauthorized(); + + if (!await IsAdmin(userId.Value)) return Forbid(); + + var roles = await dbExecutor.ExecuteListReaderAsync( + "SELECT id, name FROM app.roles ORDER BY id", + reader => new { Id = reader.GetInt64(0), Name = reader.GetString(1) }); + + return Ok(roles); + } + + [HttpPost("roles")] + public async Task CreateRole([FromBody] CreateRoleRequest request) + { + var userId = GetUserIdFromAuth(); + if (userId == null) return Unauthorized(); + + if (!await IsAdmin(userId.Value)) return Forbid(); + + if (string.IsNullOrWhiteSpace(request.Name)) + return BadRequest(new { error = "Role name is required" }); + + var name = request.Name.Trim().ToLowerInvariant(); + + var existing = await dbExecutor.ExecuteAsync( + "SELECT EXISTS(SELECT 1 FROM app.roles WHERE name = @Name)", + new { Name = name }); + + if (existing) + return BadRequest(new { error = "Role already exists" }); + + var role = await dbExecutor.ExecuteReaderAsync( + "INSERT INTO app.roles (name) VALUES (@Name) RETURNING id, name", + reader => new { Id = reader.GetInt64(0), Name = reader.GetString(1) }, + new { Name = name }); + + return Ok(role); + } + + [HttpPost("users/{targetUserId}/roles/{roleId}")] + public async Task AssignRole(long targetUserId, long roleId) + { + var adminId = GetUserIdFromAuth(); + if (adminId == null) return Unauthorized(); + + if (!await IsAdmin(adminId.Value)) return Forbid(); + + var userExists = await dbExecutor.ExecuteAsync( + "SELECT EXISTS(SELECT 1 FROM app.users WHERE id = @UserId)", + new { UserId = targetUserId }); + if (!userExists) return NotFound(new { error = "User not found" }); + + var roleExists = await dbExecutor.ExecuteAsync( + "SELECT EXISTS(SELECT 1 FROM app.roles WHERE id = @RoleId)", + new { RoleId = roleId }); + if (!roleExists) return NotFound(new { error = "Role not found" }); + + var alreadyAssigned = await dbExecutor.ExecuteAsync( + "SELECT EXISTS(SELECT 1 FROM app.user_roles WHERE user_id = @UserId AND role_id = @RoleId)", + new { UserId = targetUserId, RoleId = roleId }); + if (alreadyAssigned) return Ok(new { success = true }); + + await dbExecutor.ExecuteNonQueryAsync( + "INSERT INTO app.user_roles (user_id, role_id) VALUES (@UserId, @RoleId)", + new { UserId = targetUserId, RoleId = roleId }); + + return Ok(new { success = true }); + } + + [HttpDelete("users/{targetUserId}/roles/{roleId}")] + public async Task RemoveRole(long targetUserId, long roleId) + { + var adminId = GetUserIdFromAuth(); + if (adminId == null) return Unauthorized(); + + if (!await IsAdmin(adminId.Value)) return Forbid(); + + await dbExecutor.ExecuteNonQueryAsync( + "DELETE FROM app.user_roles WHERE user_id = @UserId AND role_id = @RoleId", + new { UserId = targetUserId, RoleId = roleId }); + + return Ok(new { success = true }); + } + + private async Task IsAdmin(long userId) + { + return await dbExecutor.ExecuteAsync( + "SELECT EXISTS(SELECT 1 FROM app.user_roles ur JOIN app.roles r ON ur.role_id = r.id WHERE ur.user_id = @UserId AND r.name = 'admin')", + new { UserId = userId }); + } + + private long? GetUserIdFromAuth() + { + var userIdClaim = User.FindFirst(ClaimTypes.NameIdentifier)?.Value; + if (!string.IsNullOrEmpty(userIdClaim) && long.TryParse(userIdClaim, out var jwtUserId)) + { + return jwtUserId; + } + + var userIdString = HttpContext.Session.GetString("UserId"); + if (!string.IsNullOrEmpty(userIdString) && long.TryParse(userIdString, out var sessionUserId)) + { + return sessionUserId; + } + + return null; + } +} + +public record CreateRoleRequest(string Name); diff --git a/Media.JoshHeaps.Net/Database/012_user_roles.sql b/Media.JoshHeaps.Net/Database/012_user_roles.sql index 127b589..23892e2 100644 --- a/Media.JoshHeaps.Net/Database/012_user_roles.sql +++ b/Media.JoshHeaps.Net/Database/012_user_roles.sql @@ -1,10 +1,20 @@ --- User roles table for role-based access control +-- Roles table for role-based access control +CREATE TABLE IF NOT EXISTS app.roles ( + id BIGSERIAL PRIMARY KEY, + name VARCHAR(50) UNIQUE NOT NULL, + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP +); + +-- Seed the admin role +INSERT INTO app.roles (name) VALUES ('admin') ON CONFLICT (name) DO NOTHING; + +-- User roles junction table CREATE TABLE IF NOT EXISTS app.user_roles ( id BIGSERIAL PRIMARY KEY, user_id BIGINT NOT NULL REFERENCES app.users(id), - role VARCHAR(50) NOT NULL, + role_id BIGINT NOT NULL REFERENCES app.roles(id), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, - CONSTRAINT uq_user_role UNIQUE (user_id, role) + CONSTRAINT uq_user_role UNIQUE (user_id, role_id) ); CREATE INDEX IF NOT EXISTS idx_user_roles_user_id ON app.user_roles(user_id); diff --git a/Media.JoshHeaps.Net/Pages/Admin.cshtml b/Media.JoshHeaps.Net/Pages/Admin.cshtml index 842cfcb..48ecbde 100644 --- a/Media.JoshHeaps.Net/Pages/Admin.cshtml +++ b/Media.JoshHeaps.Net/Pages/Admin.cshtml @@ -5,6 +5,10 @@ Layout = "_Layout"; } +@section Styles { + +} +
@@ -21,4 +25,40 @@ Logout
+ +
+
+

Roles

+
+
+
+ + +
+
+ +
+
+

Users

+
+
+ + + + + + + + + + + +
IDUsernameRolesActions
+
+ +
+ +@section Scripts { + +} diff --git a/Media.JoshHeaps.Net/Pages/AuthenticatedPageModel.cs b/Media.JoshHeaps.Net/Pages/AuthenticatedPageModel.cs index b2fa5a7..c559bf8 100644 --- a/Media.JoshHeaps.Net/Pages/AuthenticatedPageModel.cs +++ b/Media.JoshHeaps.Net/Pages/AuthenticatedPageModel.cs @@ -8,7 +8,7 @@ public abstract class AuthenticatedPageModel : PageModel protected async Task RequireRole(string role, DbExecutor dbExecutor) { var hasRole = await dbExecutor.ExecuteAsync( - "SELECT EXISTS(SELECT 1 FROM app.user_roles WHERE user_id = @UserId AND role = @Role)", + "SELECT EXISTS(SELECT 1 FROM app.user_roles ur JOIN app.roles r ON ur.role_id = r.id WHERE ur.user_id = @UserId AND r.name = @Role)", new { UserId, Role = role }); return hasRole ? null : NotFound(); diff --git a/Media.JoshHeaps.Net/Pages/Landing.cshtml b/Media.JoshHeaps.Net/Pages/Landing.cshtml index d599859..8f23e87 100644 --- a/Media.JoshHeaps.Net/Pages/Landing.cshtml +++ b/Media.JoshHeaps.Net/Pages/Landing.cshtml @@ -92,6 +92,34 @@ + + @if (Model.IsAdmin) + { + +
+
+
+ + + +
+
+
+

Admin

+

Site administration and management tools

+
+
+
+ Open workspace +
+ + + + +
+
+ + }
diff --git a/Media.JoshHeaps.Net/Pages/Landing.cshtml.cs b/Media.JoshHeaps.Net/Pages/Landing.cshtml.cs index 5b91072..7c6ae0b 100644 --- a/Media.JoshHeaps.Net/Pages/Landing.cshtml.cs +++ b/Media.JoshHeaps.Net/Pages/Landing.cshtml.cs @@ -1,12 +1,21 @@ -using Microsoft.AspNetCore.Mvc.RazorPages; +using Microsoft.AspNetCore.Mvc; namespace Media.JoshHeaps.Net.Pages { - public class LandingModel : AuthenticatedPageModel + public class LandingModel(DbExecutor dbExecutor) : AuthenticatedPageModel { - public void OnGet() + public bool IsAdmin { get; set; } + + public async Task OnGetAsync() { RequireAuthentication(); + LoadUserSession(); + + IsAdmin = await dbExecutor.ExecuteAsync( + "SELECT EXISTS(SELECT 1 FROM app.user_roles ur JOIN app.roles r ON ur.role_id = r.id WHERE ur.user_id = @UserId AND r.name = 'admin')", + new { UserId }); + + return Page(); } } } diff --git a/Media.JoshHeaps.Net/wwwroot/css/admin.css b/Media.JoshHeaps.Net/wwwroot/css/admin.css new file mode 100644 index 0000000..95f904e --- /dev/null +++ b/Media.JoshHeaps.Net/wwwroot/css/admin.css @@ -0,0 +1,355 @@ +.dashboard-container { + max-width: 1200px; + margin: 0 auto; + padding: 40px 20px; +} + +.welcome-section { + background: var(--bg-tertiary); + border: 1px solid var(--border-primary); + color: var(--text-primary); + padding: 32px 40px; + border-radius: 8px; + margin-bottom: 32px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.welcome-left { + display: flex; + align-items: center; + gap: 16px; +} + +.back-button { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: 8px; + color: var(--text-secondary); + text-decoration: none; + transition: all 0.2s ease; + flex-shrink: 0; +} + +.back-button:hover { + background: var(--bg-hover); + border-color: var(--accent-primary); + color: var(--accent-primary); + transform: translateX(-2px); +} + +.back-button svg { + width: 20px; + height: 20px; +} + +.welcome-section h1 { + margin: 0; + font-size: 28px; + font-weight: 600; + letter-spacing: -0.5px; +} + +.quick-actions { + display: flex; + gap: 12px; +} + +.btn { + padding: 10px 20px; + border-radius: 6px; + font-size: 14px; + font-weight: 500; + text-decoration: none; + cursor: pointer; + border: 1px solid transparent; + transition: all 0.2s ease; +} + +.btn-primary { + background: var(--accent-primary); + color: #fff; + border-color: var(--accent-primary); +} + +.btn-primary:hover { + background: var(--accent-hover); + border-color: var(--accent-hover); +} + +.btn-secondary { + background: var(--bg-secondary); + color: var(--text-primary); + border-color: var(--border-primary); +} + +.btn-secondary:hover { + background: var(--bg-hover); + border-color: var(--accent-primary); +} + +.btn-danger { + background: var(--danger); + color: #fff; + border-color: var(--danger); +} + +.btn-danger:hover { + background: var(--danger-hover); + border-color: var(--danger-hover); +} + +/* Admin sections */ +.admin-section { + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: 8px; + padding: 24px; + margin-bottom: 24px; +} + +.section-header { + margin-bottom: 16px; +} + +.section-header h2 { + margin: 0; + font-size: 20px; + font-weight: 600; + color: var(--text-primary); +} + +/* Roles list */ +.roles-list { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-bottom: 16px; +} + +.role-pill { + display: inline-flex; + align-items: center; + padding: 6px 12px; + background: var(--bg-tertiary); + border: 1px solid var(--border-primary); + border-radius: 20px; + font-size: 13px; + color: var(--text-primary); +} + +/* Create role form */ +.create-role-form { + display: flex; + gap: 8px; + align-items: center; +} + +.form-input { + padding: 8px 12px; + background: var(--bg-primary); + border: 1px solid var(--border-primary); + border-radius: 6px; + color: var(--text-primary); + font-size: 14px; + outline: none; + transition: border-color 0.2s ease; +} + +.form-input:focus { + border-color: var(--accent-primary); +} + +/* Users table */ +.table-container { + overflow-x: auto; +} + +.admin-table { + width: 100%; + border-collapse: collapse; +} + +.admin-table th, +.admin-table td { + padding: 12px 16px; + text-align: left; + border-bottom: 1px solid var(--border-secondary); +} + +.admin-table th { + font-size: 12px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + color: var(--text-secondary); + background: var(--bg-tertiary); +} + +.admin-table td { + font-size: 14px; + color: var(--text-primary); +} + +.admin-table tbody tr:hover { + background: var(--bg-hover); +} + +/* Role badges in table */ +.role-badges { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.role-badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 3px 10px; + background: var(--accent-primary); + color: #fff; + border-radius: 12px; + font-size: 12px; + font-weight: 500; +} + +.role-badge .remove-role { + display: inline-flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + border: none; + background: rgba(255, 255, 255, 0.2); + color: #fff; + border-radius: 50%; + font-size: 11px; + cursor: pointer; + line-height: 1; + padding: 0; + transition: background 0.2s ease; +} + +.role-badge .remove-role:hover { + background: rgba(255, 255, 255, 0.4); +} + +/* Add role dropdown */ +.add-role-wrapper { + position: relative; + display: inline-block; +} + +.add-role-btn { + padding: 4px 10px; + background: var(--bg-tertiary); + border: 1px solid var(--border-primary); + border-radius: 6px; + color: var(--text-secondary); + font-size: 12px; + cursor: pointer; + transition: all 0.2s ease; +} + +.add-role-btn:hover { + border-color: var(--accent-primary); + color: var(--accent-primary); +} + +.add-role-dropdown { + position: absolute; + top: 100%; + left: 0; + margin-top: 4px; + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: 6px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + z-index: 10; + min-width: 140px; + display: none; +} + +.add-role-dropdown.open { + display: block; +} + +.add-role-dropdown button { + display: block; + width: 100%; + padding: 8px 12px; + background: none; + border: none; + color: var(--text-primary); + font-size: 13px; + text-align: left; + cursor: pointer; + transition: background 0.15s ease; +} + +.add-role-dropdown button:hover { + background: var(--bg-hover); +} + +/* Pagination */ +.pagination { + display: flex; + justify-content: center; + align-items: center; + gap: 12px; + margin-top: 20px; + padding-top: 16px; +} + +.pagination button { + padding: 8px 16px; + background: var(--bg-tertiary); + border: 1px solid var(--border-primary); + border-radius: 6px; + color: var(--text-primary); + font-size: 13px; + cursor: pointer; + transition: all 0.2s ease; +} + +.pagination button:hover:not(:disabled) { + border-color: var(--accent-primary); + color: var(--accent-primary); +} + +.pagination button:disabled { + opacity: 0.4; + cursor: default; +} + +.pagination .page-info { + font-size: 13px; + color: var(--text-secondary); +} + +/* Responsive */ +@media (max-width: 768px) { + .welcome-section { + flex-direction: column; + gap: 16px; + padding: 20px; + align-items: flex-start; + } + + .admin-table th, + .admin-table td { + padding: 8px 10px; + } + + .create-role-form { + flex-direction: column; + align-items: stretch; + } +} diff --git a/Media.JoshHeaps.Net/wwwroot/js/admin.js b/Media.JoshHeaps.Net/wwwroot/js/admin.js new file mode 100644 index 0000000..74e09aa --- /dev/null +++ b/Media.JoshHeaps.Net/wwwroot/js/admin.js @@ -0,0 +1,155 @@ +(function () { + let allRoles = []; + let currentPage = 1; + const pageSize = 20; + + document.addEventListener('DOMContentLoaded', init); + + async function init() { + await loadRoles(); + await loadUsers(1); + + document.getElementById('createRoleBtn').addEventListener('click', createRole); + document.getElementById('newRoleName').addEventListener('keydown', (e) => { + if (e.key === 'Enter') createRole(); + }); + + document.addEventListener('click', (e) => { + if (!e.target.closest('.add-role-wrapper')) { + document.querySelectorAll('.add-role-dropdown.open').forEach(d => d.classList.remove('open')); + } + }); + } + + async function loadRoles() { + const res = await fetch('/api/admin/roles'); + if (!res.ok) return; + allRoles = await res.json(); + renderRolesList(); + } + + function renderRolesList() { + const container = document.getElementById('rolesList'); + container.innerHTML = allRoles.map(r => + `${escapeHtml(r.name)}` + ).join(''); + } + + async function createRole() { + const input = document.getElementById('newRoleName'); + const name = input.value.trim(); + if (!name) return; + + const res = await fetch('/api/admin/roles', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ name }) + }); + + if (!res.ok) { + const err = await res.json(); + alert(err.error || 'Failed to create role'); + return; + } + + input.value = ''; + await loadRoles(); + await loadUsers(currentPage); + } + + async function loadUsers(page) { + currentPage = page; + const res = await fetch(`/api/admin/users?page=${page}&pageSize=${pageSize}`); + if (!res.ok) return; + + const data = await res.json(); + renderUsersTable(data.users); + renderPagination(data.totalCount); + } + + function renderUsersTable(users) { + const tbody = document.getElementById('usersTableBody'); + tbody.innerHTML = users.map(user => { + const roleBadges = user.roles.map(r => + ` + ${escapeHtml(r.name)} + + ` + ).join(''); + + const availableRoles = allRoles.filter(r => !user.roles.some(ur => ur.id === r.id)); + const addDropdown = availableRoles.length > 0 + ? `
+ +
+ ${availableRoles.map(r => + `` + ).join('')} +
+
` + : ''; + + return ` + ${user.id} + ${escapeHtml(user.username)} +
${roleBadges}
+ ${addDropdown} + `; + }).join(''); + } + + function renderPagination(totalCount) { + const totalPages = Math.ceil(totalCount / pageSize); + const container = document.getElementById('pagination'); + + if (totalPages <= 1) { + container.innerHTML = ''; + return; + } + + container.innerHTML = ` + + Page ${currentPage} of ${totalPages} + + `; + } + + function escapeHtml(str) { + const div = document.createElement('div'); + div.textContent = str; + return div.innerHTML; + } + + // Global functions for inline event handlers + window.adminAddRole = async function (userId, roleId) { + const res = await fetch(`/api/admin/users/${userId}/roles/${roleId}`, { method: 'POST' }); + if (!res.ok) { + const err = await res.json(); + alert(err.error || 'Failed to add role'); + return; + } + await loadUsers(currentPage); + }; + + window.adminRemoveRole = async function (userId, roleId) { + const res = await fetch(`/api/admin/users/${userId}/roles/${roleId}`, { method: 'DELETE' }); + if (!res.ok) { + const err = await res.json(); + alert(err.error || 'Failed to remove role'); + return; + } + await loadUsers(currentPage); + }; + + window.toggleRoleDropdown = function (btn) { + const dropdown = btn.nextElementSibling; + document.querySelectorAll('.add-role-dropdown.open').forEach(d => { + if (d !== dropdown) d.classList.remove('open'); + }); + dropdown.classList.toggle('open'); + }; + + window.adminGoToPage = function (page) { + loadUsers(page); + }; +})();