Login

Uso

Instalación del Componente

Para utilizar este componente en tu aplicación, primero asegúrate de haber instalado y configurado el paquete @redcollege/ui según la guía de instalación.

Ejemplo de Implementación

A continuación, se muestra cómo puedes importar y utilizar el componente Login en una página o componente de Vue 3.

<template lang="pug">
    Login(:api-url="process.env.API_BASE_URL" @success-login="handleSuccessLogin")
</template>

<script setup lang="ts">
// Define la función que manejará el evento `successLogin`
function handleSuccessLogin() {
  console.log('Inicio de sesión exitoso');
  // Aquí puedes redirigir al usuario, cargar datos adicionales, etc.
}
</script>

Props

Eventos Emitidos

Comportamiento

• Formulario de Inicio de Sesión: El formulario requiere que el usuario ingrese su correo electrónico y contraseña. Al enviar el formulario, se realiza una solicitud a la API especificada en api-url.
• Redirección o Acción Posterior: Después de un inicio de sesión exitoso, se emite el evento success-login, el cual puedes cargar datos adicionales, o cualquier otra acción que necesites realizar después del inicio de sesión. El componente automáticamente redireccionará a la ruta principal (/)

Notas

• El componente utiliza Pinia para gestionar el estado del usuario. Asegúrate de tener configurado Pinia correctamente en tu proyecto.
• Si necesitas agregar funcionalidad adicional al formulario, como la validación personalizada, puedes extender este componente o usar slots para personalizar partes específicas del formulario.