Implementa la recuperación de cuenta (contraseña / cuentas / activación) + islas
recover_account_view era un stub que solo renderizaba (los formularios no tenían backend y el HTML arrastraba un reCAPTCHA de otro dominio). Ahora es funcional: Backend: - Modelo PasswordReset (token+email+expiración 1h) + migración 0014. - recover_account_view maneja POST JSON con 3 tipos, todo por email (bnet), con respuestas genéricas anti-enumeración: * password: crea token y envía enlace de reset (emails/password_reset.html). * accountname: envía las cuentas de juego ligadas (emails/account_names.html). * activation: reenvía el enlace de activación pendiente (emails/activation.html). - reset_password_view: GET valida el token (isla), POST re-deriva el verifier SRP6 v2 de la cuenta bnet (bnet.bnet_make_registration) y lo actualiza; marca el token usado. Ruta 'reset-password'. - Resiliente si la BD de cuentas (AzerothCore) no está disponible: mensaje limpio, nunca 500. Frontend (islas Vite): RecoverForm.tsx (selector de tipo + email) y ResetPassword.tsx (nueva contraseña con token). Se elimina el reCAPTCHA roto; se puede añadir uno propio si se aportan claves. Verificado en producción: los 3 flujos devuelven éxito genérico; reset valida token y contraseñas; token válido no provoca 500. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,97 @@
|
||||
import { useState } from 'react'
|
||||
|
||||
interface Props {
|
||||
recoverUrl: string
|
||||
csrfToken: string
|
||||
}
|
||||
|
||||
const OPTIONS = [
|
||||
{ value: 'password', label: 'Contraseña' },
|
||||
{ value: 'accountname', label: 'Nombre de cuenta' },
|
||||
{ value: 'activation', label: 'Enlace de activación' },
|
||||
] as const
|
||||
|
||||
export function RecoverForm({ recoverUrl, csrfToken }: Props) {
|
||||
const [type, setType] = useState<string>('password')
|
||||
const [email, setEmail] = useState('')
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (busy) return
|
||||
setBusy(true)
|
||||
setMessage(null)
|
||||
|
||||
const body = new URLSearchParams()
|
||||
body.set('type', type)
|
||||
body.set('email', email.trim())
|
||||
body.set('csrfmiddlewaretoken', csrfToken)
|
||||
|
||||
try {
|
||||
const resp = await fetch(recoverUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
'X-CSRFToken': csrfToken,
|
||||
Accept: 'application/json',
|
||||
},
|
||||
credentials: 'same-origin',
|
||||
body: body.toString(),
|
||||
})
|
||||
if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
|
||||
const data: { success?: boolean; message?: string } = await resp.json()
|
||||
setMessage({ ok: !!data.success, text: data.message || '' })
|
||||
} catch {
|
||||
setMessage({ ok: false, text: 'Error en el servidor. Inténtalo de nuevo más tarde.' })
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<p>Escoge la opción acorde a la información que quieres recuperar</p>
|
||||
<br />
|
||||
<form id="nw-recover-form" onSubmit={handleSubmit} acceptCharset="utf-8">
|
||||
<select id="selection" value={type} onChange={(e) => setType(e.target.value)}>
|
||||
{OPTIONS.map((o) => (
|
||||
<option key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<table className="middle-center-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
placeholder="Correo electrónico de Gmail"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<button type="submit" className="recover-button" disabled={busy}>
|
||||
{busy ? 'Enviando…' : 'Solicitar'}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</form>
|
||||
<hr />
|
||||
<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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
import { useState } from 'react'
|
||||
|
||||
interface Props {
|
||||
valid: boolean
|
||||
token: string
|
||||
resetUrl: string
|
||||
recoverUrl: string
|
||||
csrfToken: string
|
||||
}
|
||||
|
||||
export function ResetPassword({ valid, token, resetUrl, recoverUrl, csrfToken }: Props) {
|
||||
const [password, setPassword] = useState('')
|
||||
const [confPassword, setConfPassword] = useState('')
|
||||
const [showPw, setShowPw] = useState(false)
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
|
||||
const [done, setDone] = useState(false)
|
||||
|
||||
if (!valid) {
|
||||
return (
|
||||
<div className="body-box-content centered">
|
||||
<p className="red-form-response">El enlace no es válido o ha caducado.</p>
|
||||
<br />
|
||||
<p>
|
||||
Puedes solicitar uno nuevo en <a href={recoverUrl}>recuperar cuenta</a>.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (busy || done) return
|
||||
if (password.trim() === '' || password.trim() !== confPassword.trim()) {
|
||||
setMessage({ ok: false, text: 'Las contraseñas no coinciden.' })
|
||||
return
|
||||
}
|
||||
setBusy(true)
|
||||
setMessage(null)
|
||||
|
||||
const body = new URLSearchParams()
|
||||
body.set('token', token)
|
||||
body.set('new-password', password.trim())
|
||||
body.set('conf-password', confPassword.trim())
|
||||
body.set('csrfmiddlewaretoken', csrfToken)
|
||||
|
||||
try {
|
||||
const resp = await fetch(resetUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
'X-CSRFToken': csrfToken,
|
||||
Accept: 'application/json',
|
||||
},
|
||||
credentials: 'same-origin',
|
||||
body: body.toString(),
|
||||
})
|
||||
if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
|
||||
const data: { success?: boolean; message?: string; redirect?: string } = await resp.json()
|
||||
setMessage({ ok: !!data.success, text: data.message || '' })
|
||||
if (data.success) {
|
||||
setDone(true)
|
||||
if (data.redirect) {
|
||||
setTimeout(() => {
|
||||
window.location.href = data.redirect as string
|
||||
}, 2500)
|
||||
}
|
||||
} else {
|
||||
setBusy(false)
|
||||
}
|
||||
} catch {
|
||||
setMessage({ ok: false, text: 'Error en el servidor. Inténtalo de nuevo más tarde.' })
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="body-box-content centered">
|
||||
<form id="nw-reset-form" onSubmit={handleSubmit} acceptCharset="utf-8">
|
||||
<table className="middle-center-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<input
|
||||
type={showPw ? 'text' : 'password'}
|
||||
maxLength={16}
|
||||
name="new-password"
|
||||
id="new-password"
|
||||
placeholder="Nueva contraseña"
|
||||
autoFocus
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
<span
|
||||
className={`far toggle-password ${showPw ? 'fa-eye-slash' : 'fa-eye'}`}
|
||||
onClick={() => setShowPw((v) => !v)}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input
|
||||
type={showPw ? 'text' : 'password'}
|
||||
maxLength={16}
|
||||
name="conf-password"
|
||||
id="conf-password"
|
||||
placeholder="Confirmar contraseña"
|
||||
value={confPassword}
|
||||
onChange={(e) => setConfPassword(e.target.value)}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<button type="submit" className="login-button" disabled={busy || done}>
|
||||
{done ? 'Hecho' : busy ? 'Guardando…' : 'Restablecer contraseña'}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user