admin_audit_logs.templ

package templates

import (
	"fmt"
	"net/url"

	"github.com/go-authgate/authgate/internal/models"
)

templ AdminAuditLogs(props AuditLogsPageProps) {
	@Layout("Audit Logs", LayoutAdminNavbar, &props.NavbarProps) {
		<div class="main-content">
			<div class="card">
				@Breadcrumb([]BreadcrumbItem{
					{Label: "Admin", Href: "/admin/clients"},
					{Label: "Audit Logs", Href: ""},
				})
				<!-- Page Header -->
				<div class="audit-logs-header">
					<h1 class="audit-logs-title">
						<span class="audit-logs-title-icon">
							<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
						</span>
						<span>Audit Logs</span>
					</h1>
					if props.TotalItems > 0 {
						<div class="audit-logs-count">
							<span>Total Events:</span>
							<span class="audit-logs-count-number">{ fmt.Sprintf("%d", props.TotalItems) }</span>
						</div>
					}
				</div>
				<!-- Filters -->
				@SfToolbar() {
					<form method="GET" action="/admin/audit">
						<div class="sf-search-row">
							<div class="sf-search-field">
								<span class="search-icon">
									@SearchIcon()
								</span>
								<input
									type="text"
									name="search"
									class="search-input"
									placeholder="Search action, resource, username, full name..."
									value={ props.Search }
									data-debounce-search
								/>
							</div>
							<select name="page_size" class="page-size-select" onchange="this.form.submit()">
								<option value="20" selected?={ props.PageSize == 20 }>20 items</option>
								<option value="50" selected?={ props.PageSize == 50 }>50 items</option>
								<option value="100" selected?={ props.PageSize == 100 }>100 items</option>
							</select>
							<button type="submit" class="search-btn">Apply Filters</button>
							<a href="/admin/audit" class="clear-btn">Clear</a>
							<div class="sf-extra-buttons">
								<a href={ templ.URL("/admin/audit/export?" + props.QueryString) } class="audit-btn audit-btn-export">
									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
									<span>Export CSV</span>
								</a>
							</div>
						</div>
						<!-- Advanced Filters Toggle -->
						<div class="audit-filters-toggle-row">
							<button
								type="button"
								id="toggle-filters-btn"
								class="audit-filters-toggle-btn"
								onclick="toggleFilters()"
								aria-expanded="true"
								aria-controls="audit-advanced-filters"
							>
								<span class="toggle-filters-text">Hide Filters</span>
								<svg class="toggle-filters-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition:transform var(--transition-fast);transform:rotate(180deg);">
									<path d="M4 6l4 4 4-4"></path>
								</svg>
							</button>
						</div>
						<!-- Advanced Filters -->
						<div class="audit-advanced-filters" id="audit-advanced-filters">
							<div class="audit-filter-group">
								<label class="search-label">Event Type</label>
								<select name="event_type" class="audit-filter-select">
									<option value="">All Events</option>
									<option value="AUTHENTICATION_SUCCESS" selected?={ props.EventType == "AUTHENTICATION_SUCCESS" }>Auth Success</option>
									<option value="AUTHENTICATION_FAILURE" selected?={ props.EventType == "AUTHENTICATION_FAILURE" }>Auth Failure</option>
									<option value="OAUTH_AUTHENTICATION" selected?={ props.EventType == "OAUTH_AUTHENTICATION" }>OAuth Auth</option>
									<option value="LOGOUT" selected?={ props.EventType == "LOGOUT" }>Logout</option>
									<option value="ACCESS_TOKEN_ISSUED" selected?={ props.EventType == "ACCESS_TOKEN_ISSUED" }>Token Issued</option>
									<option value="TOKEN_REFRESHED" selected?={ props.EventType == "TOKEN_REFRESHED" }>Token Refreshed</option>
									<option value="TOKEN_REVOKED" selected?={ props.EventType == "TOKEN_REVOKED" }>Token Revoked</option>
									<option value="TOKEN_DISABLED" selected?={ props.EventType == "TOKEN_DISABLED" }>Token Disabled</option>
									<option value="TOKEN_ENABLED" selected?={ props.EventType == "TOKEN_ENABLED" }>Token Enabled</option>
									<option value="DEVICE_CODE_GENERATED" selected?={ props.EventType == "DEVICE_CODE_GENERATED" }>Device Code Generated</option>
									<option value="DEVICE_CODE_AUTHORIZED" selected?={ props.EventType == "DEVICE_CODE_AUTHORIZED" }>Device Code Authorized</option>
									<option value="CLIENT_CREATED" selected?={ props.EventType == "CLIENT_CREATED" }>Client Created</option>
									<option value="CLIENT_UPDATED" selected?={ props.EventType == "CLIENT_UPDATED" }>Client Updated</option>
									<option value="CLIENT_DELETED" selected?={ props.EventType == "CLIENT_DELETED" }>Client Deleted</option>
									<option value="CLIENT_SECRET_REGENERATED" selected?={ props.EventType == "CLIENT_SECRET_REGENERATED" }>Secret Regenerated</option>
									<option value="RATE_LIMIT_EXCEEDED" selected?={ props.EventType == "RATE_LIMIT_EXCEEDED" }>Rate Limit Exceeded</option>
								</select>
							</div>
							<div class="audit-filter-group">
								<label class="search-label">Severity</label>
								<select name="severity" class="audit-filter-select">
									<option value="">All</option>
									<option value="INFO" selected?={ props.Severity == "INFO" }>Info</option>
									<option value="WARNING" selected?={ props.Severity == "WARNING" }>Warning</option>
									<option value="ERROR" selected?={ props.Severity == "ERROR" }>Error</option>
									<option value="CRITICAL" selected?={ props.Severity == "CRITICAL" }>Critical</option>
								</select>
							</div>
							<div class="audit-filter-group">
								<label class="search-label">Status</label>
								<select name="success" class="audit-filter-select">
									<option value="">All</option>
									<option value="true" selected?={ props.Success == "true" }>Success</option>
									<option value="false" selected?={ props.Success == "false" }>Failed</option>
								</select>
							</div>
							<div class="audit-filter-group">
								<label class="search-label">Actor IP</label>
								<input type="text" name="actor_ip" class="audit-filter-input" placeholder="e.g., 192.168.1.1" value={ props.ActorIP }/>
							</div>
						</div>
					</form>
				}
				<!-- Table -->
				if len(props.Logs) > 0 {
					<div class="audit-table-wrapper">
						<table class="audit-logs-table">
							<thead>
								<tr>
									<th>Time</th>
									<th>Event Type</th>
									<th>Severity</th>
									<th>Actor</th>
									<th>Action</th>
									<th>Resource</th>
									<th>IP Address</th>
									<th style="text-align: center;">Status</th>
								</tr>
							</thead>
							<tbody>
								for _, log := range props.Logs {
									@AuditLogRow(log)
								}
							</tbody>
						</table>
					</div>
					<!-- Pagination -->
					if props.TotalPages > 0 {
						@AuditLogsPagination(props)
					}
				} else {
					<!-- Empty State -->
					<div class="empty-state">
						if props.Search != "" {
							@EmptyStateSearch()
						} else {
							@EmptyStateAudit()
						}
						<h3 class="empty-title">
							if props.Search != "" {
								No audit logs found
							} else {
								No Audit Logs Yet
							}
						</h3>
						<p class="empty-text">
							if props.Search != "" {
								Try adjusting your search terms or filters to find what you're looking for.
							} else {
								Audit logs will appear here as actions are performed in the system. Activities like authentication, token operations, and admin actions are logged automatically.
							}
						</p>
					</div>
				}
			</div>
		</div>
	}
}

