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/components/RenameGuildForm.tsx

@@ -0,0 +1,148 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from '@/i18n/navigation'
+import type { GmGuild } from '@/lib/guild'
+
+function renameError(error?: string): string {
+  switch (error) {
+    case 'missingFields':
+      return 'Completa todos los campos.'
+    case 'invalidName':
+      return 'El nombre debe tener de 1 a 24 caracteres, solo letras (A-Z, a-z) y espacios.'
+    case 'invalidToken':
+      return 'El token de seguridad no es válido.'
+    case 'notGuildMaster':
+      return 'No eres Maestro de esa hermandad.'
+    case 'nameTaken':
+      return 'Ya existe una hermandad con ese nombre.'
+    case 'insufficientPoints':
+      return 'No tienes suficientes PD (se requieren 1000).'
+    case 'soapError':
+      return 'No se pudo aplicar el cambio (servidor de juego no disponible). Inténtalo más tarde.'
+    case 'notAuthenticated':
+      return 'Tu sesión ha expirado. Inicia sesión de nuevo.'
+    default:
+      return 'No se pudo renombrar la hermandad. Inténtalo de nuevo.'
+  }
+}
+
+export function RenameGuildForm({ guilds }: { guilds: GmGuild[] }) {
+  const router = useRouter()
+  const [guildId, setGuildId] = useState('')
+  const [newName, setNewName] = useState('')
+  const [token, setToken] = useState('')
+  const [showToken, setShowToken] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [done, setDone] = useState(false)
+  const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
+
+  if (guilds.length === 0) {
+    return (
+      <div className="centered">
+        <br />
+        <span>No hay personajes Maestros de hermandad</span>
+        <br />
+      </div>
+    )
+  }
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    if (busy || done) return
+    if (!guildId || !newName.trim() || !token.trim()) {
+      setMessage({ ok: false, text: renameError('missingFields') })
+      return
+    }
+    if (!window.confirm('¿Estás seguro de renombrar la hermandad seleccionada?')) return
+
+    setBusy(true)
+    setMessage(null)
+    try {
+      const res = await fetch('/api/guild/rename', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify({ guildId: Number(guildId), newName: newName.trim(), token: token.trim() }),
+      })
+      const data: { success?: boolean; error?: string; newName?: string } = await res.json()
+      if (data.success) {
+        setDone(true)
+        setMessage({ ok: true, text: `¡Hermandad renombrada a "${data.newName}"! Puede que los miembros conectados deban reconectar para verlo.` })
+        setNewName('')
+        setToken('')
+        setTimeout(() => router.refresh(), 3000)
+      } else {
+        setMessage({ ok: false, text: renameError(data.error) })
+      }
+    } catch {
+      setMessage({ ok: false, text: renameError() })
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="centered">
+      <form id="uw-rename-guild-form" onSubmit={handleSubmit} acceptCharset="utf-8">
+        <table className="middle-center-table">
+          <tbody>
+            <tr>
+              <td>
+                <select value={guildId} onChange={(e) => setGuildId(e.target.value)} required>
+                  <option value="" disabled>Selecciona una hermandad</option>
+                  {guilds.map((g) => (
+                    <option key={g.guildid} value={g.guildid}>{g.name}</option>
+                  ))}
+                </select>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <input
+                  type="text"
+                  maxLength={24}
+                  name="new-guild-name"
+                  placeholder="Nuevo nombre de la hermandad"
+                  value={newName}
+                  onChange={(e) => setNewName(e.target.value)}
+                  required
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <input
+                  type={showToken ? 'text' : 'password'}
+                  maxLength={6}
+                  id="security-token"
+                  placeholder="Token de seguridad"
+                  value={token}
+                  onChange={(e) => setToken(e.target.value)}
+                  required
+                />{' '}
+                <span
+                  className={`far ${showToken ? 'fa-eye-slash' : 'fa-eye'} toggle-token`}
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => setShowToken((s) => !s)}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <button type="submit" className="rename-guild-button" disabled={busy || done} style={done ? { color: '#d79602' } : undefined}>
+                  {done ? 'HERMANDAD RENOMBRADA' : busy ? 'RENOMBRANDO HERMANDAD' : 'RENOMBRAR HERMANDAD'}
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </form>
+      <hr />
+      <div className="alert-message" id="rename-guild-response" style={{ display: message ? 'block' : 'none' }}>
+        {message && <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>}
+      </div>
+    </div>
+  )
+}

web-next/components/VotePanel.tsx

@@ -1,16 +1,23 @@
 'use client'
 
 import { useState } from 'react'
-import { useTranslations } from 'next-intl'
-import type { VoteSite } from '@/lib/vote'
+import { useTranslations, useLocale } from 'next-intl'
+import { useRouter } from '@/i18n/navigation'
+import type { VoteSiteStatus } from '@/lib/vote'
 
