Skip to content

Commit d1e5f5f

Browse files
code-atomcode-atom
authored
update the autoLogout.js
1 parent baf14e6 commit d1e5f5f

File tree

4 files changed

+324
-29
lines changed

4 files changed

+324
-29
lines changed

‎autoLogOut.js

+138
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎autoLogOut.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎autoLogOut.ts

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
class autoLogOut {
2+
private static instance: autoLogOut;
3+
private _config: SignOutConfig;
4+
private autoSignOutTimeOut;
5+
private ID;
6+
private signOutCalled = false;
7+
onSignOut: () => void;
8+
9+
private constructor(timeout: number = 10, sessionKey: string = 'timestamp', debug: boolean = false) {
10+
this._config = { timeout: timeout, sessionKey: sessionKey, debug: debug };
11+
this._initHandlers();
12+
this.ID = Date.now();
13+
}
14+
15+
// initialization Method with configuration
16+
static init(config: SignOutConfig) {
17+
let _config: any = config || {};
18+
autoLogOut.instance = new autoLogOut(_config.timeout, _config.sessionKey, _config.debug);
19+
return autoLogOut.instance;
20+
}
21+
22+
// called OnSignOut callback
23+
signOut() {
24+
clearTimeout(this.autoSignOutTimeOut);
25+
this.signOutCalled = true;
26+
this.onSignOut();
27+
}
28+
29+
// attach handler for updating local storage
30+
private _initHandlers() {
31+
// Add handler window unload event
32+
window.onbeforeunload = () => {
33+
this._extendSessionTime();
34+
};
35+
36+
// Add handler on document ready event
37+
document.addEventListener("DOMContentLoaded", () => {
38+
this._extendSessionTime();
39+
}, false);
40+
41+
// Add throttle event listeners
42+
window.addEventListener('mousemove', this.throttleEvents());
43+
window.addEventListener('scroll', this.throttleEvents());
44+
window.addEventListener("resize", this.throttleEvents());
45+
46+
// Add localstorage change event
47+
this._addStorageEvent();
48+
}
49+
50+
// update auto logout timeout
51+
private _setUpLogOutCalls() {
52+
if (this._config.debug) {
53+
console.log(this.ID + ": Update the Local Storage with new value");
54+
}
55+
var expirationTime = this.getExpirationSessionTime();
56+
var currentTimestamp = Date.now();
57+
var difference = expirationTime - currentTimestamp;
58+
if (difference <= 0) {
59+
this._logOut();
60+
} else {
61+
if (this._config.debug) {
62+
console.log(this.ID + ": Register auto logout timeout with time: " + difference);
63+
}
64+
if (this.autoSignOutTimeOut != null) {
65+
clearTimeout(this.autoSignOutTimeOut);
66+
this.autoSignOutTimeOut = null;
67+
}
68+
this.autoSignOutTimeOut = setTimeout(() => {
69+
this._logOut();
70+
}, difference);
71+
}
72+
}
73+
74+
// experimental purpose: add hook on every ajax request for update localstorage
75+
private _addHookToXMLRequest() {
76+
var oldSend;
77+
oldSend = XMLHttpRequest.prototype.send;
78+
var self = this;
79+
XMLHttpRequest.prototype.send = function () {
80+
self._extendSessionTime();
81+
oldSend.apply(this, arguments);
82+
}
83+
}
84+
85+
// throttle Event handler
86+
private throttleEvents() {
87+
var timeoutEvent;
88+
return () => {
89+
if (timeoutEvent) {
90+
clearTimeout(timeoutEvent);
91+
timeoutEvent = null;
92+
}
93+
timeoutEvent = setTimeout(() => {
94+
if (this._config.debug) {
95+
console.log(this.ID + ": Event called");
96+
}
97+
this._extendSessionTime();
98+
}, 100);
99+
}
100+
}
101+
102+
// localstorage change event
103+
private _addStorageEvent() {
104+
window.addEventListener('storage', (e) => {
105+
if (e.key == this._config.sessionKey) {
106+
if (e.newValue == null) {
107+
return;
108+
}
109+
this._setUpLogOutCalls();
110+
}
111+
});
112+
}
113+
114+
// set timestamp in localstorage
115+
private _setLocalStorageVariable(date: Date) {
116+
localStorage.setItem(this._config.sessionKey, <any>date.getTime());
117+
localStorage.setItem('date', <any>date.toISOString());
118+
}
119+
120+
// extend the session timeout
121+
private _extendSessionTime() {
122+
if (!this.signOutCalled) {
123+
var date = new Date();
124+
date.setMinutes(date.getMinutes() + this._config.timeout);
125+
this._setLocalStorageVariable(date);
126+
this._setUpLogOutCalls();
127+
}
128+
}
129+
130+
// get last updated timestamp
131+
private getExpirationSessionTime(): number {
132+
var data: number = <any>localStorage.getItem(this._config.sessionKey);
133+
return data || 0;
134+
}
135+
136+
// remove item from storage
137+
private removeFromStorage(key: string) {
138+
localStorage.removeItem(key);
139+
}
140+
141+
private _logOut() {
142+
if (this._config.debug) {
143+
console.log(this.ID + ": Call SignOut");
144+
}
145+
this.signOutCalled = true;
146+
this.removeFromStorage(this._config.sessionKey);
147+
this.onSignOut();
148+
}
149+
}
150+
151+
interface SignOutConfig {
152+
timeout: number;
153+
sessionKey: string;
154+
debug: boolean;
155+
}

