Construir un sistema de inicio de sesión en JavaScript implica algo más que validar credenciales: requiere que esa validación se conecte con una experiencia clara para el usuario. Aquí vas a ver cómo armar la función signIn que evalúa si un usuario existe en la base de datos, muestra su timeline y maneja errores cuando los datos no coinciden.
Cómo conectar la validación con la función signIn
La primera función ya devuelve true o false según si el usuario existe. Ahora necesitas que esa respuesta active el flujo correcto sin que tengas que llamar manualmente la validación cada vez.
La idea es sencilla: dentro de signIn colocas un if que invoque la función validadora. Si retorna true, el sistema saluda al usuario por su nombre y muestra su timeline. Si retorna false, aparece un mensaje de error y no se expone ninguna información [01:30].
¿Qué hace la función signIn en este proyecto? Recibe el username y password desde los prompts, llama a la validación y, según el resultado, muestra un alert de bienvenida con el userTimeline o un mensaje de credenciales incorrectas.
Cómo estructurar el if y el else dentro de signIn
La función recibe dos parámetros: el nombre de usuario y la contraseña capturados previamente. Dentro del if, mandas a llamar la función de validación pasándole esos mismos parámetros.
- Si el resultado es
true, ejecutas un alert personalizado del tipo Bienvenido a tu cuenta concatenado con el username.
- También imprimes con
console.log el userTimeline para visualizar el contenido.
- Si el resultado es
false, lanzas un alert con el mensaje Ups, usuario o contraseña incorrectos, sin variables asociadas [02:45].
Este diseño respeta la regla del flujo: mostrar bienvenida y timeline cuando hay coincidencia, o cortar el acceso cuando no la hay.
Por qué el for rompía la validación de usuarios
Al probar el código aparece un comportamiento extraño: aunque escribas un usuario y contraseña correctos como Caro con 456, el sistema responde que las credenciales son incorrectas. El problema no está en signIn, está en cómo se construyó el ciclo for de la validación.
Cuando el for recorre el array de usuarios y el primer elemento no coincide, el else devuelve false de inmediato. Eso interrumpe el bucle antes de revisar los demás registros. Solo el primer usuario del array tendría oportunidad real de validarse [04:30].
¿Por qué un return false dentro del for rompe la validación? Porque el return termina la función en la primera iteración. El bucle nunca llega al segundo o tercer usuario, así que cualquier credencial que no sea la del primer elemento siempre falla.
Cómo corregir el bucle for para validar todo el array
La solución es sacar el return false del interior del for. Así el ciclo puede recorrer cada usuario sin interrumpirse cuando no hay coincidencia.
- Dentro del
for, mantén solo la condición que devuelve true cuando username y password hacen match.
- Elimina el
else que retornaba false dentro del bucle.
- Coloca el
return false fuera del for, después de que termine de iterar todo el array.
Con este ajuste, el ciclo evalúa el primer usuario; si no coincide, pasa al segundo; si tampoco, al tercero. Solo cuando ningún registro coincide, la función entrega false. Si en algún punto hay match, devuelve true y rompe el ciclo de forma correcta [06:10].
Qué pasa al probar el flujo completo de inicio de sesión
Después del cambio, al guardar y ejecutar con Caro y 456, el sistema responde con Bienvenida a tu cuenta, Caro y el console.log imprime el userTimeline esperado. Si las credenciales son inválidas, el alert muestra el mensaje de error sin exponer datos.
Este tipo de detalles, como mover una sentencia fuera de un bucle, son los que marcan la diferencia entre un código que parece funcionar y uno que realmente cumple su propósito. La lógica del for con return es uno de los errores más comunes cuando recorres arreglos buscando coincidencias.
Qué bases de JavaScript ya tienes con este proyecto
Con esta práctica integraste varios conceptos clave del lenguaje:
- Uso de
function con parámetros para encapsular lógica reutilizable.
- Manejo de
prompt y alert para interactuar con el usuario.
- Recorrido de arreglos con
for y validación condicional con if/else.
- Retornos booleanos
true y false para controlar flujos.
- Concatenación de variables dentro de mensajes personalizados.
El siguiente paso natural es darle dinamismo al timeline: en lugar de imprimir el arreglo completo, podrías recorrerlo e imprimir frases como Estefanía escribió esto o Óscar escribió esto. Ese reto extra te ayuda a consolidar la lógica de iteración aplicada a la presentación de datos.
¿Vas a llevar tu timeline al siguiente nivel? Cuéntame en los comentarios cómo lo estructurarías.
