@genesislcap/foundation-header 14.321.1-alpha-3586f61.0 → 14.322.0

package/README.md

@@ -262,6 +262,321 @@ export class MainRouterConfig extends RouterConfiguration<LoginSettings> {
 }
 ```
 
+## Inactivity Monitoring
+
+The `foundation-header` component supports configurable inactivity monitoring through attributes.
+
+### Configuration Attributes
+
+#### `inactivity-timeout-minutes`
+- **Type**: Number
+- **Default**: 30
+- **Description**: Sets the inactivity timeout in minutes before automatic logout
+
+#### `inactivity-warning-minutes`
+- **Type**: Number
+- **Default**: 5
+- **Description**: Sets the inactivity warning time in minutes before timeout
+
+#### `enable-inactivity-monitoring`
+- **Type**: Boolean
+- **Default**: `true`
+- **Description**: Controls whether inactivity monitoring is enabled
+
+### Usage Examples
+
+#### Basic Configuration
+```html
+<foundation-header
+  inactivity-timeout-minutes="20"
+  inactivity-warning-minutes="3"
+></foundation-header>
+```
+
+#### Short Session (15 minutes timeout, 2 minutes warning)
+```html
+<foundation-header
+  inactivity-timeout-minutes="15"
+  inactivity-warning-minutes="2"
+></foundation-header>
+```
+
+#### Long Session (60 minutes timeout, 10 minutes warning)
+```html
+<foundation-header
+  inactivity-timeout-minutes="60"
+  inactivity-warning-minutes="10"
+></foundation-header>
+```
+
+#### Default Configuration (30 minutes timeout, 5 minutes warning)
+```html
+<foundation-header></foundation-header>
+```
+
+#### Enable Inactivity Monitoring (Default)
+```html
+<foundation-header></foundation-header>
+```
+
+#### Enable Inactivity Monitoring (Explicit)
+```html
+<foundation-header enable-inactivity-monitoring></foundation-header>
+```
+
+#### Disable Inactivity Monitoring
+```html
+<foundation-header enable-inactivity-monitoring="false"></foundation-header>
+```
+
+#### Complete Configuration with Enable/Disable
+```html
+<!-- Enabled with custom timeout -->
+<foundation-header
+  enable-inactivity-monitoring
+  inactivity-timeout-minutes="20"
+  inactivity-warning-minutes="3"
+></foundation-header>
+
+<!-- Disabled (other attributes ignored) -->
+<foundation-header
+  enable-inactivity-monitoring="false"
+  inactivity-timeout-minutes="30"
+  inactivity-warning-minutes="5"
+></foundation-header>
+```
+
+### Behavior
+
+#### When Enabled (Default)
+- InactivityManager is created and started
+- User activity is monitored
+- Warning dialog appears before timeout
+- Automatic logout occurs on timeout
+- Debug log: "Inactivity manager initialized and started..."
+
+#### When Disabled
+- No InactivityManager is created
+- No activity monitoring occurs
+- No warning dialogs or timeouts
+- Debug log: "Inactivity monitoring is disabled"
+
+### Event Handling
+
+The component automatically emits events based on the configured timeout and warning settings:
+
+```html
+<foundation-header
+  id="app-header"
+  inactivity-timeout-minutes="20"
+  inactivity-warning-minutes="3"
+></foundation-header>
+
+<script>
+  const header = document.getElementById('app-header');
+  
+  // Warning will be triggered 3 minutes before timeout (at 17 minutes of inactivity)
+  header.addEventListener('inactivity-warning', (event) => {
+    const remainingSeconds = event.detail.remainingSeconds;
+    console.log(`Warning: Session will expire in ${remainingSeconds} seconds`);
+  });
+  
+  // Timeout will be triggered after 20 minutes of inactivity
+  header.addEventListener('inactivity-timeout', () => {
+    console.log('Session expired due to inactivity');
+  });
+  
+  // Reset is triggered whenever user activity is detected
+  header.addEventListener('inactivity-reset', () => {
+    console.log('User activity detected - timer reset');
+  });
+</script>
+```
+
+### Configuration Guidelines
+
+#### Recommended Settings
+
+| Use Case | Timeout | Warning | Description |
+|----------|---------|---------|-------------|
+| **High Security** | 15-20 min | 2-3 min | Banking, healthcare, sensitive data |
+| **Standard** | 30 min | 5 min | General business applications |
+| **Long Sessions** | 60 min | 10 min | Creative work, analysis tools |
+| **Development** | 120 min | 15 min | Development environments |
+
+#### Best Practices
+
+1. **Warning Time**: Should be 10-20% of the timeout time
+2. **Minimum Values**: Don't set timeout below 10 minutes or warning below 1 minute
+3. **User Experience**: Consider the user's workflow when setting these values
+4. **Security Requirements**: Align with your organization's security policies
+
+### Use Cases
+
+#### Development/Testing
+```html
+<!-- Disable during development -->
+<foundation-header enable-inactivity-monitoring="false"></foundation-header>
+```
+
+#### Production with Monitoring
+```html
+<!-- Enable with appropriate timeout for production -->
+<foundation-header
+  enable-inactivity-monitoring
+  inactivity-timeout-minutes="30"
+  inactivity-warning-minutes="5"
+></foundation-header>
+```
+
+#### Conditional Monitoring
+```javascript
+const header = document.querySelector('foundation-header');
+
+// Enable monitoring for admin users
+if (userRole === 'admin') {
+  header.setAttribute('enable-inactivity-monitoring', 'true');
+} else {
+  header.setAttribute('enable-inactivity-monitoring', 'false');
+}
+```
+
+### Dynamic Configuration
+
+You can also set these attributes programmatically:
+
+```javascript
+const header = document.querySelector('foundation-header');
+
+// Set timeout to 45 minutes
+header.setAttribute('inactivity-timeout-minutes', '45');
+
+// Set warning to 5 minutes
+header.setAttribute('inactivity-warning-minutes', '5');
+
+// Disable monitoring
+header.setAttribute('enable-inactivity-monitoring', 'false');
+
+// Enable monitoring
+header.setAttribute('enable-inactivity-monitoring', 'true');
+
+// Check current state
+const isEnabled = header.hasAttribute('enable-inactivity-monitoring') && 
+                  header.getAttribute('enable-inactivity-monitoring') !== 'false';
+```
+
+### Integration with Authentication
+
+The inactivity monitoring integrates seamlessly with the existing authentication system:
+
+```html
+<foundation-header
+  inactivity-timeout-minutes="30"
+  inactivity-warning-minutes="5"
+></foundation-header>
+
+<script>
+  const header = document.querySelector('foundation-header');
+  
+  // Handle logout when timeout occurs
+  header.addEventListener('logout-clicked', () => {
+    // Clear session data
+    sessionStorage.clear();
+    localStorage.removeItem('auth-token');
+    
+    // Redirect to login page
+    window.location.href = '/login';
+  });
+</script>
+```
+
+### Complete Example
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Foundation Header with Inactivity Monitoring</title>
+</head>
+<body>
+  <foundation-header
+    id="app-header"
+    enable-inactivity-monitoring
+    inactivity-timeout-minutes="25"
+    inactivity-warning-minutes="4"
+    show-connection-indicator
+    show-language-selector
+  ></foundation-header>
+
+  <div id="inactivity-notification" style="display: none; position: fixed; top: 20px; right: 20px; background: #ff9800; color: white; padding: 16px; border-radius: 4px; z-index: 1000;">
+    <div id="notification-text"></div>
+    <button onclick="extendSession()" style="margin-top: 8px; padding: 4px 8px;">Continue Session</button>
+  </div>
+
+  <!-- Control buttons -->
+  <div style="margin: 20px;">
+    <button onclick="enableMonitoring()">Enable Monitoring</button>
+    <button onclick="disableMonitoring()">Disable Monitoring</button>
+    <button onclick="checkStatus()">Check Status</button>
+  </div>
+
+  <script type="module">
+    import { foundationHeader } from '@genesislcap/foundation-header';
+    
+    const header = document.getElementById('app-header');
+    const notification = document.getElementById('inactivity-notification');
+    const notificationText = document.getElementById('notification-text');
+    
+    header.addEventListener('inactivity-warning', (event) => {
+      const remainingSeconds = event.detail.remainingSeconds;
+      notificationText.textContent = `Your session will expire in ${remainingSeconds} seconds.`;
+      notification.style.display = 'block';
+    });
+    
+    header.addEventListener('inactivity-reset', () => {
+      notification.style.display = 'none';
+    });
+    
+    header.addEventListener('logout-clicked', () => {
+      alert('Session expired. You will be redirected to the login page.');
+      window.location.href = '/login';
+    });
+    
+    function extendSession() {
+      // Trigger user activity to reset the timer
+      document.body.click();
+    }
+    
+    function enableMonitoring() {
+      header.setAttribute('enable-inactivity-monitoring', 'true');
+      console.log('Inactivity monitoring enabled');
+    }
+    
+    function disableMonitoring() {
+      header.setAttribute('enable-inactivity-monitoring', 'false');
+      console.log('Inactivity monitoring disabled');
+    }
+    
+    function checkStatus() {
+      const isEnabled = header.hasAttribute('enable-inactivity-monitoring') && 
+                       header.getAttribute('enable-inactivity-monitoring') !== 'false';
+      console.log('Inactivity monitoring is:', isEnabled ? 'enabled' : 'disabled');
+    }
+    
+    // Check initial status
+    checkStatus();
+  </script>
+</body>
+</html>
+```
+
+### Notes
+
+- When disabled, the InactivityManager is not created, saving memory and CPU
+- The enable/disable state is checked only during initialization
+- Changing the attribute after the component is created requires reconnecting the component to take effect
+- All other inactivity-related attributes are ignored when monitoring is disabled
+
 ## DOM API
 
 Property and attribute binding examples for foundation-header micro-frontend.