// humanReadableEventType converts raw event type constants to friendly labels.
func humanReadableEventType(eventType models.EventType) string {
	switch eventType {
	case models.EventAuthenticationSuccess:
		return "Login Success"
	case models.EventAuthenticationFailure:
		return "Login Failure"
	case models.EventOAuthAuthentication:
		return "OAuth Login"
	case models.EventLogout:
		return "Logout"
	case models.EventAccessTokenIssued:
		return "Token Issued"
	case models.EventRefreshTokenIssued:
		return "Refresh Token Issued"
	case models.EventIDTokenIssued:
		return "ID Token Issued"
	case models.EventTokenRefreshed:
		return "Token Refreshed"
	case models.EventTokenRevoked:
		return "Token Revoked"
	case models.EventTokenDisabled:
		return "Token Disabled"
	case models.EventTokenEnabled:
		return "Token Enabled"
	case models.EventTokenIntrospected:
		return "Token Introspected"
	case models.EventDeviceCodeGenerated:
		return "Device Code Created"
	case models.EventDeviceCodeAuthorized:
		return "Device Authorized"
	case models.EventAuthorizationCodeGenerated:
		return "Auth Code Generated"
	case models.EventAuthorizationCodeExchanged:
		return "Auth Code Exchanged"
	case models.EventAuthorizationCodeDenied:
		return "Auth Code Denied"
	case models.EventClientCreated:
		return "Client Created"
	case models.EventClientUpdated:
		return "Client Updated"
	case models.EventClientDeleted:
		return "Client Deleted"
	case models.EventClientSecretRegenerated:
		return "Secret Regenerated"
	case models.EventClientRegistered:
		return "Client Registered"
	case models.EventClientApproved:
		return "Client Approved"
	case models.EventClientRejected:
		return "Client Rejected"
	case models.EventClientCredentialsTokenIssued:
		return "Client Credentials Issued"
	case models.EventRateLimitExceeded:
		return "Rate Limited"
	case models.EventSuspiciousActivity:
		return "Suspicious Activity"
	case models.EventUserAuthorizationGranted:
		return "Access Granted"
	case models.EventUserAuthorizationRevoked:
		return "Access Revoked"
	case models.EventClientTokensRevokedAll:
		return "All Tokens Revoked"
	case models.EventTypeAuditLogView:
		return "Audit Log Viewed"
	case models.EventTypeAuditLogExported:
		return "Audit Log Exported"
	default:
		return string(eventType)
	}
}

