-
Notifications
You must be signed in to change notification settings - Fork 0
/
showSessionTimeout.js
84 lines (73 loc) · 2.32 KB
/
showSessionTimeout.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/**
* Code here is pure javascript to minimize
* the use of other plugin and other dependencies
*/
class ShowSessionTimeoutModal {
static execute() {
// prevent from multiple append
if (window.document.querySelector('div.session-expired')) {
return;
}
this.createSessionExpiredModal();
this.createSessionExpiredStyle();
window.document.body.style.overflow = 'hidden';
this.reloadPage();
}
static createSessionExpiredModal() {
let div = window.document.createElement('div');
let sessionExpiredElement =
`
<div class="session-expired__container">
<div class="session-expired__wrapper">
<span class="session-expired__text">Session Expired, page will automatically reload.</span>
</div>
</div>
`;
div.innerHTML = sessionExpiredElement.trim();
div.classList.add('session-expired');
window.document.body.appendChild(div);
}
static createSessionExpiredStyle() {
let style = document.createElement('style');
let css =
`
.session-expired {
background-color: #0000009c;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 9999;
}
.session-expired__container {
display: table;
height: 100%;
width: 100%;
}
.session-expired__wrapper {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.session-expired__text {
background: #0070fff0;
border-radius: 2px;
color: #fff;
font-size: 18px;
padding: 18px;
}
`;
style.type = 'text/css';
style.appendChild(document.createTextNode(css.trim()));
window.document.head.appendChild(style);
}
static reloadPage() {
setTimeout(() => {
window.location = '/login';
}, 1500);
}
}
export function showSessionTimeout() {
ShowSessionTimeoutModal.execute();
}