@@ -278,6 +593,9 @@ Property and attribute binding examples for foundation-header micro-frontend.
 | show-connection-indicator | `boolean` | Boolean attribute which controls whether the navigation bar will display the connection indicator. | `<foundation-header show-connection-indicator>` |
 | show-language-selector | `boolean` | Boolean attribute which controls whether the navigation bar will display the language selector. | `<foundation-header show-language-selector>` |
 | hide-side-bar | `boolean` | Boolean attribute which controls whether the navigation bar will display the side bar. | `<foundation-header hide-side-bar>` |
+| inactivity-timeout-minutes | `number` | Number attribute which sets the inactivity timeout in minutes (default: 30). | `<foundation-header inactivity-timeout-minutes="20">` |
+| inactivity-warning-minutes | `number` | Number attribute which sets the inactivity warning time in minutes (default: 5). | `<foundation-header inactivity-warning-minutes="3">` |
+| enable-inactivity-monitoring | `boolean` | Boolean attribute which controls whether inactivity monitoring is enabled (default: true). | `<foundation-header enable-inactivity-monitoring="false">` |
 
 ### Properties
 
@@ -317,6 +635,10 @@ Property and attribute binding examples for foundation-header micro-frontend.
 | misc-icon-clicked | `void` | Dispatched when the user clicks on the miscellaneous behaviour icon in the navigation bar. | `<foundation-header @misc-icon-clicked="${(x) => x.handleMiscIconClick}">` |
 | notification-icon-clicked | `void` | Dispatched when the user clicks on the notification icon in the navigation bar. | `<foundation-header @notification-icon-clicked="${(x) => x.handleNotificationIconClick}">` |
 | language-changed | `void` | Dispatched when the user changes the language in the language selector. | `<foundation-header @language-changed="${(x) => x.handleLanguageChange}">` |
+| inactivity-warning | `InactivityWarningEvent` | Dispatched when the inactivity warning is triggered. | `<foundation-header @inactivity-warning="${(x) => x.handleInactivityWarning}">` |
+| inactivity-timeout | `void` | Dispatched when the inactivity timeout is reached. | `<foundation-header @inactivity-timeout="${(x) => x.handleInactivityTimeout}">` |
+| inactivity-reset | `void` | Dispatched when user activity is detected and the timer is reset. | `<foundation-header @inactivity-reset="${(x) => x.handleInactivityReset}">` |
+| logout-clicked | `void` | Dispatched when logout is triggered due to inactivity timeout. | `<foundation-header @logout-clicked="${(x) => x.handleLogout}">` |
 
 ## Listened Events