I attempt to build a session timeout in a Blazor server application. The popup is created in JS function with a return promise value. Return "Y" as default upon timer is up or confirm button is clicked otherwise, it will return "N".
However, the return value is always "Y" regardless CancelButton is clicked. The below rslt value is always "Y". Can anyone helps to point out what did I miss here? Thank you!
string rslt = await _jsRuntime.InvokeAsync<string>("timeOutBox", "Session Alert", "Your session will be closed in <b></b> seconds.", 30000, "warning", "Logout", "Stay connected" );
await Task.Delay(500);
if ( rslt=="Y" ) //confirm logout click or timer ran out
{
CleanUp(); // remove local storage and tracking list
_navi.NavigateTo("/", true); // force to login page
} else
{
// Reset timer
// Identify whether the user is active or inactive using onmousemove and onkeypress in JS function.
timerStarted = false;
await _jsRuntime.InvokeVoidAsync("timeOutCall", DotNetObjectReference.Create(this));
}
<pre>
function timeOutBox(title, html, timer, icon, logouttext, staytext) {
return new Promise(resolve => {
let timerInterval
let ans ="Y"
Swal.fire({
title: title,
html: html,
timer: timer,
icon: icon,
showConfirmButton: true,
showCancelButton: true,
confirmButtonText: logouttext,
cancelButtonText: staytext,
timerProgressBar: true,
didOpen: () => {
//Swal.showLoading() //if show loading spinner, it will overide buttons
const b = Swal.getHtmlContainer().querySelector('b')
timerInterval = setInterval(() => {
b.textContent = Swal.getTimerLeft()
}, 1000)
},
willClose: () => {
clearInterval(timerInterval) // will return resolve ="Y"
// force logout
return resolve(ans);
}
}).then((result) => {
if (result.isConfirmed) {
// confirm logout
return resolve(ans);
} else {
ans = "N";
return resolve(ans);
}
})
})
</pre>