1+ <script setup lang="ts">
2+ import { ElNotification , NotificationHandle } from ' element-plus'
3+ import { ref , computed , h , onMounted , onBeforeUnmount } from ' vue'
4+
5+ // Props can be defined with defineProps
6+ const = defineProps ({
7+ // Define your props here
8+ });
9+
10+ // Types of events that will reset the timeout
11+ const = [' click' ' mousemove' ' keydown' ' keypress' ' mousedown' ' scroll' ' load'
12+
13+ // Set timers
14+ let warningTimeout: NodeJS .Timeout ;
15+ let logoutTimeout: NodeJS .Timeout ;
16+
17+ let logoutTime: number ;
18+ let countdownInterval: NodeJS .Timeout ;
19+
20+ // Add these variables at the top of your script
21+ let defaultWarningDelay = 1000 * 270 ; // 4.5 minutes by default
22+ let defaultLogoutDelay = 1000 * 300 ; // 5 minutes by default
23+
24+
25+ // Methods
26+ function setTimers(warningDelay = defaultWarningDelay , logoutDelay = defaultLogoutDelay ) {
27+ logoutTime = Date .now () + logoutDelay ;
28+
29+ warningTimeout = setTimeout (warningMessage , warningDelay ); // 4 seconds for development, change later
30+ logoutTimeout = setTimeout (logout , logoutDelay ); // 15 seconds for development, change later
31+ }
32+
33+ let warningNotification: NotificationHandle ;
34+
35+ async function getOBPSuggestedTimeout() {
36+ const = import .meta .env .VITE_OBP_API_HOST ;
37+ let timeoutInSeconds: number ;
38+ // Fetch the suggested timeout from the OBP API
39+
40+ const = await fetch (` ${obpApiHost }/obp/v5.1.0/ui/suggested-session-timeout ` );
41+ const = await response .json ();
42+ if (json .timeout_in_seconds ) {
43+ timeoutInSeconds = json .timeout_in_seconds ;
44+ console .log (` Suggested value ${timeoutInSeconds } is used ` );
45+ } else {
46+ timeoutInSeconds = 5 * 60 + 1 ; // Set default value to 301 seconds
47+ console .log (` Default value ${timeoutInSeconds } is used ` );
48+ }
49+
50+ return timeoutInSeconds ;
51+ }
52+
53+ function resetTimeout() {
54+ // Logic to reset the timeout
55+ clearTimeout (warningTimeout );
56+ clearTimeout (logoutTimeout );
57+ clearInterval (countdownInterval );
58+
59+
60+ if (warningNotification ) {
61+ warningNotification .close ();
62+ }
63+
64+ setTimers ();
65+ }
66+
67+ function warningMessage() {
68+ // Logic to show warning message
69+ console .log (' Warning: You will be logged out soon'
70+
71+ let secondsLeft = ref (Math .ceil ((logoutTime - Date .now ()) / 1000 ));
72+ // Update the countdown every second
73+ countdownInterval = setInterval (() => {
74+ secondsLeft .value = Math .ceil ((logoutTime - Date .now ()) / 1000 );
75+
76+ // If time's up or almost up, clear the interval
77+ if (secondsLeft .value <= 0 ) {
78+ clearInterval (countdownInterval );
79+ return ;
80+ }
81+
82+
83+ }, 1000 );
84+
85+ warningNotification = ElNotification ({
86+ title: ' Inactivity Warning'
87+ message : () => h (' p' null , [
88+ h (' span' null , ' You will be logged out in'
89+ h (' strong' ' color: red' ` ${secondsLeft .value } ` ),
90+ h (' span' null , ' seconds.'
91+ ])
92+ ,
93+ type: ' warning'
94+ duration: 0 ,
95+ position: ' top-left'
96+ showClose: false ,
97+ })
98+ }
99+
100+ function logout() {
101+ // Logic to log out the user
102+ console .log (' Logging out...'
103+ document .getElementById (" logoff" click (); // If the ID of the logout button changes, this will not work
104+ }
105+
106+ // Lifecycle hooks
107+ onMounted (() => {
108+ events .forEach (event => {
109+ window .addEventListener (event , resetTimeout );
110+ })
111+
112+ setTimers ();
113+
114+ // Update with API suggested values when available
115+ getOBPSuggestedTimeout ().then (timeoutInSeconds => {
116+ // Convert to milliseconds
117+ const = timeoutInSeconds * 1000 ;
118+ // Set warning to appear 30 seconds before logout
119+ const = Math .max (logoutDelay - 30000 , 0 );
120+
121+ // Update the defaults
122+ defaultWarningDelay = warningDelay ;
123+ defaultLogoutDelay = logoutDelay ;
124+
125+ // Reset timers with new values
126+ resetTimeout ();
127+ }).catch (error => {
128+ console .error (" Failed to get suggested timeout:" error );
129+ // Continue with defaults
130+ });
131+ });
132+
133+ onBeforeUnmount (() => {
134+ // Cleanup code before component is unmounted
135+ clearTimeout (warningTimeout );
136+ clearTimeout (logoutTimeout );
137+ clearInterval (countdownInterval );
138+ events .forEach (event => {
139+ window .removeEventListener (event , resetTimeout );
140+ });
141+ });
142+
143+
144+
145+
146+ script >
147+
148+ <style scoped>
149+ /* Your component styles here */
150+ style >
151+
152+
153+ <template >
154+ <div >
155+ <!-- Your component content here -->
156+ </div >
157+ </template >
0 commit comments