Skip to main content

How to detect inactivity on web browser

This is something useful for apps which after a period of inactivity time you need to autosave things, clear localStorage, redirect to a logout URL and many other background things, so it does not matter if you are using VueJS or ReactJS you can add this code
<!-- Script -->
<script type='text/javascript'>
 
var inactivityTime = function () {
    var time;
    window.onload = resetTimer;
    // DOM Events
    document.onload = resetTimer;
    document.onmousemove = resetTimer;
    document.onmousedown = resetTimer; // touchscreen presses
    document.ontouchstart = resetTimer;
    document.onclick = resetTimer;     // touchpad clicks
    document.onscroll = resetTimer;    // scrolling with arrow keys
    document.onkeypress = resetTimer;
    window.addEventListener('scroll', resetTimer, true);
    let count = 0;
   
    function logout() {
          //localStorage.clear();
  //alert("You are now logged out.")
        //location.href = 'logout.html'
        //count++;
        //console.log(login OUT '+count);
       
    }

    function resetTimer() {
        clearTimeout(time);
        time = setTimeout(logout, 9000)
        // 1000 milliseconds = 1 second
    }
};



window.onload = function() {
  inactivityTime();
}


   </script>

Labels:

Comments

Post a Comment

Popular posts from this blog

How to deploy a VueJS App using Nginx on Ubuntu

There are thousands of blogs and websites out there explaining how to do a hello world and how to start with VueJS, but in this little post, I’m just going to be explaining how to do deploy a VueJs app after you have run the command through the CLI npm run build . So when you run the command npm run build a dist folder is created and that folder’s got the essential .js files to run our app, when we want to run our app on an Nginx server by default the vue-router is not going to work well so that Nginx does not come ready to work by default with a VueJs app This is basically for a Linux Ubuntu distribution if you’ve got any other Linux distribution just pay attention where is going to be set the www/html folder and the Nginx settings so that this is useful for any Linux distribution  Install and configure nginx sudo apt install nginx Double check to make sure the nginx service is running with command service nginx status, then open your browser and enter ...
1 comment
Read more

Nginx reverse proxy for ReactJS, Vuejs,Laravel and Django with or without Docker

Nginx is an important piece on the working chain apps so that it works as bridge between the end user and the application servers, to do that we will be using nginx as a reverse proxy to know more in deep about nginx reverse proxy go to https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/ let's suppose you have a domain name called yourdomainame.com Nginx - ReactJS/Vuejs each time you need to create a new domain name, set it on the path /etc/nginx/conf.d/ create a file with vim or nano or whatever you want, and give it the domain name .conf and set the settings on it, this is really useful when you start handling several domain names under the same server vim /etc/nginx/conf.d/ yourdomainame.com.conf server {         server_name   yourdomainame.com wwww.yourdomainame.com;         # Load configuration files for the default server block.         include /etc/nginx/default.d/ *.conf ;   ...
Post a Comment
Read more

Uploading and Deleting Files with Amazon S3 and SpringBoot

Today I am going to be sharing about how to upload and delete files at AmazonS3 with SpringBoot , Amazon Simple Storage Service (S3)  is an object storage platform which helps you to store the files in form of objects, it allows us to store and retrieve any amount of data from anywhere.  Each file is stored in Amazon S3 (as an object) and is represented using a key. we are going to be using AWS Java SDK which supports various APIs related to Amazon S3 service for working with files stored in S3 bucket. so after going to  https://start.spring.io/  and create a new SpringBoot project with the Artifact as  AmazonS3  or as you prefer, open your pom.xml and let's add this dependency. AWS Java SDK supports several  APIs related to Amazon S3 service for working with files stored in S3 bucket.  <!-- https://mvnrepository.com/artifact/com.amazonaws/aws-java-sdk --> < dependency >     < groupId >...
7 comments
Read more