Inna
a78417e954
La página mostraba un genérico «¡Cuenta activada!» + enlace a iniciar sesión.
Se recupera la estructura de las plantillas del tema (activation_success.html /
activation_invalid.html): bienvenida, la cuenta en `yellow-info`, y el aviso de
enlace inválido en `red-info2` con la línea de contacto.
El original dejaba un hueco: renderizaba `{{ username }}` pero la vista hacía
`render(...)` SIN contexto, así que salía «La cuenta ha sido activada». Aquí
`activateAccount` devuelve el email y sí se muestra. Va el email tal cual se
registró, no el normalizado: ese va en MAYÚSCULAS porque lo exige el SRP6 de
Battle.net y en pantalla quedaría como INNA@INNA.CL.
El nombre del servidor sale de `getRealmName()` (acore_auth.realmlist), como en
el resto de páginas, en vez de escribirlo a mano.
Verificado en producción: el caso inválido lo pinta el servidor y sale idéntico
al del tema; y activando una fila de prueba, el API devuelve {success, email} y
reutilizar el enlace o mandar un hash que no existe dan `invalidLink` (filas de
prueba borradas después).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useRef, useState } from 'react'
|
|
import { useTranslations } from 'next-intl'
|
|
|
|
const ERROR_KEYS = ['invalidLink', 'expiredLink'] as const
|
|
|
|
export function ActivateClient({ hash, realm }: { hash: string; realm: string }) {
|
|
const t = useTranslations('Activate')
|
|
// Sin hash el error se sabe YA, al renderizar (y 'invalidLink' es justo el
|
|
// errorKey por defecto): se deriva del prop en vez de ponerlo con setState
|
|
// dentro del efecto, que encadena un render de más.
|
|
const [state, setState] = useState<'loading' | 'ok' | 'error'>(hash ? 'loading' : 'error')
|
|
const [errorKey, setErrorKey] = useState<string>('invalidLink')
|
|
const [email, setEmail] = useState('')
|
|
const ran = useRef(false)
|
|
|
|
useEffect(() => {
|
|
if (!hash || ran.current) return // evita doble POST en StrictMode
|
|
ran.current = true
|
|
fetch('/api/auth/activate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ hash }),
|
|
})
|
|
.then((r) => r.json())
|
|
.then((d: { success?: boolean; error?: string; email?: string }) => {
|
|
if (d.success) {
|
|
setEmail(d.email ?? '')
|
|
setState('ok')
|
|
} else {
|
|
setErrorKey((ERROR_KEYS as readonly string[]).includes(d.error ?? '') ? d.error! : 'invalidLink')
|
|
setState('error')
|
|
}
|
|
})
|
|
.catch(() => setState('error'))
|
|
}, [hash])
|
|
|
|
// El envoltorio ya lo pone la página (`body-box-content centered`), así que aquí
|
|
// van los <p> sueltos: es la estructura que tenían las plantillas del tema.
|
|
return (
|
|
<>
|
|
{state === 'loading' && <p>{t('activating')}</p>}
|
|
{state === 'ok' && (
|
|
<>
|
|
<br />
|
|
<p>{t('welcome', { realm })}</p>
|
|
<p>{t.rich('activated', { email, account: (c) => <span className="yellow-info">{c}</span> })}</p>
|
|
<br />
|
|
<p>{t('canPlay')}</p>
|
|
<br />
|
|
</>
|
|
)}
|
|
{state === 'error' && (
|
|
<>
|
|
<p className="red-info2">{t(errorKey)}</p>
|
|
<br />
|
|
<p>{t('needHelp', { realm })}</p>
|
|
</>
|
|
)}
|
|
</>
|
|
)
|
|
}
|