feat: PWA instalable, cambio de contraseña y dashboards por rol
- POST /api/auth/cambiar-password (bcrypt 12, política ≥8+1 número) + modal en las 6 apps con auth - PWA: manifest + íconos de marca en las 7 apps (sin service worker a propósito, documentado); instalable en celular - Dashboards: 'Mi tablero' para vendedor (sus KPIs y funnel) y sección Equipo para coordinador/corporativo/admin - mi-dia: equipo.porVendedor gana leadsNuevosSemana - Tests: api 271, cotizador 88, alta 88, cobranza 81, agente-ia 19, dashboards 15, mi-dia 11, landing 4
This commit is contained in:
@@ -1,13 +1,16 @@
|
||||
import { useState, type ReactNode } from 'react'
|
||||
import { getSesion, logout, type Sesion } from '../services/auth'
|
||||
import CambiarPasswordModal from './CambiarPasswordModal'
|
||||
import LoginScreen from './LoginScreen'
|
||||
|
||||
/**
|
||||
* Gate de autenticación: sin sesión solo se ve el login; con sesión se ve la
|
||||
* app con una barra discreta "nombre · rol" y botón "Salir".
|
||||
* app con una barra discreta "nombre · rol", "Contraseña" (modal de cambio)
|
||||
* y botón "Salir".
|
||||
*/
|
||||
export default function AuthGate({ children }: { children: ReactNode }) {
|
||||
const [sesion, setSesion] = useState<Sesion | null>(() => getSesion())
|
||||
const [modalPassword, setModalPassword] = useState(false)
|
||||
|
||||
if (!sesion) {
|
||||
return <LoginScreen onLogin={() => setSesion(getSesion())} />
|
||||
@@ -20,19 +23,29 @@ export default function AuthGate({ children }: { children: ReactNode }) {
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-neutral-500">
|
||||
{sesion.usuario.nombre} · {sesion.usuario.rol}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
logout()
|
||||
setSesion(null)
|
||||
}}
|
||||
className="text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:text-accent-hover"
|
||||
>
|
||||
Salir
|
||||
</button>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setModalPassword(true)}
|
||||
className="text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:text-neutral-900"
|
||||
>
|
||||
Contraseña
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
logout()
|
||||
setSesion(null)
|
||||
}}
|
||||
className="text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:text-accent-hover"
|
||||
>
|
||||
Salir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{children}
|
||||
{modalPassword && <CambiarPasswordModal onCerrar={() => setModalPassword(false)} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
140
apps/alta-clientes/src/components/CambiarPasswordModal.tsx
Normal file
140
apps/alta-clientes/src/components/CambiarPasswordModal.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
import { useState, type FormEvent } from 'react'
|
||||
import { validarConfirmacion, validarPasswordNueva } from '../lib/password'
|
||||
import { cambiarPassword } from '../services/auth'
|
||||
|
||||
const CLASE_INPUT =
|
||||
'w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none'
|
||||
const CLASE_LABEL = 'mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500'
|
||||
|
||||
/**
|
||||
* Modal "Cambiar contraseña": actual + nueva + confirmar. Valida en cliente
|
||||
* con la misma regla del API y muestra el mensaje del API si la actual no es
|
||||
* correcta. Al éxito la sesión sigue intacta (el JWT no cambia).
|
||||
*/
|
||||
export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => void }) {
|
||||
const [actual, setActual] = useState('')
|
||||
const [nueva, setNueva] = useState('')
|
||||
const [confirmar, setConfirmar] = useState('')
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [exito, setExito] = useState(false)
|
||||
const [cargando, setCargando] = useState(false)
|
||||
|
||||
async function enviar(e: FormEvent) {
|
||||
e.preventDefault()
|
||||
const errorCliente = validarPasswordNueva(nueva) ?? validarConfirmacion(nueva, confirmar)
|
||||
if (errorCliente) {
|
||||
setError(errorCliente)
|
||||
return
|
||||
}
|
||||
setError(null)
|
||||
setCargando(true)
|
||||
try {
|
||||
await cambiarPassword(actual, nueva)
|
||||
setExito(true)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'No se pudo cambiar la contraseña')
|
||||
} finally {
|
||||
setCargando(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Cambiar contraseña"
|
||||
>
|
||||
<div className="w-full max-w-sm border border-neutral-200 bg-white p-6">
|
||||
<h2 className="mb-6 text-xs font-bold uppercase tracking-widest text-neutral-500">
|
||||
Cambiar contraseña
|
||||
</h2>
|
||||
{exito ? (
|
||||
<>
|
||||
<p className="border border-accent px-4 py-3 text-xs font-bold uppercase tracking-widest text-accent">
|
||||
Contraseña actualizada
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCerrar}
|
||||
className="mt-6 w-full bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover"
|
||||
>
|
||||
Cerrar
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<form onSubmit={enviar} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="password-actual" className={CLASE_LABEL}>
|
||||
Contraseña actual
|
||||
</label>
|
||||
<input
|
||||
id="password-actual"
|
||||
type="password"
|
||||
value={actual}
|
||||
onChange={(e) => setActual(e.target.value)}
|
||||
autoComplete="current-password"
|
||||
autoFocus
|
||||
required
|
||||
className={CLASE_INPUT}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="password-nueva" className={CLASE_LABEL}>
|
||||
Nueva contraseña
|
||||
</label>
|
||||
<input
|
||||
id="password-nueva"
|
||||
type="password"
|
||||
value={nueva}
|
||||
onChange={(e) => setNueva(e.target.value)}
|
||||
autoComplete="new-password"
|
||||
required
|
||||
className={CLASE_INPUT}
|
||||
/>
|
||||
<p className="mt-2 text-xs text-neutral-400">Mínimo 8 caracteres y un número</p>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="password-confirmar" className={CLASE_LABEL}>
|
||||
Confirmar nueva contraseña
|
||||
</label>
|
||||
<input
|
||||
id="password-confirmar"
|
||||
type="password"
|
||||
value={confirmar}
|
||||
onChange={(e) => setConfirmar(e.target.value)}
|
||||
autoComplete="new-password"
|
||||
required
|
||||
className={CLASE_INPUT}
|
||||
/>
|
||||
</div>
|
||||
{error && (
|
||||
<p
|
||||
role="alert"
|
||||
className="border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700"
|
||||
>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={cargando}
|
||||
className="flex-1 bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
|
||||
>
|
||||
{cargando ? 'Guardando…' : 'Guardar'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCerrar}
|
||||
className="border border-neutral-300 px-5 py-3 text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:border-neutral-500"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user