Inna
653f7f0a07
Tras un envío correcto se ponía `sent` y el botón quedaba desactivado para
siempre: no volvía a «Solicitar token» y, sobre todo, ya no podías pulsarlo para
ver el aviso de «cada 7 días», que es la respuesta que hay que ver. Había que
recargar la página para recuperarlo.
Ese bloqueo no venía del original: la versión anterior (isla React) tenía
`disabled={busy}` y nada más. Se vuelve a eso. La clave `sent` («Token enviado»)
queda sin uso y se borra de ES/EN.
Verificado en producción: dos POST seguidos responden el cooldown, en vez de que
el segundo fuera inalcanzable.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
73 lines
2.8 KiB
TypeScript
73 lines
2.8 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useTranslations } from 'next-intl'
|
|
import { Link } from '@/i18n/navigation'
|
|
|
|
const ERROR_KEYS = ['cooldown', 'noEmail'] as const
|
|
|
|
/** Formatea una fecha ISO como "HH:MM:SS DD-MM-YYYY" (igual que el diseño original). */
|
|
function formatDate(iso: string): string {
|
|
const d = new Date(iso)
|
|
const p = (n: number) => String(n).padStart(2, '0')
|
|
return `${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())} ${p(d.getDate())}-${p(d.getMonth() + 1)}-${d.getFullYear()}`
|
|
}
|
|
|
|
export function SecurityTokenForm({ initialDate }: { initialDate: string | null }) {
|
|
const t = useTranslations('SecurityToken')
|
|
const [date, setDate] = useState(initialDate)
|
|
const [busy, setBusy] = useState(false)
|
|
const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
|
|
|
|
async function request(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
if (busy) return
|
|
setBusy(true)
|
|
setMessage(null)
|
|
try {
|
|
const res = await fetch('/api/account/security-token', { method: 'POST', credentials: 'same-origin' })
|
|
const data: { success?: boolean; error?: string; tokenDate?: string } = await res.json()
|
|
if (data.success) {
|
|
setMessage({ ok: true, text: t('success') })
|
|
if (data.tokenDate) setDate(data.tokenDate)
|
|
} else {
|
|
const key = (ERROR_KEYS as readonly string[]).includes(data.error ?? '') ? data.error! : 'genericError'
|
|
setMessage({ ok: false, text: t(key) })
|
|
// Como el original: el mensaje de error desaparece tras 5 s.
|
|
setTimeout(() => setMessage(null), 5000)
|
|
}
|
|
} catch {
|
|
setMessage({ ok: false, text: t('genericError') })
|
|
setTimeout(() => setMessage(null), 5000)
|
|
} finally {
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="centered">
|
|
<br />
|
|
<br />
|
|
<p>{t('requestDateLabel')}</p>
|
|
<p><span className="yellow-info">{date ? formatDate(date) : t('never')}</span></p>
|
|
<br />
|
|
<form id="ns-sec-token-form" onSubmit={request} acceptCharset="utf-8">
|
|
{/* Solo se desactiva mientras se envía. NO se queda bloqueado tras un envío
|
|
correcto: si vuelves a pulsar dentro de los 7 días, el servidor responde
|
|
el aviso de espera, que es lo que hay que ver. */}
|
|
<button className="sec-token-button" type="submit" disabled={busy}>
|
|
{busy ? t('requesting') : t('request')}
|
|
</button>
|
|
</form>
|
|
<br />
|
|
<hr />
|
|
<div className="alert-message" id="sec-token-response" style={{ display: message ? 'block' : 'none' }}>
|
|
{message && <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>}
|
|
</div>
|
|
<br />
|
|
<p><Link href="/recover">{t('forgot')}</Link></p>
|
|
<br />
|
|
</div>
|
|
)
|
|
}
|