Inna
57dd48e308
Dos cosas, y la segunda dejaba la página sin contenido:
- El botón "Solicitar nuevo cambio de correo" salía de 250x100 pegado a la
derecha. `.back-to-account` es el botón de la CABECERA de una caja (250px de
ancho, line-height 50, float right); suelto en el CUERPO el float lo pega a un
lado, y el texto no cabe en 250px, se parte en dos líneas y cada una se lleva
sus 50px. Se le deja el aspecto del tema pero ajustado a su texto: pasa a
336x50 y centrado.
- El mensaje rojo ("el enlace ha expirado") NO SE VEÍA: el tema deja
`.alert-message` con display:none porque es el hueco que rellena y revela el
JS, y aquí el aviso es estático. Se pone display:block a mano, igual que hacen
todos los formularios del proyecto. Comprobado que al original le pasa lo
mismo: su página de enlace caducado enseña el título y el botón, y la
explicación queda invisible.
Medido en el navegador: botón 336x50, centrado, sin desbordar, y el mensaje
visible.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
48 lines
2.0 KiB
TypeScript
48 lines
2.0 KiB
TypeScript
import type { Metadata } from 'next'
|
|
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
|
import { Link } from '@/i18n/navigation'
|
|
import { PageShell } from '@/components/PageShell'
|
|
import { ServiceBox } from '@/components/ServiceBox'
|
|
|
|
export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
|
|
const { locale } = await params
|
|
const t = await getTranslations({ locale, namespace: 'Misc' })
|
|
return { title: t('expiredLink.pageTitle') }
|
|
}
|
|
|
|
/**
|
|
* Enlace caducado — réplica del partial Django `partials/expired_link.html`,
|
|
* al que se llega desde los correos de confirmación (cambio de correo, alta…).
|
|
*
|
|
* Con dos erratas del original SIN copiar: tenía un «No hay códigos de promoción
|
|
* disponibles» de otra página, y el botón "Solicitar nuevo cambio de correo"
|
|
* enlazaba a `expired-link`, o sea a sí misma. Aquí lleva a /change-email, que
|
|
* es lo que pretendía.
|
|
*/
|
|
export default async function ExpiredLinkPage({ params }: { params: Promise<{ locale: string }> }) {
|
|
const { locale } = await params
|
|
setRequestLocale(locale)
|
|
const t = await getTranslations('Misc')
|
|
|
|
return (
|
|
<PageShell title={t('expiredLink.pageTitle')}>
|
|
<ServiceBox heading={t('expiredLink.pageTitle')}>
|
|
<div className="centered">
|
|
<br />
|
|
{/* `display:block` a mano, como el resto de formularios: el tema deja
|
|
`.alert-message` OCULTA para que la rellene y la revele el JS. Aquí
|
|
el aviso es estático y sin esto no se ve NINGUNO — le pasa al
|
|
original, que enseña esta página con el mensaje invisible. */}
|
|
<div className="alert-message" style={{ display: 'block' }}>
|
|
<span className="red-form-response">{t('expiredLink.message')}</span>
|
|
</div>
|
|
<br />
|
|
<Link className="back-to-account" href="/change-email">
|
|
{t('expiredLink.requestNew')}
|
|
</Link>
|
|
</div>
|
|
</ServiceBox>
|
|
</PageShell>
|
|
)
|
|
}
|