chore: commit current workspace changes
This commit is contained in:
232
resources/js/Pages/Admin/AuthAudit.jsx
Normal file
232
resources/js/Pages/Admin/AuthAudit.jsx
Normal file
@@ -0,0 +1,232 @@
|
||||
import React from 'react'
|
||||
import { Head, router } from '@inertiajs/react'
|
||||
import AdminLayout from '../../Layouts/AdminLayout'
|
||||
|
||||
const EVENT_LABELS = {
|
||||
login: 'Login',
|
||||
register: 'Register',
|
||||
forgot_password: 'Forgot password',
|
||||
reset_password: 'Reset password',
|
||||
}
|
||||
|
||||
const STATUS_BADGES = {
|
||||
success: 'border-emerald-400/20 bg-emerald-400/10 text-emerald-200',
|
||||
failed: 'border-rose-400/20 bg-rose-400/10 text-rose-200',
|
||||
}
|
||||
|
||||
function formatTimestamp(value) {
|
||||
if (!value) {
|
||||
return 'Unknown'
|
||||
}
|
||||
|
||||
return new Intl.DateTimeFormat('en-GB', {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'medium',
|
||||
}).format(new Date(value))
|
||||
}
|
||||
|
||||
function formatLabel(value) {
|
||||
if (!value) {
|
||||
return 'Not recorded'
|
||||
}
|
||||
|
||||
return value
|
||||
.replaceAll('_', ' ')
|
||||
.replace(/\b\w/g, (match) => match.toUpperCase())
|
||||
}
|
||||
|
||||
function SummaryCard({ label, value, tone = 'slate' }) {
|
||||
const tones = {
|
||||
slate: 'border-white/[0.07] bg-white/[0.02] text-white',
|
||||
rose: 'border-rose-400/15 bg-rose-500/10 text-rose-100',
|
||||
sky: 'border-sky-400/15 bg-sky-500/10 text-sky-100',
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`rounded-2xl border p-5 ${tones[tone] ?? tones.slate}`}>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">{label}</p>
|
||||
<p className="mt-3 text-3xl font-semibold tracking-tight">{value}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function AuthAudit({ logs, filters, eventOptions, statusOptions }) {
|
||||
const items = logs?.data ?? []
|
||||
const failedCount = items.filter((entry) => entry.status === 'failed').length
|
||||
const uniqueIpCount = new Set(items.map((entry) => entry.ip).filter(Boolean)).size
|
||||
|
||||
const handleSearch = (event) => {
|
||||
event.preventDefault()
|
||||
const search = event.target.elements.search.value
|
||||
|
||||
router.get('/moderation/auth-audit', {
|
||||
search,
|
||||
event: filters.event,
|
||||
status: filters.status,
|
||||
}, {
|
||||
preserveState: true,
|
||||
preserveScroll: true,
|
||||
})
|
||||
}
|
||||
|
||||
const handleFilterChange = (key, value) => {
|
||||
router.get('/moderation/auth-audit', {
|
||||
search: filters.search,
|
||||
event: key === 'event' ? value : filters.event,
|
||||
status: key === 'status' ? value : filters.status,
|
||||
}, {
|
||||
preserveState: true,
|
||||
preserveScroll: true,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminLayout title="Auth Audit" subtitle="Review login, registration, forgot-password, and reset-password activity with IPs, timestamps, status, and failure reasons.">
|
||||
<Head title="Admin · Auth Audit" />
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-3">
|
||||
<SummaryCard label="Visible records" value={items.length.toLocaleString()} tone="slate" />
|
||||
<SummaryCard label="Failures on page" value={failedCount.toLocaleString()} tone="rose" />
|
||||
<SummaryCard label="Unique IPs on page" value={uniqueIpCount.toLocaleString()} tone="sky" />
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-[28px] border border-white/[0.07] bg-white/[0.02] p-5">
|
||||
<div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
|
||||
<form onSubmit={handleSearch} className="flex flex-1 flex-col gap-3 md:flex-row">
|
||||
<label className="flex-1">
|
||||
<span className="mb-2 block text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Search</span>
|
||||
<input
|
||||
name="search"
|
||||
defaultValue={filters.search}
|
||||
placeholder="Email, username, IP, or failure reason"
|
||||
className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white placeholder:text-slate-600 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
|
||||
/>
|
||||
</label>
|
||||
<button type="submit" className="rounded-2xl bg-rose-500/80 px-5 py-3 text-sm font-semibold text-white transition hover:bg-rose-500">
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="grid gap-3 md:grid-cols-2 xl:min-w-[26rem]">
|
||||
<label>
|
||||
<span className="mb-2 block text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Event</span>
|
||||
<select
|
||||
value={filters.event}
|
||||
onChange={(event) => handleFilterChange('event', event.target.value)}
|
||||
className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
|
||||
>
|
||||
{eventOptions.map((option) => (
|
||||
<option key={option.value} value={option.value} className="bg-slate-950 text-white">
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<span className="mb-2 block text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Status</span>
|
||||
<select
|
||||
value={filters.status}
|
||||
onChange={(event) => handleFilterChange('status', event.target.value)}
|
||||
className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
|
||||
>
|
||||
{statusOptions.map((option) => (
|
||||
<option key={option.value} value={option.value} className="bg-slate-950 text-white">
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 overflow-hidden rounded-[28px] border border-white/[0.07] bg-white/[0.02]">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[980px] text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-white/[0.07] text-left text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">
|
||||
<th className="px-5 py-4">When</th>
|
||||
<th className="px-5 py-4">Event</th>
|
||||
<th className="px-5 py-4">Status</th>
|
||||
<th className="px-5 py-4">Identifier</th>
|
||||
<th className="px-5 py-4">User</th>
|
||||
<th className="px-5 py-4">IP</th>
|
||||
<th className="px-5 py-4">Reason</th>
|
||||
<th className="px-5 py-4">Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/[0.05]">
|
||||
{items.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={8} className="px-5 py-12 text-center text-slate-500">No auth audit records matched the current filters.</td>
|
||||
</tr>
|
||||
) : items.map((entry) => (
|
||||
<tr key={entry.id} className="align-top transition hover:bg-white/[0.025]">
|
||||
<td className="px-5 py-4 text-slate-300">{formatTimestamp(entry.created_at)}</td>
|
||||
<td className="px-5 py-4 text-white">{EVENT_LABELS[entry.event_type] ?? formatLabel(entry.event_type)}</td>
|
||||
<td className="px-5 py-4">
|
||||
<span className={`inline-flex rounded-full border px-2.5 py-1 text-xs font-semibold uppercase tracking-[0.16em] ${STATUS_BADGES[entry.status] ?? 'border-white/10 bg-white/[0.04] text-white/70'}`}>
|
||||
{entry.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-5 py-4 text-slate-300">{entry.identifier || 'Not recorded'}</td>
|
||||
<td className="px-5 py-4">
|
||||
{entry.user ? (
|
||||
<div>
|
||||
<p className="font-medium text-white">{entry.user.name}</p>
|
||||
<p className="text-xs text-slate-500">{entry.user.username ? `@${entry.user.username}` : entry.user.email}</p>
|
||||
</div>
|
||||
) : <span className="text-slate-500">Unknown user</span>}
|
||||
</td>
|
||||
<td className="px-5 py-4 text-slate-300">{entry.ip || 'Unknown'}</td>
|
||||
<td className="px-5 py-4 text-slate-300">{formatLabel(entry.reason)}</td>
|
||||
<td className="px-5 py-4">
|
||||
<details className="group w-72 max-w-full">
|
||||
<summary className="cursor-pointer list-none text-sm font-medium text-sky-200 transition hover:text-sky-100">
|
||||
View payload
|
||||
</summary>
|
||||
<div className="mt-3 space-y-3 rounded-2xl border border-white/10 bg-black/20 p-4 text-xs text-slate-300">
|
||||
<div>
|
||||
<p className="font-semibold uppercase tracking-[0.16em] text-slate-500">User agent</p>
|
||||
<p className="mt-1 break-words leading-5 text-slate-300">{entry.user_agent || 'Not recorded'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold uppercase tracking-[0.16em] text-slate-500">Metadata</p>
|
||||
<pre className="mt-1 overflow-x-auto whitespace-pre-wrap break-words rounded-xl bg-slate-950/70 p-3 text-[11px] leading-5 text-slate-300">{JSON.stringify(entry.metadata || {}, null, 2)}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{logs?.last_page > 1 ? (
|
||||
<div className="flex items-center justify-between border-t border-white/[0.06] px-5 py-4">
|
||||
<p className="text-xs text-slate-500">
|
||||
Showing {logs.from}–{logs.to} of {logs.total} audit records
|
||||
</p>
|
||||
<div className="flex gap-1">
|
||||
{logs.links.map((link, index) => (
|
||||
link.url ? (
|
||||
<button
|
||||
key={`${link.label}-${index}`}
|
||||
type="button"
|
||||
onClick={() => router.get(link.url, {}, { preserveScroll: true, preserveState: true })}
|
||||
className={`rounded-lg px-3 py-1.5 text-xs transition ${link.active ? 'bg-rose-500/20 font-semibold text-rose-300' : 'text-slate-500 hover:bg-white/[0.06] hover:text-white'}`}
|
||||
dangerouslySetInnerHTML={{ __html: link.label }}
|
||||
/>
|
||||
) : (
|
||||
<span key={`${link.label}-${index}`} className="rounded-lg px-3 py-1.5 text-xs text-slate-700" dangerouslySetInnerHTML={{ __html: link.label }} />
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</AdminLayout>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user