web-next: rediseño de security-token, recover, vote-points + rename-guild

- /security-token: diseño completo del original (info + advertencia + NOTA 7 días),
  fecha en formato HH:MM:SS DD-MM-YYYY, botón "Token enviado", enlace a /recover.
- /recover: 4 opciones (contraseña por usuario, nombre de cuenta, token de seguridad
  y enlace de activación por correo); recuperación de token nueva; Turnstile por envío.
- /vote-points: caja de info con las 7 secciones Q&A + panel "Sitios de votación" con
  tarjetas inline-div (imagen, PV, último voto), botón refrescar; abre el sitio y acredita
  PV al volver. lib/vote.ts + getVoteSitesForAccount.
- /rename-guild: renombra una hermandad de la que la cuenta es Maestro por 1000 PD +
  token de seguridad; SOAP .guild rename con comillas; reembolsa los PD si SOAP falla.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web-next/app/[locale]/recover/RecoverForm.tsx

@@ -4,32 +4,64 @@ import { useState } from 'react'
 import { useTranslations } from 'next-intl'
 import { Turnstile } from '@/components/Turnstile'
 
-const ERROR_KEYS = ['invalidEmail', 'captchaFailed'] as const
+const ERROR_KEYS = ['invalidEmail', 'invalidUsername', 'captchaFailed'] as const
+type RecoverType = 'password' | 'accountname' | 'securitytoken' | 'activation'
 
 export function RecoverForm() {
   const t = useTranslations('Recover')
-  const [type, setType] = useState('password')
-  const [email, setEmail] = useState('')
+  const [type, setType] = useState<RecoverType>('password')
+  const [value, setValue] = useState('')
   const [captcha, setCaptcha] = useState('')
+  const [captchaKey, setCaptchaKey] = useState(0) // remonta el widget para pedir un token nuevo
   const [busy, setBusy] = useState(false)
+  const [sent, setSent] = useState(false)
   const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
 
+  const usesUsername = type === 'password'
+
+  function changeType(newType: RecoverType) {
+    setType(newType)
+    setValue('')
+    setMessage(null)
+    setSent(false)
+    setCaptcha('')
+    setCaptchaKey((k) => k + 1)
+  }
+
+  function resetCaptcha() {
+    setCaptcha('')
+    setCaptchaKey((k) => k + 1)
+  }
+
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault()
-    if (busy) return
+    if (busy || sent) return
     setBusy(true)
     setMessage(null)
     try {
       const res = await fetch('/api/auth/recover', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ type, email: email.trim(), turnstileToken: captcha }),
+        body: JSON.stringify({ type, value: value.trim(), turnstileToken: captcha }),
       })
       const data: { success?: boolean; error?: string } = await res.json()
