idle-timeout-component

This is an idle timeout component built with the purpose of allowing for developers to easily implement an idle timeout feature into their website. A modal comes up to log users out of the website. There is a high degree of customizability using features of web components and taking advantage of the shadow DOM.

Benefits

• Easy to implement
• Easy to use
• Works in React, Angular, Vue
• Will work in any framework at all
• Highly customizable
• Highly reactive to different screen sizes

Dependencies

• Built using lit

Features

• Can be created straight in the HTML tag
• Has 15+ CSS variables that can be edited
• Has 7 direct properties that can be edited
• Reactive styling
• Notification and logout times can be changed easily by the developer

Installation

$ npm install idle-timeout-component

Importing

After installing the web component, it must also be imported.

This can be done in one of three ways.

Javascript module:

import 'idle-timeout-component';

Or through HTML as follows:

<script type="module">
import 'idle-timeout-component';
</script>

or

<script type="module" src="idle-timeout-component"></script>

Usage

After importing simply using the tag will add the web component to the application.

<idle-timeout-component></idle-timeout-component>

If you want to use this on an entire React, Angular, or Vue site, put the HTML tag at the root. For example, in React, you would put the tag in the index.js file.

But this will not include any information and all editing of the pugh chart will have to be done via the website on which the component is hosted. If you wish to have persistent data inputted. This must be passed as an HTML property as seen in the following example.

  <idle-timeout-component timeToNotify=100 timeToLogout=60 style="--logout-button-color: blue; --logout-button-font: Serif"><idle-timeout-component>>

The above would bring up the notification of logout after being idle for 100 seconds and then once the user is notified the user would have 60 seconds to remain on the site or they would be logged out. The logout button color and the logout button font have also been edited inline. All editable CSS and all properties are down below.

Then somewhere else in your code you would need to listen to the event listner about a logout as see in the following example.

document.addEventListener("logout",()=>{console.log("Logout")});

For the "logout" event, composed and bubbles are both set to true so your entire DOM tree will be able to see the event. Not naming another event "logout" in order to reduce conflicts is highly recommended.

Properties

Property	Attribute	Type	Default	Description
logoutButtonText	logoutButtonText	String	"Logout"	This is the text on the logout button for the modal.
logoutWarning	logoutWarning	String	"Logging out!"	This is the text that the title of the website flashes when the notification of logout is showing (when the modal is showing).
modalBodyText	modalBodyText	String	"Indicate if you are still there or you will be logged out!"	This is the text in the body of the modal popup.
modalHeaderText	modalHeaderText	String	"Are you still there?"	This is the text at the top of the modal popup.
remainButtonText	remainButtonText	String	"Still here"	This is the text on the button that allows the user to continue using the site.
switch		boolean	true
timeToLogout	timeToLogout	Number	60	This is the number in seconds that is the amount of time that the user is notified for before being completely logged out. This is how long the modal is shown for.
timeToNotify	timeToNotify	Number	10	This is the number in seconds that is the amount of time that the user is idle before they receive notification that they will be logged out.
timerStarted	timerStarted	String	started	If the property is equal to 'started' then the timer will tick down. However, if it is not, the timer will not move.

Events

Event	Type	Description
logout	CustomEvent<{ message: string; }>	Event that dispatches when the user should be logged out. Composed and bubbles are true.

CSS Custom Stylings

Property	Type	Description	Default
--body-font	string	Font for the modal	Sans-Serif
--body-text-color	color(string)	Text color for the modal	black
--time-text-font	string	Font for the timer countdown	Sans-serif
--timer-text-color	color(string)	Text color for the timer countdown	black
--timer-circle-color	color(string)	Color for the circle part of the timer	black
--header-background-color	color(string)	Background color for the header of the modal	gray
--header-font	string	Font for the header of the modal	Sans-serif
--header-text-color	color(string)	Color for the text in the header of the modal	white
--modal-z-index	number	z-index for the modal	500
--logout-button-color	color(string)	Color of the logout button	rgb(202, 60, 60)
--logout-button-font	string	Font of the logout button	Sans-Serif
--logout-button-text-color	color(string)	Text color for the logout button	white
--stya-button-color	color(string)	Color of the stay button	green
--stay-button-font	string	Font of the stay button	Sans-Serif
--stay-button-text-color	color(string)	Text color for the stay button	white