Add Reference in Service Studio:

• Open Service Studio.
• In the navigation menu, go to the "Dependencies" tab.
• Click on "Add Dependency" and search for the "Session Timeout Alert" component.
• Add the component to your module.

Incorporate into the Template Layout:

• It is recommended to use the plugin in a layout block of the theme template that you use for building authenticated screens.
• This way, all screens based on this template will have an event listening for XHR calls on the client side, managing session timeouts.
  
  

Configure Events:

• The component invokes four main events that should be configured:
  
  

  1. SessionLogoutEvent:

     • Triggered when the user clicks the "Cancel" button on the popup message.
     • This event should be used by the developer to end the session on the server side and redirect the user to the login screen.

  2. SessionRenewedEvent:

     • Triggered when the user clicks the "Keep Session" button.
     • If necessary, you can force navigation to a home page or another page.

  3. SessionTimeoutEvent:

     • Triggered when the session time has expired and the popup message remains, but only the "End Session" button is displayed.

  4. TimeRemainingEvent:

     • This event is triggered under different conditions:
       • When the CallbackTimeRemainingInRealtime parameter is TRUE, this event will be triggered continuously, second by second, decrementing the timeout and returning a TimeRemaining variable.
       • When the parameter is FALSE, this event will be triggered only in the final seconds, when the popup is displayed.

TimeoutInSeconds:

• Enter the timeout in seconds.
• If the ShowPopupInSeconds variable is not provided, the pop-up warning will be triggered at 20% of the total timeout duration. 
• For timeouts shorter than 60 seconds, the warning will appear halfway through the timeout period unless the ShowPopupInSeconds value is specified.
  
  

• Determines the number of seconds before the pop-up warning is triggered.
• It must be at least 5 seconds less than the TimeoutInSeconds value.
• If not provided, the default behavior will trigger the warning at 20% of the total timeout duration for timeouts longer than 60 seconds, or at half the timeout period for durations shorter than 60 seconds.
  
  

isDebug:

• Useful for design-time debugging.
• When TRUE, the plugin will log into console.log() with some steps of the process.
  
  

CallbackTimeRemainingInRealtime:

• This parameter influences the TimeRemainingEvent.
• When TRUE, the "TimeRemaining" event will be triggered continuously during the current session, which may cause performance issues.
• When FALSE, the "TimeRemaining" event will only be triggered in the final seconds, when the alert popup is displayed.
  
  

PopupTitle:

• Text for the popup title.
  
  

PopupButtonKeep:

• Text to customize the "Keep Session" button.

PopupButtonCancel:

• Text to customize the "Cancel" (end session) button.
  
  

ExtendedClass:

• Add custom style classes to the pattern.
• Define your custom style classes in your application using CSS.

Add Reference in Service Studio:

• Open Service Studio.
• In the navigation menu, go to the "Dependencies" tab.
• Click on "Add Dependency" and search for the "Session Timeout Alert" component.
• Add the component to your module.

Incorporate into the Template Layout:

• It is recommended to use the plugin in a layout block of the theme template that you use for building authenticated screens.
• This way, all screens based on this template will have an event listening for XHR calls on the client side, managing session timeouts.
  
  

Configure Events:

• The component invokes four main events that should be configured:
  
  

  1. SessionLogoutEvent:

     • Triggered when the user clicks the "Cancel" button on the popup message.
     • This event should be used by the developer to end the session on the server side and redirect the user to the login screen.

  2. SessionRenewedEvent:

     • Triggered when the user clicks the "Keep Session" button.
     • If necessary, you can force navigation to a home page or another page.

  3. SessionTimeoutEvent:

     • Triggered when the session time has expired and the popup message remains, but only the "End Session" button is displayed.

  4. TimeRemainingEvent:

     • This event is triggered under different conditions:
       • When the CallbackTimeRemainingInRealtime parameter is TRUE, this event will be triggered continuously, second by second, decrementing the timeout and returning a TimeRemaining variable.
       • When the parameter is FALSE, this event will be triggered only in the final seconds, when the popup is displayed.

TimeoutInSeconds:

• Enter the timeout in seconds.
• The pop-up warning will appear 60 seconds before timing out.
• If you enter a timeout of less than 60 seconds, the component will consider 50% of it to show the popup.

isDebug:

• Useful for design-time debugging.
• When TRUE, the plugin will log into console.log() with some steps of the process.

CallbackTimeRemainingInRealtime:

• This parameter influences the TimeRemainingEvent.
• When TRUE, the "TimeRemaining" event will be triggered continuously during the current session, which may cause performance issues.
• When FALSE, the "TimeRemaining" event will only be triggered in the final seconds, when the alert popup is displayed.

PopupTitle:

• Text for the popup title.

PopupButtonKeep:

• Text to customize the "Keep Session" button.

PopupButtonCancel:

• Text to customize the "Cancel" (end session) button.

ExtendedClass:

• Add custom style classes to the pattern.
• Define your custom style classes in your application using CSS.