-      if (data.success) setMessage({ ok: true, text: t('success') })
-      else {
+      if (data.success) {
+        setMessage({ ok: true, text: t('success') })
+        setSent(true)
+        // Como el original: tras 5 s se restaura el botón y se limpia el formulario.
+        setTimeout(() => {
+          setSent(false)
+          setValue('')
+          setMessage(null)
+          resetCaptcha()
+        }, 5000)
+      } else {
         const key = (ERROR_KEYS as readonly string[]).includes(data.error ?? '') ? data.error! : 'genericError'
         setMessage({ ok: false, text: t(key) })
+        setTimeout(() => {
+          setMessage(null)
+          resetCaptcha()
+        }, 5000)
       }
     } catch {
       setMessage({ ok: false, text: t('genericError') })
@@ -40,32 +72,39 @@ export function RecoverForm() {
 
   return (
     <>
+      <p>{t('prompt')}</p>
+      <br />
       <form onSubmit={handleSubmit} acceptCharset="utf-8">
         <table className="middle-center-table">
           <tbody>
             <tr>
               <td>
-                <select value={type} onChange={(e) => setType(e.target.value)}>
+                <select value={type} onChange={(e) => changeType(e.target.value as RecoverType)}>
                   <option value="password">{t('typePassword')}</option>
                   <option value="accountname">{t('typeAccountName')}</option>
+                  <option value="securitytoken">{t('typeSecurityToken')}</option>
                   <option value="activation">{t('typeActivation')}</option>
                 </select>
               </td>
             </tr>
             <tr>
               <td>
-                <input type="email" maxLength={320} placeholder={t('email')} required value={email} onChange={(e) => setEmail(e.target.value)} />
+                {usesUsername ? (
+                  <input type="text" maxLength={20} placeholder={t('username')} required value={value} onChange={(e) => setValue(e.target.value)} />
+                ) : (
+                  <input type="email" maxLength={254} placeholder={t('email')} required value={value} onChange={(e) => setValue(e.target.value)} />
+                )}
               </td>
             </tr>
             <tr>
               <td>
-                <Turnstile onVerify={setCaptcha} />
+                <Turnstile key={captchaKey} onVerify={setCaptcha} />
               </td>
             </tr>
             <tr>
               <td>
-                <button type="submit" className="recover-button" disabled={busy}>
-                  {busy ? t('sending') : t('submit')}
+                <button type="submit" className="recover-button" disabled={busy || sent} style={sent ? { color: '#d79602' } : undefined}>
+                  {sent ? t('sent') : busy ? t('sending') : t('submit')}
                 </button>
               </td>
             </tr>
@@ -73,11 +112,10 @@ export function RecoverForm() {
         </table>
       </form>
       <hr />
-      <div className="alert-message" style={{ display: message ? 'block' : 'none' }}>
-        {message && (
-          <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>
-        )}
+      <div className="alert-message" id="recover-response" style={{ display: message ? 'block' : 'none' }}>
+        {message && <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>}
       </div>
+      <br />
     </>
   )
 }

web-next/app/[locale]/recover/page.tsx

@@ -6,11 +6,30 @@ export default async function RecoverPage({ params }: { params: Promise<{ locale
   const { locale } = await params
   setRequestLocale(locale)
   const t = await getTranslations('Recover')
+  const sections = t.raw('infoSections') as { h: string; lines: string[] }[]
+
   return (
     <PageShell title={t('title')}>
       <div className="box-content">
         <div className="title-box-content">
-          <h2>{t('type')}</h2>
+          <h2>{t('infoTitle')}</h2>
+        </div>
+        <div className="body-box-content justified">
+          {sections.map((s, i) => (
+            <div key={i}>
+              <span>{s.h}</span>
+              {s.lines.map((l, j) => (
+                <p key={j}>{l}</p>
+              ))}
+              {i < sections.length - 1 && <br />}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="box-content">
+        <div className="title-box-content">
+          <h2>{t('reqTitle')}</h2>
         </div>
         <div className="body-box-content centered">
           <RecoverForm />

web-next/app/[locale]/rename-guild/page.tsx

@@ -0,0 +1,67 @@
+import type { Metadata } from 'next'
+import { setRequestLocale } from 'next-intl/server'
+import { redirect } from '@/i18n/navigation'
+import { getSession } from '@/lib/session'
+import { getGuildMasterGuilds, GUILD_RENAME_PD } from '@/lib/guild'
+import { PageShell } from '@/components/PageShell'
+import { ServiceBox } from '@/components/ServiceBox'
+import { RenameGuildForm } from '@/components/RenameGuildForm'
+
+export const dynamic = 'force-dynamic'
+
+export const metadata: Metadata = { title: 'Renombrar hermandad' }
+
+export default async function RenameGuildPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params
+  setRequestLocale(locale)
+
+  const session = await getSession()
+  if (!session.bnetId) redirect({ href: '/login', locale })
+  if (!session.username) redirect({ href: '/select-account', locale })
+
+  const guilds = await getGuildMasterGuilds(session.accountId!)
+
+  return (
+    <PageShell title="Renombrar hermandad">
+      <ServiceBox>
+        <br />
+        <p>
+          La herramienta <span>Renombrar hermandad</span> te permite cambiar de nombre a una hermandad de la cual seas
+          Maestro de Hermandad.
+        </p>
+        <br />
+        <p>A la hora de escoger un nuevo nombre, ten en cuenta:</p>
+        <p>- La longitud máxima es de 24 caracteres.</p>
+        <p>- Los caracteres permitidos son A-Za-z y el espacio.</p>
+        <br />
+        <p>
+          Al usar el botón RENOMBRAR HERMANDAD de la hermandad que hayas escogido, se cambiará su nombre al nuevo nombre
+          que hayas ingresado.
+        </p>
+        <p>
+          El cambio de nombre de hermandad es instantáneo. Puede ser necesario que los miembros de la hermandad
+          conectados deban volver a conectar para finalmente ver el nuevo nombre.
+        </p>
+        <br />
+        <fieldset>
+          <legend>NOTA</legend>
+          <div className="separate2">
+            <p>
+              Por favor, asegúrate de haber elegido el nombre correcto ya que esta acción no es reversible una vez
+              realizada.
+            </p>
+          </div>
+        </fieldset>
+
+        <div className="centered">
+          <br />
+          <br />
+          <p>Requiere <span>{GUILD_RENAME_PD}</span> <span className="yellow-info">PD</span></p>
+          <br />
+        </div>
+
+        <RenameGuildForm guilds={guilds} />
+      </ServiceBox>
+    </PageShell>
+  )
+}

web-next/app/[locale]/security-token/SecurityTokenForm.tsx

@@ -1,19 +1,28 @@
 'use client'
 
 import { useState } from 'react'
-import { useTranslations, useLocale } from 'next-intl'
+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 locale = useLocale()
   const [date, setDate] = useState(initialDate)
   const [busy, setBusy] = useState(false)
+  const [sent, setSent] = useState(false)
   const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
 
-  async function request() {
-    if (busy) return
+  async function request(e: React.FormEvent) {
+    e.preventDefault()
+    if (busy || sent) return
     setBusy(true)
     setMessage(null)
     try {
@@ -21,36 +30,47 @@ export function SecurityTokenForm({ initialDate }: { initialDate: string | null
       const data: { success?: boolean; error?: string; tokenDate?: string } = await res.json()
       if (data.success) {
         setMessage({ ok: true, text: t('success') })
+        setSent(true)
         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 (
-    <>
-      <p>{t('info')}</p>
+    <div className="centered">
       <br />
-      <div className="centered">
-        <p>
-          {t('lastRequest')}:{' '}
-          <span className="yellow-info">{date ? new Date(date).toLocaleString(locale) : t('never')}</span>
-        </p>
-        <br />
-        <button onClick={request} className="sec-token-button" disabled={busy}>
-          {busy ? t('requesting') : t('request')}
+      <br />
+      <p>{t('requestDateLabel')}</p>
+      <p><span className="yellow-info">{date ? formatDate(date) : t('never')}</span></p>
+      <br />
+      <form id="uw-sec-token-form" onSubmit={request} acceptCharset="utf-8">
+        <button
+          className="sec-token-button"
+          type="submit"
+          disabled={busy || sent}
+          style={sent ? { color: '#d79602' } : undefined}
+        >
+          {sent ? t('sent') : busy ? t('requesting') : t('request')}
         </button>
-        <hr />
-        <div className="alert-message" style={{ display: message ? 'block' : 'none' }}>
-          {message && <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>}
-        </div>
+      </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>
   )
 }

web-next/app/[locale]/security-token/page.tsx

@@ -31,6 +31,22 @@ export default async function SecurityTokenPage({ params }: { params: Promise<{
   return (
     <PageShell title={t('title')}>
       <ServiceBox>
+        <br />
+        <p>{t.rich('info1', { b: (c) => <span>{c}</span> })}</p>
+        <p>{t('info2')}</p>
+        <br />
+        <p>{t('info3')}</p>
+        <p>{t('info4')}</p>
+        <br />
+        <p><span className="red-info2">{t('warning')}</span></p>
+        <br />
+        <fieldset>
+          <legend>NOTA</legend>
+          <div className="separate2">
+            <p>{t('note')}</p>
+          </div>
+        </fieldset>
+
         <SecurityTokenForm initialDate={tokenDate} />
       </ServiceBox>
     </PageShell>

web-next/app/[locale]/vote-points/page.tsx

@@ -1,7 +1,9 @@
 import { getTranslations, setRequestLocale } from 'next-intl/server'
 import { getSession } from '@/lib/session'
-import { getVoteSites } from '@/lib/vote'
+import { getRealmName } from '@/lib/realm'
+import { getVoteSitesForAccount } from '@/lib/vote'
 import { PageShell } from '@/components/PageShell'
+import { ServiceBox } from '@/components/ServiceBox'
 import { VotePanel } from '@/components/VotePanel'
 
 export const dynamic = 'force-dynamic'
@@ -11,13 +13,36 @@ export default async function VotePointsPage({ params }: { params: Promise<{ loc
   setRequestLocale(locale)
   const t = await getTranslations('Vote')
   const session = await getSession()
-  const sites = await getVoteSites()
+  const [realm, sites] = await Promise.all([getRealmName(), getVoteSitesForAccount(session.accountId ?? 0)])
+  const sub = (s: string) => s.replaceAll('{server}', realm)
+  const sections = t.raw('infoSections') as { h: string; lines: string[] }[]
+
   return (
     <PageShell title={t('title')}>
+      <ServiceBox>
+        <br />
+        {sections.map((s, i) => (
+          <div key={i}>
+            <span>{sub(s.h)}</span>
+            {s.lines.map((l, j) => (
+              <p key={j}>{sub(l)}</p>
+            ))}
+            {i < sections.length - 1 && (
+              <>
+                <br />
+                <hr />
+                <br />
+              </>
+            )}
+          </div>
+        ))}
+      </ServiceBox>
+
       <div className="box-content">
-        <div className="body-box-content centered">
-          <p>{t('info', { server: 'NovaWoW' })}</p>
-          <br />
+        <div className="title-box-content">
+          <h2>{t('sitesTitle')}</h2>
+        </div>
+        <div className="body-box-content centered" id="vote-panel">
           <VotePanel sites={sites} canVote={Boolean(session.accountId)} />
         </div>
       </div>