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 }) => {
-        if (d.success) setState('ok')
-        else {
+      .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')
         }
@@ -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>
-          <p style={{ marginTop: 16 }}>
-            <Link href="/log-in">{t('goLogin')}</Link>
-          </p>
+          <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' && <span className="red-form-response">{t(errorKey)}</span>}
-    </div>
+      {state === 'error' && (
+        <>
+          <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>