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>
This commit is contained in:
@@ -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>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 }
|
||||
}
|
||||
|
||||
@@ -201,10 +201,12 @@
|
||||
},
|
||||
"Activate": {
|
||||
"activating": "Activating your account…",
|
||||
"success": "Account activated! You can now sign in.",
|
||||
"invalidLink": "The link is invalid or has already been used.",
|
||||
"expiredLink": "The link has expired. Please request a new one.",
|
||||
"goLogin": "Go to sign in",
|
||||
"welcome": "Welcome to {realm}!",
|
||||
"activated": "The account <account>{email}</account> has been activated successfully.",
|
||||
"canPlay": "You can now log in to the website or start enjoying the server.",
|
||||
"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": {
|
||||
|
||||
@@ -201,10 +201,12 @@
|
||||
},
|
||||
"Activate": {
|
||||
"activating": "Activando tu cuenta…",
|
||||
"success": "¡Cuenta activada! Ya puedes iniciar sesión.",
|
||||
"invalidLink": "El enlace no es válido o ya se ha usado.",
|
||||
"expiredLink": "El enlace ha caducado. Solicita uno nuevo.",
|
||||
"goLogin": "Ir a iniciar sesión",
|
||||
"welcome": "¡Bienvenido a {realm}!",
|
||||
"activated": "La cuenta <account>{email}</account> ha sido activada exitosamente.",
|
||||
"canPlay": "Ya puedes conectar a la página web o empezar a disfrutar del servidor.",
|
||||
"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": {
|
||||
|
||||
Reference in New Issue
Block a user