Fase 2 (isla): formulario de login en React/TSX
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:
@@ -0,0 +1,16 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { LoginForm } from '../components/LoginForm'
|
||||
|
||||
const el = document.getElementById('login-app')
|
||||
if (el) {
|
||||
createRoot(el).render(
|
||||
<StrictMode>
|
||||
<LoginForm
|
||||
loginUrl={el.dataset.loginUrl || ''}
|
||||
successUrl={el.dataset.successUrl || 'my-account'}
|
||||
csrfToken={el.dataset.csrf || ''}
|
||||
/>
|
||||
</StrictMode>,
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user