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

Fase 2 (isla): formulario de login en React/TSX

Browse Source 
El login se migra a una isla React. login_view ya devolvía JSON en POST, así que
el backend no cambia: LoginForm.tsx hace fetch (form-urlencoded + CSRF) al mismo
{% url 'login' %} y replica el comportamiento del antiguo login_response.js
(mostrar/ocultar contraseña, estados del botón, éxito -> redirige a my-account,
alert/locked, errores transitorios).

- partials/login.html: el <form> + el script jQuery se sustituyen por
  #login-app (con data-csrf/data-login-url/data-success-url) + {% vite_asset %}.
  La rama "ya conectado" y los enlaces (recover, create-account) siguen en Django.
- CSRF vía data-csrf="{{ csrf_token }}" (fija la cookie y da el token); el fetch
  lo manda como X-CSRFToken y csrfmiddlewaretoken. El navegador adjunta Referer.
- Nueva entry 'login' en vite.config.ts.

Verificado: check OK, la página monta la isla, POST devuelve JSON correcto.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Inna Hoover Brown
2026-07-12 20:41:46 +00:00
parent b8cd6bac0c
commit 0909567e0d
4 changed files with 174 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
home/templates/partials/login.html
+8 -25
View File
@@ -22,31 +22,14 @@
</div>
<div class="box-content">
<div class="body-box-content centered">
<script src="{{ URL_PRINCIPAL }}/static/nw-themes/nw-ryu/nw-js-handlers/login_response.js"></script>
<form action="{% url 'login' %}" method="POST" id="nw-login-form" accept-charset="utf-8" onsubmit="event.preventDefault(); submitLoginForm();">
{% csrf_token %}
<table class="middle-center-table">
<tr>
<td><input type="email" maxlength="320" name="email" id="username" placeholder="Correo electrónico" autofocus required></td>
</tr>
<tr>
<td>
<input type="password" maxlength="16" name="password" id="password" placeholder="Contraseña" required>
<span class="far fa-eye toggle-password" onclick="togglePasswordVisibility()"></span>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<button type="submit" class="login-button" id="login-button">Conectar</button>
</td>
</tr>
</table>
</form>
<hr>
<div class="alert-message" id="login-response"></div>
{% load django_vite %}
<!-- Isla React (Vite): formulario de login. POST a {% url 'login' %}
(que ya devuelve JSON) con CSRF; en éxito redirige a my-account. -->
<div id="login-app"
data-csrf="{{ csrf_token }}"
data-login-url="{% url 'login' %}"
data-success-url="my-account"></div>
{% vite_asset 'src/entries/login.tsx' %}
<br>
<p><a href="recover">He olvidado mi contraseña/usuario</a></p>
<p><a href="recover">No me ha llegado el enlace de activación</a></p>