Hola,
+Haz clic en el siguiente enlace para restablecer tu contraseña:
+ +Si no solicitaste esto, ignora este mensaje.
+ """ + + try: + msg = Message( + "Restablece tu contraseña", + recipients=[email], + html=html_body, + sender=os.getenv("MAIL_DEFAULT_SENDER"), + ) + mail.send(msg) + except Exception as e: + # No informamos del error al usuario, por seguridad + app.logger.error(f"Error enviando email: {str(e)}") + + return jsonify({"message": message}), 200 + +# Endpoint: restablecer contraseña------------------------------------ + + +@app.route("/api/reset/
+
+ );
+}
diff --git a/src/front/components/AuthShell.jsx b/src/front/components/AuthShell.jsx
new file mode 100644
index 0000000000..7866369a5c
--- /dev/null
+++ b/src/front/components/AuthShell.jsx
@@ -0,0 +1,44 @@
+import bgImg from "../assets/img/background-screens.png";
+
+export default function AuthShell({ children, title, subtitle, sidePanel = false }) {
+ return (
+ {icon}
+
+
+ {title}
+ {text}
+
+
+ );
+}
diff --git a/src/front/components/CreateActivityPopup.jsx b/src/front/components/CreateActivityPopup.jsx
new file mode 100644
index 0000000000..077063a8c4
--- /dev/null
+++ b/src/front/components/CreateActivityPopup.jsx
@@ -0,0 +1,165 @@
+import React, { useState } from "react";
+import { Form, Spinner } from "react-bootstrap";
+import { sports } from "../jsApiComponents/sports";
+import { toast } from "react-toastify"; // 👈 IMPORTANTE
+
+export const CreateActivityPopup = ({ show, onActivityCreated, coordinates }) => {
+ const [formData, setFormData] = useState({
+ name: "",
+ sport: "",
+ description: "",
+ max_participants: "",
+ date: "",
+ });
+
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState("");
+ const BASE_URL = import.meta.env.VITE_BACKEND_URL;
+
+
+
+ const handleChange = (e) => {
+ setFormData({ ...formData, [e.target.name]: e.target.value });
+ };
+
+ const resetForm = () => {
+ setFormData({
+ name: "",
+ sport: "",
+ description: "",
+ max_participants: "",
+ date: "",
+ });
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setLoading(true);
+ setError("");
+
+ if (!coordinates) {
+ toast.warning("⚠️ Debes seleccionar una ubicación en el mapa");
+ setLoading(false);
+ return;
+ }
+
+ try {
+ const token = localStorage.getItem("JWT-STORAGE-KEY");
+ const bodyWithCoords = {
+ ...formData,
+ latitude: coordinates.latitude,
+ longitude: coordinates.longitude,
+ };
+
+
+ const resp = await fetch(`${BASE_URL}api/activities`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ body: JSON.stringify(bodyWithCoords),
+ });
+
+ if (!resp.ok) {
+ const err = await resp.json();
+ console.error("SERVER ERROR 422 ==> ", err);
+ toast.error(err.error || "🚫 Error creando actividad");
+ setLoading(false);
+ return; // 👈 EVITA QUE EL CÓDIGO SIGA EJECUTÁNDOSE
+ }
+
+ const data = await resp.json();
+ onActivityCreated(data);
+ toast.success("🎉 Actividad creada correctamente!");
+
+ window.dispatchEvent(new Event("activities-updated"));
+ resetForm();
+
+ } catch (err) {
+ toast.error("⚠️ Error interno del servidor");
+ setError(err.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ if (!show) return null;
+
+
+
+
+ return (
+
+
+
+
+ {/* Columna principal */}
+
+
+ {title &&
+
+ {/* Panel lateral opcional */}
+ {sidePanel && (
+ {title}
}
+ {subtitle && {subtitle}
}
+ {children}
+
+
+ )}
+ MeetFit
++ Conecta con gente de tu ciudad, crea actividades deportivas + y encuentra compañeros de entrenamiento sin complicaciones. +
+-
+
- 🔍 Explora actividades cerca de ti +
- 💬 Queda con otras personas +
- 📅 Crea tus propios eventos +
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/components/CreatedEvents.jsx b/src/front/components/CreatedEvents.jsx
new file mode 100644
index 0000000000..899a6c365a
--- /dev/null
+++ b/src/front/components/CreatedEvents.jsx
@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import { user } from '../jsApiComponents/user';
+import { useNavigate } from 'react-router-dom';
+import EventInfo from './EventInfo';
+import { Button } from 'react-bootstrap';
+
+
+
+export default function CreatedEvents() {
+ const [createdEvents, setCreatedEvents] = useState([]);
+ const navigate = useNavigate();
+ const BASE_URL = import.meta.env.VITE_BACKEND_URL;
+ const deleteEvent = async (eventId) => {
+ if (!window.confirm("¿Seguro que quieres eliminar este evento?")) return;
+
+ try {
+ const token = localStorage.getItem("JWT-STORAGE-KEY");
+
+ const response = await fetch(`${BASE_URL}api/activities/${eventId}`, {
+ method: "DELETE",
+ headers: {
+ "Authorization": `Bearer ${token}`,
+ "Content-Type": "application/json"
+ }
+ });
+
+ if (response.ok) {
+ setCreatedEvents(prev => prev.filter(ev => ev.id !== eventId));
+ } else if (response.status === 401) {
+ alert("Tu sesión ha caducado");
+ navigate("/login");
+ } else {
+ alert("No se pudo eliminar el evento.");
+ }
+
+ } catch (error) {
+ console.log("Error deleting event:", error);
+ }
+ };
+
+
+ const getUser = async () => {
+ try {
+ const response = await user();
+ if (response.ok) {
+ setCreatedEvents(response.data.created_by);
+ } else if (response.status === 401) {
+ alert("Tu sesión ha caducado!");
+ return navigate("/login");
+ }
+ } catch (error) {
+ console.log("Error fetching user:", error);
+ }
+ };
+
+ useEffect(() => {
+ getUser();
+ }, []);
+
+ return (
+ + Crear actividad deportiva +
+ + +
+
+ );
+}
diff --git a/src/front/components/EventDetails.css b/src/front/components/EventDetails.css
new file mode 100644
index 0000000000..fcda927f1b
--- /dev/null
+++ b/src/front/components/EventDetails.css
@@ -0,0 +1,242 @@
+/* Wrapper centrowanie */
+.event-card-wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ margin-top: 120px;
+ padding: 20px;
+}
+
+/* Karta neonowa */
+.event-card {
+ width: 100%;
+ max-width: 700px;
+ flex: 1 1 60%;
+ position: relative;
+
+ /* Neonowe tło jak CTA */
+ background: linear-gradient(145deg, #20232D, #171a24);
+ border-radius: 20px;
+ border-top: 2px solid #817DF9;
+
+ /* Padding i spacing */
+ padding: 30px;
+ color: #fff;
+
+ /* Glow / cień */
+ box-shadow: 0 5px 15px #817DF9;
+
+ /* Typografia */
+ font-size: 1rem;
+ text-align: center; /* Tytuł i sport na środku */
+
+ /* Animacje / przejścia */
+ transition: all 0.3s ease;
+}
+
+/* Tytuły */
+.event-title {
+ font-size: 2rem;
+ color: #E3FE18;
+ margin-bottom: 10px;
+}
+
+.event-sport {
+ font-size: 1.2rem;
+ color: #817DF9;
+ margin-bottom: 20px;
+}
+
+/* Obraz */
+.event-image {
+ width: 80%;
+ max-width: 500px;
+ border-radius: 12px;
+ margin: 20px auto;
+ display: block;
+ box-shadow: 0 4px 10px rgba(129, 125, 249, 0.4);
+}
+
+/* Opis */
+.event-description {
+ margin-top: 20px;
+ font-size: 1.1rem;
+ color: #cccccc;
+ text-align: left; /* opis normalnie */
+}
+
+/* Dodatkowe info */
+.event-info {
+ margin-top: 15px;
+ font-size: 0.95rem;
+ color: #ffffffcc;
+ text-align: left;
+}
+
+/* Loading / error */
+.event-details .loading,
+.event-details .error {
+ margin-top: 100px;
+ text-align: center;
+}
+
+.event-details .error {
+ color: #EE6C4D;
+}
+.back-btn {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ background: linear-gradient(145deg, #EE6C4D, #FF8A5C);
+ color: #fff;
+ border: none;
+ padding: 10px 18px;
+ border-radius: 14px;
+ cursor: pointer;
+ font-weight: 700;
+ font-size: 1rem;
+ box-shadow: 0 4px 0 #B94E34, 0 0 6px #EE6C4D;
+ transition: all 0.2s ease, box-shadow 0.3s ease;
+ text-align: center;
+}
+
+.back-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 0 #B94E34, 0 0 8px #EE6C4D;
+ background: linear-gradient(145deg, #FF8A5C, #EE6C4D);
+}
+
+.icon-info {
+ width: 20px;
+ height: 20px;
+ color: #817DF9; /* fioletowy kolor */
+ vertical-align: middle;
+ margin-right: 8px;
+}
+
+.star.filled {
+ color: #817DF9; /* fiolet dla gwiazdek */
+}
+
+.event-info p {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin: 6px 0;
+}
+.event-card {
+ position: relative;
+}
+
+.delete-btn {
+ position: absolute;
+ top: 16px;
+ right: 16px;
+ width: 36px;
+ height: 36px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 0;
+ transition: transform 0.2s;
+}
+
+.delete-btn:hover {
+ transform: scale(1.2);
+}
+
+.map-link {
+ text-decoration: none;
+ color: #817df9;
+ font-weight: bold;
+}
+
+.map-link:hover {
+ text-decoration: underline;
+}
+
+/* Responsywność */
+@media (max-width: 768px) {
+ .event-card {
+ padding: 20px;
+ }
+
+ .event-image {
+ width: 90%;
+ }
+}
+/* Tablety */
+@media (max-width: 768px) {
+ .event-card-wrapper {
+ margin-top: 80px;
+ padding: 15px;
+ }
+
+ .event-card {
+ padding: 20px;
+ }
+
+ .event-title {
+ font-size: 1.6rem;
+ }
+
+ .event-sport {
+ font-size: 1rem;
+ }
+
+ .event-description {
+ font-size: 1rem;
+ }
+
+ .event-info {
+ font-size: 0.9rem;
+ }
+
+ .event-image {
+ width: 90%;
+ max-width: 400px;
+ }
+}
+
+/* Smartfony */
+@media (max-width: 480px) {
+ .event-card-wrapper {
+ margin-top: 60px;
+ padding: 10px;
+ }
+
+ .event-card {
+ padding: 15px;
+ }
+
+ .event-title {
+ font-size: 1.4rem;
+ }
+
+ .event-sport {
+ font-size: 0.9rem;
+ }
+
+ .event-description {
+ font-size: 0.95rem;
+ }
+
+ .event-info {
+ font-size: 0.85rem;
+ }
+
+ .event-image {
+ width: 100%;
+ max-width: 300px;
+ }
+
+ .back-btn {
+ padding: 8px 14px;
+ font-size: 0.9rem;
+ }
+
+ .add-btn {
+ width: 32px;
+ height: 32px;
+ }
+}
diff --git a/src/front/components/EventDetails.jsx b/src/front/components/EventDetails.jsx
new file mode 100644
index 0000000000..855416929e
--- /dev/null
+++ b/src/front/components/EventDetails.jsx
@@ -0,0 +1,176 @@
+
+import React, { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import "./EventDetails.css";
+
+// SVG
+const IconAdmin = ({ className = "" }) => (
+
+);
+
+const IconGroup = ({ className = "" }) => (
+
+);
+
+const IconCalendar = ({ className = "" }) => (
+
+);
+
+const IconLocation = ({ className = "" }) => (
+
+);
+
+export const EventDetails = () => {
+ const { id } = useParams();
+ const navigate = useNavigate();
+ const [event, setEvent] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState("");
+ const [rating, setRating] = useState(0);
+ const BASE_URL = import.meta.env.VITE_BACKEND_URL;
+
+ useEffect(() => {
+ const loadEvent = async () => {
+ try {
+ const resp = await fetch(`${BASE_URL}/api/activities/${id}`);
+ if (!resp.ok) throw new Error("No se pudo cargar el evento");
+ const data = await resp.json();
+ setEvent(data);
+ setRating(data.rating || 0);
+ } catch (err) {
+ setError(err.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+ loadEvent();
+ }, [id]);
+
+ if (loading) return Eventos creados por mí
+ + {createdEvents.length === 0 &&No has creado ningún evento todavía.
} + + {createdEvents.map(event => ( +
+
+ ))}
+ {event.title}
+Deporte: {event.sport}
+Fecha: {event.date}
+Descripción: {event.description}
+Participantes: {event.participants.length}/{event.max_participants}
+ + + Ver en Google Maps + + + + + + +Cargando…
; + if (error) return{error}
; + if (!event) returnEvento no encontrado
; + + const handleRate = async (value) => { + setRating(value); // UI change + try { + const token = localStorage.getItem("JWT-STORAGE-KEY"); + const resp = await fetch(`${BASE_URL}/api/activities/${id}/rate`, { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }, + body: JSON.stringify({ score: value }) + }); + if (!resp.ok) throw new Error("No rating saved"); + const data = await resp.json(); + setRating(data.average_rating ?? data.rating ?? value); + } catch (err) { + console.error(err); + alert("Gracias ;)"); + } + }; + + const unsubscribeEvent = async (eventId) => { + try { + const token = localStorage.getItem("JWT-STORAGE-KEY"); + const resp = await fetch(`${BASE_URL}api/activities/${eventId}/leave`, { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }, + }); + if (!resp.ok) throw new Error("No se pudo dar de baja"); + + if (resp.ok) { + alert("Te has dado de baja del evento"); + } + } catch (err) { + alert(err.message); + } + }; + + return ( +
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/components/EventInfo.jsx b/src/front/components/EventInfo.jsx
new file mode 100644
index 0000000000..811757e023
--- /dev/null
+++ b/src/front/components/EventInfo.jsx
@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import { Modal } from "react-bootstrap";
+
+
+export default function EventInfo({ event }) {
+ const [show, setShow] = useState(false);
+
+ const handleOpen = () => setShow(true);
+ const handleClose = () => setShow(false);
+
+ return (
+ <>
+ {/* Botón abrir modal */}
+
+
+
+
+
+
+
+
+
+
+ 
}
+
+ {/* Stars */}
+
+ +
+ {event.sport}
+{event.title || event.name}
+ + {event.image &&
+ {[1, 2, 3, 4, 5].map((star) => (
+ handleRate(star)}
+ >
+ ★
+
+ ))}
+ {rating.toFixed(1)}
+
+
+
+ + +
{event.description}
+ +
+
+
+
+
Deporte: {event.sport}
+Fecha: {event.date}
+Descripción: {event.description}
+Organizado por: {event.creator_name}
+Participantes: {event.participants.length}/{event.max_participants}
+ ++ +
Localización:
+ {/*{event.latitude}, {event.longitude}
*/} + + {/* Botón Google Maps */} + + Ver en Google Maps 📍 + +Mantente en contacto
+Suscríbete a nuestro newsletter para recibir noticias y novedades:
+ +
+
+ );
+}
diff --git a/src/front/components/ListOfActivities.jsx b/src/front/components/ListOfActivities.jsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/front/components/LogOut.jsx b/src/front/components/LogOut.jsx
new file mode 100644
index 0000000000..7494821c3a
--- /dev/null
+++ b/src/front/components/LogOut.jsx
@@ -0,0 +1,13 @@
+import { useNavigate } from "react-router-dom";
+import UseLogOut from "../api/logout.js";
+
+export const LogOut = () => {
+ const navigate = useNavigate()
+ const logOut = UseLogOut()
+ return (
+ <>
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/components/Logo.jsx b/src/front/components/Logo.jsx
new file mode 100644
index 0000000000..b47406aa87
--- /dev/null
+++ b/src/front/components/Logo.jsx
@@ -0,0 +1,7 @@
+// src/components/Logo.jsx
+import React from "react";
+import logo from "../assets/img/logo.svg";
+
+export const Logo = ({ width = 80, height = 80 }) => {
+ return Eventos a los que me he unido
+ + {joinedEvents.length === 0 &&No te has unido a ningún evento todavía.
} + + {joinedEvents.map(event => ( +
+
+ ))}
+ {event.title}
+Deporte: {event.sport}
+Fecha: {event.date}
+Descripción: {event.description}
+Organizado por: {event.creator_name}
+Participantes: {event.participants.length}/{event.max_participants}
+ + + Ver en Google Maps + + +
+
+
+
+
+ )
+}
+
+
diff --git a/src/front/components/Navbar.css b/src/front/components/Navbar.css
new file mode 100644
index 0000000000..a4e5f78597
--- /dev/null
+++ b/src/front/components/Navbar.css
@@ -0,0 +1,125 @@
+
+.custom-navbar {
+ background-color: #EE6C4D !important;
+ padding: 1rem 1.5rem;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
+ transition: background-color 0.3s ease;
+}
+
+.navbar-logo {
+ display: block;
+
+ transform: translateY(4px);
+}
+
+.meetfit-text {
+ font-weight: 900;
+ font-size: 2.5rem;
+ color: #817df9;
+ letter-spacing: 1px;
+ transition: color 0.3s ease, transform 0.3s ease;
+ cursor: pointer;
+}
+
+
+.meetfit-text:hover {
+ color: #5E50F9;
+ transform: scale(1.05);
+ text-shadow:
+ 2px 2px 6px rgba(229, 228, 244, 0.7),
+ 0 0 10px rgba(220, 248, 167, 0.4);
+}
+
+
+
+.custom-btn {
+ background-color: #817DF9 !important;
+ border: none;
+ color: #E3FE18 !important;
+ font-weight: 400;
+ padding: 0.6rem 1.4rem;
+ border-radius: 0.5rem;
+ box-shadow: 0 4px 10px rgba(129, 125, 249, 0.4);
+ transition: all 0.3s ease;
+}
+
+
+.custom-btn:hover {
+ background-color: #6c5cd7 !important;
+ box-shadow: 0 6px 20px rgba(129, 125, 249, 0.6);
+ transform: translateY(-2px) scale(1.05);
+}
+
+
+.custom-btn:active {
+ transform: translateY(1px) scale(0.98);
+ box-shadow: 0 3px 8px rgba(129, 125, 249, 0.3);
+}
+
+
+.custom2-btn {
+ font-weight: 700;
+ color: #001F54;
+ font-size: 1.1rem;
+ letter-spacing: 1px;
+ padding: 5px 8px;
+ border-radius: 4px;
+ transition: all 0.3s ease;
+ cursor: default;
+}
+
+
+.custom2-btn:hover {
+ border-color: #001F54;
+ color: #001F54;
+}
+
+@media (max-width: 768px) {
+ .custom-navbar {
+ padding: 0.5rem 1rem;
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .left-menu {
+ margin-right: 0;
+ margin-bottom: 0.5rem;
+ }
+
+ .right-menu {
+ margin-left: 0;
+ margin-top: 0.5rem;
+ }
+
+ .search-wrapper {
+ max-width: 100%;
+ width: 100%;
+ margin-bottom: 0.5rem;
+ }
+
+ .meetfit-text,
+ .meetfit-text-custom,
+ .custom2-btn {
+ font-size: 1rem;
+ padding: 4px 8px;
+ }
+}
+
+
+@media (max-width: 480px) {
+ .custom-navbar {
+ padding: 0.4rem 0.8rem;
+ }
+
+ .meetfit-text,
+ .meetfit-text-custom,
+ .custom2-btn {
+ font-size: 0.9rem;
+ padding: 3px 6px;
+ }
+
+ .left-menu,
+ .right-menu {
+ margin: 0;
+ }
+}
diff --git a/src/front/components/Navbar.jsx b/src/front/components/Navbar.jsx
index 30d43a2636..0d712bf7d9 100644
--- a/src/front/components/Navbar.jsx
+++ b/src/front/components/Navbar.jsx
@@ -1,19 +1,30 @@
+import React from "react";
import { Link } from "react-router-dom";
+import "./Navbar.css";
+
export const Navbar = () => {
+ return (
+
+ );
+};
diff --git a/src/front/components/SplashNavbar.jsx b/src/front/components/SplashNavbar.jsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/front/components/SplashScreen.css b/src/front/components/SplashScreen.css
new file mode 100644
index 0000000000..7321c6450e
--- /dev/null
+++ b/src/front/components/SplashScreen.css
@@ -0,0 +1,40 @@
+.splash-screen {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ width: 100%;
+ background: url('../assets/img/background-screens.png') center/cover no-repeat;
+ color: #817df9;
+ text-align: center;
+}
+
+.splash-logo {
+ width: 150px;
+ margin-bottom: 10px;
+ animation: fadeIn 1s ease-in-out;
+}
+
+.splash-title {
+ font-size: 5rem;
+ margin-bottom: 10px;
+ animation: fadeIn 1s ease-in-out;
+}
+
+.splash-subtitle {
+ font-size: 1.5rem;
+ margin-bottom: 15px;
+ animation: fadeIn 1s ease-in-out;
+}
+
+.splash-slogan {
+ font-size: 1.2rem;
+ font-weight: bold;
+ animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(10px); }
+ to { opacity: 1; transform: translateY(0); }
+}
diff --git a/src/front/components/SplashScreen.jsx b/src/front/components/SplashScreen.jsx
new file mode 100644
index 0000000000..943ff4de9b
--- /dev/null
+++ b/src/front/components/SplashScreen.jsx
@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from "react";
+import "./SplashScreen.css";
+
+const phase1Slogans = ["Sport.", "Connect.", "Explore."];
+
+const SplashScreen = ({ onFinish }) => {
+ const [index, setIndex] = useState(0);
+
+ useEffect(() => {
+ if (index < phase1Slogans.length) {
+ const timer = setTimeout(() => setIndex(index + 1), 700);
+ return () => clearTimeout(timer);
+ } else {
+
+ const finishTimer = setTimeout(onFinish, 500);
+ return () => clearTimeout(finishTimer);
+ }
+ }, [index, onFinish]);
+
+ return (
+
+
+
+
+
+ {index < phase1Slogans.length && (
+
+ );
+};
+
+export default SplashScreen;
diff --git a/src/front/components/StarRating.css b/src/front/components/StarRating.css
new file mode 100644
index 0000000000..97b5a92391
--- /dev/null
+++ b/src/front/components/StarRating.css
@@ -0,0 +1,68 @@
+.star-rating {
+ display: flex;
+ gap: 5px;
+ font-size: 1.5rem;
+ color: #ccc;
+}
+
+.star {
+ cursor: pointer;
+ transition: color 0.2s ease;
+}
+
+.star.filled {
+ color: #EE6C4D;
+}
+
+.star:hover {
+ color: #FF8A5C;
+}
+@media (max-width: 768px) {
+ .custom-navbar {
+ padding: 0.5rem 1rem;
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .left-menu {
+ margin-right: 0;
+ margin-bottom: 0.5rem;
+ }
+
+ .right-menu {
+ margin-left: 0;
+ margin-top: 0.5rem;
+ }
+
+ .search-wrapper {
+ max-width: 100%;
+ width: 100%;
+ margin-bottom: 0.5rem;
+ }
+
+ .meetfit-text,
+ .meetfit-text-custom,
+ .custom2-btn {
+ font-size: 1rem;
+ padding: 4px 8px;
+ }
+}
+
+
+@media (max-width: 480px) {
+ .custom-navbar {
+ padding: 0.4rem 0.8rem;
+ }
+
+ .meetfit-text,
+ .meetfit-text-custom,
+ .custom2-btn {
+ font-size: 0.9rem;
+ padding: 3px 6px;
+ }
+
+ .left-menu,
+ .right-menu {
+ margin: 0;
+ }
+}
diff --git a/src/front/components/StarRating.jsx b/src/front/components/StarRating.jsx
new file mode 100644
index 0000000000..e62058347f
--- /dev/null
+++ b/src/front/components/StarRating.jsx
@@ -0,0 +1,22 @@
+import React, { useState } from "react";
+import "./StarRating.css";
+
+export const StarRating = ({ rating = 0, onRate }) => {
+ const [hover, setHover] = useState(0);
+
+ return (
+ {phase1Slogans[index]}
+ )} +
+ {[1, 2, 3, 4, 5].map((star) => (
+ setHover(star)}
+ onMouseLeave={() => setHover(0)}
+ onClick={() => onRate && onRate(star)}
+ >
+ ★
+
+ ))}
+
+ );
+};
diff --git a/src/front/components/TextInput.jsx b/src/front/components/TextInput.jsx
new file mode 100644
index 0000000000..c4561012d9
--- /dev/null
+++ b/src/front/components/TextInput.jsx
@@ -0,0 +1,43 @@
+//Input que permite texto y opcionalmente toggle para mostrar/ocultar (para passwords)
+
+import { useState } from "react";
+
+export default function TextInput({
+ label,
+ type = "text",
+ name,
+ value,
+ onChange,
+ placeholder,
+ withToggle = false,
+ required = true,
+}) {
+ const [show, setShow] = useState(false);
+ const finalType = withToggle ? (show ? "text" : "password") : type;
+
+ return (
+
+ {label && }
+
+ {withToggle && (
+
+ )}
+
+ );
+}
diff --git a/src/front/components/UpdateUser.jsx b/src/front/components/UpdateUser.jsx
new file mode 100644
index 0000000000..52c401c4b0
--- /dev/null
+++ b/src/front/components/UpdateUser.jsx
@@ -0,0 +1,98 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify"; // 👈 NUEVO
+import { updateUser } from "../jsApiComponents/auth";
+import { Form } from "react-bootstrap";
+
+export default function UpdateUser({ refreshUser, user_bio, user_sports, user_level, user_lastname }) {
+ const [info, setInfo] = useState({ bio: "", sports: "", level: "", lastname: "" });
+ const userID = localStorage.getItem("USER");
+ const navigate = useNavigate();
+
+ const updateSuccess = async (e) => {
+ e.preventDefault();
+
+ const body = {
+ lastname: info.lastname,
+ bio: info.bio,
+ sports: info.sports,
+ level: info.level,
+ };
+
+ const data = await updateUser(body, userID);
+
+ if (data.status === 400) {
+ toast.error("❌ Algo salió mal. Inténtalo nuevamente.");
+ return;
+ }
+
+ if (data.status === 200) {
+ toast.success("🎉 Perfil actualizado con éxito!");
+ refreshUser();
+ navigate("/profile");
+ }
+ };
+
+ useEffect(() => {
+ setInfo({
+ bio: user_bio,
+ sports: user_sports,
+ level: user_level,
+ lastname: user_lastname,
+ });
+ }, [user_bio, user_sports, user_level, user_lastname]);
+
+ return (
+
+ );
+}
diff --git a/src/front/hooks/useGlobalReducer.jsx b/src/front/hooks/useGlobalReducer.jsx
index 6aeb9d768e..33301dfc8f 100644
--- a/src/front/hooks/useGlobalReducer.jsx
+++ b/src/front/hooks/useGlobalReducer.jsx
@@ -1,7 +1,11 @@
// 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 from "../store";
+export const initialStore = () => ({
+ message: "",
+ user: null
+});
// 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()
diff --git a/src/front/index.css b/src/front/index.css
index e69de29bb2..3d7967e117 100644
--- a/src/front/index.css
+++ b/src/front/index.css
@@ -0,0 +1,592 @@
+body,
+html {
+ overflow-x: hidden !important;
+ font-size: 16px;
+}
+
+.btn-dark:hover {
+ background-color: #0a0a0a !important;
+ border-color: #424242 !important;
+}
+.custom-overflow {
+ overflow-y: scroll;
+ border-color: #817df9 !important;
+}
+.profile-fixed-card {
+ height: 80vh;
+ border-radius: 20px;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+.custom {
+ min-height: 75vh;
+}
+.profile-fixed-card::-webkit-scrollbar {
+ width: 6px;
+}
+.profile-fixed-card::-webkit-scrollbar-track {
+ background: transparent;
+ border-radius: 10px;
+}
+.profile-fixed-card::-webkit-scrollbar-thumb {
+ background-color: rgba(255, 255, 255, 0.4);
+ border-radius: 10px;
+}
+/* vvv BOTÓN NEÓN CREAR ACTIVIDAD vvv */
+.footer-cta .newsletter-form .neon-create-btn {
+ width: 90%;
+ max-width: 340px;
+ background-color: #ee6c4d !important;
+ color: #fff !important;
+ border: none !important;
+ padding: 0.9rem 1.8rem !important;
+ font-weight: 700 !important;
+ border-radius: 12px !important;
+ cursor: pointer !important;
+ box-shadow: 0 6px 0 #b94e34 !important;
+ transition: all 0.2s ease !important;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+.footer-cta .newsletter-form .neon-create-btn:hover:not(:disabled) {
+ transform: translateY(-3px);
+ background-color: #e45b3a !important;
+ box-shadow: 0 8px 0 #b94e34 !important;
+}
+.footer-cta .newsletter-form .neon-create-btn:disabled {
+ background-color: #3b3b3b !important;
+ color: #888 !important;
+ cursor: not-allowed !important;
+ box-shadow: none !important;
+ transform: none !important;
+}
+/* ^^^ BOTÓN NEÓN CREAR ACTIVIDAD ^^^ */
+.map-layout {
+ height: 80vh;
+ min-height: 520px;
+ max-height: 900px;
+ overflow: hidden;
+ padding: 10px;
+}
+/* :small_blue_diamond: Asegura que todo el layout use el alto completo */
+html,
+body,
+#root {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+/* :small_blue_diamond: Flex estable para que el mapa NO desaparezca */
+body > div,
+.d-flex.flex-column {
+ min-height: 100%;
+}
+/* :small_blue_diamond: MAIN debe crecer sin empujar ni romper vistas */
+main.custom {
+ flex: 1 1 auto;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start; /* evita que empuje */
+ padding: 1rem 0;
+}
+/* :small_blue_diamond: Evitar scroll horizontal global */
+body {
+ overflow-x: hidden;
+}
+/* :milky_way: Card “Stable” Global Style - MeetFit */
+.profile-stable-card {
+ background: linear-gradient(145deg, #20232d, #171a24);
+ border-radius: 22px !important;
+ border-top: 4px solid #817df9;
+ box-shadow: 0 4px 22px #817df9 !important;
+ padding: 30px !important;
+ width: 100%;
+ max-width: 700px;
+ margin: 0 auto !important;
+ color: #e6e6e6 !important;
+}
+/* :frame_with_picture: Avatars con borde neon */
+.profile-avatar {
+ width: 120px;
+ height: 120px;
+ border-radius: 50%;
+ object-fit: cover;
+ border: 2px solid #e3fe18;
+ box-shadow: 0 0 8px #e3fe18;
+}
+/* :label: Títulos dentro del Card */
+.profile-stable-card h4,
+.profile-stable-card h5 {
+ color: #e3fe18 !important;
+}
+/* :receipt: Formularios dentro del card */
+.profile-stable-card form input,
+.profile-stable-card form select,
+.profile-stable-card form textarea {
+ background: #2a2d3a;
+ color: white;
+ border: 1px solid #656565;
+ border-radius: 8px;
+}
+.profile-stable-card form input::placeholder,
+.profile-stable-card form textarea::placeholder {
+ color: #9f9f9f;
+}
+
+.custom-modal-header {
+ background-color: #817df9 !important;
+ color: #e3fe18 !important;
+ border-top: 4px solid #605af8;
+}
+.custom-modal-body {
+ background: linear-gradient(145deg, #20232d, #171a24);
+ color: white !important;
+}
+
+/* === :crystal_ball: INPUT / SELECT NEÓN UNIFICADO === */
+.mf-neon-input {
+ width: 90% !important;
+ max-width: 420px !important;
+ background: #2a2d3a !important;
+ color: #fff !important;
+ border-radius: 12px !important;
+ border: 2px solid #817df9 !important;
+ padding: 0.8rem 1rem !important;
+ font-weight: 500 !important;
+ box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.4), 0 0 8px transparent !important;
+ transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
+}
+.mf-neon-input:hover,
+.mf-neon-input:focus {
+ border-color: #e3fe18 !important;
+ box-shadow: 0 0 12px #e3fe18 !important;
+}
+/* Placeholder */
+.mf-neon-input::placeholder {
+ color: #ffffffb0 !important;
+}
+/* === :crystal_ball: BOTÓN PEQUEÑO DE EVENTOS === */
+.mf-neon-btn-small {
+ background-color: #ee6c4d !important;
+ color: #fff !important;
+ border-radius: 10px !important;
+ padding: 4px 10px !important;
+ font-weight: 700 !important;
+ cursor: pointer !important;
+ border: none !important;
+ box-shadow: 0 4px 0 #b94e34 !important;
+ transition: all 0.2s ease;
+}
+.mf-neon-btn-small:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 0 #b94e34 !important;
+}
+/* Botón buscar y seleccionar */
+.mf-neon-btn-purple {
+ background-color: #817df9 !important;
+ box-shadow: 0 4px 0 #5d5ab9 !important;
+}
+.mf-neon-btn-purple:hover {
+ box-shadow: 0 6px 0 #5d5ab9 !important;
+ transform: translateY(-2px);
+}
+.mf-neon-input {
+ width: 90% !important;
+ max-width: 450px !important;
+ margin: 0 auto !important;
+ display: block !important;
+ text-align: center !important;
+}
+/* Tema de autenticación oscuro */
+.auth-theme {
+ --bg: #0f1b2b;
+ --card: #1a2740;
+ --muted: #a3b1c6;
+ --text: #e8eef7;
+ --accent: #ee6c4d;
+ --accent-hover: #ea5029;
+ --input: #0e1a2a;
+ --radius: 22px;
+ background: #0f1120;
+ min-height: 100vh;
+}
+
+/* Contenedor general */
+.auth-theme .auth-shell {
+ min-height: calc(100vh - 80px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 40px 16px;
+}
+
+/* Tarjeta principal */
+.auth-theme .auth-card {
+ width: 100%;
+ max-width: 980px;
+ background: rgba(7, 15, 26, 0.96);
+ border-radius: var(--radius);
+ padding: 32px 40px;
+ color: var(--text);
+ box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
+}
+
+/* Layout horizontal interno: formulario + panel */
+.auth-card-horizontal {
+ display: flex;
+ gap: 40px;
+ align-items: flex-start;
+}
+
+/* Columna del formulario */
+.auth-card-main {
+ flex: 1 1 0;
+ display: flex;
+ flex-direction: column;
+}
+
+/* Panel lateral sencillo */
+.auth-card-side {
+ flex: 0 0 320px;
+ background: rgba(255, 255, 255, 0.04);
+ border-radius: 18px;
+ padding: 20px 22px;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+ color: #e8eef7;
+}
+
+.auth-card-side h3 {
+ margin: 0 0 8px 0;
+ font-size: 20px;
+ font-weight: 700;
+}
+
+.auth-card-side p {
+ font-size: 14px;
+ line-height: 1.4;
+ margin-bottom: 8px;
+}
+
+.auth-card-side ul {
+ list-style: none;
+ padding-left: 0;
+ margin: 4px 0 0 0;
+ font-size: 13px;
+}
+
+.auth-card-side li + li {
+ margin-top: 4px;
+}
+
+/* Título y subtítulo del formulario */
+.auth-theme .auth-title {
+ font-size: 24px;
+ font-weight: 700;
+ text-align: left;
+ margin: 4px 0 6px;
+}
+
+.auth-theme .auth-sub {
+ color: var(--muted);
+ font-size: 13px;
+ margin-bottom: 18px;
+}
+
+.auth-theme .auth-title {
+ font-size: 22px;
+ font-weight: 700;
+ text-align: center;
+ margin: 6px 0 18px;
+}
+.auth-theme .auth-sub {
+ color: var(--muted);
+ font-size: 13px;
+ margin-bottom: 18px;
+}
+/* Inputs y labels */
+.auth-theme .form-label {
+ color: var(--muted);
+ font-size: 13px;
+ margin-bottom: 6px;
+}
+.auth-theme .input-dark.form-control {
+ background: var(--input);
+ border: 1px solid rgba(255, 255, 255, 0.06);
+ color: var(--text);
+ border-radius: 12px;
+ height: 44px;
+}
+.auth-theme .input-dark.form-control::placeholder {
+ color: #7f8ba1;
+}
+.auth-theme .input-dark.form-control:focus {
+ background: var(--input);
+ color: var(--text);
+ border-color: rgba(255, 255, 255, 0.15);
+ box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.15);
+}
+/* Select oscuro */
+.auth-theme .select-dark.form-select {
+ background: var(--input);
+ border: 1px solid rgba(255, 255, 255, 0.06);
+ color: var(--text);
+ border-radius: 12px;
+ height: 44px;
+}
+
+.auth-theme .select-dark.form-select:focus {
+ background: var(--input);
+ color: var(--text);
+ border-color: rgba(255, 255, 255, 0.15);
+ box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.15);
+}
+
+.auth-theme .btn-accent {
+ background: var(--accent);
+ border: none;
+ color: #fff;
+ height: 46px;
+ border-radius: 12px;
+ font-weight: 600;
+}
+.auth-theme .btn-accent:hover {
+ background: var(--accent-hover);
+}
+.auth-theme .link-muted {
+ color: var(--muted);
+ font-size: 13px;
+}
+.auth-theme .link-accent {
+ color: var(--accent);
+ text-decoration: none;
+ font-weight: 600;
+}
+.auth-theme .link-accent:hover {
+ color: var(--accent-hover);
+}
+/* Icono ojo y nota pequeña */
+.auth-theme .eye-btn {
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ background: transparent;
+ border: 0;
+ color: #9ab0cc;
+}
+.auth-theme .small-note {
+ font-size: 12px;
+ color: var(--muted);
+ margin-top: 6px;
+}
+
+.custom-overflow {
+ background: linear-gradient(145deg, #20232d, #171a24);
+}
+
+/* Estilo para boton MapView y Crear Actividad PopUp */
+body {
+ background-color: #0f1120;
+ margin: 0;
+ min-height: 100vh;
+}
+.btn_Map {
+ background-color: #ee6c4d;
+ border: 1px solid #001f54;
+ border-radius: 5px;
+ color: #001f54;
+ font-weight: 400;
+ font-size: 1.1rem;
+ box-shadow: 0 0px 20px #93877f;
+ transition: 0.25s ease;
+}
+.btn_Map:hover {
+ border-color: #001f54;
+ color: #e3fe18;
+ background-color: #817df9;
+}
+.bg_PopUp {
+ background-color: #0f1b2b !important;
+}
+
+.custom-bg {
+ background: linear-gradient(145deg, #20232d, #171a24);
+}
+.custom-container-bg {
+ color: white;
+ padding: 20px;
+ border-radius: 10px;
+}
+
+::-webkit-scrollbar {
+ width: 6px;
+}
+::-webkit-scrollbar-thumb {
+ background: #e3fe18;
+ border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+ background: #e3fe18;
+}
+.event-scroll-wrapper {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+}
+.event-scroll-container {
+ display: flex !important;
+ flex-direction: row;
+ gap: 15px;
+ overflow-x: auto;
+ padding: 10px;
+ max-width: 100%;
+}
+.event-card-scroll {
+ min-width: 230px;
+ max-width: 230px;
+ background: #ffffff;
+ border-radius: 12px;
+ padding: 15px;
+ border: 2px solid #001f54;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+}
+.event-card-scroll h5 {
+ font-weight: bold;
+ margin-bottom: 8px;
+}
+.actividades-title {
+ color: #d7d5f8;
+ font-weight: bold;
+ font-size: 1.5rem;
+}
+.actividades-box {
+ border: 2px solid #e3fe18;
+ border-radius: 12px;
+ padding: 20px;
+ background-color: #d7d5f8;
+ box-shadow: 0 5px 15px rgba(129, 125, 249, 0.3);
+ margin-top: 180px;
+}
+.actividades-title {
+ color: #817df9;
+ font-weight: bold;
+ font-size: 1.5rem;
+ margin-bottom: 20px;
+}
+.mf-neon-btn-orange {
+ background-color: #ee6c4d !important;
+ color: white !important;
+ font-weight: bold;
+ border-radius: 6px;
+}
+
+.neon-button {
+ background-color: #2a2d3a;
+ color: #fff;
+ border: 1px solid #1a1930;
+ border-radius: 6px;
+ padding: 12px 24px;
+ font-weight: bold;
+ text-decoration: none;
+ box-shadow: 0 3px 0 #b94e34;
+ transition: 0.3s ease;
+}
+
+.tip-bubble {
+ position: absolute;
+ padding: 18px 22px;
+ background: #e3fe18;
+ color: #001f54;
+ font-weight: 300;
+ border-radius: 50%;
+ width: 200px;
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ box-shadow: 0 0 40px 15px rgba(227, 254, 24, 0.35);
+ opacity: 0;
+ transform: scale(0.7);
+ animation: popIn 0.6s ease forwards;
+}
+.tip-bubble::after {
+ content: "";
+ position: absolute;
+ bottom: -18px;
+ width: 0;
+ height: 0;
+ border-left: 22px solid transparent;
+ border-right: 22px solid transparent;
+ border-top: 22px solid #e3fe18;
+ filter: drop-shadow(0 0 15px rgba(227, 254, 24, 0.35));
+}
+
+@keyframes popIn {
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+.hide {
+ opacity: 0;
+ transform: scale(0.7);
+ transition: all 0.4s ease;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+ .auth-theme .auth-shell {
+ padding: 24px 12px;
+ }
+
+ .auth-theme .auth-card {
+ max-width: 420px;
+ padding: 24px 20px;
+ }
+
+ .auth-card-horizontal {
+ flex-direction: column;
+ }
+
+ .auth-card-side {
+ display: none;
+ }
+
+ .auth-theme .auth-title,
+ .auth-theme .auth-sub {
+ text-align: center;
+ }
+}
+
+
+.google-map-link {
+ text-decoration: none;
+}
+
+.mf-neon-btn-danger {
+ display: inline-block;
+ padding: 8px 14px;
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: #ff4d6d;
+ background: transparent;
+ border: 2px solid #ff4d6d;
+ border-radius: 6px;
+ cursor: pointer;
+ transition: 0.25s ease;
+ text-shadow: 0 0 5px #ff4d6d;
+ box-shadow: 0 0 6px #ff4d6d, inset 0 0 6px #ff4d6d;
+}
+
+.mf-neon-btn-danger:hover {
+ color: #ffffff;
+ background: #ff4d6d;
+ box-shadow: 0 0 10px #ff4d6d, 0 0 20px #ff4d6d, inset 0 0 10px #ff3360;
+ transform: translateY(-2px);
+}
+
+.mf-neon-btn-danger:active {
+ transform: scale(0.95);
+ box-shadow: 0 0 5px #ff4d6d, inset 0 0 5px #ff4d6d;
+}
diff --git a/src/front/jsApiComponents/auth.js b/src/front/jsApiComponents/auth.js
new file mode 100644
index 0000000000..d53152e8e8
--- /dev/null
+++ b/src/front/jsApiComponents/auth.js
@@ -0,0 +1,60 @@
+const BASE_URL = import.meta.env.VITE_BACKEND_URL
+export const login = async (body) => {
+ try {
+ const response = await fetch(`${BASE_URL}api/login`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(body),
+ });
+ const data = await response.json();
+ console.log(data);
+ console.log(data.access_token);
+ localStorage.setItem("JWT-STORAGE-KEY", data.token);
+ localStorage.setItem("USER", JSON.stringify(data.user));
+
+ return {data, status: response.status, "ok": response.ok };
+ } catch (error) {
+ console.log("Error en login.js", error)
+ return {
+ "data": null,
+ "status": 500,
+ "ok": false,
+ "error": error.message
+ }
+ }
+}
+export const register = async (body) => {
+ const response = await fetch(`${BASE_URL}api/register`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(body),
+ });
+ const data = await response.json()
+ return {data, status: response.status}
+ }
+export const updateUser = async (body, user) =>{
+ const token = localStorage.getItem("JWT-STORAGE-KEY")
+ const response = await fetch(`${BASE_URL}api/user/${user}`, {
+ method: 'PUT',
+ headers: { "Content-Type": "application/json" ,
+ 'Authorization': `Bearer ${token}`},
+ body: JSON.stringify(body)
+ })
+ const data = await response.json()
+ return {data, status: response.status}
+}
+
+export const requestReset = async (email) => {
+ try {
+ const response = await fetch(`${BASE_URL}api/forgot`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ email })
+ });
+ return response.json();
+ } catch (error) {
+ console.log(error);
+ }
+
+};
+
diff --git a/src/front/jsApiComponents/deleteUser.js b/src/front/jsApiComponents/deleteUser.js
new file mode 100644
index 0000000000..92030bb234
--- /dev/null
+++ b/src/front/jsApiComponents/deleteUser.js
@@ -0,0 +1,21 @@
+const BASE_URL = import.meta.env.VITE_BACKEND_URL;
+export const deleteUser = async () => {
+ const user = localStorage.getItem("USER");
+ const token = localStorage.getItem("JWT-STORAGE-KEY");
+ try {
+ const response = await fetch(`${BASE_URL}api/user/${user}`, {
+ method: "DELETE",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ });
+ if (response.status === 204) return {'msg': "Usuario Eliminado"}
+
+ const data = await response.json();
+
+ return data;
+ } catch (error) {
+ console.log(error);
+ }
+};
diff --git a/src/front/jsApiComponents/events.js b/src/front/jsApiComponents/events.js
new file mode 100644
index 0000000000..5418d8c96f
--- /dev/null
+++ b/src/front/jsApiComponents/events.js
@@ -0,0 +1,4 @@
+const BASE_URL = import.meta.env.VITE_BACKEND_URL;
+const userID = localStorage.getItem("USER");
+const token = localStorage.getItem("JWT-STORAGE-KEY");
+
diff --git a/src/front/jsApiComponents/logout.js b/src/front/jsApiComponents/logout.js
new file mode 100644
index 0000000000..3e807f3831
--- /dev/null
+++ b/src/front/jsApiComponents/logout.js
@@ -0,0 +1,12 @@
+// import React from "react";
+// import { useNavigate } from "react-router-dom";
+// import useGlobalReducer from "../hooks/useGlobalReducer";
+
+// export default function UseLogOut() {
+
+// const LogOut = () => {
+// localStorage.removeItem("JWT-STORAGE-KEY");
+// };
+// return LogOut;
+// }
+// //
diff --git a/src/front/jsApiComponents/sports.js b/src/front/jsApiComponents/sports.js
new file mode 100644
index 0000000000..cba6bff523
--- /dev/null
+++ b/src/front/jsApiComponents/sports.js
@@ -0,0 +1,12 @@
+export const sports = [
+ "Yoga",
+ "Running",
+ "Ciclismo",
+ "Pilates",
+ "Baloncesto",
+ "Spinning",
+ "Meditacion",
+ "Funcional",
+ "Caminata",
+ "Natación",
+];
diff --git a/src/front/jsApiComponents/sportsImages.js b/src/front/jsApiComponents/sportsImages.js
new file mode 100644
index 0000000000..85a7d3f86a
--- /dev/null
+++ b/src/front/jsApiComponents/sportsImages.js
@@ -0,0 +1,10 @@
+export const sportImages = {
+ Yoga: "https://cdn.getyourguide.com/image/format=auto,fit=contain,gravity=auto,quality=60,width=1440,height=650,dpr=1/tour_img/724c514c8455afc2a374acfef42807e12740f867305e87421a07c24d39d14a23.jpeg",
+ Running: "https://www.aytolalaguna.es/actualidad/noticias/.galleries/IMAGENES-Noticias/2025/01/CARRERA-NOCTURNA-2024.jpeg",
+ Pilates: "https://assets.dmagstatic.com/wp-content/uploads/2019/08/tight10of19-677x451.jpg",
+ Ciclismo: "https://blogscdn.thehut.net/wp-content/uploads/sites/450/2016/08/09041209/beneficios-spinning-1.jpg",
+ Meditacion: "https://www.elpradopsicologos.es/storage/posts/June2021/group-of-young-sporty-people-sitting-in-padmasana-pose.jpg",
+ Funcional: "https://akroscenter.com/wp-content/uploads/2023/05/Entrenamiento-funcional-Descubre-sus-beneficios.jpg",
+ Caminata: "https://estaticosgn-cdn.deia.eus/clip/604fa017-9146-4961-b436-f7bb5a2ff949_16-9-discover-aspect-ratio_default_0.jpg",
+ Natación: "https://noticiasncc.com/wp-content/uploads/2024/01/183-6-CIENCIA_Natacio%CC%81n-nin%CC%83os_.jpg"
+};
diff --git a/src/front/jsApiComponents/user.js b/src/front/jsApiComponents/user.js
new file mode 100644
index 0000000000..9b3a71660d
--- /dev/null
+++ b/src/front/jsApiComponents/user.js
@@ -0,0 +1,29 @@
+export const user = async () => {
+ const BASE_URL = import.meta.env.VITE_BACKEND_URL;
+
+ const token = localStorage.getItem("JWT-STORAGE-KEY");
+ if (!token) {
+ return { data: null, status: 401, ok: false };
+}
+
+ try {
+ const response = await fetch(`${BASE_URL}api/me`, {
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ });
+
+ const data = await response.json();
+
+ return { data, status: response.status, ok: response.ok };
+ } catch (error) {
+ console.log("Error en user.js", error);
+ return {
+ data: null,
+ status: 500,
+ ok: false,
+ error: error.message,
+ };
+ }
+};
diff --git a/src/front/main.jsx b/src/front/main.jsx
index a5a3c781dc..6297266aa1 100644
--- a/src/front/main.jsx
+++ b/src/front/main.jsx
@@ -1,29 +1,42 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import './index.css' // Global styles for your application
-import { RouterProvider } from "react-router-dom"; // Import RouterProvider to use the router
-import { router } from "./routes"; // Import the router configuration
-import { StoreProvider } from './hooks/useGlobalReducer'; // Import the StoreProvider for global state management
-import { BackendURL } from './components/BackendURL';
+import React, { useState, useEffect } from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import { RouterProvider } from "react-router-dom";
+import { router } from "./routes";
+import { StoreProvider } from "./hooks/useGlobalReducer";
+import { BackendURL } from "./components/BackendURL";
+import SplashScreen from "./components/SplashScreen";
+
+
const Main = () => {
-
- if(! import.meta.env.VITE_BACKEND_URL || import.meta.env.VITE_BACKEND_URL == "") return (
-
+ 
+
+ );
+};
diff --git a/src/front/pages/Eventos.jsx b/src/front/pages/Eventos.jsx
new file mode 100644
index 0000000000..e06943d557
--- /dev/null
+++ b/src/front/pages/Eventos.jsx
@@ -0,0 +1,429 @@
+import React, { useState, useEffect } from "react";
+import { Typography, Card, CardContent, CardMedia, Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import {sportImages} from "../jsApiComponents/sportsImages"
+
+export const Eventos = () => {
+ const [events, setEvents] = useState([]);
+ const [search, setSearch] = useState("");
+ const [sportFilter, setSportFilter] = useState("");
+
+ const navigate = useNavigate();
+ const BASE_URL = import.meta.env.VITE_BACKEND_URL;
+
+ const fallbackEvents = [
+ {
+ id: 1,
+ title: "Yoga Matutino",
+ description: "Sesión de yoga matutina.",
+ sport: "Yoga",
+ image:
+ "https://cdn.getyourguide.com/image/format=auto,fit=contain,gravity=auto,quality=60,width=1440,height=650,dpr=1/tour_img/724c514c8455afc2a374acfef42807e12740f867305e87421a07c24d39d14a23.jpeg",
+ participants: [],
+ max_participants: 10,
+ },
+ {
+ id: 2,
+ title: "Carrera Nocturna",
+ description: "Carrera grupal en parque.",
+ sport: "Running",
+ image:
+ "https://www.aytolalaguna.es/actualidad/noticias/.galleries/IMAGENES-Noticias/2025/01/CARRERA-NOCTURNA-2024.jpeg",
+ participants: [],
+ max_participants: 20,
+ },
+ {
+ id: 3,
+ title: "Pilates",
+ description: "Relaja y fortalece tu cuerpo.",
+ sport: "Pilates",
+ image:
+ "https://assets.dmagstatic.com/wp-content/uploads/2019/08/tight10of19-677x451.jpg",
+ participants: [],
+ max_participants: 25,
+ },
+ {
+ id: 4,
+ title: "Spinning Intensivo",
+ description: "Entrenamiento intenso en bicicleta.",
+ sport: "Spinning",
+ image: "https://blogscdn.thehut.net/wp-content/uploads/sites/450/2016/08/09041209/beneficios-spinning-1.jpg",
+ participants: [],
+ max_participants: 10,
+ },
+ {
+ id: 5,
+ title: "Meditación Guiada",
+ description: "Sesión de meditación guiada para relajarte.",
+ sport: "Meditación",
+ image: "https://www.elpradopsicologos.es/storage/posts/June2021/group-of-young-sporty-people-sitting-in-padmasana-pose.jpg",
+ participants: [],
+ max_participants: 20,
+ },
+ {
+ id: 6,
+ title: "Entrenamiento Funcional",
+ description: "Mejora fuerza y movilidad con ejercicios funcionales.",
+ sport: "Funcional",
+ image: "https://akroscenter.com/wp-content/uploads/2023/05/Entrenamiento-funcional-Descubre-sus-beneficios.jpg",
+ participants: [],
+ max_participants: 10,
+ },
+ {
+ id: 7,
+ title: "Caminata Saludable",
+ description: "Caminata grupal al aire libre para mantenerse activo.",
+ sport: "Caminata", image: "https://estaticosgn-cdn.deia.eus/clip/604fa017-9146-4961-b436-f7bb5a2ff949_16-9-discover-aspect-ratio_default_0.jpg",
+ participants: [],
+ max_participants: 10,
+ },
+ {
+ id: 8,
+ title: "Natación para Todos",
+ description: "Sesión de natación para todos los niveles.",
+ sport: "Natación",
+ image: "https://noticiasncc.com/wp-content/uploads/2024/01/183-6-CIENCIA_Natacio%CC%81n-nin%CC%83os_.jpg",
+ participants: [],
+ max_participants: 35,
+ },
+ {
+ id: 9,
+ title: "Ciclismo Urbano",
+ description: "Ruta en bicicleta por la ciudad.",
+ sport: "Ciclismo",
+ image: "https://www.olimpiadatododia.com.br/wp-content/uploads/2025/08/Ciclismo-urbano-como-usar-a-bike-para-melhorar-a-qualidade-de-vida-na-cidade.jpg.webp",
+ participants: [],
+ max_participants: 15,
+ },
+ {
+ id: 10,
+ title: "Partido de Baloncesto",
+ description: "Encuentro amistoso de baloncesto en cancha local.",
+ sport: "Baloncesto",
+ image: "https://us.images.westend61.de/0001875758pw/one-vs-one-basketball-game-training-at-the-court-cinematic-look-image-of-friends-practicing-shots-and-slam-dunks-in-an-urban-area-DMDF01780.jpg",
+ participants: [],
+ max_participants: 12,
+ },
+ {
+ id: 11,
+ title: "Paddle en Pareja",
+ description: "Partido de paddle para principiantes y avanzados.",
+ sport: "Paddle",
+ image: "https://images.ecestaticos.com/pbtjE56n3h2SB1o63JnIuzHYm1M=/196x3:1706x1132/1200x900/filters:fill(white):format(jpg)/f.elconfidencial.com%2Foriginal%2Fac5%2Fd74%2Fdde%2Fac5d74dde3758fcb79032f5f92b83b12.jpg",
+ participants: [],
+ max_participants: 8,
+ },
+ {
+ id: 12,
+ title: "Torneo de Tenis",
+ description: "Competición de tenis amateur para todas las edades.",
+ sport: "Tenis",
+ image: "https://duyn491kcolsw.cloudfront.net/files/0z/0zl/0zlzu1.jpg?ph=94811ccd17",
+ participants: [],
+ max_participants: 16,
+ },
+ {
+ id: 13,
+ title: "Fútbol 5",
+ description: "Partido de fútbol 5 al aire libre.",
+ sport: "Fútbol",
+ image: "https://t4.ftcdn.net/jpg/00/94/59/47/360_F_94594712_1Cfz6lO9whnqj82Zu82r2notTj6BeyrV.jpg",
+ participants: [],
+ max_participants: 10,
+ },
+ {
+ id: 14,
+ title: "Voleibol Playa",
+ description: "Juego de voleibol en la playa para principiantes.",
+ sport: "Voleibol",
+ image: "https://dotorg.brightspotcdn.com/dims4/default/6b3ef88/2147483647/strip/true/crop/3000x2000+0+0/resize/800x533!/quality/90/?url=http%3A%2F%2Fsoi-brightspot.s3.amazonaws.com%2Fdotorg%2F3a%2F80%2Fc263d7cb4e4b9ee2f20a6249c7f8%2Fie-sovoleywc-051025-01801.jpg",
+ participants: [],
+ max_participants: 12,
+ },
+ {
+ id: 15,
+ title: "Entrenamiento de Boxeo",
+ description: "Sesión de boxeo para principiantes y avanzados.",
+ sport: "Boxeo",
+ image: "https://contents.mediadecathlon.com/p2755312/k$dfcde12bc151d44143611e16661cca43/1920x0/3644pt2431/7288xcr4861/mezczyzna-w-rekawicach-uderzajacy-w-gruszke-bokserska.jpg?format=auto",
+ participants: [],
+ max_participants: 12,
+ },
+ {
+ id: 16,
+ title: "Escalada Indoor",
+ description: "Aprende técnicas básicas de escalada en muro indoor.",
+ sport: "Escalada",
+ image: "https://static.wixstatic.com/media/3dc9d0_24b7046f6fa24ba2b511e37a643dca61~mv2.jpg/v1/fill/w_6240,h_4160,al_c/3dc9d0_24b7046f6fa24ba2b511e37a643dca61~mv2.jpg",
+ participants: [],
+ max_participants: 10,
+ },
+ {
+ id: 17,
+ title: "Surf en Playa",
+ description: "Clases de surf para todos los niveles.",
+ sport: "Surf",
+ image: "https://res.cloudinary.com/simpleview/image/upload/v1706044013/clients/panama/El_Palmar_San_Carlos_Panam_Oeste_Province_Panam_2__638b50c8-bd5f-49c8-a345-7c8cb2c082f4.jpg",
+ participants: [],
+ max_participants: 8,
+ },
+ {
+ id: 18,
+ title: "Curso de Esgrima",
+ description: "Aprende esgrima y técnicas de combate con espada.",
+ sport: "Esgrima",
+ image: "https://esgrimaenvalencia.es/wp-content/uploads/2019/08/entrenamiento-de-esgrima-valencia-1024x517.jpg",
+ participants: [],
+ max_participants: 10,
+ },
+ {
+ id: 19,
+ title: "Kayak en Río",
+ description: "Excursión grupal en kayak por río local.",
+ sport: "Kayak",
+ image: "https://paddlingmag.com/wp-content/uploads/2024/10/touring-kayaks-2-stellar-s14-g2-kaydi-pyette.jpg?wsr",
+ participants: [],
+ max_participants: 6,
+ },
+ {
+ id: 20,
+ title: "Skateboard Park",
+ description: "Practica trucos y técnicas de skateboard en parque.",
+ sport: "Skateboard",
+ image: "https://cam-skate.co.uk/values/img/southbank.jpg",
+ participants: [],
+ max_participants: 10,
+ },
+ {
+ id: 21,
+ title: "Torneo de Ping Pong",
+ description: "Competición amistosa de ping pong para todos.",
+ sport: "Ping Pong",
+ image: "https://www.fairplayce.pl/wp-content/uploads/2016/01/tenis-stolowy-2@2x.jpg",
+ participants: [],
+ max_participants: 8,
+ },
+ {
+ id: 22,
+ title: "Clínica de Golf",
+ description: "Aprende técnicas básicas y juega en grupo.",
+ sport: "Golf",
+ image: "https://www.minutegolf.ca/images/Depositphotos_friends_playing_golfjpgcrdownload.jpg",
+ participants: [],
+ max_participants: 6,
+ },
+{
+ id: 23,
+ title: "Muay Thai",
+ description: "Entrenamiento grupal de Muay Thai para todos los niveles. Aprende técnicas de golpeo, patadas y defensa mientras mejoras tu condición física. Ideal para quienes buscan un deporte intenso y divertido en equipo. ¡No se requiere experiencia previa!",
+ sport: "Artes Marciales",
+ image: "https://teamm1.com/wp-content/uploads/kickboxing-gym-11-1080x658.jpg",
+ participants: [],
+ max_participants: 12,
+ },
+ {
+ id: 24,
+ title: "Ruta en Patinete",
+ description: "Paseo grupal en patinete eléctrico por la ciudad. Ideal para divertirse y mantenerse activo al aire libre.",
+ sport: "Patinete",
+ image: "https://e-katalog.pl/posts/files/4876/wide_pic.jpg",
+ participants: [],
+ max_participants: 10,
+}
+
+ ];
+
+ const fetchEvents = async () => {
+ try {
+ const resp = await fetch(`${BASE_URL}/api/activities`);
+ if (!resp.ok) throw new Error("Error fetching");
+ const data = await resp.json();
+ setEvents(data);
+ } catch (err) {
+ setEvents([]); // fallback si falla
+ }
+ };
+
+ useEffect(() => {
+ fetchEvents();
+ window.addEventListener("activities-updated", fetchEvents);
+ return () => window.removeEventListener("activities-updated", fetchEvents);
+ }, []);
+
+ const list = events.length > 0 ? events : fallbackEvents;
+
+ const sportsUnique = Array.from(new Set(list.map((e) => e.sport)));
+
+ const filteredList = list.filter((event) => {
+ const matchesSearch =
+ event.title.toLowerCase().includes(search.toLowerCase()) ||
+ event.sport.toLowerCase().includes(search.toLowerCase());
+
+ const matchesSport = sportFilter === "" || event.sport === sportFilter;
+
+ return matchesSearch && matchesSport;
+ });
+
+
+
+
+ const getSportImage = (sport) => {
+ return sportImages[sport] ?? "https://via.placeholder.com/400";
+ }
+ // ➕ JOIN EVENT
+ const joinEvent = async (event) => {
+ if (event.participants.length >= event.max_participants) {
+ alert("Este evento ya está lleno.");
+ return;
+ }
+
+ try {
+ const token = localStorage.getItem("JWT-STORAGE-KEY");
+ const resp = await fetch(`${BASE_URL}/api/activities/${event.id}/join`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ });
+
+ if (!resp.ok) {
+ const err = await resp.json();
+ throw new Error(err.error || "No se pudo unir al evento");
+ }
+
+ alert(`Te has unido a: ${event.title}`);
+ fetchEvents();
+ } catch (err) {
+ alert(err.message);
+ }
+ };
+
+
+
+
+
+
+
+ return (
+ <>
+ + sobre + MeetFit +
+ +
+
+
+ + MeetFit nació como proyecto final del bootcamp de 4Geeks Academy, creado por un equipo multicultural formado por tres españoles y una tártara unidos por una misma pasión: el deporte. +
++ Nuestra misión es conectar a personas activas que disfrutan del ejercicio en todas sus formas —desde correr o hacer yoga hasta escalar o montar en bici. Queremos ayudarles a encontrar compañeros, motivación y comunidad. +
++ Creemos que mantenerse en forma es más fácil y divertido cuando lo haces acompañado. Por eso desarrollamos MeetFit, una app pensada para unir a la gente a través del movimiento. +
+ +
+
+
+
+
+
+
+ setSearch(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/front/pages/FAQ.jsx b/src/front/pages/FAQ.jsx
new file mode 100644
index 0000000000..43b1a4cde0
--- /dev/null
+++ b/src/front/pages/FAQ.jsx
@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import "./About.css";
+
+const faqData = [
+ {
+ question: "¿Cómo me registro en MeetFit?",
+ answer: "Haz clic en el botón 'ÚNETE' en la página principal y completa el formulario con tus datos."
+ },
+ {
+ question: "¿Puedo cambiar mi perfil?",
+ answer: "Sí, puedes actualizar tu información personal desde la sección 'PERFIL' después de iniciar sesión."
+ },
+ {
+ question: "¿Cómo puedo ver eventos y actividades?",
+ answer: "Todas las actividades y eventos están disponibles en la sección 'ACTIVIDADES' y 'EVENTOS'."
+ },
+ {
+ question: "¿Qué hacer si olvido mi contraseña?",
+ answer: "Haz clic en 'Olvidé mi contraseña' en la página de inicio de sesión y sigue las instrucciones para restablecerla."
+ },
+ {
+ question: "¿Cómo se protegen mis datos?",
+ answer: "Tus datos se gestionan según nuestra Política de Privacidad, con medidas de seguridad para proteger tu información."
+ },
+ {
+ question: "¿Puedo eliminar mi cuenta?",
+ answer: "Sí, puedes solicitar la eliminación de tu cuenta contactando con nuestro soporte."
+ },
+];
+
+export const FAQ = () => {
+ const [openIndex, setOpenIndex] = useState(null);
+
+ const toggleIndex = (index) => {
+ setOpenIndex(openIndex === index ? null : index);
+ };
+
+ return (
+
+ {filteredList.map((event) => (
+
+
+
+ (e.currentTarget.style.transform = "scale(1.05)")
+ }
+ onMouseLeave={(e) =>
+ (e.currentTarget.style.transform = "scale(1)")
+ }
+ >
+
+
+ {event.sport}
+
+
+
+
+
+
+
+
+
+ + Participantes:{" "} + {(event.participants?.length ?? 0)}/ + {event.max_participants} + +
+
+
+
+ ))}
+ +
{event.title}
+ {event.description} ++ + Participantes:{" "} + {(event.participants?.length ?? 0)}/ + {event.max_participants} + +
+
+ );
+};
diff --git a/src/front/pages/Forgot.jsx b/src/front/pages/Forgot.jsx
new file mode 100644
index 0000000000..406e5c82f6
--- /dev/null
+++ b/src/front/pages/Forgot.jsx
@@ -0,0 +1,61 @@
+//Pide email y confirmación (solo UI), luego permite meter token o restablecer contraseña
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import AuthShell from "../components/AuthShell";
+import TextInput from "../components/TextInput";
+import { requestReset } from "../jsApiComponents/auth";
+
+export function Forgot() {
+ const [email, setEmail] = useState("");
+ const [sent, setSent] = useState(false);
+ const [err, setErr] = useState("");
+ const [token, setToken] = useState("");
+ const nav = useNavigate();
+
+
+
+ const submit = async(e) => {
+ e.preventDefault();
+ setErr("");
+ if (!email) return setErr("Introduce tu email.");
+ await requestReset(email)
+ setSent(true);
+ };
+
+ const goWithToken = () => {
+ if (!token) return setErr("Pega tu token para continuar.");
+ setErr("");
+ nav(`/reset/${encodeURIComponent(token)}`);
+ };
+
+ const goWithDemo = () => {
+ setErr("");
+ nav("/reset/demo-token");
+ };
+
+ return (
+
+
+
+ Preguntas Frecuentes
+
+ {faqData.map((item, index) => (
+
+
+
+ toggleIndex(index)}
+ >
+
+ ))}
+
+ {item.question}
+
+ {openIndex === index && (
+
+ {item.answer}
+
+ )}
+
+
+ + Fecha de última actualización: 3 de diciembre de 2025 +
+
+ Revisa tu correo — te hemos enviado instrucciones de recuperación.
+
+
+ Volver a MeetFit
+
+
+ )}
+
-
- );
-};
\ No newline at end of file
+ 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: { message: data.message, quote: data.quote } });
+ }
+
+
+ return data;
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ useEffect(() => {
+ loadMessage();
+
+
+ const interval = setInterval(() => {
+ loadMessage();
+ }, 10000);
+
+ return () => clearInterval(interval);
+ }, []);
+
+
+ return (
+ Hello Rigo!!
-
-
-
- {store.message ? (
- {store.message}
- ) : (
-
- Loading message from the backend (make sure your python 🐍 backend is running)...
-
- )}
-
-
+
+
+
+ );
+};
diff --git a/src/front/pages/Layout.jsx b/src/front/pages/Layout.jsx
index 9bfa31325c..49a43b5bd5 100644
--- a/src/front/pages/Layout.jsx
+++ b/src/front/pages/Layout.jsx
@@ -1,15 +1,44 @@
-import { Outlet } from "react-router-dom/dist"
-import ScrollToTop from "../components/ScrollToTop"
-import { Navbar } from "../components/Navbar"
-import { Footer } from "../components/Footer"
+import React from "react";
+import { Outlet, useLocation } from "react-router-dom";
+
+import { Navbar } from "../components/Navbar";
+import { InternalNavbar } from "../components/InternalNavbar";
+import ScrollToTop from "../components/ScrollToTop";
+import { Footer } from "../components/Footer";
+import { Container } from "react-bootstrap";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
-// Base component that maintains the navbar and footer throughout the page and the scroll to top functionality.
export const Layout = () => {
- return (
- Bienvenido a MeetFit
+ ++ Conecta, entrena y crece junto a personas que comparten tu pasión por el deporte. +
+ +
+ {store.message ? (
+ {store.message.message}
+ ) : (
+ Cargando mensaje...
+ )}
+
+
+ {store.message && (
+
+
+ )}
+
+
+ Queremos decirte que...
+ {store.message.quote} +
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/pages/Login.jsx b/src/front/pages/Login.jsx
new file mode 100644
index 0000000000..6ac9f1bbe3
--- /dev/null
+++ b/src/front/pages/Login.jsx
@@ -0,0 +1,131 @@
+// Guarda email y password y hace login real contra la API.
+// Muestra aviso cuando vienes de un registro correcto (?registered=1).
+
+import { useState, useEffect } from "react";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import AuthShell from "../components/AuthShell";
+import TextInput from "../components/TextInput";
+import { login } from "../jsApiComponents/auth";
+import { toast } from "react-toastify";
+
+export function Login() {
+ const nav = useNavigate();
+ const [sp] = useSearchParams();
+
+ const [form, setForm] = useState({ email: "", password: "" });
+ const [err, setErr] = useState("");
+ const [ok, setOk] = useState("");
+
+ useEffect(() => {
+ if (sp.get("registered")) {
+ setOk("Cuenta creada. Ya puedes iniciar sesión.");
+ }
+ }, [sp]);
+
+ const onChange = (e) =>
+ setForm((f) => ({ ...f, [e.target.name]: e.target.value }));
+
+ const submit = async (e) => {
+ e.preventDefault();
+ setErr("");
+
+ if (!form.email || !form.password) {
+ setErr("Completa el email y la contraseña.");
+ return;
+ }
+
+ const resp = await login(form);
+
+ if (resp.status === 400) {
+ setErr("Usuario o contraseña incorrecta.");
+ console.log("Respuesta del server", resp);
+ return;
+ }
+
+ if (resp.status === 200 && resp.data) {
+
+ if (resp.data.token) {
+ localStorage.setItem("token", resp.data.token);
+ toast.success("🎉 Sesión iniciada correctamente.");
+ nav("/home");
+ }
+ }
+ };
+
+ const randomEvents = [
+ "⚽ Partidos y quedadas programadas para esta tarde",
+ "🏃♂️ Grupo de running a 5 min de tu ubicación",
+ "🏋️♀️ Entrenamiento libre en el parque central",
+ "🚴♂️ Salida en bici nivel intermedio",
+ "🥋 Clase gratuita de artes marciales",
+ "🧘 Sesión de yoga al aire libre (nivel iniciación)",
+ "🥾 Ruta de senderismo este domingo",
+ "🤼 Entreno funcional con nuevos participantes",
+ "🏊 Grupo de natación — 30 min técnica + cardio",
+ "🏐 Partido amistoso de voley playa",
+ ];
+
+ const randomEvent = randomEvents[Math.floor(Math.random() * randomEvents.length)];
+
+ return (
+
+ {/* Columna principal con el formulario */}
+
+
+ {ok &&
+
+ {/* Panel lateral con una random card, para mostrar actividades diarias */}
+
+ {ok}
}
+
+
+
+
+ ¿No tienes cuenta?
+
+ Regístrate
+
+
+
+//
+// );
+
+// return (
+//
+
+// {/* 📌 FORMULARIO */}
+//
+// );
+// };
+
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { GoogleMap, Marker, InfoWindow, useJsApiLoader } from "@react-google-maps/api";
+import { Spinner, Button } from "react-bootstrap";
+import { CreateActivityPopup } from "../components/CreateActivityPopup";
+import { user } from "../jsApiComponents/user";
+import { toast } from "react-toastify";
+import { useNavigate } from "react-router-dom";
+
+export const MapView = () => {
+ const [activities, setActivities] = useState([]);
+ const [selected, setSelected] = useState(null);
+ const [newMarker, setNewMarker] = useState(null);
+ const [currentPosition, setCurrentPosition] = useState({ lat: 40.4168, lng: -3.7038 });
+ const [userLocation, setUserLocation] = useState(null);
+ const navigate = useNavigate();
+
+
+ const [showWelcomeTip, setShowWelcomeTip] = useState(true);
+ const [showGeneralFormTip, setShowGeneralFormTip] = useState(false);
+ const [showMapTip, setShowMapTip] = useState(false);
+
+ useEffect(() => {
+ const welcomeTimer = setTimeout(() => {
+ setShowWelcomeTip(false);
+ setShowGeneralFormTip(true);
+ }, 3000);
+
+ const formTimer = setTimeout(() => {
+ setShowGeneralFormTip(false);
+ setShowMapTip(true);
+ }, 8000);
+
+ const mapTimer = setTimeout(() => {
+ setShowMapTip(false);
+ }, 14000);
+
+ return () => {
+ clearTimeout(welcomeTimer);
+ clearTimeout(formTimer);
+ clearTimeout(mapTimer);
+ };
+ }, []);
+
+
+ const handleMarkerClick = (e) => {
+ setNewMarker({
+ latitude: e.latLng.lat(),
+ longitude: e.latLng.lng(),
+ });
+ };
+
+ const { isLoaded } = useJsApiLoader({
+ googleMapsApiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
+ });
+
+ const fetchActivities = async () => {
+ try {
+ const resp = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/activities`);
+ const data = await resp.json();
+ setActivities(data);
+ } catch (error) {
+ toast.error("❌ Error cargando actividades");
+ }
+ };
+
+ const getUser = async () => {
+ try {
+ const response = await user();
+
+ if (response.ok) return; // 👍 Usuario correcto
+
+ if (response.status === 401) {
+ toast.warning("⚠️ Tu sesión ha caducado");
+ localStorage.removeItem("JWT-STORAGE-KEY");
+ return navigate("/login");
+ }
+
+ } catch (error) {
+ toast.error("❌ Error obteniendo datos de usuario");
+ }
+ };
+
+ useEffect(() => {
+ getUser();
+ fetchActivities();
+ }, []);
+
+ const handleGetUserLocation = () => {
+ if (!navigator.geolocation) {
+ toast.error("❌ Tu navegador no permite geolocalización");
+ return;
+ }
+
+ navigator.geolocation.getCurrentPosition(
+ (pos) => {
+ const userPos = {
+ lat: pos.coords.latitude,
+ lng: pos.coords.longitude,
+ };
+ setUserLocation(userPos);
+ setCurrentPosition(userPos);
+ },
+ () => {
+ toast.error("⚠️ No pudimos acceder a tu ubicación");
+ },
+ { enableHighAccuracy: true }
+ );
+ };
+
+ if (!isLoaded)
+ return (
+
+//
+
+// {/* 🗺️ MAPA */}
+//
+//
+//
+//
+// {activities
+// .filter((a) => a.latitude && a.longitude)
+// .map((a) => (
+// {
+// e.domEvent.preventDefault();
+// e.domEvent.stopPropagation();
+// setSelected(a);
+// }}
+// />
+// ))}
+
+// {newMarker && (
+//
+// setCurrentPosition({
+// lat: newMarker.latitude,
+// lng: newMarker.longitude,
+// })
+// }
+// />
+// )}
+
+// {userLocation && (
+// setSelected(null)}
+// >
+//
+// )}
+//
+//
+//
+//
+// {selected.name}
+//{selected.sport}
+// {new Date(selected.date).toLocaleString()} +//{selected.location}
+//Título: {selected.title}
+//Creado por: {selected.creator_name}
+//Descripción: {selected.description}
+//Participantes: {selected.participants}
+//
+
+ );
+
+ return (
+ <>
+
+
+ {showWelcomeTip && (
+
+ + +
+
+ );
+};
\ No newline at end of file
diff --git a/src/front/pages/Privacy.jsx b/src/front/pages/Privacy.jsx
new file mode 100644
index 0000000000..7c9ecbf7e2
--- /dev/null
+++ b/src/front/pages/Privacy.jsx
@@ -0,0 +1,50 @@
+import React from "react";
+import "./About.css"; // używamy CSS z About, żeby zachować styl
+
+export const Privacy = () => {
+ return (
+
+ ¡Hola! Aquí podrás crear tus eventos deportivos.
+
+ )}
+
+ {showGeneralFormTip && (
+
+ Haz clic en el mapa para establecer la ubicación del encuentro y luego completa el formulario.
+
+ )}
+
+
+ {/* 📌 FORMULARIO */}
+
+
+
+
+ {/* 🗺️ MAPA */}
+
+
+
+
+ {showMapTip && (
+
+ {activities
+ .filter((a) => a.latitude && a.longitude)
+ .map((a) => (
+ {
+ e.domEvent.preventDefault();
+ e.domEvent.stopPropagation();
+ setSelected(a);
+ }}
+ />
+ ))}
+
+ {newMarker && (
+
+ setCurrentPosition({
+ lat: newMarker.latitude,
+ lng: newMarker.longitude,
+ })
+ }
+ />
+ )}
+
+ {userLocation && (
+ setSelected(null)}
+ >
+
+ )}
+
+
+
+
+
+ Mueve el mapa. Desplázate libremente y encuentra el lugar ideal para tu evento.
+
+ )}
+
+
+
+ {selected.name}
+{selected.sport}
+ {new Date(selected.date).toLocaleString()} +{selected.location}
+Título: {selected.title}
+Creado por: {selected.creator_name}
+Descripción: {selected.description}
+Participantes: {selected.participants}
++ + +
+
+
+ + Actividades a las que quizá quieras unirte +
+ +
+
+
+
+
+
+ {activities.length === 0 ? (
+
+ No hay actividades todavía.
+ ) : (
+ activities.slice(0, 10).map((ev) => (
+
+
+ ))
+ )}
+ {ev.title}
+{ev.sport}
++ {ev.description?.slice(0, 60)}... +
+
+
+ );
+};
diff --git a/src/front/pages/Profile.jsx b/src/front/pages/Profile.jsx
new file mode 100644
index 0000000000..c98cfad4b5
--- /dev/null
+++ b/src/front/pages/Profile.jsx
@@ -0,0 +1,279 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Card, Button, Container, Row, Col, Spinner, Modal } from "react-bootstrap";
+import { user } from "../jsApiComponents/user";
+import { deleteUser } from "../jsApiComponents/deleteUser";
+import UpdateUser from "../components/UpdateUser";
+import JoinedEvents from "../components/JoinedEvents";
+import CreatedEvents from "../components/CreatedEvents";
+import { toast } from "react-toastify";
+
+
+
+export const Profile = () => {
+ const [user_get, setUser_get] = useState(null);
+ const [user_offlineMsg, setUser_offlineMsg] = useState("");
+ const navigate = useNavigate();
+ const [editing, setEditing] = useState(false);
+ const [showDeleteModal, setShowDeleteModal] = useState(false);
+ const [profileTab, setProfileTab] = useState("profile");
+ const [showLogoutModal, setShowLogoutModal] = useState(false);
+
+ const runLogOut = () => {
+ localStorage.removeItem("JWT-STORAGE-KEY");
+ toast.success("🔐 Sesión cerrada correctamente");
+
+ return navigate("/login");
+ };
+
+ const runDeleteUser = () => {
+ deleteUser();
+ toast.success("🗑️ Usuario eliminado con éxito");
+ return navigate("/register");
+ };
+
+ const getUser = async () => {
+ try {
+ const response = await user();
+ if (response.ok) {
+ setUser_get(response.data);
+ } else if (response.status === 401) {
+ toast.error("Tu sesión ha caducado. Ingresa nuevamente");
+
+ localStorage.removeItem("JWT-STORAGE-KEY");
+ return navigate("/login");
+ }
+ } catch (error) {
+ console.log("Error fetching user:", error);
+ }
+ };
+
+ useEffect(() => {
+ getUser();
+ }, []);
+
+ const refreshUser = () => {
+ getUser();
+ };
+
+ const userOfflineProcedure = () => {
+ setInterval(() => {
+ setUser_offlineMsg("Parece que tu sesión ha caducado, vuelve a iniciar sesión.");
+ }, 2000);
+ };
+
+ if (user_get == null) {
+ userOfflineProcedure();
+ return (
+
+
+
+ Política de Privacidad
+
+
+ + En MeetFit valoramos tu privacidad y nos comprometemos a proteger tus datos personales. + Por favor, revisa esta política para entender cómo recopilamos, usamos y protegemos tu información. +
+ +-
+
- + Recopilación de datos: Recopilamos información personal como nombre, correo electrónico y preferencias de usuario al registrarte o usar nuestros servicios. + +
- + Uso de los datos: La información recopilada se utiliza para mejorar la experiencia de usuario, enviar notificaciones y personalizar contenidos. + +
- + Protección de datos: Implementamos medidas de seguridad técnicas y administrativas para proteger tus datos contra accesos no autorizados. + +
- + Compartir información: No compartimos tus datos personales con terceros sin tu consentimiento, salvo requerimiento legal. + +
- + Actualizaciones: Esta política puede actualizarse ocasionalmente. Te recomendamos revisarla periódicamente. + +
+
+ + Fecha de última actualización: 3 de diciembre de 2025 +
+
+
+ );
+ }
+
+ return (
+ {user_offlineMsg}
+ +
+
+
+ );
+};
diff --git a/src/front/pages/Register.jsx b/src/front/pages/Register.jsx
new file mode 100644
index 0000000000..73e5aa8b49
--- /dev/null
+++ b/src/front/pages/Register.jsx
@@ -0,0 +1,161 @@
+// Registro: envía datos a la API y redirige al login con ?registered=1.
+
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import AuthShell from "../components/AuthShell";
+import TextInput from "../components/TextInput";
+import { register } from "../jsApiComponents/auth";
+
+export function Register() {
+ const nav = useNavigate();
+ const [form, setForm] = useState({
+ nombre: "",
+ apellidos: "",
+ email: "",
+ password: "",
+ telefono: "",
+ edad: "",
+ genero: "",
+ });
+ const [err, setErr] = useState("");
+
+ const onChange = (e) =>
+ setForm((f) => ({ ...f, [e.target.name]: e.target.value }));
+
+ const submit = async (e) => {
+ e.preventDefault();
+ setErr("");
+
+ if (!form.nombre || !form.email || !form.password)
+ return setErr("Completa nombre, email y contraseña.");
+
+ if (form.password.length < 8)
+ return setErr("La contraseña debe tener al menos 8 caracteres.");
+
+ if (form.edad && (+form.edad < 18 || +form.edad > 100))
+ return setErr("Debes ser mayor de edad (18–100).");
+
+ if (form.genero === "")
+ return setErr("Selecciona un género.");
+
+ const body = { ...form };
+ await register(body);
+
+ nav("/login?registered=1");
+ };
+
+ return (
+
+
+ {/* SIDEBAR */}
+
+
+
+
+
+ {/* CONTENIDO */}
+ Mi Cuenta
+ + + + + + +
+
+
+
+ {/* PERFIL */}
+ {profileTab === "profile" && (
+
+
+
+ {!editing && (
+
+
+
+ )}
+
+ {/* EVENTOS CREADOS */}
+ {profileTab === "created" && (
+
+
+
+
+
+ )}
+
+ {/* EVENTOS APUNTADOS */}
+ {profileTab === "joined" && (
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ + + + + + + + + setShowDeleteModal(false)}
+ centered
+ backdrop="static"
+ >
+
+ Eliminar Usuario
+
+
+
+
+
+
+
+
+
+
+
+ setShowLogoutModal(false)}
+ centered
+ backdrop="static"
+ >
+
+ Cerrar sesión
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {editing && (
+
+ 
+
+
+ {user_get.name} {user_get.lastname || "Sin apellido"}
+ ++ Correo: {user_get.email} +
++
Biografía
++ {user_get.biography || "Aún no tienes biografía. ¡Añade algo!"} +
+ ++
+
+ Deporte favorito: {user_get.sports || "Sin especificar"}
+Nivel: {user_get.level || "Sin especificar"}
++ + + + + + + + +
¿Estás seguro de que quieres eliminar tu cuenta?
+Esta acción no se puede deshacer.
+¿Quieres cerrar tu sesión?
+Podrás iniciar sesión nuevamente cuando quieras.
+
+
+ )}
+
+ +
+ {/* Columna principal con el formulario */}
+
+
+
+
+
+
+ {/* Panel lateral descriptivo */}
+
+
+ ¿Ya tienes cuenta?
+
+ Inicia sesión
+
+
+
+ Volver al perfil
+
+
+
+ );
+};
diff --git a/src/front/pages/User.jsx b/src/front/pages/User.jsx
new file mode 100644
index 0000000000..94f3532140
--- /dev/null
+++ b/src/front/pages/User.jsx
@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react'
+import { user } from '../jsApiComponents/user'
+import { useNavigate } from 'react-router-dom'
+import HandleError from '../components/HandleError'
+export default function User() {
+ const [userInfo, setUserInfo] = useState(null)
+ const [loading, setLoading] = useState(true)
+ const [errorCode, setErrorCode] = useState(null);
+ const nav = useNavigate()
+
+
+ const handleSubmit = (e) =>{
+ e.preventDefault()
+ }
+
+ useEffect(() => {
+ const infoUser = async () => {
+ const data = await user()
+ console.log(data)
+ if (data.status == 422) {
+ alert('Algo ha salido mal!')
+ nav('/login')
+ }
+ if (data.status == 401) {
+ alert('Para entrar aqui, debes estar registrado / iniciar sesion!')
+ nav('/login')
+ }
+ setUserInfo(data.data)
+ setLoading(false)
+
+ }
+
+ infoUser()
+ }, [])
+ // Simbolo de carga
+ if (loading) return
+
+
+ Términos y Condiciones
+
+
+ + Bienvenido a MeetFit. Al usar nuestra plataforma, aceptas estos términos y condiciones. + Por favor, léelos con atención para entender tus derechos y responsabilidades. +
+ +-
+
- + Uso de la plataforma: MeetFit conecta personas interesadas en actividades deportivas. + No nos hacemos responsables del comportamiento de otros usuarios. + +
- + Registro y seguridad: Al registrarte, proporcionas información verdadera y actualizada. + Eres responsable de la seguridad de tu cuenta y contraseña. + +
- + Contenido del usuario: Todos los contenidos que publiques son responsabilidad del autor. + MeetFit puede eliminar cualquier contenido inapropiado. + +
- + Privacidad: Tus datos personales se gestionan según nuestra Política de Privacidad. + No compartimos tu información sin tu consentimiento. + +
- + Modificaciones: MeetFit puede actualizar estos términos en cualquier momento. + Es tu responsabilidad revisar los cambios periódicamente. + +
+
+ + Fecha de última actualización: 3 de diciembre de 2025 +
+Cargando... + +
+ // Manejo errores + + + return ( +
+
+ User
+
+
+ )
+}
diff --git a/src/front/routes.jsx b/src/front/routes.jsx
index 0557df6141..cbc9a7f221 100644
--- a/src/front/routes.jsx
+++ b/src/front/routes.jsx
@@ -1,30 +1,65 @@
-// Import necessary components and functions from react-router-dom.
-
import {
- createBrowserRouter,
- createRoutesFromElements,
- Route,
+ createBrowserRouter,
+ createRoutesFromElements,
+ Route,
} from "react-router-dom";
import { Layout } from "./pages/Layout";
import { Home } from "./pages/Home";
+import { About } from "./pages/About";
+import { Login } from "./pages/Login";
+import { Register } from "./pages/Register";
+import { Forgot } from "./pages/Forgot";
+import { Reset } from "./pages/Reset";
+import { MapView } from "./pages/MapView";
import { Single } from "./pages/Single";
import { Demo } from "./pages/Demo";
+import User from "./pages/User";
+import { Profile } from "./pages/Profile";
+import { EventDetails } from "./components/EventDetails";
+import { Terms } from "./pages/Terms";
+import { Privacy } from "./pages/Privacy";
+import { FAQ } from "./pages/FAQ";
+import MyEvents from './components/MyEvents'
+import { Eventos } from "./pages/Eventos";
+
+
+
+const BASE_NAME = import.meta.env.VITE_BASENAME || "/";
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.
-
+{/*
+ */}
+
+
+
+
+
+
+ );
+
+
+
+
+
+ Profile
+
+
+
+
+
+
+