‎index.html

+30-29
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,55 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<title>AutoSignOut.js</title>
5+
<title>AutoLogOut.js</title>
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
67
</head>
7-
<body>
8-
<h1>autoSignOut.js</h1>
8+
<body class="container">
9+
<h1>autoLogOut.js</h1>
910
<p>Use localstorage for update the last user activity with unix-timestamp</p>
1011
<p><a href="https://stackoverflow.com/questions/6585112/javascript-performance-when-running-in-an-unfocused-tab">Browser Issue</a></p>
1112
<p>
12-
autoSignOut.js implements the event listener on following events:-
13-
<ol>
13+
<strong>autoLogOut.js</strong> implements the event listener on following events:-
14+
<ol >
1415
<li>Document ready</li>
1516
<li>Document unload</li>
1617
<li>Mouse movement</li>
1718
<li>Scroll event</li>
1819
<li>Window resize</li>
1920
<li>Storage change</li>
2021
</ol>
21-
All events are throttle with setTimeOut.
22+
All events are throttle with setTimeout approach, except storage change.
2223
</p>
23-
<p>For implementation</p>
24-
<pre>
25-
var signOut = autoSignOut.init({ timeout: 1, sessionKey: 'Key', debug: true});
26-
signOut.onSignOut = function () {
27-
alert("Called Timeout");
28-
console.log("Timeout Called");
29-
}
30-
</pre>
31-
<p>autoSignOut.init() function take intial configuration object, each key description mentioned below:-</p>
32-
<pre>
33-
timeout: number of minutes after that session will auto logout
34-
sessionKey: name of the localstorage key
35-
debug: console.log on event called and timeout registration.
36-
</pre>
24+
<p>For implementation: </p>
25+
26+
<pre class="alert alert-dark">
27+
var signOut = autoLogOut.init({ timeout: 1, sessionKey: 'Key', debug: true});
28+
signOut.onSignOut = function () {
29+
alert("Called Timeout");
30+
console.log("Timeout Called");
31+
};</pre>
32+
<p> <strong>autoLogOut.init()</strong> function take intial configuration object, each key description mentioned below:-</p>
33+
<ul>
34+
<li>timeout: number of minutes after that session will auto logout</li>
35+
<li>sessionKey: name of the localstorage key</li>
36+
<li>debug: console.log on event and timeout registration.</li>
37+
</ul>
3738
<p>
38-
autoSignOut.js have three methods:-
39-
<ol>
39+
<strong>autoLogOut.js</strong> have three methods:-
40+
<ul>
4041
<li>init : initial configuration function</li>
41-
<li>signOut: mannual call the onSignOut callback</li>
42+
<li>signOut: manual call the onSignOut callback</li>
4243
<li>onSignOut: this callback callback on logout</li>
43-
</ol>
44+
</ul>
4445
</p>
45-
<script src="autoSignOut.js"></script>
46+
<script src="autoLogOut.js"></script>
4647
<script>
47-
var signOut = autoSignOut.init({ timeout: 1, sessionKey: 'Key', debug: true})
48+
var signOut = autoLogOut.init({ timeout: 1, sessionKey: 'Key', debug: true })
4849
signOut.onSignOut = function () {
4950
alert("Called Timeout");
5051
console.log("Timeout Called");
51-
}
52+
};
5253
</script>
5354
</body>
54-
</html>
55+
</html>

0 commit comments

Comments
 (0)