-export function VotePanel({ sites, canVote }: { sites: VoteSite[]; canVote: boolean }) {
+const REFRESH_ICON = '/nw-themes/nw-ryu/nw-images/nw-icons/refresh.webp'
+
+export function VotePanel({ sites, canVote }: { sites: VoteSiteStatus[]; canVote: boolean }) {
   const t = useTranslations('Vote')
+  const locale = useLocale()
+  const router = useRouter()
   const [busyId, setBusyId] = useState<number | null>(null)
+  const [voted, setVoted] = useState<Set<number>>(new Set())
   const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
 
-  async function vote(site: VoteSite) {
-    if (busyId !== null) return
+  async function vote(site: VoteSiteStatus) {
+    if (busyId !== null || voted.has(site.id)) return
+    // Abre el sitio de votos en otra pestaña (como el original) y acredita al volver.
     window.open(site.url, '_blank', 'noopener,noreferrer')
     setBusyId(site.id)
     setMessage(null)
@@ -24,14 +31,18 @@ export function VotePanel({ sites, canVote }: { sites: VoteSite[]; canVote: bool
       const d: { success?: boolean; error?: string; points?: number; siteName?: string; hours?: number; minutes?: number } =
         await res.json()
       if (d.success) {
+        setVoted((v) => new Set(v).add(site.id))
         setMessage({ ok: true, text: t('success', { site: d.siteName ?? site.name, points: d.points ?? 0 }) })
       } else if (d.error === 'cooldown') {
         setMessage({ ok: false, text: t('cooldown', { hours: d.hours ?? 0, minutes: d.minutes ?? 0 }) })
+        setTimeout(() => setMessage(null), 5000)
       } else {
         setMessage({ ok: false, text: t(d.error === 'siteNotFound' ? 'siteNotFound' : 'genericError') })
+        setTimeout(() => setMessage(null), 5000)
       }
     } catch {
       setMessage({ ok: false, text: t('genericError') })
+      setTimeout(() => setMessage(null), 5000)
     } finally {
       setBusyId(null)
     }
@@ -40,33 +51,70 @@ export function VotePanel({ sites, canVote }: { sites: VoteSite[]; canVote: bool
   if (sites.length === 0) return <p className="second-brown">{t('noSites')}</p>
 
   return (
-    <div className="centered">
-      {sites.map((s) => (
-        <div key={s.id} className="item-box">
-          {s.image_url && (
-            // eslint-disable-next-line @next/next/no-img-element
-            <img className="item-img-box" src={s.image_url} alt={s.name} />
-          )}
-          <p className="yellow-info">{s.name}</p>
-          <p className="vp-color small-font">
-            {s.points} {t('pv')}
-          </p>
-          {canVote ? (
-            <button type="button" className="vote-button" onClick={() => vote(s)} disabled={busyId !== null}>
-              {busyId === s.id ? t('voting') : t('vote')}
-            </button>
-          ) : (
-            <a href={s.url} target="_blank" rel="noopener noreferrer">
-              {t('vote')}
-            </a>
-          )}
-        </div>
-      ))}
+    <>
+      <button className="refresh-button" type="button" onClick={() => router.refresh()} title={t('refresh')}>
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img className="refresh-icon" src={REFRESH_ICON} title={t('refresh')} alt={t('refresh')} />
+      </button>
+      <p><span>{t('note')}</span></p>
+      <br />
+
+      {sites.map((s) => {
+        const isVoted = voted.has(s.id)
+        return (
+          <div key={s.id} className="inline-div">
+            <table>
+              <tbody>
+                <tr>
+                  <td>
+                    {s.image_url && (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img className="img-med-icon" src={s.image_url} title={s.name} alt={s.name} />
+                    )}
+                  </td>
+                </tr>
+                <tr><td>{s.name}</td></tr>
+                <tr><td><hr /></td></tr>
+                <tr><td className="lefted">{t('pv')}: <span>{s.points}</span></td></tr>
+                <tr>
+                  <td className="lefted small-font third-brown">
+                    {s.lastVoteAt ? t('lastVote', { date: new Date(s.lastVoteAt).toLocaleString(locale) }) : t('neverVoted')}
+                  </td>
+                </tr>
+                <tr><td><hr /></td></tr>
+                <tr>
+                  <td>
+                    {canVote ? (
+                      <button
+                        type="button"
+                        name="vote"
+                        className="vote-button"
+                        value={s.url}
+                        onClick={() => vote(s)}
+                        disabled={busyId !== null || isVoted}
+                        style={isVoted ? { color: '#d79602' } : undefined}
+                      >
+                        {isVoted ? t('voted') : busyId === s.id ? t('voting') : t('vote')}
+                      </button>
+                    ) : (
+                      <a className="vote-button" href={s.url} target="_blank" rel="noopener noreferrer">
+                        {t('vote')}
+                      </a>
+                    )}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        )
+      })}
+
       <hr />
-      <div className="alert-message" style={{ display: message ? 'block' : 'none' }}>
+      <div className="alert-message" id="voteResponse" style={{ display: message ? 'block' : 'none' }}>
         {message && <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>}
       </div>
       {!canVote && <p className="second-brown small-font">{t('loginToVote')}</p>}
-    </div>
+      <br />
+    </>
   )
 }