I have implemented a session timeout functionality that triggers a pop-up window after 30 minutes of inactivity, warning the user that their session is about to expire.
Seeking assistance with:
If the user locks their desktop and does not provide any input when the initial pop-up appears, I would like it to automatically close after 1 minute and display a new pop-up stating "Session has expired."
Any help from someone knowledgeable in this area would be greatly appreciated.
Implementing this should be a breeze. Utilize the action listeners to capture user interactions.
let isUserActionDetected = false;
let element = document.getElementById('uniqueID');
element.onclick = function (){
// perform additional actions if needed
isUserActionDetected = true;
};
setTimeout(
function() {
if(!isUserActionDetected){
// take necessary actions like closing popups
}
},
60000
)
In the scenario where the popup is generated using window.open, simply utilize the .close() method in this manner:
var newPopup = window.open('specific URL', 'window_name');
setTimeout(function(){
newPopup.close();
}, 60000);
In this example, the popup is closed after a minute without validation of any input data, emphasizing the importance of thoroughly checking inputs before proceeding.
If your inquiry pertains to validating inputs, I can offer additional assistance with another response.
You won't find this functionality in regular alert() pop-ups, but there are a couple of alternative solutions:
Display an alert message indicating that the session will expire one minute after it appears (perhaps include the exact expiration time). If the user clicks "OK" after the time has passed, a message will appear stating "Sorry, your session has expired."
Create custom alert boxes. This can be easily done by covering the screen with one element and showing the information with another:
Example:
<div id="mask"><div id="alert">Your session will expire soon</div></div>
CSS:
#mask {
position: fixed;
left: 0; right: 0; top: 0; bottom: 0;
/* fallback for browsers that don't support rgba() */
background: #cccccc;
background: rgba(255,255,255,0.75);
}
#alert {
position: fixed;
left: 50%;
width: 200px;
margin-left: -100px; /* half the width */
top: 20%;
background: white;
color: black;
}
This setup can be further customized with buttons and other features. While jQuery offers libraries for this purpose, I managed to create a fully customizable box (with unlimited buttons featuring custom text and callbacks) in just 40 lines of pure JavaScript. Different strokes for different folks...
I am currently working on incorporating the jQuery plugin "circliful" into my Angular application. In order to make the circliful graph function properly, I need to define data attributes like: <div id="chart" data-text="30%" data-percent="30">< ...
I am developing in Ionic2 and encountering an issue: Within my component, there is a method called drawPlayer that fetches data from a Firebase database. Here is the code for this method: drawPlayer(){ this.playerData.drawThePlayer().on('value&a ...
I've been working on integrating the Gumroad-API NPM package into my Meteor app, but I've run into some server-side issues. Specifically, when attempting to make a Meteor method call or insert data into a collection within a Promise callback. Be ...
EDIT: After some exploration, I've shared the solution I found in case it helps others facing a similar issue. I'm currently working on building a reusable Bootstrap 5 modal child component within Vue3. The goal is to pass an ID as a prop from t ...
Every time I attempt to execute 'webpack' in my project, the command line shows me this error message: 'webpack' is not recognized as an internal or external command, operable program or batch file. I have installed webpack using th ...
After querying my Team schema, I am receiving an array of ids which I have confirmed is correct. The issue seems to lie in the fact that both home_team and away_team are ObjectIDs for the Team Schema within my OR statement. Team.find({ 'conferenc ...
One dilemma I'm facing is trying to access the tree.removenode method through chartContext in Angular. It's been a challenge for me to understand how to achieve this. https://i.stack.imgur.com/yG7uB.png ...
There are a few HTML elements being loaded from the server side, and an Angular click() event is also included. However, the event is not firing after the elements are rendered. It is understood that the DOM needs to be notified, but this cannot be done. ...
Whenever I fill out the form in the footer and hit submit, it directs me to a different page while automatically scrolling back down to the footer. I'm looking for a solution that prevents this automatic scrolling. I've attempted using window.sc ...
Imagine a scenario where an object is created elsewhere and passed to my module. It could have been generated on the server in node.js, or perhaps in a different module where it was then serialized using JSON.stringify() for transmission (especially if it ...
I am facing an issue with the code in my pages/index.js file: import React from 'react'; import dynamic from 'next/dynamic'; const TVChartContainer = dynamic( () => import('../components/TVChartContainer').then ...
I have this script that generates a "layer" resembling a frame and I need to remove it. Here is the code for creating the layer: function disableLayer() { var layer = document.getElementsByTagName('div')[0]; d = document.createElement(& ...
Currently, I have a component from line 61-67 that controls the state of an editIcon. The issue is that it changes the state values for all items in the column, rather than just the specific item or row it should apply to. When hovering over a span element ...
My API uses token-based authentication for security. Once a user successfully signs in, two tokens (access and refresh) are stored in the browser's local storage. The access token contains all the necessary information for server-side authorization an ...
Currently, I am utilizing html2pdf.js in my project by following this tutorial: https://github.com/eKoopmans/html2pdf.js However, I've encountered an issue where despite implementing everything as instructed, the download prompt for the specified div ...
By using a for loop, I was able to generate a variable number of divs that change their background color individually when hovered over with the mouse. Now, I want to implement a function that will decrease the brightness of each div by 10% every time it i ...
When working with Java and C++, it is common practice to store a variable globally so that its value can be accessed from anywhere within the project. For example, if I am working inside a class named Residence and saving an INT as the residenceNumber to a ...
Creating multiple ul elements using v-for in the following way <div v-for="item in info"> <ul> <li><a>{{item.number}}</a></li> <li><a>{{item.alphabet}}</a></li> </ul> </div&g ...
If I am looking to find matches for the following files: /foo/bar/baz/x /foo/bar/baz/y/z I can create a regular expression like this: new RegExp('^/foo/bar/baz/.*') But the question arises - how can I instruct the RegExp constructor to interp ...
Let's clarify the condition in the while loop, which should check if the new challenge number has not been completed yet (as indicated in the challenges.finished array). This means that the same challenge can be displayed multiple times instead of jus ...