feat: security and auditing

apps/frontend/src/app/services/api.service.ts

@@ -4,50 +4,85 @@
  * @author Naomi Carrigan
  */
 
-import { Injectable } from '@angular/core';
+import { Injectable, signal, inject } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { Observable, switchMap, tap, of } from 'rxjs';
 import { environment } from '../../environments/environment';
 
+interface CsrfTokenResponse {
+  csrfToken: string;
+}
+
 @Injectable({
   providedIn: 'root'
 })
 export class ApiService {
+  private http = inject(HttpClient);
   private readonly apiUrl = environment.apiUrl;
-
-  constructor(private http: HttpClient) {}
+  private csrfToken = signal<string | null>(null);
 
   private getHeaders(): HttpHeaders {
-    // Auth token is sent as httpOnly cookie, no need to add manually
-    return new HttpHeaders({
+    const headers: Record<string, string> = {
       'Content-Type': 'application/json'
-    });
+    };
+
+    const token = this.csrfToken();
+    if (token) {
+      headers['X-CSRF-Token'] = token;
+    }
+
+    return new HttpHeaders(headers);
+  }
+
+  private ensureCsrfToken(): Observable<string> {
+    const existingToken = this.csrfToken();
+    if (existingToken) {
+      return of(existingToken);
+    }
+
+    return this.http.get<CsrfTokenResponse>(`${this.apiUrl}/auth/csrf-token`, {
+      withCredentials: true
+    }).pipe(
+      tap(response => this.csrfToken.set(response.csrfToken)),
+      switchMap(response => of(response.csrfToken))
+    );
   }
 
   get<T>(endpoint: string): Observable<T> {
     return this.http.get<T>(`${this.apiUrl}${endpoint}`, {
-      headers: this.getHeaders(),
-      withCredentials: true // Important for cookies
-    });
-  }
-
-  post<T>(endpoint: string, body: any): Observable<T> {
-    return this.http.post<T>(`${this.apiUrl}${endpoint}`, body, {
       headers: this.getHeaders(),
       withCredentials: true
     });
   }
 
-  put<T>(endpoint: string, body: any): Observable<T> {
-    return this.http.put<T>(`${this.apiUrl}${endpoint}`, body, {
-      headers: this.getHeaders(),
-      withCredentials: true
-    });
+  post<T>(endpoint: string, body: unknown): Observable<T> {
+    return this.ensureCsrfToken().pipe(
+      switchMap(() => this.http.post<T>(`${this.apiUrl}${endpoint}`, body, {
+        headers: this.getHeaders(),
+        withCredentials: true
+      }))
+    );
+  }
+
+  put<T>(endpoint: string, body: unknown): Observable<T> {
+    return this.ensureCsrfToken().pipe(
+      switchMap(() => this.http.put<T>(`${this.apiUrl}${endpoint}`, body, {
+        headers: this.getHeaders(),
+        withCredentials: true
+      }))
+    );
   }
 
   delete<T>(endpoint: string): Observable<T> {
-    return this.http.delete<T>(`${this.apiUrl}${endpoint}`, {
-      withCredentials: true
-    });
+    return this.ensureCsrfToken().pipe(
+      switchMap(() => this.http.delete<T>(`${this.apiUrl}${endpoint}`, {
+        headers: this.getHeaders(),
+        withCredentials: true
+      }))
+    );
   }
-}
+
+  clearCsrfToken(): void {
+    this.csrfToken.set(null);
+  }
+}

apps/frontend/src/app/services/audit.service.ts

