para restablecer la contraseña, da click aqui
", + recipients=[email] + ) + mail.send(msg) + + return jsonify({"msg": "Si existe un usuario con ese email, se ha enviado un enlace de recuperación."}), 200 + + except Exception as e: + print(f"Error al enviar correo: {e}") + return jsonify({"msg": "Error del servidor. Inténtalo de nuevo más tarde."}), 500 + +@resetemail_bp.route('/reset-password/API HOST:
Start working on your project by following the Quick Start
Remember to specify a real endpoint path like:
-- """+links_html+"
- """+links_html+"
-
+ Missing BACKEND_URL env variable
-Here's a video tutorial on how to update your backend URL environment variable.
-There's a file called
There's one variable called
-
-
- Make sure you backend is running on port 3001. -
- Open your API and copy the API host. -
- Open the .env file (do not open the .env.example) -
- Add a new variable VITE_BACKEND_URL=
your api host
- - Replace
your api host with the public API URL of your flask backend sever running at port 3001
-
- 
-
- Note: If you are publishing your website to Heroku, Render.com or any other hosting you probably need to follow other steps.
-
+
);
\ No newline at end of file
diff --git a/src/front/components/EventsMapView.jsx b/src/front/components/EventsMapView.jsx
new file mode 100644
index 0000000000..a1ff409f13
--- /dev/null
+++ b/src/front/components/EventsMapView.jsx
@@ -0,0 +1,319 @@
+import React, { useState, useEffect, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+
+export const EventsMapView = () => {
+ const navigate = useNavigate();
+ const mapRef = useRef(null);
+ const markersRef = useRef([]);
+ const infoWindowRef = useRef(null);
+
+ const [events, setEvents] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [mapLoaded, setMapLoaded] = useState(false);
+ const [selectedEvent, setSelectedEvent] = useState(null);
+ const [showEventsList, setShowEventsList] = useState(true);
+
+ const backendUrl = import.meta.env.VITE_BACKEND_URL;
+ const googleMapsApiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY;
+
+ // Cargar Google Maps API
+ useEffect(() => {
+ if (!window.google && googleMapsApiKey) {
+ const script = document.createElement('script');
+ script.src = `https://maps.googleapis.com/maps/api/js?key=${googleMapsApiKey}&libraries=places`;
+ script.async = true;
+ script.defer = true;
+ script.onload = () => {
+ setMapLoaded(true);
+ };
+ document.head.appendChild(script);
+ } else if (window.google) {
+ setMapLoaded(true);
+ }
+ }, [googleMapsApiKey]);
+
+ // Cargar eventos
+ useEffect(() => {
+ fetchEvents();
+ }, []);
+
+ // Inicializar mapa cuando se cargan los datos
+ useEffect(() => {
+ if (mapLoaded && events.length > 0 && mapRef.current) {
+ initializeMap();
+ }
+ }, [mapLoaded, events]);
+
+ const fetchEvents = async () => {
+ try {
+ setLoading(true);
+ const response = await fetch(`${backendUrl}api/events`);
+ const data = await response.json();
+
+ if (response.ok) {
+ // Filtrar solo eventos con coordenadas
+ const eventsWithCoords = data.filter(event => event.lat && event.lng);
+ setEvents(eventsWithCoords);
+ } else {
+ alert("Error al cargar eventos");
+ }
+ } catch (error) {
+ console.error("Error al cargar eventos:", error);
+ alert("Error de conexión al cargar eventos");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const initializeMap = () => {
+ if (!window.google || !mapRef.current || events.length === 0) return;
+
+
+ const bounds = new window.google.maps.LatLngBounds();
+ events.forEach(event => {
+ if (event.lat && event.lng) {
+ bounds.extend(new window.google.maps.LatLng(event.lat, event.lng));
+ }
+ });
+
+ const map = new window.google.maps.Map(mapRef.current, {
+ mapTypeControl: false,
+ streetViewControl: false,
+ fullscreenControl: true,
+ styles: [
+ {
+ featureType: "poi",
+ elementType: "labels",
+ stylers: [{ visibility: "off" }]
+ }
+ ]
+ });
+
+
+ map.fitBounds(bounds);
+
+ // Crear ventana de información
+ infoWindowRef.current = new window.google.maps.InfoWindow();
+
+ // Limpiar marcadores anteriores
+ markersRef.current.forEach(marker => marker.setMap(null));
+ markersRef.current = [];
+
+ // Crear marcadores para cada evento
+ events.forEach(event => {
+ if (event.lat && event.lng) {
+ const marker = new window.google.maps.Marker({
+ position: { lat: parseFloat(event.lat), lng: parseFloat(event.lng) },
+ map: map,
+ title: event.title,
+ icon: {
+ url: 'data:image/svg+xml;base64,' + btoa(`
+
+ `),
+ scaledSize: new window.google.maps.Size(40, 40),
+ anchor: new window.google.maps.Point(20, 20)
+ }
+ });
+
+ // Contenido del InfoWindow
+ const infoContent = `
+ Missing BACKEND_URL env variable
+Here's a video tutorial on how to update your backend URL environment variable.
+There's a file called
There's one variable called
-
+
- Make sure you backend is running on port 3001. +
- Open your API and copy the API host. +
- Open the .env file (do not open the .env.example) +
- Add a new variable VITE_BACKEND_URL=
your api host
+ - Replace
your api host with the public API URL of your flask backend sever running at port 3001
+
+
+
+ Note: If you are publishing your website to Heroku, Render.com or any other hosting you probably need to follow other steps.
+
+
+ `;
+
+ // Evento click en marcador
+ marker.addListener('click', () => {
+ infoWindowRef.current.setContent(infoContent);
+ infoWindowRef.current.open(map, marker);
+ setSelectedEvent(event);
+ });
+
+ markersRef.current.push(marker);
+ }
+ });
+
+ // Función global para comprar tickets
+ window.buyTicket = (eventId) => {
+ navigate(`/events/${eventId}/purchase`);
+ };
+ };
+
+ const formatDate = (dateString) => {
+ return new Date(dateString).toLocaleDateString('es-ES', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric'
+ });
+ };
+
+ const formatPrice = (price) => {
+ return new Intl.NumberFormat('es-ES', {
+ style: 'currency',
+ currency: 'EUR'
+ }).format(price);
+ };
+
+ const centerOnEvent = (event) => {
+ if (mapRef.current && window.google) {
+ const map = new window.google.maps.Map(mapRef.current);
+ map.setCenter({ lat: parseFloat(event.lat), lng: parseFloat(event.lng) });
+ map.setZoom(15);
+
+ // Abrir info window del evento
+ const marker = markersRef.current.find(m =>
+ m.getPosition().lat() === parseFloat(event.lat) &&
+ m.getPosition().lng() === parseFloat(event.lng)
+ );
+
+ if (marker) {
+ window.google.maps.event.trigger(marker, 'click');
+ }
+ }
+ };
+
+ if (!googleMapsApiKey) {
+ return (
+ ${event.title}
+${formatDate(event.date)}
+${event.location}
+ ${event.artist_name ? `${event.artist_name}
` : ''} +${formatPrice(event.price)}
+ ${event.description ? `${event.description.substring(0, 100)}${event.description.length > 100 ? '...' : ''}
` : ''} + +
+
+ );
+ }
+
+ return (
+
+
+ Google Maps no disponible
+Para usar esta vista de mapa, necesitas configurar la variable de entorno VITE_GOOGLE_MAPS_API_KEY con tu clave de API de Google Maps.
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/components/Footer.jsx b/src/front/components/Footer.jsx
index f06302dbd2..d531a747bd 100644
--- a/src/front/components/Footer.jsx
+++ b/src/front/components/Footer.jsx
@@ -1,11 +1,77 @@
-export const Footer = () => (
-
-);
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export const Footer = () => {
+ return (
+
+ );
+};
diff --git a/src/front/components/Navbar.jsx b/src/front/components/Navbar.jsx
index 30d43a2636..dc77721836 100644
--- a/src/front/components/Navbar.jsx
+++ b/src/front/components/Navbar.jsx
@@ -1,19 +1,85 @@
-import { Link } from "react-router-dom";
+import React from 'react';
+import { Link, useNavigate, useLocation } from "react-router-dom";
+import useGlobalReducer from "../hooks/useGlobalReducer";
export const Navbar = () => {
+ const { store, dispatch } = useGlobalReducer();
+ const navigate = useNavigate();
+ const location = useLocation();
- return (
-
- );
+ const handleLanguageChange = (e) => {
+ dispatch({ type: 'set_language', payload: e.target.value });
+ };
+
+ const handleThemeToggle = () => {
+ dispatch({ type: 'toggle_theme' });
+ };
+
+ const handleLogout = () => {
+ localStorage.removeItem("jwt_token");
+ dispatch({
+ type: "set_login_status",
+ payload: { isLoggedIn: false, user_id: null, token: null }
+ });
+ alert("Sesión cerrada.");
+ navigate("/");
+ };
+
+ const showIcons = store.isLoggedIn || location.pathname === '/home';
+ const showLogoutButton = store.isLoggedIn;
+
+ return (
+
+ );
};
\ No newline at end of file
diff --git a/src/front/components/ScrollToTop.jsx b/src/front/components/ScrollToTop.jsx
index fe79dc5be2..d92fb79a66 100644
--- a/src/front/components/ScrollToTop.jsx
+++ b/src/front/components/ScrollToTop.jsx
@@ -1,10 +1,6 @@
import { useEffect, useRef } from "react";
import PropTypes from "prop-types";
-// This component allows the scroll to go to the beginning when changing the view,
-// otherwise it would remain in the position of the previous view.
-// Investigate more about this React behavior :D
-
const ScrollToTop = ({ location, children }) => {
const prevLocation = useRef(location);
diff --git a/src/front/hooks/useGlobalReducer.jsx b/src/front/hooks/useGlobalReducer.jsx
index 6aeb9d768e..3ab044a2b4 100644
--- a/src/front/hooks/useGlobalReducer.jsx
+++ b/src/front/hooks/useGlobalReducer.jsx
@@ -1,24 +1,16 @@
-// Import necessary hooks and functions from React.
import { useContext, useReducer, createContext } from "react";
-import storeReducer, { initialStore } from "../store" // Import the reducer and the initial state.
+import storeReducer, { initialStore } from "../store.js";
-// Create a context to hold the global state of the application
-// We will call this global state the "store" to avoid confusion while using local states
-const StoreContext = createContext()
+const StoreContext = createContext();
-// Define a provider component that encapsulates the store and warps it in a context provider to
-// broadcast the information throught all the app pages and components.
export function StoreProvider({ children }) {
- // Initialize reducer with the initial state.
- const [store, dispatch] = useReducer(storeReducer, initialStore())
- // Provide the store and dispatch method to all child components.
+ const [store, dispatch] = useReducer(storeReducer, initialStore());
return
+ {/* Panel lateral con lista de eventos */}
+
+
+
+
+ {/* Mapa */}
+
+
+
+
+
+
+ Eventos en el Mapa
+ +
+ {loading ? (
+
+
+
+ ) : events.length === 0 ? (
+
+ Cargando...
+
+
+
+
+ ) : (
+ events.map((event) => (
+ No hay eventos con ubicación disponible
+ centerOnEvent(event)}
+ >
+
+ ))
+ )}
+
+12:28
+ {event.title}
+
+
+ {formatDate(event.date)}
+
+
+
+ {event.location}
+
+ {event.artist_name && (
+
+
+ {event.artist_name}
+
+ )}
+
+
+ {formatPrice(event.price)}
+
+
+
+
+
+
+
+
+
+
+
+ Mapa de Eventos
+
+
+
+
+
+ {mapLoaded ? (
+
+ ) : (
+
+
+
+ )}
+
+
+
+ Cargando mapa...
+
+ Cargando Google Maps...
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/pages/Contact.jsx b/src/front/pages/Contact.jsx
new file mode 100644
index 0000000000..10f8c5fd8f
--- /dev/null
+++ b/src/front/pages/Contact.jsx
@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import imagenBack from "../assets/fondo-concierto.jpg"
+
+export const Contact = () => {
+ const [form, setForm] = useState({
+ name: "",
+ email: "",
+ message: ""
+ });
+
+ const handleChange = (e) => {
+ setForm({ ...form, [e.target.name]: e.target.value });
+ };
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ console.log("Formulario enviado:", form);
+ alert("Gracias por contactarnos :)");
+ setForm({ name: "", email: "", message: "" });
+ };
+
+ return (
+
+ 
+
+
+
+
+
+
+ Sobre Nosotros
+Un viaje que recién comienza 🚀
+
+
+
+
+
+
+ + Somos cuatro estudiantes apasionados que juntos trabajamos para crear este proyecto como parte de nuestro trabajo final del curso de programación en 4Geeks Academy. +
++ Este proyecto representa más que una entrega académica, es el inicio de nuestro camino profesional en el mundo del desarrollo web, y la primera piedra de algo mucho más grande. +
++ Soñamos con que algún día, cada uno de nosotros se convierta en un gran programador, construyendo tecnología que inspire, ayude y transforme el mundo. +
++ ¡Gracias por formar parte de esta aventura con nosotros! +
+— Alexander, Alejandro, Thaner y Sebastian 💻✨
+
+
+ );
+};
diff --git a/src/front/pages/Demo.jsx b/src/front/pages/Demo.jsx
index 34250a45b7..879ffee2a8 100644
--- a/src/front/pages/Demo.jsx
+++ b/src/front/pages/Demo.jsx
@@ -1,23 +1,19 @@
-// Import necessary components from react-router-dom and other parts of the application.
import { Link } from "react-router-dom";
-import useGlobalReducer from "../hooks/useGlobalReducer"; // Custom hook for accessing the global state.
+import useGlobalReducer from "../hooks/useGlobalReducer";
export const Demo = () => {
- // Access the global state and dispatch function using the useGlobalReducer hook.
const { store, dispatch } = useGlobalReducer()
return (
+
+
+
+
+
+
+
+
+
+
+
+
+ Contáctanos
+ +-
- {/* Map over the 'todos' array from the store and render each item as a list element */}
{store && store.todos?.map((item) => {
return (
-
- {/* Link to the detail page of this todo. */}
Link to: {item.title}
Open file ./store.js to see the global store that contains and updates the list of colors
@@ -35,9 +31,9 @@ export const Demo = () => {
- +
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/pages/Events.jsx b/src/front/pages/Events.jsx
new file mode 100644
index 0000000000..e400dd7beb
--- /dev/null
+++ b/src/front/pages/Events.jsx
@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from "react";
+import useGlobalReducer from "../hooks/useGlobalReducer";
+import { Link } from "react-router-dom";
+
+export const Events = () => {
+ const { store } = useGlobalReducer();
+ const [events, setEvents] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ const backendUrl = import.meta.env.VITE_BACKEND_URL;
+
+ useEffect(() => {
+ const fetchEvents = async () => {
+ setLoading(true);
+ setError(null);
+ if (!backendUrl) {
+ setError("Error: La URL del backend no está configurada.");
+ setLoading(false);
+ return;
+ }
+ try {
+ const response = await fetch(`${backendUrl}/api/events`, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ }
+ });
+ const data = await response.json();
+ if (response.ok) {
+ setEvents(data);
+ } else {
+ setError(`Error al cargar eventos: ${data.message || response.statusText}`);
+ }
+ } catch (err) {
+ console.error("Error de conexión al cargar eventos:", err);
+ setError("Hubo un problema al conectar con el servidor.");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchEvents();
+ }, [backendUrl]);
+
+ if (loading) {
+ return
+
+
+
+
+
+
+
+
+
+
+
+ {!googleMapsApiKey && (
+ Gestión de Eventos
+ +
+
+ Atención: Para usar la funcionalidad de mapas, configura la variable de entorno VITE_GOOGLE_MAPS_API_KEY
+
+ )}
+
+ {/* Formulario */}
+ {showForm && (
+
+
+ )}
+
+ {/* Lista de eventos */}
+
+
+ + {editingEvent ? "Editar Evento" : "Crear Nuevo Evento"} +
+
+
+
+
+
+
+
+ Lista de Eventos
+
+ {loading ? (
+
+
+
+ ) : events.length === 0 ? (
+
+ Cargando...
+
+
+
+ ) : (
+ No hay eventos disponibles
+
+
+
+
+
+ )}
+ | Título | +Fecha | +Ubicación | +Artista | +Precio | +Acciones | +
|---|---|---|---|---|---|
|
+ {event.title}
+ {event.description && (
+
+ {event.description.substring(0, 50)}
+ {event.description.length > 50 && "..."}
+
+ )}
+ |
+ {formatDate(event.date)} | +
+ {event.location}
+ {event.lat && event.lng && (
+
+ )}
+ |
+ {event.artist_name || "-"} | +{formatPrice(event.price || 0)} | +
+
+
+
+
+ |
+
Cargando eventos...
;
+ }
+
+ if (error) {
+ return {error}
;
+ }
+
+ if (events.length === 0) {
+ return No hay eventos disponibles.
;
+ }
+
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/pages/ForgotPasswordPage.jsx b/src/front/pages/ForgotPasswordPage.jsx
new file mode 100644
index 0000000000..ce13144e61
--- /dev/null
+++ b/src/front/pages/ForgotPasswordPage.jsx
@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import imagenBack from "../assets/fondo-concierto.jpg";
+
+export const ForgotPasswordPage = () => {
+ const [email, setEmail] = useState("");
+ const [message, setMessage] = useState("");
+ const [error, setError] = useState("");
+ const [isLoading, setIsLoading] = useState(false);
+ const navigate = useNavigate();
+
+ const handleSendResetLink = async (e) => {
+ e.preventDefault();
+ setMessage("");
+ setError("");
+ setIsLoading(true);
+
+ try {
+ const backendUrl = import.meta.env.VITE_BACKEND_URL;
+ if (!backendUrl) {
+ setError("Error: La URL del backend no está configurada.");
+ setIsLoading(false);
+ return;
+ }
+ const response = await fetch(`${backendUrl}api/forgot-password`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ email })
+ });
+
+ const data = await response.json();
+ if (response.ok) {
+ setMessage(data.msg);
+ } else {
+ setError(data.msg || "Algo salió mal. Inténtalo de nuevo.");
+ }
+ } catch (err) {
+ console.error("Error en la solicitud:", err);
+ setError("Hubo un problema al conectar con el servidor.");
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ return (
+ Eventos
+
+ {events.map((event, index) => (
+
+
+
+
+ ))}
+
+
+
+
+
+ {event.title}
+{event.date} - {event.location}
+{event.description ? event.description.substring(0, 100) + '...' : ''}
+ {event.artist_id &&Artista ID: {event.artist_id}
} +
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/pages/Home.jsx b/src/front/pages/Home.jsx
index 341ed21768..cf384ab466 100644
--- a/src/front/pages/Home.jsx
+++ b/src/front/pages/Home.jsx
@@ -1,52 +1,221 @@
-import React, { useEffect } from "react"
-import rigoImageUrl from "../assets/img/rigo-baby.jpg";
-import useGlobalReducer from "../hooks/useGlobalReducer.jsx";
+import imagenBack from "../assets/fondo-Rock.jpg";
+import React, { useState, useEffect } from 'react';
+import useGlobalReducer from "../hooks/useGlobalReducer";
export const Home = () => {
+ const { store, dispatch } = useGlobalReducer();
+ const [events, setEvents] = useState([]);
+ const [loadingEvents, setLoadingEvents] = useState(true);
+ const [errorEvents, setErrorEvents] = useState(null);
+ const [selectedCard, setSelectedCard] = useState(null);
+ const backendUrl = import.meta.env.VITE_BACKEND_URL;
- const { store, dispatch } = useGlobalReducer()
-
- const loadMessage = async () => {
- try {
- const backendUrl = import.meta.env.VITE_BACKEND_URL
-
- if (!backendUrl) throw new Error("VITE_BACKEND_URL is not defined in .env file")
-
- const response = await fetch(backendUrl + "/api/hello")
- const data = await response.json()
-
- if (response.ok) dispatch({ type: "set_hello", payload: data.message })
-
- return data
-
- } catch (error) {
- if (error.message) throw new Error(
- `Could not fetch the message from the backend.
- Please check if the backend is running and the backend port is public.`
- );
- }
-
- }
-
- useEffect(() => {
- loadMessage()
- }, [])
-
- return (
-
+
+
+
+
+
+
+ Forgot your password?
++ Introduce tu email para recibir un correo de restablecimiento. +
+ +
-
- );
-};
\ No newline at end of file
+ const fetchEvents = async () => {
+ setLoadingEvents(true);
+ setErrorEvents(null);
+ if (!backendUrl) {
+ setErrorEvents("Error: La URL del backend no está configurada.");
+ setLoadingEvents(false);
+ return;
+ }
+ try {
+ const response = await fetch(`${backendUrl}/api/events`, {
+ method: "GET",
+ headers: { "Content-Type": "application/json" }
+ });
+ const data = await response.json();
+ if (response.ok) {
+ setEvents(data);
+ } else {
+ setErrorEvents(`Error al cargar eventos: ${data.message || response.statusText}`);
+ }
+ } catch (err) {
+ console.error("Error de conexión al cargar eventos:", err);
+ setErrorEvents("Hubo un problema al conectar con el backend para los eventos.");
+ } finally {
+ setLoadingEvents(false);
+ }
+ };
+
+ useEffect(() => {
+ fetchEvents();
+ }, [backendUrl, dispatch]);
+
+
+ const cards2 = [
+ {
+ title: 'Dj Paco',
+ text: 'Entrada desde: € 50',
+ image: 'https://images.pexels.com/photos/668278/pexels-photo-668278.jpeg',
+ description: 'https://images.pexels.com/photos/668278/pexels-photo-668278.jpeg',
+ },
+ {
+ title: 'Conciertos',
+ text: 'Entrada desde: 70€',
+ image: 'https://images.pexels.com/photos/849/people-festival-party-dancing.jpg',
+ description: 'https://images.pexels.com/photos/849/people-festival-party-dancing.jpg'
+ },
+ {
+ title: 'Rock',
+ text: 'Entrada desde: 70€',
+ image: 'https://images.pexels.com/photos/1105666/pexels-photo-1105666.jpeg',
+ description: 'https://images.pexels.com/photos/1105666/pexels-photo-1105666.jpeg'
+ },
+ {
+ title: 'Reggaeton Fest',
+ text: 'Entrada desde: 70€',
+ image: 'https://images.pexels.com/photos/1179581/pexels-photo-1179581.jpeg',
+ description: 'https://images.pexels.com/photos/1179581/pexels-photo-1179581.jpeg'
+ },
+ ];
+
+
+ return (
+ Hello Rigo!!
-
-
-
- {store.message ? (
- {store.message}
- ) : (
-
- Loading message from the backend (make sure your python 🐍 backend is running)...
-
- )}
-
-
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/pages/Layout.jsx b/src/front/pages/Layout.jsx
index 9bfa31325c..cf567b1904 100644
--- a/src/front/pages/Layout.jsx
+++ b/src/front/pages/Layout.jsx
@@ -1,12 +1,12 @@
-import { Outlet } from "react-router-dom/dist"
+import { Outlet, useLocation } from "react-router-dom"
import ScrollToTop from "../components/ScrollToTop"
import { Navbar } from "../components/Navbar"
import { Footer } from "../components/Footer"
-// Base component that maintains the navbar and footer throughout the page and the scroll to top functionality.
export const Layout = () => {
+ const location = useLocation();
return (
-
+
+
+
+
+ {/* MODAL DE LAS CARDS */}
+
+ {/* FIN DE MODAL DE LAS CARDS */}
+ Proximos Eventos
+
+ {events.map((card, index) => (
+
+
+
+
+
+ ))}
+
+
+
+ Experiencia
+
+
+
+
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+ MIRA LAS EXPERIENCIAS VIVIDAS EN NUESTROS EVENTOS
+
+
+ Proximos Eventos 2026
+
+ {cards2.map((card, index) => (
+
+
+
+
+ ))}
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/pages/Prebuy.jsx b/src/front/pages/Prebuy.jsx
new file mode 100644
index 0000000000..4149b83a26
--- /dev/null
+++ b/src/front/pages/Prebuy.jsx
@@ -0,0 +1,245 @@
+import React, { useState, useEffect } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import useGlobalReducer from "../hooks/useGlobalReducer";
+import imagenBack from "../assets/fondo-Rock.jpg";
+
+
+export const Prebuy = () => {
+ const { store } = useGlobalReducer();
+ const navigate = useNavigate();
+ const [cartItems, setCartItems] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+
+ const backendUrl = import.meta.env.VITE_BACKEND_URL;
+
+ useEffect(() => {
+ if (store.isLoggedIn && store.user_id) {
+ fetchCartItems();
+ } else {
+ setCartItems([]);
+ setLoading(false);
+ setError(null);
+ }
+ }, [store.isLoggedIn, store.user_id, navigate]);
+
+ const fetchCartItems = async () => {
+ setLoading(true);
+ setError(null);
+ if (!backendUrl) {
+ setError("Error: La URL del backend no está configurada.");
+ setLoading(false);
+ return;
+ }
+ try {
+ const response = await fetch(`${backendUrl}api/cart/${store.user_id}`, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ "Authorization": `Bearer ${store.token}`
+ }
+ });
+ const data = await response.json();
+ if (response.ok) {
+ setCartItems(data);
+ } else {
+ setError(`Error al cargar el carrito: ${data.msg || response.statusText}`);
+ }
+ } catch (err) {
+ console.error("Error de conexión al cargar carrito:", err);
+ setError("Hubo un problema al conectar con el servidor.");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleDeleteItem = async (itemId) => {
+ if (!store.isLoggedIn) {
+ alert("Inicia sesión para eliminar artículos.");
+ navigate("/login");
+ return;
+ }
+ if (!backendUrl) {
+ alert("Error: La URL del backend no está configurada.");
+ return;
+ }
+ if (!confirm("¿Estás seguro de que quieres eliminar este artículo del carrito?")) {
+ return;
+ }
+ try {
+ const response = await fetch(`${backendUrl}/api/cart/${itemId}`, {
+ method: "DELETE",
+ headers: {
+ "Authorization": `Bearer ${store.token}`
+ }
+ });
+ const data = await response.json();
+ if (response.ok) {
+ alert(data.msg);
+ fetchCartItems();
+ } else {
+ alert(`Error al eliminar artículo: ${data.msg || response.statusText}`);
+ }
+ } catch (err) {
+ console.error("Error de conexión al eliminar artículo:", err);
+ alert("Hubo un problema al conectar con el servidor.");
+ }
+ };
+
+ const handleUpdateQuantity = async (itemId, newQuantity) => {
+ if (!store.isLoggedIn) {
+ alert("Inicia sesión para actualizar la cantidad.");
+ navigate("/login");
+ return;
+ }
+ if (newQuantity < 1) {
+ handleDeleteItem(itemId);
+ return;
+ }
+ if (!backendUrl) {
+ alert("Error: La URL del backend no está configurada.");
+ return;
+ }
+ try {
+ const response = await fetch(`${backendUrl}/api/cart/item/${itemId}`, {
+ method: "PUT",
+ headers: {
+ "Content-Type": "application/json",
+ "Authorization": `Bearer ${store.token}`
+ },
+ body: JSON.stringify({ quantity: newQuantity })
+ });
+ const data = await response.json();
+ if (response.ok) {
+ alert(data.msg);
+ fetchCartItems();
+ } else {
+ alert(`Error al actualizar cantidad: ${data.msg || response.statusText}`);
+ }
+ } catch (err) {
+ console.error("Error de conexión al actualizar cantidad:", err);
+ alert("Hubo un problema al conectar con el servidor.");
+ }
+ };
+
+ const handleCheckout = async () => {
+ if (!store.isLoggedIn) {
+ alert("Inicia sesión para finalizar tu compra.");
+ navigate("/login");
+ return;
+ }
+ if (!backendUrl) {
+ alert("Error: La URL del backend no está configurada.");
+ return;
+ }
+ if (!confirm("¿Confirmar la compra de todos los artículos en el carrito?")) {
+ return;
+ }
+ try {
+ const response = await fetch(`${backendUrl}/api/cart/checkout/${store.user_id}`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ "Authorization": `Bearer ${store.token}`
+ }
+ });
+ const data = await response.json();
+ if (response.ok) {
+ alert(data.msg);
+ navigate("/home");
+ } else {
+ alert(`Error al finalizar compra: ${data.msg || response.statusText}`);
+ }
+ } catch (err) {
+ console.error("Error de conexión al finalizar compra:", err);
+ alert("Hubo un problema al conectar con el servidor.");
+ }
+ };
+
+ if (loading) return
+
+
+
+ Iniciar Sesión
+ +Cargando carrito...
;
+ if (error) return {error}
;
+
+ if (!store.isLoggedIn) {
+ return (
+
+
+ );
+ }
+
+ if (cartItems.length === 0) {
+ return (
+ Inicia sesión para ver y gestionar los artículos de tu carrito.
+ Ir a Iniciar Sesión +
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+ Tu carrito está vacío.
+ Explorar Eventos +
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/pages/Resetpassword.jsx b/src/front/pages/Resetpassword.jsx
new file mode 100644
index 0000000000..8bd27b302e
--- /dev/null
+++ b/src/front/pages/Resetpassword.jsx
@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import imagenBack from "../assets/fondo-concierto.jpg";
+
+export const ResetPasswordPage = () => {
+ const [password, setPassword] = useState("");
+
+ const [confirmPassword, setConfirmPassword] = useState("");
+ const navigate = useNavigate();
+ const { token } = useParams();
+ console.log(token)
+
+ const handleResetPassword = async (e) => {
+ e.preventDefault();
+ if (password !== confirmPassword) {
+ alert("Las contraseñas no coinciden.");
+ return;
+ }
+
+ if (!token) {
+ alert("Token de restablecimiento no encontrado.");
+ return;
+ }
+
+ try {
+ const backendUrl = import.meta.env.VITE_BACKEND_URL;
+ if (!backendUrl) {
+ alert("Error: La URL del backend no está configurada.");
+ return;
+ }
+
+ const response = await fetch(`${backendUrl}api/reset-password/${token}`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json"
+ },
+ body: JSON.stringify({ password })
+ });
+
+ const data = await response.json();
+ if (response.ok) {
+ alert(data.msg);
+ navigate("/");
+ } else {
+ alert(`Error: ${data.msg || response.statusText}`);
+ }
+ } catch (error) {
+ console.error("Error en la solicitud:", error);
+ alert("Hubo un problema al conectar con el servidor.");
+ }
+ };
+
+ return (
+
+
+
+
+
+ Tu Carrito de Compras
+
+
+
+ {cartItems.map((item) => (
+
+
+
+ ))}
+
+
+
+
+ Artículo ID: {item.event_id}
+Cantidad: {item.quantity}
+
+
+ handleUpdateQuantity(item.id, parseInt(e.target.value))}
+ className="form-control text-center me-2"
+ style={{ width: '70px' }}
+ min="1"
+ />
+
+
+
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/pages/SignupPage.jsx b/src/front/pages/SignupPage.jsx
new file mode 100644
index 0000000000..dea2d30367
--- /dev/null
+++ b/src/front/pages/SignupPage.jsx
@@ -0,0 +1,114 @@
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import imagenBack from "../assets/fondo-orquesta.jpg"
+
+export const SignupPage = () => {
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [confirmPassword, setConfirmPassword] = useState("");
+ const navigate = useNavigate();
+
+ const handleSignup = async (e) => {
+ e.preventDefault();
+
+ if (password !== confirmPassword) {
+ alert("Las contraseñas no coinciden.");
+ return;
+ }
+
+ const username = email;
+ const backendUrl = import.meta.env.VITE_BACKEND_URL;
+
+ try {
+ const createUserResponse = await fetch(`${backendUrl}api/register`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({email, password})
+ });
+
+ if (!createUserResponse.ok && createUserResponse.status !== 400) {
+ throw new Error(`Error al inicializar usuario en 4Geeks API: ${createUserResponse.statusText}`);
+ }
+
+ const initialPost = { label: `Bienvenido a Festquila, ${username}!`, done: false };
+ const addPostResponse = await fetch(`${backendUrl}api/register`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(initialPost)
+ });
+
+ if (!addPostResponse.ok) {
+ console.warn(`Advertencia: No se pudo añadir la publicación inicial para ${username}.`);
+ }
+
+ alert("¡Registro exitoso en Festquila! Ahora puedes iniciar sesión.");
+ navigate("/");
+ } catch (error) {
+ console.error("Error al registrarse con la API de 4Geeks:", error);
+ alert(`Hubo un problema al registrarse: ${error.message}.`);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+ Establecer Nueva Contraseña
+ +
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/pages/Single.jsx b/src/front/pages/Single.jsx
index 7e68487da3..cb4817430b 100644
--- a/src/front/pages/Single.jsx
+++ b/src/front/pages/Single.jsx
@@ -1,37 +1,21 @@
-// Import necessary hooks and components from react-router-dom and other libraries.
-import { Link, useParams } from "react-router-dom"; // To use link for navigation and useParams to get URL parameters
-import PropTypes from "prop-types"; // To define prop types for this component
-import rigoImageUrl from "../assets/img/rigo-baby.jpg" // Import an image asset
-import useGlobalReducer from "../hooks/useGlobalReducer"; // Import a custom hook for accessing the global state
+import { Link, useParams } from "react-router-dom";
+import useGlobalReducer from "../hooks/useGlobalReducer";
-// Define and export the Single component which displays individual item details.
export const Single = props => {
- // Access the global state using the custom hook.
- const { store } = useGlobalReducer()
+ const { store } = useGlobalReducer()
+ const { theId } = useParams()
+ const singleTodo = store.todos.find(todo => todo.id === parseInt(theId));
- // Retrieve the 'theId' URL parameter using useParams hook.
- const { theId } = useParams()
- const singleTodo = store.todos.find(todo => todo.id === parseInt(theId));
+ return (
+
+
+
+
+
+
+
+ Regístrate
+ +
+
- return ( -
+ );
+};
\ No newline at end of file
diff --git a/src/front/routes.jsx b/src/front/routes.jsx
index 0557df6141..2d223b275b 100644
--- a/src/front/routes.jsx
+++ b/src/front/routes.jsx
@@ -1,5 +1,3 @@
-// Import necessary components and functions from react-router-dom.
-
import {
createBrowserRouter,
createRoutesFromElements,
@@ -9,22 +7,35 @@ import { Layout } from "./pages/Layout";
import { Home } from "./pages/Home";
import { Single } from "./pages/Single";
import { Demo } from "./pages/Demo";
+import { Login } from "./pages/Login.jsx";
+import { SignupPage } from "./pages/SignupPage.jsx";
+import { ForgotPasswordPage } from "./pages/ForgotPasswordPage.jsx";
+import { EventForm } from "./pages/EventForm.jsx";
+import { Prebuy } from "./pages/Prebuy.jsx";
+import { Events } from "./pages/Events.jsx";
+import {EventsMapView} from "./components/EventsMapView";
+import { ResetPasswordPage } from "./pages/Resetpassword.jsx";
+import { Contact } from "./pages/Contact.jsx";
+import { About } from "./pages/About.jsx"
export const router = createBrowserRouter(
createRoutesFromElements(
- // CreateRoutesFromElements function allows you to build route elements declaratively.
- // Create your routes here, if you want to keep the Navbar and Footer in all views, add your new routes inside the containing Route.
- // Root, on the contrary, create a sister Route, if you have doubts, try it!
- // Note: keep in mind that errorElement will be the default page when you don't get a route, customize that page to make your project more attractive.
- // Note: The child paths of the Layout element replace the Outlet component with the elements contained in the "element" attribute of these child paths.
-
- // Root Route: All navigation will start from here.
- Todo: {singleTodo?.title}
+- return ( -
- {/* Display the title of the todo element dynamically retrieved from the store using theId. */}
-
{/* A horizontal rule for visual separation. */} - - {/* A Link component acts as an anchor tag but is used for client-side routing to prevent page reloads. */} - - - Back home - - -
- );
-};
-
-// Use PropTypes to validate the props passed to this component, ensuring reliable behavior.
-Single.propTypes = {
- // Although 'match' prop is defined here, it is not used in the component.
- // Consider removing or using it as needed.
- match: PropTypes.object
-};
+
+
+ Back home
+
+
+ Todo: {singleTodo?.title}
-{/* A horizontal rule for visual separation. */} - - {/* A Link component acts as an anchor tag but is used for client-side routing to prevent page reloads. */} - - - Back home - - -