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 />
     </>
   )
 }