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:
2026-07-14 14:27:51 +00:00
parent 72e8000b26
commit 41b42eddc2
2 changed files with 298 additions and 0 deletions
@@ -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>
)
}
+104
View File
@@ -0,0 +1,104 @@
import type { RowDataPacket } from 'mysql2'
import { db, DB } from './db'
export interface ActivityEntry {
user: string
action: string
ip: string
date: Date
}
export interface RealmConnection {
ip: string
date: Date
}
export interface WebConnection {
user: string
status: string
ip: string
date: Date
}
/** Traduce el estado guardado del intento de login web a la etiqueta del diseño. */
function webStatusLabel(raw: string): string {
const s = (raw || '').toLowerCase()
if (s.includes('exito') || s.includes('éxito') || s.includes('success')) return 'Conexión exitosa'
if (s.includes('fracaso') || s.includes('fail') || s.includes('incorrect')) return 'Contraseña incorrecta'
return raw || '—'
}
/**
* Historial de seguridad de una cuenta, en tres bloques:
* - **Actividad**: acciones de seguridad (solicitudes de token) desde `home_securitytoken`.
* - **Conexiones (Reino)**: `acore_auth.logs_ip_actions` (histórico de IP) + la última
* conexión conocida (`account.last_ip`/`last_login`) si aporta una IP nueva.
* - **Conexiones (Web)**: cada intento de login web desde `home_loginattempt`.
* Cada consulta es tolerante a fallos (devuelve [] si la tabla no existe).
*/
export async function getSecurityHistory(
accountId: number,
displayUser: string,
email: string,
limit = 100,
): Promise<{ activity: ActivityEntry[]; realm: RealmConnection[]; web: WebConnection[] }> {
const activity: ActivityEntry[] = []
const realm: RealmConnection[] = []
const web: WebConnection[] = []
if (!accountId) return { activity, realm, web }
// 1) Actividad: solicitudes de token de seguridad.
try {
const [rows] = await db(DB.default).query<RowDataPacket[]>(
'SELECT created_at, ip_address FROM home_securitytoken WHERE user_id = ? ORDER BY created_at DESC LIMIT ?',
[accountId, limit],
)
for (const r of rows) {
activity.push({ user: displayUser, action: 'Token de seguridad solicitado', ip: String(r.ip_address || '—'), date: new Date(r.created_at) })
}
} catch {
/* tabla ausente */
}
// 2) Conexiones al reino: histórico de IP + última conexión conocida.
try {
const [rows] = await db(DB.auth).query<RowDataPacket[]>(
'SELECT ip, unixtime FROM logs_ip_actions WHERE account_id = ? ORDER BY unixtime DESC LIMIT ?',
[accountId, limit],
)
for (const r of rows) realm.push({ ip: String(r.ip), date: new Date(Number(r.unixtime) * 1000) })
} catch {
/* tabla ausente */
}
try {
const [acc] = await db(DB.auth).query<RowDataPacket[]>(
'SELECT last_ip, last_login FROM account WHERE id = ? LIMIT 1',
[accountId],
)
const a = acc[0]
if (a && a.last_ip && a.last_login) {
// Añade la última conexión si no coincide con la IP más reciente ya listada.
if (realm.length === 0 || realm[0].ip !== String(a.last_ip)) {
realm.unshift({ ip: String(a.last_ip), date: new Date(a.last_login) })
}
}
} catch {
/* tabla ausente */
}
realm.sort((x, y) => y.date.getTime() - x.date.getTime())
// 3) Conexiones web: intentos de login (por email de la cuenta).
if (email) {
try {
const [rows] = await db(DB.default).query<RowDataPacket[]>(
'SELECT username, status, ip_address, timestamp FROM home_loginattempt WHERE username = ? ORDER BY timestamp DESC LIMIT ?',
[email, limit],
)
for (const r of rows) {
web.push({ user: displayUser, status: webStatusLabel(String(r.status)), ip: String(r.ip_address || '—'), date: new Date(r.timestamp) })
}
} catch {
/* tabla ausente */
}
}
return { activity, realm, web }
}