Timeout modal

Timeout modal aka Idle Timeout Modal is used to show a dialog to the user telling him that he has been idle for too long and that he will be redirected if he doesn't interact.

How to use it

Add the following tag in your page

<enterprise-nav-timeout-modal> </enterprise-nav-timeout-modal>

It can be configured with the following props:

@Prop() showModalTimerMs?: number = 115 * 60 * 1000; // Optional. By default, 115 minutes.
@Prop() redirectTimerMs?: number = 120 * 60 * 1000; // Optional. By default, 120 minutes.
@Prop() redirectBaseUrl: string = "/timeout?redirect_uri="; // Optional. Timeout page Url. To this URL a parameter will be appended. For example http://localhost:9000?r=.
@Prop() returnMode?: "current-url" | "current-menu-item" | "fixed-url" = "current-url"; // Optional. The url mode that will be used to fill redirectBaseUrl
@Prop() returnFixedUrl?: string; // Optional. In case the returnMode is 'fixed-url', this is mandatory. For example http://localhost:9000/
@Prop() multiTab?: boolean = false; // Optional. Config to make the dialog work cross tab.
@Prop() cookieDomain?: string; // Optional. In case multiTab is true, this is mandatory. For example lumen.com
@Prop() keepServerAliveImgUrl?: string; // Optional. In case there must be an img which needs to be reloaded so the server does not timeout.
@Prop() keepServerAliveImgTimerMs?: number = 3 * 60 * 1000; // Optional. By default, 3 minutes.

Example:

<enterprise-nav-timeout-modal 
  show-modal-timer-ms="2000"
  redirect-timer-ms="20000"
  redirect-base-url="http://localhost:9090/page?returnUrl="
  return-mode="fixed-url"
  return-fixed-url="http://localhost:3000"
  multi-tab="false"
  cookie-domain="*"
  keep-server-alive-img-url="https://picsum.photos/1024/400/?image=41"
  keep-server-alive-img-timer-ms="30000"
</enterprise-nav-timeout-modal>