darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-08 07:38:26 -04:00
Code Issues Packages Projects Releases Wiki Activity

Altered the modal a bit to use USWDS styling and the dialog element - still needs some cleanup but passing it back off to Andrew

Browse Source
This commit is contained in:
Jonathan Bobel
2023-09-07 16:41:55 -04:00
parent 559965c479
commit 1507199e6b
2 changed files with 45 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/assets/javascripts/timeoutPopup.js
View File

@@ -1,15 +1,16 @@
(function(global) { (function(global) {
"use strict"; "use strict";
hideTimerButtons(); //hideTimerButtons();
const sessionTimer = document.getElementById("sessionTimer");
setTimeout(function() { setTimeout(function() {
var timeTillSessionEnd = new Date().getTime() + (5 * 60 * 1000); var timeTillSessionEnd = new Date().getTime() + (1 * 10 * 1000);
var x = setInterval(function() { var x = setInterval(function() {
var now = new Date().getTime(); var now = new Date().getTime();
var difference = timeTillSessionEnd - now; var difference = timeTillSessionEnd - now;
var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)); var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((difference % (1000 * 60)) / 1000); var seconds = Math.floor((difference % (1000 * 60)) / 1000);
document.getElementById("timerWarning").innerHTML = "Your session will " + document.getElementById("timerWarning").innerHTML = "Your session will " +
"expire in " + minutes + "m " + seconds + "s "; "expire in " + minutes + "m " + seconds + "s ";
showTimerButtons(); showTimerButtons();
@@ -20,7 +21,7 @@
redirectToSignin(); redirectToSignin();
} }
}, 1000); }, 1000);
}, 25 * 60 * 1000); }, 1 * 20 * 1000);
function redirectToSignin() { function redirectToSignin() {
window.location.href = '/sign-in'; window.location.href = '/sign-in';
@@ -40,7 +41,7 @@
} }
function showTimerButtons() { function showTimerButtons() {
document.getElementById("logOutTimer").style.display = 'block'; sessionTimer.showModal();
document.getElementById("extendSessionTimer").style.display = 'block'; document.getElementById("extendSessionTimer").style.display = 'block';
} }

43
app/templates/admin_template.html
View File

@@ -12,11 +12,46 @@
{% block head %} {% block head %}
{% block sessionUserWarning %} {% block sessionUserWarning %}
<div id="sessionTimerContent"> <div class="usa-modal" id="sessionTimer" aria-labelledby="sessionTimerHeading" aria-describedby="timerWarning">
<p id="timerWarning"></p> <div class="usa-modal__content">
<button id="logOutTimer">Log Out</button> <div class="usa-modal__main">
<button id="extendSessionTimer">Extend Session</button> <h2 class="usa-modal__heading" id="sessionTimerHeading">
Your session will end soon.
</h2>
<div class="usa-prose">
<p aria-live="polite" id="timerWarning">
You’ve been inactive for too long. Please choose to stay signed in
or sign out. Otherwise, you’ll be signed out automatically in 5
minutes.
</p>
</div>
<div class="usa-modal__footer">
<ul class="usa-button-group">
<li class="usa-button-group__item">
<button type="button" class="usa-button" id="extendSessionTimer">
Extend Session
</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--unstyled padding-105 text-center" id="logOutTimer">
Sign out
</button>
</li>
</ul>
</div>
<button type="button" class="usa-button usa-modal__close" aria-label="Close this window">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/assets/img/usa-icons/close.svg"></use>
</svg>
</button>
</div> </div>
</div>
</div>
<!-- <dialog id="sessionTimer">
<p aria-live="polite" id="timerWarning"></p>
<button class="usa-button" id="logOutTimer">Log Out</button>
<button class="usa-button" id="extendSessionTimer">Extend Session</button>
</dialog> -->
{% endblock %} {% endblock %}
{%- for font in font_paths %} {%- for font in font_paths %}
<link rel="preload" href="{{ asset_url(font, with_querystring_hash=False) }}" as="font" type="font/woff2" crossorigin> <link rel="preload" href="{{ asset_url(font, with_querystring_hash=False) }}" as="font" type="font/woff2" crossorigin>