ngx-auto-logout 1.0.0

package/dist/fesm2015/ngx-auto-logout.js

@@ -0,0 +1,787 @@
+import { InjectionToken, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, EventEmitter, Input, Output, Component, NgModule } from '@angular/core';
+import { __decorate } from 'tslib';
+import { BehaviorSubject, interval } from 'rxjs';
+import { CommonModule } from '@angular/common';
+
+/**
+ * 默认配置
+ */
+const DEFAULT_AUTO_LOGOUT_CONFIG = {
+    mode: 'fixed',
+    timeout: 300,
+    warningTime: 30,
+    maxExtendTimes: -1,
+};
+
+/**
+ * InjectionToken for auto logout configuration
+ * Extracted to a separate file to avoid Angular 9 Ivy compilation scope issues
+ */
+const AUTO_LOGOUT_CONFIG = new InjectionToken('AutoLogoutConfig');
+
+/**
+ * Auto logout service
+ * Angular 9 compatible: use providedIn: 'root' (official pattern)
+ */
+let AutoLogoutService = class AutoLogoutService {
+    /**
+     * Constructor
+     * Note: Do NOT use @Inject() here, it causes DI errors in Angular 9 VE
+     * Config should be passed via startMonitoring() method instead
+     */
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        // 配置是否已初始化
+        this.isConfigInitialized = false;
+        // localStorage 键名
+        this.LOGIN_TIME_KEY = 'autoLogout_loginTime';
+        this.LAST_ACTIVITY_KEY = 'autoLogout_lastActivity';
+        this.EXTEND_COUNT_KEY = 'autoLogout_extendCount';
+        this.PAUSE_STATE_KEY = 'autoLogout_pauseState';
+        this.lastActivityTime = Date.now();
+        this.countdownValue = 0;
+        this.countdownSubject = new BehaviorSubject(0);
+        this.timerSubscription = null;
+        this.activityListeners = [];
+        this.warningShown = false;
+        // 是否启用活动监听
+        this.enableActivityTracking = false;
+        // 暂停状态
+        this.isPaused = false;
+        this.pauseStartTime = 0;
+        this.pausedRemainingTime = 0;
+        // Use default config, will be overridden by startMonitoring()
+        this.currentConfig = Object.assign({}, DEFAULT_AUTO_LOGOUT_CONFIG);
+        this.countdownValue = Math.floor(this.currentConfig.timeout);
+        this.countdownSubject = new BehaviorSubject(this.countdownValue);
+    }
+    getCountdown() {
+        return this.countdownSubject.asObservable();
+    }
+    /**
+     * 启动自动登出监控
+     */
+    startMonitoring(config, enableTracking = false) {
+        this.stopMonitoring();
+        if (config) {
+            this.currentConfig = Object.assign(Object.assign({}, this.currentConfig), config);
+        }
+        // 恢复暂停状态
+        this.restorePauseState();
+        if (this.isPaused) {
+            return;
+        }
+        // 根据模式初始化
+        if (this.currentConfig.mode === 'fixed') {
+            this.initFixedMode();
+        }
+        else {
+            this.initIdleMode(enableTracking);
+        }
+        this.warningShown = false;
+        // 启动定时器
+        this.ngZone.runOutsideAngular(() => {
+            this.timerSubscription = interval(1000).subscribe(() => {
+                this.updateCountdown();
+            });
+        });
+    }
+    /**
+     * 停止监控
+     */
+    stopMonitoring() {
+        if (this.timerSubscription) {
+            this.timerSubscription.unsubscribe();
+            this.timerSubscription = null;
+        }
+        this.removeActivityListeners();
+    }
+    /**
+     * 清除登录时间
+     */
+    clearLoginTime() {
+        localStorage.removeItem(this.LOGIN_TIME_KEY);
+        localStorage.removeItem(this.LAST_ACTIVITY_KEY);
+        this.resetExtendCount();
+        this.clearPauseState();
+    }
+    /**
+     * 延长会话
+     */
+    extendSession(extendSeconds = 1800) {
+        if (this.isMaxExtendReached()) {
+            console.warn('已达到最大延长次数');
+            return false;
+        }
+        if (this.currentConfig.mode === 'fixed') {
+            this.lastActivityTime -= extendSeconds * 1000;
+        }
+        else {
+            this.resetActivityTimer();
+        }
+        this.incrementExtendCount();
+        if (this.currentConfig.onExtended) {
+            this.currentConfig.onExtended(extendSeconds);
+        }
+        return true;
+    }
+    /**
+     * 检查是否可以延长
+     */
+    canExtendSession() {
+        return !this.isMaxExtendReached() && !this.isPaused;
+    }
+    /**
+     * 获取剩余可延长次数
+     */
+    getRemainingExtendTimes() {
+        if (this.currentConfig.maxExtendTimes === -1 || this.currentConfig.maxExtendTimes === undefined) {
+            return -1;
+        }
+        const usedCount = this.getExtendCount();
+        return Math.max(0, this.currentConfig.maxExtendTimes - usedCount);
+    }
+    /**
+     * 获取最后操作时间显示
+     */
+    getLastActivityDisplay() {
+        if (this.currentConfig.mode !== 'idle') {
+            return '';
+        }
+        const lastActivity = this.getLastActivityTime();
+        if (!lastActivity) {
+            return '';
+        }
+        const minutesAgo = Math.floor((Date.now() - lastActivity) / 60000);
+        if (minutesAgo < 1) {
+            return '刚刚操作';
+        }
+        return `${minutesAgo}分钟前操作`;
+    }
+    /**
+     * 暂停
+     */
+    pause() {
+        if (this.isPaused)
+            return;
+        this.isPaused = true;
+        this.pauseStartTime = Date.now();
+        this.pausedRemainingTime = this.countdownValue;
+        this.stopMonitoring();
+        this.savePauseState();
+        if (this.currentConfig.onPaused) {
+            this.currentConfig.onPaused();
+        }
+    }
+    /**
+     * 恢复
+     */
+    resume() {
+        if (!this.isPaused)
+            return;
+        const pauseDuration = Date.now() - this.pauseStartTime;
+        if (this.currentConfig.mode === 'fixed') {
+            this.lastActivityTime += pauseDuration;
+        }
+        else {
+            this.lastActivityTime += pauseDuration;
+            this.setLastActivityTime(this.lastActivityTime);
+        }
+        this.isPaused = false;
+        this.pauseStartTime = 0;
+        this.pausedRemainingTime = 0;
+        this.clearPauseState();
+        this.startMonitoring(this.currentConfig, this.enableActivityTracking);
+        if (this.currentConfig.onResumed) {
+            this.currentConfig.onResumed();
+        }
+    }
+    /**
+     * 检查是否暂停
+     */
+    isAutoLogoutPaused() {
+        return this.isPaused;
+    }
+    /**
+     * 格式化倒计时
+     */
+    formatCountdown(seconds) {
+        const mins = Math.floor(seconds / 60);
+        const secs = seconds % 60;
+        return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+    }
+    /**
+     * 判断是否警告状态
+     */
+    isWarningState(seconds) {
+        const warningTime = this.currentConfig.warningTime || 30;
+        return seconds <= warningTime && seconds > 0;
+    }
+    /**
+     * 判断是否紧急状态（最后10秒）
+     */
+    isUrgentState(seconds) {
+        return seconds <= 10 && seconds > 0;
+    }
+    /**
+     * 获取当前模式
+     */
+    getCurrentMode() {
+        return this.currentConfig.mode;
+    }
+    // ==================== 私有方法 ====================
+    initFixedMode() {
+        const loginTime = this.getLoginTime();
+        if (!loginTime) {
+            this.setLoginTime(Date.now());
+            this.lastActivityTime = Date.now();
+        }
+        else {
+            this.lastActivityTime = loginTime;
+        }
+        this.updateCountdownValue();
+    }
+    initIdleMode(enableTracking) {
+        this.enableActivityTracking = enableTracking || true;
+        const lastActivity = this.getLastActivityTime();
+        if (!lastActivity) {
+            this.setLastActivityTime(Date.now());
+            this.lastActivityTime = Date.now();
+        }
+        else {
+            this.lastActivityTime = lastActivity;
+        }
+        this.registerActivityListeners();
+        this.updateCountdownValue();
+    }
+    updateCountdownValue() {
+        const now = Date.now();
+        const elapsed = now - this.lastActivityTime;
+        const remaining = Math.max(0, Math.floor((this.currentConfig.timeout * 1000 - elapsed) / 1000));
+        this.countdownValue = remaining;
+        this.countdownSubject.next(this.countdownValue);
+    }
+    updateCountdown() {
+        const now = Date.now();
+        const elapsed = now - this.lastActivityTime;
+        const remaining = Math.max(0, Math.floor((this.currentConfig.timeout * 1000 - elapsed) / 1000));
+        if (remaining !== this.countdownValue) {
+            this.countdownValue = remaining;
+            this.ngZone.run(() => {
+                this.countdownSubject.next(this.countdownValue);
+            });
+            // 警告回调
+            const warningTime = this.currentConfig.warningTime || 30;
+            if (remaining === warningTime && !this.warningShown) {
+                this.warningShown = true;
+                if (this.currentConfig.onWarning) {
+                    this.currentConfig.onWarning(remaining);
+                }
+            }
+            // 超时回调
+            if (remaining <= 0) {
+                this.performAutoLogout();
+            }
+        }
+    }
+    performAutoLogout() {
+        this.stopMonitoring();
+        this.clearLoginTime();
+        if (this.currentConfig.onTimeout) {
+            this.currentConfig.onTimeout();
+        }
+        else {
+            // 默认行为：导航到登录页
+            // Note: Router navigation removed to avoid DI issues in Angular 9 VE
+            // Use onTimeout callback for custom navigation
+            console.warn('Auto logout timeout - implement custom navigation via onTimeout callback');
+        }
+    }
+    registerActivityListeners() {
+        const events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart', 'click'];
+        events.forEach((event) => {
+            const listener = () => this.resetActivityTimer();
+            document.addEventListener(event, listener, true);
+            this.activityListeners.push({ event, listener });
+        });
+    }
+    removeActivityListeners() {
+        this.activityListeners.forEach(({ event, listener }) => {
+            document.removeEventListener(event, listener, true);
+        });
+        this.activityListeners = [];
+    }
+    resetActivityTimer() {
+        if (this.currentConfig.mode === 'idle') {
+            this.lastActivityTime = Date.now();
+            this.setLastActivityTime(this.lastActivityTime);
+            this.updateCountdownValue();
+            this.warningShown = false;
+        }
+    }
+    isMaxExtendReached() {
+        if (this.currentConfig.maxExtendTimes === -1 || this.currentConfig.maxExtendTimes === undefined) {
+            return false;
+        }
+        const usedCount = this.getExtendCount();
+        return usedCount >= this.currentConfig.maxExtendTimes;
+    }
+    getExtendCount() {
+        const countStr = localStorage.getItem(this.EXTEND_COUNT_KEY);
+        return countStr ? parseInt(countStr, 10) : 0;
+    }
+    incrementExtendCount() {
+        const currentCount = this.getExtendCount();
+        localStorage.setItem(this.EXTEND_COUNT_KEY, (currentCount + 1).toString());
+    }
+    resetExtendCount() {
+        localStorage.removeItem(this.EXTEND_COUNT_KEY);
+    }
+    getLoginTime() {
+        const timeStr = localStorage.getItem(this.LOGIN_TIME_KEY);
+        return timeStr ? parseInt(timeStr, 10) : null;
+    }
+    setLoginTime(time) {
+        localStorage.setItem(this.LOGIN_TIME_KEY, time.toString());
+    }
+    getLastActivityTime() {
+        const timeStr = localStorage.getItem(this.LAST_ACTIVITY_KEY);
+        return timeStr ? parseInt(timeStr, 10) : null;
+    }
+    setLastActivityTime(time) {
+        localStorage.setItem(this.LAST_ACTIVITY_KEY, time.toString());
+    }
+    savePauseState() {
+        const state = {
+            isPaused: true,
+            pauseStartTime: this.pauseStartTime,
+            pausedRemainingTime: this.pausedRemainingTime,
+            mode: this.currentConfig.mode,
+            lastActivityTime: this.lastActivityTime
+        };
+        localStorage.setItem(this.PAUSE_STATE_KEY, JSON.stringify(state));
+    }
+    clearPauseState() {
+        localStorage.removeItem(this.PAUSE_STATE_KEY);
+    }
+    restorePauseState() {
+        const stateStr = localStorage.getItem(this.PAUSE_STATE_KEY);
+        if (!stateStr)
+            return;
+        try {
+            const state = JSON.parse(stateStr);
+            if (state.isPaused) {
+                this.isPaused = true;
+                this.pauseStartTime = state.pauseStartTime;
+                this.pausedRemainingTime = state.pausedRemainingTime;
+                this.lastActivityTime = state.lastActivityTime;
+                this.currentConfig.mode = state.mode;
+                if (this.timerSubscription) {
+                    this.timerSubscription.unsubscribe();
+                    this.timerSubscription = null;
+                }
+                this.removeActivityListeners();
+            }
+        }
+        catch (e) {
+            console.error('恢复暂停状态失败:', e);
+            this.clearPauseState();
+        }
+    }
+};
+AutoLogoutService.ctorParameters = () => [
+    { type: NgZone }
+];
+AutoLogoutService.ɵprov = ɵɵdefineInjectable({ factory: function AutoLogoutService_Factory() { return new AutoLogoutService(ɵɵinject(NgZone)); }, token: AutoLogoutService, providedIn: "root" });
+AutoLogoutService = __decorate([
+    Injectable({ providedIn: 'root' })
+], AutoLogoutService);
+
+let AutoLogoutComponent = class AutoLogoutComponent {
+    constructor(autoLogout) {
+        this.autoLogout = autoLogout;
+        // ==================== 输入属性 ====================
+        /**
+         * 是否显示延长按钮
+         */
+        this.showExtendButton = true;
+        /**
+         * 是否显示暂停按钮
+         */
+        this.showPauseButton = true;
+        /**
+         * 延长的秒数（默认30分钟）
+         */
+        this.extendSeconds = 1800;
+        // ==================== 输出事件 ====================
+        /**
+         * 警告事件
+         */
+        this.onWarning = new EventEmitter();
+        /**
+         * 超时事件
+         */
+        this.onTimeout = new EventEmitter();
+        /**
+         * 延长成功事件
+         */
+        this.onExtended = new EventEmitter();
+        /**
+         * 暂停事件
+         */
+        this.onPaused = new EventEmitter();
+        /**
+         * 恢复事件
+         */
+        this.onResumed = new EventEmitter();
+        // ==================== 内部状态 ====================
+        this.subscription = null;
+        this.countdown = '00:00';
+        this.isWarning = false;
+        this.isUrgent = false;
+        this.isPaused = false;
+        this.canExtend = true;
+        this.remainingExtends = -1;
+    }
+    ngOnInit() {
+        // 如果提供了自定义配置，启动监控
+        if (this.config) {
+            this.autoLogout.startMonitoring(this.config);
+        }
+        // 订阅倒计时
+        this.subscription = this.autoLogout.getCountdown().subscribe((seconds) => {
+            var _a;
+            this.countdown = this.autoLogout.formatCountdown(seconds);
+            this.isWarning = this.autoLogout.isWarningState(seconds);
+            this.isUrgent = this.autoLogout.isUrgentState(seconds);
+            // 触发警告事件
+            const warningTime = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.warningTime) || 30;
+            if (seconds === warningTime) {
+                this.onWarning.emit(seconds);
+            }
+            // 触发超时事件
+            if (seconds <= 0) {
+                this.onTimeout.emit();
+            }
+        });
+        // 定期检查状态
+        setInterval(() => {
+            this.updateStatus();
+        }, 1000);
+        this.updateStatus();
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    // ==================== 公开方法 ====================
+    /**
+     * 延长会话
+     */
+    extendSession() {
+        this.handleExtend();
+    }
+    /**
+     * 暂停
+     */
+    pause() {
+        this.handleTogglePause();
+    }
+    /**
+     * 恢复
+     */
+    resume() {
+        this.handleTogglePause();
+    }
+    /**
+     * 获取模板上下文（用于自定义模板）
+     */
+    get templateContext() {
+        return {
+            countdown: this.countdown,
+            isWarning: this.isWarning,
+            isUrgent: this.isUrgent,
+            isPaused: this.isPaused,
+            canExtend: this.canExtend,
+            remainingExtends: this.remainingExtends,
+            extendSession: () => this.handleExtend(),
+            togglePause: () => this.handleTogglePause(),
+            formatCountdown: (seconds) => this.autoLogout.formatCountdown(seconds)
+        };
+    }
+    // ==================== 内部方法 ====================
+    updateStatus() {
+        this.isPaused = this.autoLogout.isAutoLogoutPaused();
+        this.canExtend = this.autoLogout.canExtendSession();
+        this.remainingExtends = this.autoLogout.getRemainingExtendTimes();
+    }
+    /**
+     * 处理延长会话（模板调用）
+     */
+    handleExtend() {
+        const success = this.autoLogout.extendSession(this.extendSeconds);
+        if (success) {
+            this.onExtended.emit(this.extendSeconds);
+        }
+        this.updateStatus();
+    }
+    /**
+     * 处理暂停/恢复切换（模板调用）
+     */
+    handleTogglePause() {
+        if (this.isPaused) {
+            this.autoLogout.resume();
+            this.onResumed.emit();
+        }
+        else {
+            this.autoLogout.pause();
+            this.onPaused.emit();
+        }
+        this.updateStatus();
+    }
+};
+AutoLogoutComponent.ctorParameters = () => [
+    { type: AutoLogoutService }
+];
+__decorate([
+    Input()
+], AutoLogoutComponent.prototype, "showExtendButton", void 0);
+__decorate([
+    Input()
+], AutoLogoutComponent.prototype, "showPauseButton", void 0);
+__decorate([
+    Input()
+], AutoLogoutComponent.prototype, "extendSeconds", void 0);
+__decorate([
+    Input()
+], AutoLogoutComponent.prototype, "config", void 0);
+__decorate([
+    Input()
+], AutoLogoutComponent.prototype, "customTemplate", void 0);
+__decorate([
+    Output()
+], AutoLogoutComponent.prototype, "onWarning", void 0);
+__decorate([
+    Output()
+], AutoLogoutComponent.prototype, "onTimeout", void 0);
+__decorate([
+    Output()
+], AutoLogoutComponent.prototype, "onExtended", void 0);
+__decorate([
+    Output()
+], AutoLogoutComponent.prototype, "onPaused", void 0);
+__decorate([
+    Output()
+], AutoLogoutComponent.prototype, "onResumed", void 0);
+AutoLogoutComponent = __decorate([
+    Component({
+        selector: 'ngx-auto-logout',
+        template: `
+    <!-- 默认UI模式（傻瓜模式） -->
+    <div *ngIf="!customTemplate" class="ngx-auto-logout-container">
+      <!-- 倒计时显示 -->
+      <div class="countdown-display" [class.warning]="isWarning" [class.urgent]="isUrgent" [class.paused]="isPaused">
+        <span class="icon">{{ isPaused ? '⏸️' : '⏱️' }}</span>
+        <span class="time">{{ countdown }}</span>
+        <span *ngIf="isPaused" class="pause-label">(已暂停)</span>
+      </div>
+
+      <!-- 控制按钮 -->
+      <div class="controls">
+        <!-- 延长会话按钮 -->
+        <button *ngIf="showExtendButton && canExtend" class="btn btn-extend" (click)="handleExtend()" [disabled]="!canExtend" title="延长30分钟">
+          ➕ 延长
+          <span *ngIf="remainingExtends !== -1" class="extend-count"> ({{ remainingExtends }}) </span>
+        </button>
+
+        <!-- 暂停/恢复按钮 -->
+        <button
+          *ngIf="showPauseButton"
+          class="btn btn-pause"
+          [class.paused]="isPaused"
+          (click)="handleTogglePause()"
+          [title]="isPaused ? '恢复自动登出' : '暂停自动登出'"
+        >
+          {{ isPaused ? '▶️ 恢复' : '⏸️ 暂停' }}
+        </button>
+      </div>
+    </div>
+
+    <!-- 自定义模板模式（专家模式） -->
+    <ng-container *ngIf="customTemplate">
+      <ng-container [ngTemplateOutlet]="customTemplate" [ngTemplateOutletContext]="templateContext"></ng-container>
+    </ng-container>
+  `,
+        styles: [`
+      .ngx-auto-logout-container {
+        display: inline-flex;
+        align-items: center;
+        gap: 12px;
+        padding: 8px 12px;
+        background: #f8f9fa;
+        border-radius: 6px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      }
+
+      .countdown-display {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 12px;
+        background: white;
+        border-radius: 4px;
+        font-weight: bold;
+        font-size: 16px;
+        transition: all 0.3s ease;
+      }
+
+      .countdown-display.warning {
+        background: #fff3cd;
+        color: #856404;
+        animation: blink-warning 1s ease-in-out infinite;
+      }
+
+      .countdown-display.urgent {
+        background: #f8d7da;
+        color: #721c24;
+        animation: blink-urgent 0.5s ease-in-out infinite;
+      }
+
+      .countdown-display.paused {
+        opacity: 0.6;
+        background: #e9ecef;
+      }
+
+      .icon {
+        font-size: 18px;
+      }
+
+      .time {
+        min-width: 50px;
+        text-align: center;
+      }
+
+      .pause-label {
+        font-size: 12px;
+        color: #6c757d;
+        font-weight: normal;
+      }
+
+      .controls {
+        display: flex;
+        gap: 8px;
+      }
+
+      .btn {
+        padding: 6px 12px;
+        font-size: 13px;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.2s;
+        font-weight: 500;
+      }
+
+      .btn-extend {
+        background: #28a745;
+        color: white;
+      }
+
+      .btn-extend:hover:not(:disabled) {
+        background: #218838;
+        transform: translateY(-1px);
+      }
+
+      .btn-extend:disabled {
+        background: #ccc;
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+
+      .btn-pause {
+        background: #007bff;
+        color: white;
+      }
+
+      .btn-pause:hover {
+        background: #0056b3;
+        transform: translateY(-1px);
+      }
+
+      .btn-pause.paused {
+        background: #ffc107;
+        color: #212529;
+      }
+
+      .extend-count {
+        font-size: 11px;
+        opacity: 0.9;
+      }
+
+      @keyframes blink-warning {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.7;
+        }
+      }
+
+      @keyframes blink-urgent {
+        0%,
+        100% {
+          opacity: 1;
+          transform: scale(1);
+        }
+        50% {
+          opacity: 0.6;
+          transform: scale(1.05);
+        }
+      }
+    `]
+    })
+], AutoLogoutComponent);
+
+var AutoLogoutModule_1;
+/**
+ * Auto logout module
+ * Note: Service uses providedIn: 'root', module only declares/exports component
+ */
+let AutoLogoutModule = AutoLogoutModule_1 = class AutoLogoutModule {
+    static forRoot() {
+        return {
+            ngModule: AutoLogoutModule_1,
+            providers: []
+        };
+    }
+};
+AutoLogoutModule = AutoLogoutModule_1 = __decorate([
+    NgModule({
+        declarations: [AutoLogoutComponent],
+        imports: [CommonModule],
+        exports: [AutoLogoutComponent]
+    })
+], AutoLogoutModule);
+
+/**
+ * 提供自动登出配置（Angular 15+ Standalone）
+ */
+function provideAutoLogout(config) {
+    return {
+        provide: AUTO_LOGOUT_CONFIG,
+        useValue: config
+    };
+}
+
+/*
+ * Public API Surface of auto-logout
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AUTO_LOGOUT_CONFIG, AutoLogoutComponent, AutoLogoutModule, AutoLogoutService, DEFAULT_AUTO_LOGOUT_CONFIG, provideAutoLogout };
+//# sourceMappingURL=ngx-auto-logout.js.map