Fase 3 (isla): renombrar hermandad en React/TSX
rename_guild_view ya devolvía JSON (session_id de Stripe). GuildRenameForm.tsx:
select de hermandades (donde el usuario es GM) + nuevo nombre/confirmar + contraseña
+ token -> Stripe Checkout. La vista pasa guild_names por json_script; se conserva
la rama {% if no_guild_leader_message %} en Django. Se elimina el JS jQuery muerto.
Verificado: check OK, render de ambas ramas correcto, redirige a login sin sesión.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,114 @@
|
||||
import { useState } from 'react'
|
||||
import { redirectToStripeCheckout } from '../stripe'
|
||||
|
||||
interface Props {
|
||||
url: string
|
||||
csrfToken: string
|
||||
guilds: string[]
|
||||
}
|
||||
|
||||
export function GuildRenameForm({ url, csrfToken, guilds }: Props) {
|
||||
const [oldName, setOldName] = useState('')
|
||||
const [newName, setNewName] = useState('')
|
||||
const [confName, setConfName] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [token, setToken] = useState('')
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [message, setMessage] = useState<{ ok: boolean; html: string } | null>(null)
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (busy) return
|
||||
setBusy(true)
|
||||
setMessage(null)
|
||||
|
||||
const body = new URLSearchParams()
|
||||
body.set('old-guild-name', oldName)
|
||||
body.set('new-guild-name', newName.trim())
|
||||
body.set('conf-new-guild-name', confName.trim())
|
||||
body.set('cur-password', password.trim())
|
||||
body.set('security-token', token.trim())
|
||||
body.set('csrfmiddlewaretoken', csrfToken)
|
||||
|
||||
try {
|
||||
const resp = await fetch(url, {
|
||||
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; session_id?: string; stripe_public_key?: string } =
|
||||
await resp.json()
|
||||
if (data.success && data.session_id && data.stripe_public_key) {
|
||||
await redirectToStripeCheckout(data.stripe_public_key, data.session_id)
|
||||
return
|
||||
}
|
||||
setMessage({ ok: !!data.success, html: data.message || '' })
|
||||
setBusy(false)
|
||||
} catch {
|
||||
setMessage({ ok: false, html: '<span class="red-form-response">Error al iniciar el pago. Inténtalo más tarde.</span>' })
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<form id="nw-rename-guild-form" onSubmit={handleSubmit} acceptCharset="utf-8">
|
||||
<table className="middle-center-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<select name="old-guild-name" value={oldName} onChange={(e) => setOldName(e.target.value)} required>
|
||||
<option value="">Selecciona tu hermandad</option>
|
||||
{guilds.map((g) => (
|
||||
<option value={g} key={g}>{g}</option>
|
||||
))}
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="text" maxLength={24} name="new-guild-name" placeholder="Nuevo nombre de hermandad"
|
||||
value={newName} onChange={(e) => setNewName(e.target.value)} required />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="text" maxLength={24} name="conf-new-guild-name" placeholder="Confirmar nuevo nombre"
|
||||
value={confName} onChange={(e) => setConfName(e.target.value)} required />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="password" name="cur-password" placeholder="Contraseña actual"
|
||||
value={password} onChange={(e) => setPassword(e.target.value)} required />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="text" name="security-token" placeholder="Token de seguridad"
|
||||
value={token} onChange={(e) => setToken(e.target.value)} required />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<button type="submit" className="rename-guild-button" disabled={busy}>
|
||||
{busy ? 'Procesando…' : 'Proceder al Pago'}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</form>
|
||||
<hr />
|
||||
<div className="alert-message" id="rename-guild-response" style={{ display: message ? 'block' : 'none' }}>
|
||||
{message && <span dangerouslySetInnerHTML={{ __html: message.html }} />}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { GuildRenameForm } from '../components/GuildRenameForm'
|
||||
|
||||
const el = document.getElementById('rename-guild-app')
|
||||
if (el) {
|
||||
const dEl = document.getElementById('rename-guild-data')
|
||||
const guilds: string[] = dEl ? JSON.parse(dEl.textContent || '[]') : []
|
||||
createRoot(el).render(
|
||||
<StrictMode>
|
||||
<GuildRenameForm url={el.dataset.url || ''} csrfToken={el.dataset.csrf || ''} guilds={guilds} />
|
||||
</StrictMode>,
|
||||
)
|
||||
}
|
||||
@@ -27,6 +27,7 @@ export default defineConfig({
|
||||
character_purchase: resolve(__dirname, 'src/entries/character_purchase.tsx'),
|
||||
gold_character: resolve(__dirname, 'src/entries/gold_character.tsx'),
|
||||
transfer_character: resolve(__dirname, 'src/entries/transfer_character.tsx'),
|
||||
rename_guild: resolve(__dirname, 'src/entries/rename_guild.tsx'),
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -10,7 +10,6 @@
|
||||
<a class="back-to-account-responsive" href="{% url 'my-account' %}">Regresar</a>
|
||||
</div>
|
||||
<div class="body-box-content justified">
|
||||
<script src="{{ URL_PRINCIPAL }}/static/nw-themes/nw-ryu/nw-js-handlers/rename_guild_response.js"></script>
|
||||
<br>
|
||||
<p>La herramienta <span>Renombrar hermandad</span> te permite cambiar de nombre a una hermandad de la cual seas Maestro de Hermandad.</p>
|
||||
<br>
|
||||
@@ -32,41 +31,13 @@
|
||||
{% if no_guild_leader_message %}
|
||||
<span class="red-form-response">{{ no_guild_leader_message }}</span>
|
||||
{% else %}
|
||||
<form id="nw-rename-guild-form" method="POST" action="{% url 'rename-guild' %}" accept-charset="utf-8">
|
||||
{% csrf_token %}
|
||||
<table class="middle-center-table">
|
||||
<tr>
|
||||
<td>
|
||||
<select name="old-guild-name" id="old-guild-name">
|
||||
<option value="">Selecciona tu hermandad</option>
|
||||
{% for guild in guild_leader_data %}
|
||||
<option value="{{ guild.1 }}">{{ guild.1 }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="text" maxlength="24" name="new-guild-name" id="new-guild-name" placeholder="Nuevo nombre de hermandad"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="text" maxlength="24" name="conf-new-guild-name" id="conf-new-guild-name" placeholder="Confirmar nuevo nombre"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="password" name="cur-password" id="cur-password" placeholder="Contraseña actual"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="text" name="security-token" id="security-token" placeholder="Token de seguridad"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<button type="submit" class="rename-guild-button" data-id="RenameGuild">Proceder al Pago</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<hr>
|
||||
<div class="alert-message" id="rename-guild-response"></div>
|
||||
{% load django_vite %}
|
||||
<!-- Isla React (Vite): renombrar hermandad (guild + campos -> Stripe). -->
|
||||
<div id="rename-guild-app"
|
||||
data-csrf="{{ csrf_token }}"
|
||||
data-url="{% url 'rename-guild' %}"></div>
|
||||
{{ guild_names|json_script:"rename-guild-data" }}
|
||||
{% vite_asset 'src/entries/rename_guild.tsx' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+2
-1
@@ -92,7 +92,8 @@ def rename_guild_view(request):
|
||||
|
||||
return render(request, 'account/rename_guild.html', {
|
||||
'guild_leader_data': guild_leader_data,
|
||||
'rename_cost': rename_cost
|
||||
'rename_cost': rename_cost,
|
||||
'guild_names': [g[1] for g in guild_leader_data],
|
||||
})
|
||||
@require_paid_stripe()
|
||||
def guild_rename_success_view(request):
|
||||
|
||||
Reference in New Issue
Block a user