idle-timeout-component v0.0.3

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

Events

CSS Custom Stylings