From 37869fa8b471faf88c6f421a002cc0401dc89acc Mon Sep 17 00:00:00 2001 From: dmolinari Date: Mon, 16 Mar 2026 13:09:11 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20mejorar=20=C3=A1rea=20privada,=20invita?= =?UTF-8?q?ciones=20de=20registro=20y=20contraste=20de=20modales?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Se sincronizó el estado de autenticación en las páginas de publicación y mis avisos usando AuthContext. - Se actualizó el diseño de las invitaciones a registro en áreas privadas. - Se añadió soporte para abrir el modal de login directamente en la pestaña de registro. - Se mejoró la legibilidad de todos los modales aumentando el desenfoque de fondo y la opacidad. --- Frontend/src/App.tsx | 2 +- Frontend/src/components/ChatModal.tsx | 2 +- Frontend/src/components/ConfirmationModal.tsx | 2 +- Frontend/src/components/LoginModal.tsx | 7 +-- Frontend/src/pages/MisAvisosPage.tsx | 39 ++++++++++++---- Frontend/src/pages/PublicarAvisoPage.tsx | 46 +++++++++++++++---- 6 files changed, 73 insertions(+), 25 deletions(-) diff --git a/Frontend/src/App.tsx b/Frontend/src/App.tsx index 6bbc8e7..c0830ea 100644 --- a/Frontend/src/App.tsx +++ b/Frontend/src/App.tsx @@ -243,7 +243,7 @@ function Navbar() { )} {showLoginModal && ( -
+
+
{/* Header Neutro */} diff --git a/Frontend/src/components/ConfirmationModal.tsx b/Frontend/src/components/ConfirmationModal.tsx index 3c36b03..0680b5e 100644 --- a/Frontend/src/components/ConfirmationModal.tsx +++ b/Frontend/src/components/ConfirmationModal.tsx @@ -37,7 +37,7 @@ export default function ConfirmationModal({
{/* Backdrop */}
diff --git a/Frontend/src/components/LoginModal.tsx b/Frontend/src/components/LoginModal.tsx index 04e8987..017b22b 100644 --- a/Frontend/src/components/LoginModal.tsx +++ b/Frontend/src/components/LoginModal.tsx @@ -7,6 +7,7 @@ import { QRCodeSVG } from "qrcode.react"; interface Props { onSuccess: (user: UserSession) => void; onClose: () => void; + initialMode?: "LOGIN" | "REGISTER"; } // --- ICONOS SVG --- @@ -94,9 +95,9 @@ const NeutralCircleIcon = () => ( ); -export default function LoginModal({ onSuccess, onClose }: Props) { +export default function LoginModal({ onSuccess, onClose, initialMode }: Props) { // Toggle entre Login y Registro - const [mode, setMode] = useState<"LOGIN" | "REGISTER">("LOGIN"); + const [mode, setMode] = useState<"LOGIN" | "REGISTER">(initialMode || "LOGIN"); // Estados de Login const [username, setUsername] = useState(""); @@ -459,7 +460,7 @@ export default function LoginModal({ onSuccess, onClose }: Props) { return ( // CAMBIO: max-w-lg (más ancho) y overflow-hidden para evitar scrollbars feos -
+
{loading && (
)} diff --git a/Frontend/src/pages/MisAvisosPage.tsx b/Frontend/src/pages/MisAvisosPage.tsx index cb1973e..2e828d8 100644 --- a/Frontend/src/pages/MisAvisosPage.tsx +++ b/Frontend/src/pages/MisAvisosPage.tsx @@ -4,6 +4,7 @@ import { AdsV2Service, type AdListingDto } from "../services/ads.v2.service"; import { useAuth } from "../context/AuthContext"; import { ChatService, type ChatMessage } from "../services/chat.service"; import ChatModal from "../components/ChatModal"; +import LoginModal from "../components/LoginModal"; import { formatCurrency, getImageUrl, parseUTCDate } from "../utils/app.utils"; import { AD_STATUSES, STATUS_CONFIG } from "../constants/adStatuses"; import ConfirmationModal from "../components/ConfirmationModal"; @@ -17,7 +18,8 @@ export default function MisAvisosPage() { const [mensajes, setMensajes] = useState([]); const [loading, setLoading] = useState(false); - const { user, fetchUnreadCount } = useAuth(); + const { user, fetchUnreadCount, login } = useAuth(); + const [showLoginModal, setShowLoginModal] = useState(false); const [selectedChat, setSelectedChat] = useState<{ adId: number; @@ -234,21 +236,38 @@ export default function MisAvisosPage() { if (!user) { return (
-
+
🔒

- Área Privada + Registrate o Inicia Sesión

- Para gestionar tus publicaciones, primero debes iniciar sesión. + Para ver y gestionar tus avisos, primero debes registrarte o iniciar sesión.

- - Identificarse - +
+ +
+ + {showLoginModal && ( +
+
+ { + login(u); + setShowLoginModal(false); + }} + onClose={() => setShowLoginModal(false)} + /> +
+
+ )}
); } diff --git a/Frontend/src/pages/PublicarAvisoPage.tsx b/Frontend/src/pages/PublicarAvisoPage.tsx index ed24e3b..b5fe854 100644 --- a/Frontend/src/pages/PublicarAvisoPage.tsx +++ b/Frontend/src/pages/PublicarAvisoPage.tsx @@ -2,9 +2,10 @@ import { useState, useEffect } from "react"; import { useSearchParams, useNavigate } from "react-router-dom"; import { AvisosService } from "../services/avisos.service"; import { AdsV2Service } from "../services/ads.v2.service"; -import { AuthService, type UserSession } from "../services/auth.service"; + import type { DatosAvisoDto } from "../types/aviso.types"; import FormularioAviso from "../components/FormularioAviso"; +import { useAuth } from "../context/AuthContext"; import LoginModal from "../components/LoginModal"; const TAREAS_DISPONIBLES = [ @@ -34,9 +35,8 @@ export default function PublicarAvisoPage() { const [planSeleccionado, setPlanSeleccionado] = useState(null); const [fixedCategory, setFixedCategory] = useState(null); - const [user, setUser] = useState( - AuthService.getCurrentUser(), - ); + const [showLoginModal, setShowLoginModal] = useState(false); + const { user, login } = useAuth(); useEffect(() => { if (editId) { @@ -147,11 +147,39 @@ export default function PublicarAvisoPage() { if (!user) { return ( -
- setUser(u)} - onClose={() => navigate("/")} - /> +
+
+ 🔒 +

+ Registrate o Inicia Sesión +

+

+ Para publicar tus avisos, primero debes registrarte o iniciar sesión. +

+
+ +
+
+ + {showLoginModal && ( +
+
+ { + login(u); + setShowLoginModal(false); + }} + onClose={() => setShowLoginModal(false)} + /> +
+
+ )}
); }