Fix captcha: resetear Turnstile tras un fallo (token de un solo uso)

Al fallar (p.ej. contraseña incorrecta) el token de Turnstile ya se consumió en el
servidor; el reintento reenviaba el mismo token y daba "captcha fallida" aunque
estuviera resuelto. Se resetea el widget (setCaptcha('') + captchaKey++ con
<Turnstile key={captchaKey}>, mismo patrón que recover/restore/quest) en login,
create-account y trade-points (venta y canje). El check de código no usa captcha,
no se resetea ahí.

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

web-next/app/[locale]/create-account/RegisterForm.tsx

@@ -62,6 +62,7 @@ export function RegisterForm() {
   const [notUs, setNotUs] = useState(false)
   const [busy, setBusy] = useState(false)
   const [captcha, setCaptcha] = useState('')
+  const [captchaKey, setCaptchaKey] = useState(0) // remonta el widget para pedir un token nuevo
   const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
 
   const canSubmit = accepted && notUs && !busy
@@ -102,9 +103,14 @@ export function RegisterForm() {
       } else {
         const key = (ERROR_KEYS as readonly string[]).includes(data.error ?? '') ? data.error! : 'genericError'
         setMessage({ ok: false, text: t(key) })
+        // El token de Turnstile es de un solo uso: resetear tras un fallo.
+        setCaptcha('')
+        setCaptchaKey((k) => k + 1)
       }
     } catch {
       setMessage({ ok: false, text: t('genericError') })
+      setCaptcha('')
+      setCaptchaKey((k) => k + 1)
     } finally {
       setBusy(false)
     }
@@ -162,7 +168,7 @@ export function RegisterForm() {
             </tr>
             <tr>
               <td>
-                <Turnstile onVerify={setCaptcha} />
+                <Turnstile key={captchaKey} onVerify={setCaptcha} />
               </td>
             </tr>
             <tr>

web-next/app/[locale]/log-in/LoginForm.tsx

@@ -14,6 +14,7 @@ export function LoginForm() {
   const [showPw, setShowPw] = useState(false)
   const [busy, setBusy] = useState(false)
   const [captcha, setCaptcha] = useState('')
+  const [captchaKey, setCaptchaKey] = useState(0) // remonta el widget para pedir un token nuevo
   const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
 
   async function handleSubmit(e: React.FormEvent) {
@@ -43,10 +44,16 @@ export function LoginForm() {
       } else {
         const key = (ERROR_KEYS as readonly string[]).includes(data.error ?? '') ? data.error! : 'genericError'
         setMessage({ ok: false, text: t(key) })
+        // El token de Turnstile es de un solo uso: tras un fallo hay que resetear
+        // el widget para emitir uno nuevo, o el reintento daría "captcha ya usado".
+        setCaptcha('')
+        setCaptchaKey((k) => k + 1)
         setBusy(false)
       }
     } catch {
       setMessage({ ok: false, text: t('genericError') })
+      setCaptcha('')
+      setCaptchaKey((k) => k + 1)
       setBusy(false)
     }
   }
@@ -93,7 +100,7 @@ export function LoginForm() {
             </tr>
             <tr>
               <td>
-                <Turnstile onVerify={setCaptcha} />
+                <Turnstile key={captchaKey} onVerify={setCaptcha} />
               </td>
             </tr>
             <tr>

web-next/components/TradePointsForm.tsx

@@ -89,6 +89,7 @@ function SellForm({ characters, visible }: { characters: CharOption[]; visible:
   const [password, setPassword] = useState('')
   const [token, setToken] = useState('')
   const [captcha, setCaptcha] = useState('')
+  const [captchaKey, setCaptchaKey] = useState(0)
   const [busy, setBusy] = useState(false)
   const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
   const [created, setCreated] = useState<{ code: string; points: number; gold: number } | null>(null)
@@ -123,9 +124,13 @@ function SellForm({ characters, visible }: { characters: CharOption[]; visible:
         setToken('')
       } else {
         setMessage({ ok: false, text: tradeError(data.error) })
+        setCaptcha('')
+        setCaptchaKey((k) => k + 1)
       }
     } catch {
       setMessage({ ok: false, text: tradeError() })
+      setCaptcha('')
+      setCaptchaKey((k) => k + 1)
     } finally {
       setBusy(false)
     }
@@ -146,7 +151,7 @@ function SellForm({ characters, visible }: { characters: CharOption[]; visible:
             </td></tr>
             <tr><td><br /><PasswordInput id="password-sell" value={password} onChange={setPassword} placeholder={t('trade.passwordPlaceholder')} maxLength={16} /></td></tr>
             <tr><td><input type="text" maxLength={6} value={token} onChange={(e) => setToken(e.target.value)} placeholder={t('trade.tokenPlaceholder')} required /></td></tr>
-            <tr><td><Turnstile onVerify={setCaptcha} /></td></tr>
+            <tr><td><Turnstile key={captchaKey} onVerify={setCaptcha} /></td></tr>
             <tr><td><button type="submit" className="trade-points-sell-button" disabled={busy}>{busy ? t('trade.creating') : t('trade.createButton')}</button></td></tr>
           </tbody>
         </table>
@@ -178,6 +183,7 @@ function BuyForm({ characters, visible }: { characters: CharOption[]; visible: b
   const [password, setPassword] = useState('')
   const [token, setToken] = useState('')
   const [captcha, setCaptcha] = useState('')
+  const [captchaKey, setCaptchaKey] = useState(0)
   const [busy, setBusy] = useState(false)
   const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
   const [checkInfo, setCheckInfo] = useState<{ points: number; gold: number } | null>(null)
@@ -230,9 +236,13 @@ function BuyForm({ characters, visible }: { characters: CharOption[]; visible: b
         setCheckInfo(null)
       } else {
         setMessage({ ok: false, text: tradeError(data.error) })
+        setCaptcha('')
+        setCaptchaKey((k) => k + 1)
       }
     } catch {
       setMessage({ ok: false, text: tradeError() })
+      setCaptcha('')
+      setCaptchaKey((k) => k + 1)
     } finally {
       setBusy(false)
     }
@@ -254,7 +264,7 @@ function BuyForm({ characters, visible }: { characters: CharOption[]; visible: b
             </td></tr>
             <tr><td><br /><PasswordInput id="password-buy" value={password} onChange={setPassword} placeholder={t('trade.passwordPlaceholder')} maxLength={16} /></td></tr>
             <tr><td><input type="text" maxLength={6} value={token} onChange={(e) => setToken(e.target.value)} placeholder={t('trade.tokenPlaceholder')} required /></td></tr>
-            <tr><td><Turnstile onVerify={setCaptcha} /></td></tr>
+            <tr><td><Turnstile key={captchaKey} onVerify={setCaptcha} /></td></tr>
             <tr><td><button type="button" className="trade-points-check-button" disabled={busy} onClick={handleCheck}>{t('trade.checkButton')}</button></td></tr>
             <tr><td><button type="submit" className="trade-points-buy-button" disabled={busy}>{busy ? t('trade.processing') : t('trade.redeemButton')}</button></td></tr>
           </tbody>