Añadir /security-history (Historial de seguridad): actividad, reino, web
Tres tablas: actividad (solicitudes de token, home_securitytoken), conexiones al reino (logs_ip_actions + account.last_ip/last_login como conexión actual), y conexiones web (home_loginattempt, estado Exito/Fracaso -> Conexión exitosa/ Contraseña incorrecta). lib/security-history.ts (getSecurityHistory), tolerante si falta la tabla. Django era stub. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,194 @@
|
||||
import type { Metadata } from 'next'
|
||||
import { setRequestLocale } from 'next-intl/server'
|
||||
import { redirect } from '@/i18n/navigation'
|
||||
import { getSession } from '@/lib/session'
|
||||
import { getSecurityHistory } from '@/lib/security-history'
|
||||
import { PageShell } from '@/components/PageShell'
|
||||
import { ServiceBox } from '@/components/ServiceBox'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export const metadata: Metadata = { title: 'Historial de seguridad' }
|
||||
|
||||
/** Fecha en formato HH:MM:SS DD-MM-YYYY (como el diseño). */
|
||||
function fmt(d: Date): string {
|
||||
const p = (n: number) => String(n).padStart(2, '0')
|
||||
return `${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())} ${p(d.getDate())}-${p(d.getMonth() + 1)}-${d.getFullYear()}`
|
||||
}
|
||||
|
||||
export default async function SecurityHistoryPage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params
|
||||
setRequestLocale(locale)
|
||||
|
||||
const session = await getSession()
|
||||
if (!session.bnetId) redirect({ href: '/login', locale })
|
||||
if (!session.username) redirect({ href: '/select-account', locale })
|
||||
|
||||
const displayUser = session.username || session.bnetEmail || '—'
|
||||
const { activity, realm, web } = await getSecurityHistory(session.accountId!, displayUser, session.bnetEmail || '')
|
||||
|
||||
return (
|
||||
<PageShell title="Historial de seguridad">
|
||||
<ServiceBox>
|
||||
<br />
|
||||
<p>Aquí verás información de actividad y conexiones de tu cuenta.</p>
|
||||
<p>Cada tabla tiene una explicación detallada de la información provista.</p>
|
||||
<p>
|
||||
Si desconoces algún tipo de actividad te recomendamos cambiar la contraseña de tu cuenta y del correo ligado a
|
||||
la misma.
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
<span>Historial de actividad</span>
|
||||
</p>
|
||||
<p>Muestra actividad de seguridad de la cuenta, como por ejemplo cambios de contraseña.</p>
|
||||
<br />
|
||||
<p>
|
||||
<span>Historial de conexiones (Reino)</span>
|
||||
</p>
|
||||
<p>
|
||||
Muestra un historial de conexiones al reino <u>sólo cuando la IP ha cambiado</u>. No es un historial de cada
|
||||
conexión.
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
<span>Historial de conexiones (Web)</span>
|
||||
</p>
|
||||
<p>Muestra un historial de cada conexión al sitio web.</p>
|
||||
</ServiceBox>
|
||||
|
||||
{/* Historial de actividad */}
|
||||
<div className="box-content">
|
||||
<div className="title-box-content">
|
||||
<h2>Historial de actividad</h2>
|
||||
</div>
|
||||
<div className="body-box-content centered">
|
||||
{activity.length === 0 ? (
|
||||
<table className="max-center-table-aligned2">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span>No hay actividad</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<table className="max-center-table-aligned2">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Usuario</th>
|
||||
<th>Acción</th>
|
||||
<th>IP</th>
|
||||
<th>Fecha</th>
|
||||
</tr>
|
||||
{activity.map((a, i) => (
|
||||
<tr key={i}>
|
||||
<td>
|
||||
<span>{a.user}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{a.action}</span>
|
||||
</td>
|
||||
<td className="long-td">
|
||||
<span>{a.ip}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{fmt(a.date)}</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Historial de conexiones (Reino) */}
|
||||
<div className="box-content">
|
||||
<div className="title-box-content">
|
||||
<h2>Historial de conexiones (Reino)</h2>
|
||||
</div>
|
||||
<div className="body-box-content centered">
|
||||
{realm.length === 0 ? (
|
||||
<table className="max-center-table-aligned">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span>No hay conexiones</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<table className="max-center-table-aligned">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>IP</th>
|
||||
<th>Fecha</th>
|
||||
</tr>
|
||||
{realm.map((c, i) => (
|
||||
<tr key={i}>
|
||||
<td className="long-td">
|
||||
<span>{c.ip}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{fmt(c.date)}</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Historial de conexiones (Web) */}
|
||||
<div className="box-content">
|
||||
<div className="title-box-content">
|
||||
<h2>Historial de conexiones (Web)</h2>
|
||||
</div>
|
||||
<div className="body-box-content centered">
|
||||
{web.length === 0 ? (
|
||||
<table className="max-center-table-aligned">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span>No hay conexiones</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<table className="max-center-table-aligned">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Usuario</th>
|
||||
<th>Estado</th>
|
||||
<th>IP</th>
|
||||
<th>Fecha</th>
|
||||
</tr>
|
||||
{web.map((c, i) => (
|
||||
<tr key={i}>
|
||||
<td>
|
||||
<span>{c.user}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span className={c.status === 'Conexión exitosa' ? '' : 'red-info2'}>{c.status}</span>
|
||||
</td>
|
||||
<td className="long-td">
|
||||
<span>{c.ip}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{fmt(c.date)}</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</PageShell>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user