Inna
14125dbd72
Desactiva la validación nativa del navegador ("Rellene este campo", formato de
email) en el resto de formularios (recover, reset-password, trade-points,
rename-guild, transfer-dp, gold, promo, transfer, quest, send-gift, 2FA, restore).
Los errores se muestran como red-form-response (por validación en cliente o del
servidor), consistente con login y create-account. Botones ya gateados por campos.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
102 lines
3.5 KiB
TypeScript
102 lines
3.5 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useTranslations } from 'next-intl'
|
|
import { useRouter } from '@/i18n/navigation'
|
|
import type { DeletedCharacter } from '@/lib/restore-character'
|
|
|
|
function restoreError(t: ReturnType<typeof useTranslations>, error?: string): string {
|
|
switch (error) {
|
|
case 'notFound':
|
|
return t('restoreChar.errors.notFound')
|
|
case 'notDeleted':
|
|
return t('restoreChar.errors.notDeleted')
|
|
case 'levelTooLow':
|
|
return t('restoreChar.errors.levelTooLow')
|
|
case 'tooOld':
|
|
return t('restoreChar.errors.tooOld')
|
|
case 'dkExists':
|
|
return t('restoreChar.errors.dkExists')
|
|
case 'nameTaken':
|
|
return t('restoreChar.errors.nameTaken')
|
|
case 'cooldown':
|
|
return t('restoreChar.errors.cooldown')
|
|
case 'notAuthenticated':
|
|
return t('restoreChar.errors.notAuthenticated')
|
|
default:
|
|
return t('restoreChar.errors.default')
|
|
}
|
|
}
|
|
|
|
export function RestoreCharacterForm({ characters }: { characters: DeletedCharacter[] }) {
|
|
const t = useTranslations('CharService')
|
|
const router = useRouter()
|
|
const [guid, setGuid] = useState('')
|
|
const [busy, setBusy] = useState(false)
|
|
const [done, setDone] = useState(false)
|
|
const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
|
|
|
|
const selectedCss = characters.find((c) => String(c.guid) === guid)?.classCss
|
|
|
|
if (characters.length === 0) {
|
|
return (
|
|
<div className="centered">
|
|
<br />
|
|
<br />
|
|
<span>{t('restoreChar.noCharacters')}</span>
|
|
<br />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault()
|
|
if (busy || done || !guid) return
|
|
setBusy(true)
|
|
setMessage(null)
|
|
try {
|
|
const res = await fetch('/api/character/restore', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'same-origin',
|
|
body: JSON.stringify({ guid: Number(guid) }),
|
|
})
|
|
const data: { success?: boolean; error?: string; name?: string } = await res.json()
|
|
if (data.success) {
|
|
setDone(true)
|
|
setMessage({ ok: true, text: t('restoreChar.successMsg', { name: data.name ?? '' }) })
|
|
setTimeout(() => router.refresh(), 3000)
|
|
} else {
|
|
setMessage({ ok: false, text: restoreError(t, data.error) })
|
|
}
|
|
} catch {
|
|
setMessage({ ok: false, text: restoreError(t) })
|
|
} finally {
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="centered">
|
|
<form noValidate id="uw-restore-form" onSubmit={handleSubmit} acceptCharset="utf-8">
|
|
<select className={selectedCss} value={guid} onChange={(e) => setGuid(e.target.value)} required>
|
|
<option value="" disabled>{t('restoreChar.selectPlaceholder')}</option>
|
|
{characters.map((c) => (
|
|
<option key={c.guid} value={c.guid} className={`${c.classCss} big-font`}>
|
|
{t('restoreChar.optionLabel', { name: c.name, level: c.level })}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<br />
|
|
<button type="submit" className="restore-button" disabled={busy || done || !guid} style={done ? { color: '#d79602' } : undefined}>
|
|
{done ? t('restoreChar.restored') : busy ? t('restoreChar.recovering') : t('restoreChar.recover')}
|
|
</button>
|
|
</form>
|
|
<hr />
|
|
<div className="alert-message" id="restore-response" style={{ display: message ? 'block' : 'none' }}>
|
|
{message && <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|