@@ -0,0 +1,84 @@
+import { Injectable, inject } from '@angular/core';
+import { firstValueFrom } from 'rxjs';
+import { ApiService } from './api.service';
+import type { AuditLog, AuditLogFilters, AuditAction, AuditCategory } from '@library/shared-types';
+
+interface AuditLogResponse {
+  logs: AuditLog[];
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuditLogService {
+  private api = inject(ApiService);
+
+  async getLogs(filters: AuditLogFilters = {}): Promise<AuditLogResponse> {
+    const params = new URLSearchParams();
+
+    if (filters.action) params.set('action', filters.action);
+    if (filters.category) params.set('category', filters.category);
+    if (filters.userId) params.set('userId', filters.userId);
+    if (filters.success !== undefined) params.set('success', String(filters.success));
+    if (filters.startDate) params.set('startDate', filters.startDate.toISOString());
+    if (filters.endDate) params.set('endDate', filters.endDate.toISOString());
+    if (filters.page) params.set('page', String(filters.page));
+    if (filters.limit) params.set('limit', String(filters.limit));
+
+    const queryString = params.toString();
+    const url = queryString ? `/audit?${queryString}` : '/audit';
+
+    return firstValueFrom(this.api.get<AuditLogResponse>(url));
+  }
+
+  async getSecurityLogs(page = 1, limit = 50): Promise<AuditLogResponse> {
+    return firstValueFrom(this.api.get<AuditLogResponse>(`/audit/security?page=${page}&limit=${limit}`));
+  }
+
+  async getUserLogs(userId: string, page = 1, limit = 50): Promise<AuditLogResponse> {
+    return firstValueFrom(this.api.get<AuditLogResponse>(`/audit/user/${userId}?page=${page}&limit=${limit}`));
+  }
+
+  getActionLabel(action: AuditAction): string {
+    const labels: Record<string, string> = {
+      LOGIN: 'Login',
+      LOGOUT: 'Logout',
+      LOGIN_FAILED: 'Login Failed',
+      COMMENT_CREATE: 'Comment Created',
+      COMMENT_DELETE: 'Comment Deleted',
+      ENTRY_CREATE: 'Entry Created',
+      ENTRY_UPDATE: 'Entry Updated',
+      ENTRY_DELETE: 'Entry Deleted',
+      USER_BAN: 'User Banned',
+      USER_UNBAN: 'User Unbanned',
+      RATE_LIMIT_EXCEEDED: 'Rate Limit Exceeded',
+      CSRF_VALIDATION_FAILED: 'CSRF Validation Failed',
+      UNAUTHORIZED_ACCESS: 'Unauthorized Access',
+    };
+    return labels[action] ?? action;
+  }
+
+  getCategoryLabel(category: AuditCategory): string {
+    const labels: Record<string, string> = {
+      AUTH: 'Authentication',
+      CONTENT: 'Content',
+      ADMIN: 'Administration',
+      SECURITY: 'Security',
+    };
+    return labels[category] ?? category;
+  }
+
+  getCategoryColor(category: AuditCategory): string {
+    const colors: Record<string, string> = {
+      AUTH: '#3b82f6',      // blue
+      CONTENT: '#10b981',   // green
+      ADMIN: '#8b5cf6',     // purple
+      SECURITY: '#ef4444',  // red
+    };
+    return colors[category] ?? '#6b7280';
+  }
+}

apps/frontend/src/app/services/auth.service.ts

@@ -40,6 +40,7 @@ export class AuthService {
     return this.api.post<{ message: string }>('/auth/logout', {}).pipe(
       tap(() => {
         this.currentUser.set(null);
+        this.api.clearCsrfToken();
         this.router.navigate(['/']);
       })
     );

apps/frontend/src/app/services/sanitize.service.ts

@@ -0,0 +1,28 @@
+/**
+ * @copyright 2026 NHCarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+
+import { Injectable, SecurityContext, inject } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+/**
+ * Service for sanitizing HTML content on the frontend.
+ * Provides defence-in-depth XSS protection alongside backend sanitization.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class SanitizeService {
+  private sanitizer = inject(DomSanitizer);
+
+  /**
+   * Sanitizes HTML content for safe rendering.
+   * This provides a second layer of protection after backend sanitization.
+   */
+  sanitizeHtml(html: string): SafeHtml {
+    const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, html);
+    return this.sanitizer.bypassSecurityTrustHtml(sanitized ?? '');
+  }
+}

apps/frontend/src/app/services/user.service.ts

@@ -0,0 +1,29 @@
+/**
+ * @copyright 2026 NHCarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+
+import { Injectable, inject } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ApiService } from './api.service';
+import { User } from '@library/shared-types';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+  private api = inject(ApiService);
+
+  getAllUsers(): Observable<User[]> {
+    return this.api.get<User[]>('/users');
+  }
+
+  banUser(userId: string): Observable<User> {
+    return this.api.post<User>(`/users/${userId}/ban`, {});
+  }
+
+  unbanUser(userId: string): Observable<User> {
+    return this.api.post<User>(`/users/${userId}/unban`, {});
+  }
+}