Inactivity Warning

Un componente moderno y reutilizable para manejar advertencias de cierre de sesión por inactividad. Compatible con Vue 3, React, Angular y Vanilla JavaScript.

✨ Características

• 🚀 Multi-framework: Soporte para Vue 3, React, Angular y Vanilla JS
• ⚡ Ligero: Solo ~37KB comprimido
• 🎨 Temas: Múltiples temas incluidos (default, dark, minimal)
• 🔧 Configurable: Tiempos personalizables y eventos flexibles
• 📱 Responsive: Diseño adaptable a todos los dispositivos
• 🛡️ TypeScript: Soporte completo para TypeScript
• 🧪 Testeable: Fácil de testear y mockear

📦 Instalación

npm install inactivity-warning

🚀 Uso Rápido

Vue 3

<template>
  <div>
    <!-- Tu contenido aquí -->
    <InactivityWarning
      :is-visible="inactivityWarning.isWarningVisible.value"
      :time-remaining="inactivityWarning.timeRemaining.value"
      theme="default"
      :show-buttons="true"
      @extend="inactivityWarning.extendSession"
      @logout="handleLogout"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useInactivityTimer, InactivityWarning } from 'inactivity-warning'

const config = {
  timeoutSeconds: 300, // 5 minutos
  warningSeconds: 30   // 30 segundos de advertencia
}

const inactivityWarning = useInactivityTimer(config)

const handleLogout = () => {
  console.log('Usuario desconectado por inactividad')
  // Redirigir al login o limpiar la sesión
}
</script>

React

import React from 'react'
import { useInactivityTimer, InactivityWarning } from 'inactivity-warning/react'

function App() {
  const config = {
    timeoutSeconds: 300,
    warningSeconds: 30
  }

  const inactivityWarning = useInactivityTimer(config)

  const handleLogout = () => {
    console.log('Usuario desconectado por inactividad')
  }

  return (
    <div>
      {/* Tu contenido aquí */}
      <InactivityWarning
        isVisible={inactivityWarning.isWarningVisible}
        timeRemaining={inactivityWarning.timeRemaining}
        theme="default"
        showButtons={true}
        onExtend={inactivityWarning.extendSession}
        onLogout={handleLogout}
      />
    </div>
  )
}

export default App

Angular

// app.component.ts
import { Component } from '@angular/core'
import { InactivityTimerService } from 'inactivity-warning/angular'

@Component({
  selector: 'app-root',
  template: `
    <div>
      <!-- Tu contenido aquí -->
      <app-inactivity-warning
        [isVisible]="inactivityService.isWarningVisible$ | async"
        [timeRemaining]="inactivityService.timeRemaining$ | async"
        theme="default"
        [showButtons]="true"
        (extend)="inactivityService.extendSession()"
        (logout)="handleLogout()"
      ></app-inactivity-warning>
    </div>
  `
})
export class AppComponent {
  constructor(public inactivityService: InactivityTimerService) {
    this.inactivityService.configure({
      timeoutSeconds: 300,
      warningSeconds: 30
    })
  }

  handleLogout() {
    console.log('Usuario desconectado por inactividad')
  }
}

Vanilla JavaScript

<div id="app">
  <!-- Tu contenido aquí -->
  <div id="inactivity-warning"></div>
</div>

<script type="module">
import { InactivityTimer, InactivityWarning } from 'inactivity-warning/vanilla'

const config = {
  timeoutSeconds: 300,
  warningSeconds: 30
}

const timer = new InactivityTimer(config)
const warning = new InactivityWarning('#inactivity-warning', {
  theme: 'default',
  showButtons: true
})

timer.onWarning(() => {
  warning.show(timer.getTimeRemaining())
})

timer.onTimeout(() => {
  console.log('Usuario desconectado por inactividad')
})

warning.onExtend(() => {
  timer.extendSession()
  warning.hide()
})

warning.onLogout(() => {
  console.log('Usuario desconectado manualmente')
})

timer.start()
</script>

⚙️ Configuración

Opciones de Configuración

| Propiedad | Tipo | Valor por defecto | Descripción | |-----------|------|-------------------|-------------| | timeoutSeconds | number | 300 | Tiempo total antes del logout automático (en segundos) | | warningSeconds | number | 30 | Tiempo de advertencia antes del logout (en segundos) | | theme | string | 'default' | Tema del modal: 'default', 'dark', 'minimal' | | showButtons | boolean | true | Mostrar botones de extender sesión y logout |

Eventos

| Evento | Descripción | Parámetros | |--------|-------------|------------| | @extend / onExtend | Se dispara cuando el usuario hace clic en "Extender Sesión" | Ninguno | | @logout / onLogout | Se dispara cuando el usuario hace clic en "Cerrar Sesión" o cuando se agota el tiempo | Ninguno |

🎨 Temas

Default

theme: 'default'

Dark

theme: 'dark'

Minimal

theme: 'minimal'

📱 Ejemplo en Vivo

Puedes ver un ejemplo completo funcionando en: Demo en Vivo

🧪 Testing

# Instalar dependencias de desarrollo
npm install

# Ejecutar tests
npm test

# Ejecutar tests en modo watch
npm run test:watch

# Ejecutar tests con coverage
npm run test:coverage

🛠️ Desarrollo

# Clonar el repositorio
git clone https://github.com/jrochinu/inactivity-warning.git

# Instalar dependencias
npm install

# Ejecutar en modo desarrollo
npm run dev

# Construir para producción
npm run build

# Ejecutar linting
npm run lint

📋 Roadmap

• [ ] Soporte para Vue 2
• [ ] Más temas personalizables
• [ ] Integración con frameworks de autenticación
• [ ] Soporte para Web Workers
• [ ] Modo offline/online detection
• [ ] Internacionalización (i18n)

🤝 Contribuir

Las contribuciones son bienvenidas! Por favor lee nuestra Guía de Contribución para más detalles.

1. Fork el proyecto
2. Crea tu rama de feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📄 Licencia

Este proyecto está licenciado bajo la Licencia MIT - ver el archivo LICENSE para más detalles.

👨‍💻 Autor

jlrupton - GitHub

🙏 Agradecimientos

• Vue.js - Framework progresivo
• React - Biblioteca para interfaces de usuario
• Angular - Plataforma de desarrollo web
• Vite - Herramienta de construcción rápida

📊 Estadísticas

⭐ Si este proyecto te ha sido útil, ¡dale una estrella en GitHub!