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.
This commit is contained in:
2026-03-16 13:09:11 -03:00
parent 96fca4d9c7
commit 37869fa8b4
6 changed files with 73 additions and 25 deletions

View File

@@ -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>
);
}