Inna/NightSpire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Inna Hoover Brown
2026-07-12 21:26:30 +00:00
parent b2069df4c3
commit d0febb4855
7 changed files with 220 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
home/templates/partials/change_password.html
+8 -28
View File
@@ -13,34 +13,14 @@
<div class="centered">
<br>
<br>
<form action="" method="POST" id="nw-change-password-form" accept-charset="utf-8">
<table class="middle-center-table">
<script
src="{{ URL_PRINCIPAL }}/static/nw-themes/nw-ryu/nw-js-handlers/change_password_response.js">
</script>
<tbody><tr>
<td><input type="password" maxlength="16" name="cur-password" id="cur-password" placeholder="Contraseña actual" autofocus="">
<span class="far fa-eye toggle-cur-password"></span></td>
</tr>
<tr>
<td><input type="password" maxlength="16" name="new-password" id="new-password" placeholder="Contraseña nueva">
<span class="far fa-eye toggle-new-password"></span></td>
</tr>
<tr>
<td><input type="password" maxlength="16" name="conf-new-password" id="conf-new-password" placeholder="Confirmar contraseña nueva">
<span class="far fa-eye toggle-conf-new-password"></span></td>
</tr>
<tr>
<td><input type="password" maxlength="6" name="security-token" id="security-token" placeholder="Token de seguridad">
<span class="far fa-eye toggle-token"></span></td>
</tr>
<tr>
<td><button type="submit" name="changepassword" class="change-password-button" data-id="CambiarPassword">Cambiar contraseña</button></td>
</tr>
</tbody></table>
</form>
<hr>
<div class="alert-message" id="change-password-response"></div>
{% load django_vite %}
<!-- Isla React (Vite): cambio de contraseña. POST a la propia
vista (JSON) -> re-deriva el verifier bnet. -->
<div id="change-password-app"
data-csrf="{{ csrf_token }}"
data-url="{% url 'change_password' %}"
data-login-url="{% url 'login' %}"></div>
{% vite_asset 'src/entries/change_password.tsx' %}
<br>
</div>
</div>
home/templates/partials/security_token.html
+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>