## Overview

The **Session Timeout & Inactivity Guard** is a highly configurable, enterprise-ready component built natively for OutSystems 11. It provides an elegant security layer for applications that handle sensitive data (e.g., Banking, Healthcare, Internal Portals) by monitoring user idling and gracefully managing session lifetimes.

Unlike traditional timeout scripts, this component is fully optimized for O11 client-side mechanics, ensuring zero performance overhead and absolute protection against browser memory leaks.

---

## 🌟 Key Features

* **Multi-Event Idle Tracking:** Monitors mouse movements, keyboard presses, clicks, and mobile touch interactions (`touchstart`).

* **O11 Architecture Compliant:** Uses smart asynchronous parameter passing to bypass the platform's client-action output limitations.

* **Dual Session Extension Mechanisms:** 

  1. *Native:* Pings the local OutSystems server automatically to refresh session cookies.

  2. *Custom:* Integrates an optional background `Fetch` URL gateway for lightweight REST infrastructure endpoints.

* **Memory-Leak Safe:** Explicitly clears background intervals and window DOM listeners on the page `OnDestroy` cycle.

* **Fully Customizable UI:** Styled with standard OutSystems UI CSS tokens—it adapts instantly to your brand colors out of the box.

---

## ⚙️ Input Parameters & Configuration

| Parameter | Type | Default | Description |

| :--- | :--- | :--- | :--- |

| **InactivityTimeout_Mins** | `Integer` | `15` | The number of minutes a user can remain completely idle before the warning modal is triggered. |

| **WarningDuration_Secs** | `Integer` | `60` | The countdown duration (in seconds) shown to the user inside the warning modal. |

| **SessionExtend_Url** | `Text` | `""` | *(Optional)* An external REST API endpoint or page URL. If provided, clicking "Keep Me Signed In" triggers a silent background HTTP fetch to this URL instead of a full server action trip. |

### Emitted Events

* **OnTimeout (Mandatory):** Fires immediately when the countdown timer hits zero. 

---

## 🚀 How to Implement in 4 Steps

### 1. Place the Block

Open your application's global layout structure (typically `UI Flows \ Common \ Layout`). Drag the `InactivityTimer` block and drop it directly into the **Footer** placeholder. This ensures idle tracking runs seamlessly across all screens.

### 2. Configure Your Parameters

Select the block instance and fill in your desired timeout windows (e.g., 15 minutes of inactivity followed by a 60-second warning countdown).

### 3. Handle the Logout Event

Go to the block instance properties, navigate to the **Events** tab, and set the `OnTimeout` handler to a **New Client Action**. Inside this action, drag your standard application logout action sequence or a direct navigation link to your **Login screen**.

### 4. Custom Styling (Optional)

The modal comes with pre-packaged utility classes. To modify the text badge look on your custom theme, use the following class selector in your CSS stylesheet:

```css

.session-timeout-countdown-highlight {

    /* Add custom padding, borders, or colors here */

}

```