generated from nhcarrigan/template
489 lines
13 KiB
TypeScript
489 lines
13 KiB
TypeScript
import { Component, OnInit, inject, signal } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { AuditLogService } from '../../services/audit.service';
|
|
import { AuthService } from '../../services/auth.service';
|
|
import { Router } from '@angular/router';
|
|
import type { AuditLog, AuditAction, AuditCategory } from '@library/shared-types';
|
|
|
|
@Component({
|
|
selector: 'app-admin-audit',
|
|
standalone: true,
|
|
imports: [CommonModule, FormsModule],
|
|
template: `
|
|
<div class="audit-container">
|
|
<h1>Audit Logs</h1>
|
|
|
|
@if (!authService.isAuthenticated() || !authService.user()?.isAdmin) {
|
|
<div class="unauthorized">
|
|
<p>You must be an admin to view this page.</p>
|
|
</div>
|
|
} @else {
|
|
<div class="filters">
|
|
<div class="filter-group">
|
|
<label for="category-filter">Category:</label>
|
|
<select
|
|
id="category-filter"
|
|
[(ngModel)]="selectedCategory"
|
|
(change)="loadLogs()"
|
|
>
|
|
<option value="">All Categories</option>
|
|
<option value="AUTH">Authentication</option>
|
|
<option value="CONTENT">Content</option>
|
|
<option value="ADMIN">Administration</option>
|
|
<option value="SECURITY">Security</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label for="action-filter">Action:</label>
|
|
<select
|
|
id="action-filter"
|
|
[(ngModel)]="selectedAction"
|
|
(change)="loadLogs()"
|
|
>
|
|
<option value="">All Actions</option>
|
|
<option value="LOGIN">Login</option>
|
|
<option value="LOGOUT">Logout</option>
|
|
<option value="LOGIN_FAILED">Login Failed</option>
|
|
<option value="COMMENT_CREATE">Comment Created</option>
|
|
<option value="COMMENT_DELETE">Comment Deleted</option>
|
|
<option value="ENTRY_CREATE">Entry Created</option>
|
|
<option value="ENTRY_UPDATE">Entry Updated</option>
|
|
<option value="ENTRY_DELETE">Entry Deleted</option>
|
|
<option value="USER_BAN">User Banned</option>
|
|
<option value="USER_UNBAN">User Unbanned</option>
|
|
<option value="RATE_LIMIT_EXCEEDED">Rate Limit Exceeded</option>
|
|
<option value="CSRF_VALIDATION_FAILED">CSRF Failed</option>
|
|
<option value="UNAUTHORIZED_ACCESS">Unauthorized Access</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label for="success-filter">Status:</label>
|
|
<select
|
|
id="success-filter"
|
|
[(ngModel)]="selectedSuccess"
|
|
(change)="loadLogs()"
|
|
>
|
|
<option value="">All</option>
|
|
<option value="true">Success</option>
|
|
<option value="false">Failed</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button class="refresh-btn" (click)="loadLogs()">Refresh</button>
|
|
</div>
|
|
|
|
@if (loading()) {
|
|
<div class="loading">Loading audit logs...</div>
|
|
} @else if (logs().length === 0) {
|
|
<div class="no-logs">No audit logs found.</div>
|
|
} @else {
|
|
<div class="logs-table-container">
|
|
<table class="logs-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Time</th>
|
|
<th>User</th>
|
|
<th>Category</th>
|
|
<th>Action</th>
|
|
<th>Target User</th>
|
|
<th>Details</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@for (log of logs(); track log.id) {
|
|
<tr [class.failed]="!log.success">
|
|
<td class="time">{{ formatDate(log.createdAt) }}</td>
|
|
<td class="user-cell">
|
|
@if (log.user) {
|
|
<div class="user-info">
|
|
@if (log.user.avatar) {
|
|
<img [src]="log.user.avatar" [alt]="log.user.username" class="user-avatar" />
|
|
}
|
|
<div class="user-details">
|
|
<span class="username">{{ log.user.username }}</span>
|
|
<span class="user-id">{{ log.userId }}</span>
|
|
</div>
|
|
</div>
|
|
} @else if (log.userId) {
|
|
<span class="user-id-only">{{ log.userId }}</span>
|
|
} @else {
|
|
<span class="no-user">-</span>
|
|
}
|
|
</td>
|
|
<td>
|
|
<span
|
|
class="category-badge"
|
|
[style.background-color]="auditService.getCategoryColor(log.category)"
|
|
>
|
|
{{ auditService.getCategoryLabel(log.category) }}
|
|
</span>
|
|
</td>
|
|
<td>{{ auditService.getActionLabel(log.action) }}</td>
|
|
<td class="user-cell">
|
|
@if (log.targetUser) {
|
|
<div class="user-info">
|
|
@if (log.targetUser.avatar) {
|
|
<img [src]="log.targetUser.avatar" [alt]="log.targetUser.username" class="user-avatar" />
|
|
}
|
|
<div class="user-details">
|
|
<span class="username">{{ log.targetUser.username }}</span>
|
|
<span class="user-id">{{ log.targetUserId }}</span>
|
|
</div>
|
|
</div>
|
|
} @else if (log.targetUserId) {
|
|
<span class="user-id-only">{{ log.targetUserId }}</span>
|
|
} @else {
|
|
<span class="no-user">-</span>
|
|
}
|
|
</td>
|
|
<td class="details" [class.expanded]="expandedRows()[log.id]" (click)="toggleRowExpand(log.id)">
|
|
<span class="details-content">{{ log.details ?? '-' }}</span>
|
|
@if (log.details && log.details.length > 50) {
|
|
<span class="expand-hint">{{ expandedRows()[log.id] ? '(click to collapse)' : '(click to expand)' }}</span>
|
|
}
|
|
</td>
|
|
<td>
|
|
<span class="status-badge" [class.success]="log.success" [class.failed]="!log.success">
|
|
{{ log.success ? '✓' : '✗' }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="pagination">
|
|
<button
|
|
[disabled]="currentPage() <= 1"
|
|
(click)="goToPage(currentPage() - 1)"
|
|
>
|
|
Previous
|
|
</button>
|
|
<span>Page {{ currentPage() }} of {{ totalPages() }}</span>
|
|
<button
|
|
[disabled]="currentPage() >= totalPages()"
|
|
(click)="goToPage(currentPage() + 1)"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
}
|
|
}
|
|
</div>
|
|
`,
|
|
styles: [`
|
|
.audit-container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
h1 {
|
|
color: #2d1b4e;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.unauthorized {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
background: #fef2f2;
|
|
border-radius: 8px;
|
|
color: #991b1b;
|
|
}
|
|
|
|
.filters {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.filter-group label {
|
|
font-size: 0.85rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.filter-group select {
|
|
padding: 0.5rem;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 4px;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.refresh-btn {
|
|
padding: 0.5rem 1rem;
|
|
background: #8b5cf6;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.refresh-btn:hover {
|
|
background: #7c3aed;
|
|
}
|
|
|
|
.loading, .no-logs {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.logs-table-container {
|
|
overflow-x: auto;
|
|
background: white;
|
|
border-radius: 8px;
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.logs-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.logs-table th,
|
|
.logs-table td {
|
|
padding: 0.75rem 1rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.logs-table th {
|
|
background: #f9fafb;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
}
|
|
|
|
.logs-table tr:hover {
|
|
background: #f9fafb;
|
|
}
|
|
|
|
.logs-table tr.failed {
|
|
background: #fef2f2;
|
|
}
|
|
|
|
.logs-table tr.failed:hover {
|
|
background: #fee2e2;
|
|
}
|
|
|
|
.time {
|
|
white-space: nowrap;
|
|
font-size: 0.85rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.user-cell {
|
|
min-width: 150px;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.user-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.username {
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
color: #374151;
|
|
}
|
|
|
|
.user-id {
|
|
font-size: 0.7rem;
|
|
color: #9ca3af;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.user-id-only {
|
|
font-size: 0.75rem;
|
|
color: #6b7280;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.no-user {
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.category-badge {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
color: white;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.details {
|
|
max-width: 400px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.details .details-content {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.details.expanded .details-content {
|
|
white-space: normal;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.details .expand-hint {
|
|
display: block;
|
|
font-size: 0.7rem;
|
|
color: #9ca3af;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.details:hover {
|
|
background: #f3f4f6;
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 24px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.status-badge.success {
|
|
background: #dcfce7;
|
|
color: #16a34a;
|
|
}
|
|
|
|
.status-badge.failed {
|
|
background: #fee2e2;
|
|
color: #dc2626;
|
|
}
|
|
|
|
.pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-top: 1rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.pagination button {
|
|
padding: 0.5rem 1rem;
|
|
background: #8b5cf6;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pagination button:disabled {
|
|
background: #d1d5db;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.pagination button:not(:disabled):hover {
|
|
background: #7c3aed;
|
|
}
|
|
`],
|
|
})
|
|
export class AdminAuditComponent implements OnInit {
|
|
authService = inject(AuthService);
|
|
auditService = inject(AuditLogService);
|
|
private router = inject(Router);
|
|
|
|
logs = signal<AuditLog[]>([]);
|
|
loading = signal(true);
|
|
currentPage = signal(1);
|
|
totalPages = signal(1);
|
|
expandedRows = signal<Record<string, boolean>>({});
|
|
|
|
selectedCategory = '';
|
|
selectedAction = '';
|
|
selectedSuccess = '';
|
|
|
|
ngOnInit() {
|
|
if (!this.authService.isAuthenticated() || !this.authService.user()?.isAdmin) {
|
|
this.router.navigate(['/']);
|
|
return;
|
|
}
|
|
this.loadLogs();
|
|
}
|
|
|
|
async loadLogs() {
|
|
this.loading.set(true);
|
|
try {
|
|
const filters: Record<string, unknown> = {
|
|
page: this.currentPage(),
|
|
limit: 50,
|
|
};
|
|
|
|
if (this.selectedCategory) {
|
|
filters['category'] = this.selectedCategory as AuditCategory;
|
|
}
|
|
if (this.selectedAction) {
|
|
filters['action'] = this.selectedAction as AuditAction;
|
|
}
|
|
if (this.selectedSuccess !== '') {
|
|
filters['success'] = this.selectedSuccess === 'true';
|
|
}
|
|
|
|
const response = await this.auditService.getLogs(filters);
|
|
this.logs.set(response.logs);
|
|
this.totalPages.set(response.totalPages);
|
|
} catch (error) {
|
|
console.error('Failed to load audit logs:', error);
|
|
} finally {
|
|
this.loading.set(false);
|
|
}
|
|
}
|
|
|
|
goToPage(page: number) {
|
|
this.currentPage.set(page);
|
|
this.loadLogs();
|
|
}
|
|
|
|
formatDate(date: Date | string): string {
|
|
const d = new Date(date);
|
|
return d.toLocaleString();
|
|
}
|
|
|
|
toggleRowExpand(logId: string) {
|
|
this.expandedRows.set({
|
|
...this.expandedRows(),
|
|
[logId]: !this.expandedRows()[logId]
|
|
});
|
|
}
|
|
}
|