Fase 3 (islas): cambiar contraseña y token de seguridad en React/TSX

Ambas vistas ya devolvían JSON en POST y exigen sesión, así que sin cambio de backend:

- ChangePasswordForm.tsx: 4 campos (actual/nueva/confirmar/token) con mostrar-ocultar;
  POST form-urlencoded + CSRF a change_password; mensaje HTML; si el backend responde
  redirect:true (logout por seguridad), redirige a login.
- SecurityTokenForm.tsx: muestra la fecha del token y un botón que solicita uno nuevo;
  POST -> actualiza la fecha con token_date de la respuesta.
- Plantillas: los <form> + scripts jQuery se sustituyen por las islas
  (#change-password-app / #security-token-app) con data-csrf/data-url. El texto
  informativo y los enlaces se quedan en Django.

Verificado: check OK; ambas vistas siguen redirigiendo a login/index sin sesión.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-12 21:26:30 +00:00
parent b2069df4c3
commit d0febb4855
7 changed files with 220 additions and 39 deletions
+8 -11
View File
@@ -3,7 +3,6 @@
<div class="body-content">
<div class="title-content"><h1>Token de seguridad</h1></div>
<div class="box-content">
<script src="{{ URL_PRINCIPAL }}/static/nw-themes/nw-ryu/nw-js-handlers/security_token_response.js"></script>
<div class="title-box-content"><h2>Información</h2><a class="back-to-account" href="my-account">Regresar a mi cuenta</a><a class="back-to-account-responsive" href="my-account">Regresar</a></div>
<div class="body-box-content justified">
<br>
@@ -24,16 +23,14 @@
<div class="centered">
<br>
<br>
<p>Fecha de solicitud de Token de seguridad:</p>
<p><span id="token-date">{{ token_date }}</span></p>
<br>
<form id="nw-sec-token-form" method="POST">
{% csrf_token %}
<button class="sec-token-button" type="submit" name="securitytoken" data-id="Sectoken">Solicitar token</button>
</form>
<br>
<hr>
<div class="alert-message" id="sec-token-response"></div>
{% load django_vite %}
<!-- Isla React (Vite): solicitud del token de seguridad.
POST a la propia vista (JSON), actualiza la fecha. -->
<div id="security-token-app"
data-csrf="{{ csrf_token }}"
data-url="{% url 'security_token' %}"
data-token-date="{{ token_date }}"></div>
{% vite_asset 'src/entries/security_token.tsx' %}
<br>
<p><a href="recover">He olvidado el Token de seguridad</a></p>
<br>