feat: mejorar área privada, invitaciones de registro y contraste de modales

- 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.
2026-03-16 13:09:11 -03:00
parent 96fca4d9c7
commit 37869fa8b4
6 changed files with 73 additions and 25 deletions
--- a/Frontend/src/App.tsx
+++ b/Frontend/src/App.tsx
@@ -243,7 +243,7 @@ function Navbar() {
      )}

      {showLoginModal && (
-        <div className="fixed inset-0 z-[200] flex items-center justify-center bg-black/60 backdrop-blur-md animate-fade-in p-4">
+        <div className="fixed inset-0 z-[200] flex items-center justify-center bg-black/80 backdrop-blur-xl animate-fade-in p-4">
          <div className="relative w-full max-w-md">
            <LoginModal
              onSuccess={handleLoginSuccess}
--- a/Frontend/src/components/ChatModal.tsx
+++ b/Frontend/src/components/ChatModal.tsx
@@ -64,7 +64,7 @@ export default function ChatModal({ isOpen, onClose, adId, adTitle, sellerId, cu
  if (!isOpen) return null;

  return (
-    <div className="fixed inset-0 z-[200] flex items-end md:items-center justify-center p-4 md:p-6 bg-black/80 backdrop-blur-sm animate-fade-in">
+    <div className="fixed inset-0 z-[200] flex items-end md:items-center justify-center p-4 md:p-6 bg-black/80 backdrop-blur-xl animate-fade-in">
      <div className="bg-[#12141a] w-full max-w-lg rounded-[2rem] border border-white/10 shadow-2xl flex flex-col max-h-[85vh] overflow-hidden animate-scale-up">

        {/* Header Neutro */}
--- a/Frontend/src/components/ConfirmationModal.tsx
+++ b/Frontend/src/components/ConfirmationModal.tsx
@@ -37,7 +37,7 @@ export default function ConfirmationModal({
    <div className="fixed inset-0 z-[200] flex items-center justify-center p-4 animate-fade-in">
      {/* Backdrop */}
      <div
-        className="absolute inset-0 bg-black/80 backdrop-blur-sm"
+        className="absolute inset-0 bg-black/80 backdrop-blur-xl"
        onClick={onCancel}
      ></div>

--- 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 = () => (
  </svg>
 );

-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
-    <div className="glass px-8 py-6 rounded-3xl border border-white/10 shadow-2xl max-w-lg w-full animate-fade-in-up relative overflow-hidden">
+    <div className="bg-[#161a22] px-8 py-6 rounded-3xl border border-white/10 shadow-2xl max-w-lg w-full animate-fade-in-up relative overflow-hidden backdrop-blur-3xl">
      {loading && (
        <div className="absolute top-0 left-0 w-full h-1 bg-blue-500 animate-pulse"></div>
      )}
--- 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<ChatMessage[]>([]);
  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 (
      <div className="container mx-auto px-6 py-24 text-center animate-fade-in-up">
-        <div className="glass p-12 rounded-[3rem] max-w-2xl mx-auto border border-white/5 shadow-2xl">
+        <div className="bg-[#111318]/90 backdrop-blur-3xl p-12 rounded-[3rem] max-w-2xl mx-auto border border-white/5 shadow-2xl">
          <span className="text-7xl mb-8 block">🔒</span>
          <h2 className="text-5xl font-black mb-4 uppercase tracking-tighter">
-            Área Privada
+            Registrate o Inicia Sesión
          </h2>
          <p className="text-gray-400 mb-10 text-lg italic">
-            Para gestionar tus publicaciones, primero debes iniciar sesión.
+            Para ver y gestionar tus avisos, primero debes registrarte o iniciar sesión.
          </p>
-          <Link
-            to="/publicar"
-            className="bg-blue-600 hover:bg-blue-500 text-white px-12 py-5 rounded-[2rem] font-bold uppercase tracking-widest transition-all inline-block shadow-lg shadow-blue-600/20"
-          >
-            Identificarse
-          </Link>
+          <div className="flex flex-col md:flex-row gap-4 justify-center">
+            <button
+              onClick={() => setShowLoginModal(true)}
+              className="bg-blue-600 hover:bg-blue-500 text-white px-12 py-5 rounded-[2rem] font-bold uppercase tracking-widest transition-all inline-block shadow-lg shadow-blue-600/20"
+            >
+              Registrarse
+            </button>
+          </div>
        </div>
+
+        {showLoginModal && (
+          <div className="fixed inset-0 z-[200] flex items-center justify-center bg-black/80 backdrop-blur-xl animate-fade-in p-4">
+            <div className="relative w-full max-w-md text-left">
+              <LoginModal
+                initialMode="REGISTER"
+                onSuccess={(u) => {
+                  login(u);
+                  setShowLoginModal(false);
+                }}
+                onClose={() => setShowLoginModal(false)}
+              />
+            </div>
+          </div>
+        )}
      </div>
    );
  }
--- 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<DatosAvisoDto | null>(null);
  const [fixedCategory, setFixedCategory] = useState<string | null>(null);
-  const [user, setUser] = useState<UserSession | null>(
-    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 (
-      <div className="flex justify-center items-center py-20 min-h-[60vh]">
-        <LoginModal
-          onSuccess={(u) => setUser(u)}
-          onClose={() => navigate("/")}
-        />
+      <div className="container mx-auto px-6 py-24 text-center animate-fade-in-up">
+        <div className="bg-[#111318]/90 backdrop-blur-3xl p-12 rounded-[3rem] max-w-2xl mx-auto border border-white/5 shadow-2xl">
+          <span className="text-7xl mb-8 block">🔒</span>
+          <h2 className="text-5xl font-black mb-4 uppercase tracking-tighter">
+            Registrate o Inicia Sesión
+          </h2>
+          <p className="text-gray-400 mb-10 text-lg italic">
+            Para publicar tus avisos, primero debes registrarte o iniciar sesión.
+          </p>
+          <div className="flex flex-col md:flex-row gap-4 justify-center">
+            <button
+              onClick={() => setShowLoginModal(true)}
+              className="bg-blue-600 hover:bg-blue-500 text-white px-12 py-5 rounded-[2rem] font-bold uppercase tracking-widest transition-all inline-block shadow-lg shadow-blue-600/20"
+            >
+              Registrarse
+            </button>
+          </div>
+        </div>
+
+        {showLoginModal && (
+          <div className="fixed inset-0 z-[200] flex items-center justify-center bg-black/80 backdrop-blur-xl animate-fade-in p-4">
+            <div className="relative w-full max-w-md">
+              <LoginModal
+                initialMode="REGISTER"
+                onSuccess={(u) => {
+                  login(u);
+                  setShowLoginModal(false);
+                }}
+                onClose={() => setShowLoginModal(false)}
+              />
+            </div>
+          </div>
+        )}
      </div>
    );
  }