Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update routes with color and direction, improve admin routes view, and update firebase config/auth

Browse Source
This commit is contained in:
Johan Samudio
2026-02-24 16:39:38 -05:00
parent c4046541a5
commit 259bbd1fed
10 changed files with 185 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/auth/LoginForm.vue
View File

@ -15,18 +15,18 @@ const errorMessage = ref('')
const showPassword = ref(false)
const router = useRouter()
const authStore = useAuthStore()
const handleLogin = async () => {
isLoading.value = true
errorMessage.value = ''
console.log('Iniciando Login con correo...')
try {
const response = await authService.login({
// CRÍTICO: enviar email en minúsculas para evitar mismatch con el backend
email: email.value.trim().toLowerCase(),
password: password.value,
keep_session: keepSession.value
})
console.log('Backend login exitoso:', response)
authStore.login(response.access_token, response.role, response.full_name)
@ -37,12 +37,13 @@ const handleLogin = async () => {
else router.push('/map')
} catch (error: any) {
console.error('Error Login detallado:', error)
if (!error.response) {
errorMessage.value = 'Error de conexión. Verifica tu internet.'
errorMessage.value = 'Error de conexión. Verifica tu internet o el estado del servidor.'
} else if (error.response.status === 401) {
errorMessage.value = 'Correo o contraseña incorrectos.'
} else {
errorMessage.value = error.response?.data?.detail || 'Error en el servidor.'
errorMessage.value = `Error (${error.response.status}): ${error.response?.data?.detail || 'Error en el servidor.'}`
}
} finally {
isLoading.value = false
@ -52,22 +53,21 @@ const handleLogin = async () => {
const handleGoogleLogin = async () => {
isLoading.value = true
errorMessage.value = ''
console.log('Iniciando Google Login...')
try {
const { token } = await signInWithGoogle()
const response = await authService.googleLogin(token)
authStore.login(response.access_token, response.role, response.full_name)
const role = response.role.toUpperCase()
if (role === 'ADMIN') router.push('/admin')
else if (role === 'DRIVER') router.push('/driver')
else if (role === 'PROMOTER') router.push('/promoter')
else router.push('/map')
console.log('Firebase token obtenido:', token ? 'SI' : 'NO (Redirecting...)')
if (token) {
const response = await authService.googleLogin(token)
console.log('Backend Google login exitoso:', response)
authStore.login(response.access_token, response.role, response.full_name)
router.push('/map')
}
} catch (error: any) {
errorMessage.value = 'Error al iniciar sesión con Google.'
console.error(error)
console.error('Error Google Login:', error)
errorMessage.value = `Error con Google: ${error.message || 'Error desconocido'}`
} finally {
isLoading.value = false
}

68
frontend/src/components/auth/RegisterForm.vue
View File

@ -22,23 +22,50 @@ const showPassword = ref(false)
const handleRegister = async () => {
isLoading.value = true
errorMessage.value = ''
console.log('Intentando registrar usuario...')
try {
await authService.registerPassenger({
const cleanEmail = email.value.trim().toLowerCase()
const cleanPass = password.value
const regResponse = await authService.registerPassenger({
full_name: fullName.value.trim(),
email: email.value.trim().toLowerCase(),
password: password.value
email: cleanEmail,
password: cleanPass
})
console.log('Registro exitoso en backend:', regResponse)
analyticsService.logEvent({
event_name: 'sign_up',
properties: { method: 'email' }
})
successMessage.value = '¡Cuenta creada! Ahora puedes iniciar sesión.'
setTimeout(() => { emit('success') }, 2000)
// Iniciar sesión automáticamente después del registro
console.log('Iniciando sesión automática...')
const response = await authService.login({
email: cleanEmail,
password: cleanPass
})
console.log('Login automático exitoso:', response)
authStore.login(response.access_token, response.role, response.full_name)
successMessage.value = '¡Cuenta creada con éxito!'
// Redirigir casi de inmediato
setTimeout(() => {
router.push('/map')
}, 1000)
} catch (error: any) {
errorMessage.value = error.response?.data?.detail || 'Error al crear la cuenta.'
console.error('Error detallado de registro:', error)
if (error.response) {
errorMessage.value = `Error del servidor (${error.response.status}): ${error.response.data?.detail || 'Error desconocido'}`
} else if (error.request) {
errorMessage.value = 'No se recibió respuesta del servidor. ¿Backend caído?'
} else {
errorMessage.value = `Error: ${error.message}`
}
} finally {
isLoading.value = false
}
@ -47,27 +74,28 @@ const handleRegister = async () => {
const handleGoogleRegister = async () => {
isLoading.value = true
errorMessage.value = ''
console.log('Iniciando Google Register...')
try {
const { token } = await signInWithGoogle()
const response = await authService.googleLogin(token)
console.log('Firebase token obtenido:', token ? 'SI' : 'NO (Redirecting...)')
if (token) {
const response = await authService.googleLogin(token)
console.log('Backend Google login exitoso:', response)
analyticsService.logEvent({
event_name: 'sign_up',
properties: { method: 'google' }
})
analyticsService.logEvent({
event_name: 'sign_up',
properties: { method: 'google' }
})
authStore.login(response.access_token, response.role, response.full_name)
const role = response.role.toUpperCase()
if (role === 'ADMIN') router.push('/admin')
else if (role === 'DRIVER') router.push('/driver')
else if (role === 'PROMOTER') router.push('/promoter')
else router.push('/map')
authStore.login(response.access_token, response.role, response.full_name)
router.push('/map')
}
} catch (error: any) {
errorMessage.value = 'Error al registrarse con Google. Intenta de nuevo.'
console.error(error)
console.error('Error Google Register:', error)
errorMessage.value = `Error con Google: ${error.message || 'Intenta de nuevo'}`
} finally {
isLoading.value = false
}

29
frontend/src/firebaseConfig.ts
View File

@ -31,17 +31,20 @@ const isMobile = () => {
* - Uses signInWithRedirect on mobile (avoids popup blocking on mobile browsers)
*/
export const signInWithGoogle = async (): Promise<{ user: any; token: string }> => {
if (isMobile()) {
// On mobile, redirect flow is more reliable
await signInWithRedirect(auth, googleProvider);
// The page will reload; the result is handled by getGoogleRedirectResult() on app load
// We return a never-resolving promise to keep the UI in loading state
return new Promise(() => { });
} else {
// On desktop, use popup
const result = await signInWithPopup(auth, googleProvider);
const token = await result.user.getIdToken();
return { user: result.user, token };
try {
if (isMobile()) {
console.log("DEBUG: Intentando signInWithRedirect...");
await signInWithRedirect(auth, googleProvider);
return new Promise(() => { });
} else {
console.log("DEBUG: Intentando signInWithPopup...");
const result = await signInWithPopup(auth, googleProvider);
const token = await result.user.getIdToken();
return { user: result.user, token };
}
} catch (error: any) {
console.error("DEBUG: Error al iniciar Google:", error);
throw error;
}
};
@ -58,8 +61,8 @@ export const getGoogleRedirectResult = async (): Promise<{ user: any; token: str
return { user: result.user, token };
}
return null;
} catch (error) {
console.error("Error getting redirect result:", error);
} catch (error: any) {
console.error("DEBUG: Error en getRedirectResult:", error);
return null;
}
};

72
frontend/src/views/AdminRoutes.vue
View File

@ -293,16 +293,21 @@ function handleBack() {
async function createRoute() {
const name = prompt("Nombre de la nueva ruta:")
if (!name) return
const route = await routesService.createRoute({
name,
origin_city: 'David',
destination_city: 'Boquete',
status: 'active',
color: '#FEE715',
direction: 'outbound'
})
routes.value = await routesService.getAllRoutes()
selectRoute(route)
try {
const route = await routesService.createRoute({
name,
origin_city: 'David',
destination_city: 'Boquete',
status: 'active',
color: '#FEE715',
direction: 'outbound'
})
routes.value = await routesService.getAllRoutes()
selectRoute(route)
} catch (err: any) {
console.error('Error creating route:', err)
alert('No se pudo crear la ruta: ' + (err.response?.data?.detail || err.message))
}
}
async function selectRoute(route: Route) {
@ -312,14 +317,19 @@ async function selectRoute(route: Route) {
async function updateRouteDetails() {
if (!selectedRoute.value) return
await routesService.updateRoute(selectedRoute.value.id, {
name: selectedRoute.value.name,
origin_city: selectedRoute.value.origin_city,
destination_city: selectedRoute.value.destination_city,
average_speed_kmh: selectedRoute.value.average_speed_kmh,
status: selectedRoute.value.status,
color: selectedRoute.value.color
})
try {
await routesService.updateRoute(selectedRoute.value.id, {
name: selectedRoute.value.name,
origin_city: selectedRoute.value.origin_city,
destination_city: selectedRoute.value.destination_city,
average_speed_kmh: selectedRoute.value.average_speed_kmh,
status: selectedRoute.value.status,
color: selectedRoute.value.color
})
} catch (err: any) {
console.error('Error updating route:', err)
// Opcional: mostrar notificación sutil en lugar de alert recurrente
}
}
async function addStop() {
@ -331,11 +341,16 @@ async function addStop() {
async function addExistingStop(stopId: string) {
if (!selectedRoute.value) return
await routesService.addStopToRoute(selectedRoute.value.id, {
stop_id: stopId,
stop_order: routeStops.value.length + 1
})
routeStops.value = await routesService.getRouteStops(selectedRoute.value.id)
try {
await routesService.addStopToRoute(selectedRoute.value.id, {
stop_id: stopId,
stop_order: routeStops.value.length + 1
})
routeStops.value = await routesService.getRouteStops(selectedRoute.value.id)
} catch (err: any) {
console.error('Error adding stop:', err)
alert('Error al añadir parada: ' + (err.response?.data?.detail || err.message))
}
}
async function updateStop(stop: BusStop) {
@ -364,9 +379,14 @@ async function removeStop(stop: BusStop) {
async function deleteRoute() {
if (!selectedRoute.value) return
if (confirm(`Estás SEGURO de que quieres eliminar la ruta ${selectedRoute.value.name}? Esta acción es permanente.`)) {
await routesService.deleteRoute(selectedRoute.value.id)
selectedRoute.value = null
routes.value = await routesService.getAllRoutes()
try {
await routesService.deleteRoute(selectedRoute.value.id)
selectedRoute.value = null
routes.value = await routesService.getAllRoutes()
} catch (err: any) {
console.error('Error deleting route:', err)
alert('No se pudo eliminar la ruta: ' + (err.response?.data?.detail || err.message))
}
}
}

7
frontend/src/views/AuthView.vue
View File

@ -26,9 +26,8 @@ onMounted(async () => {
else if (role === 'PROMOTER') router.push('/promoter')
else router.push('/map')
}
} catch (e) {
// No redirect result pending, or error — ignore silently
console.warn('Google redirect result:', e)
} catch (e: any) {
console.error('Google redirect result error:', e)
}
})
</script>
@ -42,7 +41,7 @@ onMounted(async () => {
<!-- Botón volver al mapa -->
<button class="back-to-map" @click="router.push('/map')">
<span class="material-icons">arrow_back</span>
Volver al mapa
Volver
</button>
<!-- Branding -->

26
frontend/src/views/SplashScreen.vue
View File

@ -28,10 +28,14 @@ import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useRouteStore } from '@/stores/route'
import { useBusStopStore } from '@/stores/busStop'
import { useAuthStore } from '@/stores/auth'
import { authService } from '@/services/authService'
import { getGoogleRedirectResult } from '@/firebaseConfig'
const router = useRouter()
const routeStore = useRouteStore()
const busStopStore = useBusStopStore()
const authStore = useAuthStore()
const logoVisible = ref(false)
const showLoading = ref(false)
@ -79,7 +83,23 @@ function navigate() {
}
async function performInitializationTasks() {
// Task 1: Check connection and load routes
// Task 1: Check for Google Redirect Result (Mobile Login)
statusMessage.value = 'Verificando sesión...'
try {
const googleResult = await getGoogleRedirectResult()
if (googleResult) {
statusMessage.value = 'Iniciando sesión con Google...'
const response = await authService.googleLogin(googleResult.token)
authStore.login(response.access_token, response.role, response.full_name)
statusMessage.value = `¡Bienvenido ${response.full_name}!`
// Wait a bit to show the welcome message
await new Promise(r => setTimeout(r, 800))
}
} catch (error) {
console.error('Google Redirect handling failed:', error)
}
// Task 2: Check connection and load routes
statusMessage.value = 'Cargando datos de rutas...'
try {
await routeStore.loadRoutes()
@ -87,7 +107,7 @@ async function performInitializationTasks() {
console.error('Error loading routes:', error)
}
// Task 2: Load bus stops
// Task 3: Load bus stops
statusMessage.value = 'Cargando paradas...'
try {
await busStopStore.loadBusStops()
@ -95,7 +115,7 @@ async function performInitializationTasks() {
console.error('Error loading bus stops:', error)
}
// Task 3: Prepared
// Task 4: Prepared
statusMessage.value = 'Listo para usar'
}
</script>