templ AuditLogRow(log *models.AuditLog) {
	<tr>
		<td class="audit-timestamp-cell" data-label="Time">
			<div class="audit-timestamp-date">{ log.EventTime.Format("2006-01-02") }</div>
			<div class="audit-timestamp-time">{ log.EventTime.Format("15:04:05") }</div>
			<div class="audit-timestamp-relative" data-timestamp={ log.EventTime.Format("2006-01-02T15:04:05Z07:00") }></div>
		</td>
		<td data-label="Event Type">
			<span class="audit-event-type" title={ log.EventType }>{ humanReadableEventType(log.EventType) }</span>
		</td>
		<td data-label="Severity">
			if log.Severity == "INFO" {
				<span class="audit-severity-badge severity-info">{ log.Severity }</span>
			} else if log.Severity == "WARNING" {
				<span class="audit-severity-badge severity-warning">{ log.Severity }</span>
			} else if log.Severity == "ERROR" {
				<span class="audit-severity-badge severity-error">{ log.Severity }</span>
			} else if log.Severity == "CRITICAL" {
				<span class="audit-severity-badge severity-critical">{ log.Severity }</span>
			}
		</td>
		<td data-label="Actor">
			if log.ActorUsername != "" {
				<span class="audit-actor">{ UserDisplay(log.ActorUsername, log.ActorFullName) }</span>
			} else {
				<span class="audit-actor-system">System</span>
			}
		</td>
		<td data-label="Action">
			<div class="audit-action">{ log.Action }</div>
			if log.ErrorMessage != "" {
				<div class="audit-error-message">
					{ log.ErrorMessage }
				</div>
			}
		</td>
		<td class="audit-resource" data-label="Resource">
			if log.ResourceName != "" {
				{ log.ResourceName }
			} else if log.ResourceID != "" {
				{ log.ResourceID }
			} else {
				<span class="audit-resource-empty">—</span>
			}
		</td>
		<td data-label="IP Address">
			<span class="audit-ip">{ log.ActorIP }</span>
		</td>
		<td style="text-align: center;" data-label="Status">
			if log.Success {
				<span class="audit-status-badge status-success">&#10003;</span>
			} else {
				<span class="audit-status-badge status-failed">&#10007;</span>
			}
		</td>
	</tr>
}

func buildAuditPaginationURL(page, pageSize int, search, eventType, severity, success, actorIP string) string {
	u := fmt.Sprintf("/admin/audit?page=%d&page_size=%d", page, pageSize)
	if search != "" {
		u += "&search=" + url.QueryEscape(search)
	}
	if eventType != "" {
		u += "&event_type=" + url.QueryEscape(eventType)
	}
	if severity != "" {
		u += "&severity=" + url.QueryEscape(severity)
	}
	if success != "" {
		u += "&success=" + url.QueryEscape(success)
	}
	if actorIP != "" {
		u += "&actor_ip=" + url.QueryEscape(actorIP)
	}
	return u
}

templ AuditLogsPagination(props AuditLogsPageProps) {
	<div class="pagination-container">
		<div class="pagination-info">
			<span>Showing page</span>
			<span class="pagination-info-total">{ fmt.Sprintf("%d", props.Page) }</span>
			<span>of</span>
			<span class="pagination-info-total">{ fmt.Sprintf("%d", props.TotalPages) }</span>
		</div>
		<div class="pagination-controls">
			if props.Page > 1 {
				<a
					href={ templ.URL(buildAuditPaginationURL(props.PrevPage, props.PageSize, props.Search, props.EventType, props.Severity, props.Success, props.ActorIP)) }
					class="pagination-button"
				>
					<span class="pagination-button-icon">&larr;</span>
					<span>Previous</span>
				</a>
			} else {
				<button class="pagination-button" disabled>
					<span class="pagination-button-icon">&larr;</span>
					<span>Previous</span>
				</button>
			}
			<span class="pagination-current">
				Page { fmt.Sprintf("%d", props.Page) } of { fmt.Sprintf("%d", props.TotalPages) }
			</span>
			if props.Page < props.TotalPages {
				<a
					href={ templ.URL(buildAuditPaginationURL(props.NextPage, props.PageSize, props.Search, props.EventType, props.Severity, props.Success, props.ActorIP)) }
					class="pagination-button"
				>
					<span>Next</span>
					<span class="pagination-button-icon">&rarr;</span>
				</a>
			} else {
				<button class="pagination-button" disabled>
					<span>Next</span>
					<span class="pagination-button-icon">&rarr;</span>
				</button>
			}
		</div>
	</div>
}