Activación de cuenta: recuperar el diseño del tema y decir QUÉ cuenta se activó

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>

web-next/app/[locale]/activate-account/ActivateClient.tsx

@@ -2,17 +2,17 @@
 
 import { useEffect, useRef, useState } from 'react'
 import { useTranslations } from 'next-intl'
-import { Link } from '@/i18n/navigation'
 
 const ERROR_KEYS = ['invalidLink', 'expiredLink'] as const
 
-export function ActivateClient({ hash }: { hash: string }) {
+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(() => {
@@ -24,9 +24,11 @@ export function ActivateClient({ hash }: { hash: string }) {
       body: JSON.stringify({ hash }),
     })
       .then((r) => r.json())
-      .then((d: { success?: boolean; error?: string }) => {
+      .then((d: { success?: boolean; error?: string; email?: string }) => {
-        if (d.success) setState('ok')
+        if (d.success) {
-        else {
+          setEmail(d.email ?? '')
+          setState('ok')
+        } else {
           setErrorKey((ERROR_KEYS as readonly string[]).includes(d.error ?? '') ? d.error! : 'invalidLink')
           setState('error')
         }
@@ -34,18 +36,28 @@ export function ActivateClient({ hash }: { hash: string }) {
       .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 (
-    <div className="centered">
+    <>
       {state === 'loading' && <p>{t('activating')}</p>}
       {state === 'ok' && (
         <>
-          <span className="ok-form-response">{t('success')}</span>
+          <br />
-          <p style={{ marginTop: 16 }}>
+          <p>{t('welcome', { realm })}</p>
-            <Link href="/log-in">{t('goLogin')}</Link>
+          <p>{t.rich('activated', { email, account: (c) => <span className="yellow-info">{c}</span> })}</p>
-          </p>
+          <br />
+          <p>{t('canPlay')}</p>
+          <br />
         </>
       )}
-      {state === 'error' && <span className="red-form-response">{t(errorKey)}</span>}
+      {state === 'error' && (
-    </div>
+        <>
+          <p className="red-info2">{t(errorKey)}</p>
+          <br />
+          <p>{t('needHelp', { realm })}</p>
+        </>
+      )}
+    </>
   )
 }

web-next/app/[locale]/activate-account/page.tsx

@@ -1,5 +1,6 @@
 import { getTranslations, setRequestLocale } from 'next-intl/server'
 import { PageShell } from '@/components/PageShell'
+import { getRealmName } from '@/lib/realm'
 import { ActivateClient } from './ActivateClient'
 
 export default async function ActivatePage({
@@ -13,12 +14,13 @@ export default async function ActivatePage({
   setRequestLocale(locale)
   const { act } = await searchParams
   const t = await getTranslations('Activate')
+  const realm = await getRealmName()
 
   return (
     <PageShell title={t('title')}>
       <div className="box-content">
         <div className="body-box-content centered">
-          <ActivateClient hash={act ?? ''} />
+          <ActivateClient hash={act ?? ''} realm={realm} />
         </div>
       </div>
     </PageShell>

web-next/lib/register.ts

@@ -18,6 +18,8 @@ export interface RegisterInput {
 export interface Result {
   success: boolean
   error?: string
+  /** Solo al activar: el correo de la cuenta, para poder decir cuál se activó. */
+  email?: string
 }
 
 export async function registerAccount(input: RegisterInput): Promise<Result> {
@@ -111,5 +113,7 @@ export async function activateAccount(hash: string, lastIp = '0.0.0.0'): Promise
   )
 
   await db(DB.default).query('DELETE FROM accountactivation WHERE id = ?', [act.id])
-  return { success: true }
+  // El correo tal cual se registró, no `emailNorm`: ese va en MAYÚSCULAS porque lo
+  // exige el SRP6 de Battle.net, y en pantalla quedaría como INNA@INNA.CL.
+  return { success: true, email: act.email }
 }

web-next/messages/en.json

@@ -201,10 +201,12 @@
   },
   "Activate": {
     "activating": "Activating your account…",
-    "success": "Account activated! You can now sign in.",
+    "welcome": "Welcome to {realm}!",
-    "invalidLink": "The link is invalid or has already been used.",
+    "activated": "The account <account>{email}</account> has been activated successfully.",
-    "expiredLink": "The link has expired. Please request a new one.",
+    "canPlay": "You can now log in to the website or start enjoying the server.",
-    "goLogin": "Go to sign in",
+    "invalidLink": "The activation link is invalid",
+    "expiredLink": "The activation link has expired",
+    "needHelp": "If you need help creating an account, you can contact the {realm} team.",
     "title": "Account activation"
   },
   "Recover": {

web-next/messages/es.json

@@ -201,10 +201,12 @@
   },
   "Activate": {
     "activating": "Activando tu cuenta…",
-    "success": "¡Cuenta activada! Ya puedes iniciar sesión.",
+    "welcome": "¡Bienvenido a {realm}!",
-    "invalidLink": "El enlace no es válido o ya se ha usado.",
+    "activated": "La cuenta <account>{email}</account> ha sido activada exitosamente.",
-    "expiredLink": "El enlace ha caducado. Solicita uno nuevo.",
+    "canPlay": "Ya puedes conectar a la página web o empezar a disfrutar del servidor.",
-    "goLogin": "Ir a iniciar sesión",
+    "invalidLink": "El enlace de activación es inválido",
+    "expiredLink": "El enlace de activación ha caducado",
+    "needHelp": "Si necesitas ayuda para crear una cuenta, puedes contactar con el equipo de {realm}.",
     "title": "Activación de cuenta"
   },
   "Recover": {