darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-11 10:28:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

Moved html to footer

Browse Source
This commit is contained in:
Andrew Shumway
2023-09-12 11:30:27 -06:00
parent 92953676c4
commit 42cd3b4a0e
2 changed files with 92 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/javascripts/timeoutPopup.js
+10 -11
View File
@@ -1,6 +1,5 @@
(function(global) { (function(global) {
"use strict"; "use strict";
//hideTimerButtons();
const sessionTimer = document.getElementById("sessionTimer"); const sessionTimer = document.getElementById("sessionTimer");
@@ -11,17 +10,19 @@
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 = "You have been inactive " +
"for too long. Please choose to stay signed in or sign out. Your session will " +
"expire in " + minutes + "m " + seconds + "s "; "expire in " + minutes + "m " + seconds + "s ";
showTimerButtons(); showTimer();
document.getElementById("logOutTimer").addEventListener("click", logoutByUser); document.getElementById("logOutTimer").addEventListener("click", logoutByUser);
document.getElementById("extendSessionTimer").addEventListener("click", extendSession); document.getElementById("extendSessionTimer").addEventListener("click", extendSession);
if (difference === 0) { if (difference < 0) {
clearInterval(x); clearInterval(x);
closeTimer();
redirectToSignin(); redirectToSignin();
} }
}, 1000); }, 1000);
}, 1 * 60 * 1000); }, 60 * 1000);
function redirectToSignin() { function redirectToSignin() {
window.location.href = '/sign-in'; window.location.href = '/sign-in';
@@ -35,14 +36,12 @@
window.location.reload(); window.location.reload();
} }
function hideTimerButtons() { function showTimer() {
document.getElementById("logOutTimer").style.display = 'none'; sessionTimer.showModal();
document.getElementById("extendSessionTimer").style.display = 'none';
} }
function showTimerButtons() { function closeTimer() {
sessionTimer.showModal(); sessionTimer.close();
document.getElementById("extendSessionTimer").style.display = 'block';
} }
})(window); })(window);
app/templates/admin_template.html
+82 -45
View File
@@ -11,50 +11,47 @@
{% endblock %} {% endblock %}
{% block head %} {% block head %}
{% if current_user.is_authenticated %} {# {% if current_user.is_authenticated %}#}
{% block sessionUserWarning %} {# {% block sessionUserWarning %}#}
<div class="usa-modal" id="sessionTimer" aria-labelledby="sessionTimerHeading" aria-describedby="timerWarning"> {# <dialog class="usa-modal" id="sessionTimer" aria-labelledby="sessionTimerHeading" aria-describedby="timerWarning">#}
<div class="usa-modal__content"> {# <div class="usa-modal__content">#}
<div class="usa-modal__main"> {# <div class="usa-modal__main">#}
<h2 class="usa-modal__heading" id="sessionTimerHeading"> {# <h2 class="usa-modal__heading" id="sessionTimerHeading">#}
Your session will end soon. {# Your session will end soon.#}
</h2> {# </h2>#}
<div class="usa-prose"> {# <div class="usa-prose">#}
<p aria-live="polite" id="timerWarning"> {# <p aria-live="polite" id="timerWarning">#}
You’ve been inactive for too long. Please choose to stay signed in {# </p>#}
or sign out. Otherwise, you’ll be signed out automatically in 5 {# </div>#}
minutes. {# <div class="usa-modal__footer">#}
</p> {# <ul class="usa-button-group">#}
</div> {# <li class="usa-button-group__item">#}
<div class="usa-modal__footer"> {# <button type="button" class="usa-button usa-button--unstyled" id="extendSessionTimer" data-close-modal>#}
<ul class="usa-button-group"> {# Extend Session#}
<li class="usa-button-group__item"> {# </button>#}
<button type="button" class="usa-button" id="extendSessionTimer"> {# </li>#}
Extend Session {# <li class="usa-button-group__item">#}
</button> {# <button type="button" class="usa-button usa-button--unstyled padding-105 text-center" id="logOutTimer" data-close-modal>#}
</li> {# Sign out#}
<li class="usa-button-group__item"> {# </button>#}
<button type="button" class="usa-button usa-button--unstyled padding-105 text-center" id="logOutTimer"> {# </li>#}
Sign out {# </ul>#}
</button> {# </div>#}
</li> {# <button type="button" class="usa-button usa-modal__close" aria-label="Close this window">#}
</ul> {# <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">#}
</div> {# <use xlink:href="/assets/img/usa-icons/close.svg"></use>#}
<button type="button" class="usa-button usa-modal__close" aria-label="Close this window"> {# </svg>#}
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img"> {# </button>#}
<use xlink:href="/assets/img/usa-icons/close.svg"></use> {# </div>#}
</svg> {# </div>#}
</button> {# </dialog>#}
</div> {# <!-- <dialog id="sessionTimer">#}
</div> {# <p aria-live="polite" id="timerWarning"></p>#}
</div> {# <button class="usa-button" id="logOutTimer">Log Out</button>#}
<!-- <dialog id="sessionTimer"> {# <button class="usa-button" id="extendSessionTimer">Extend Session</button>#}
<p aria-live="polite" id="timerWarning"></p> {# </dialog> -->#}
<button class="usa-button" id="logOutTimer">Log Out</button> {# {% endblock %}#}
<button class="usa-button" id="extendSessionTimer">Extend Session</button> {# {% endif %}#}
</dialog> -->
{% endblock %}
{% endif %}
{%- 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>
{%- endfor %} {%- endfor %}
@@ -187,7 +184,47 @@
{% endblock %} {% endblock %}
{% block footer %} {% block footer %}
{% if current_user.is_authenticated %}
{% block sessionUserWarning %}
<dialog class="usa-modal" id="sessionTimer" aria-labelledby="sessionTimerHeading" aria-describedby="timerWarning">
<div class="usa-modal__content">
<div class="usa-modal__main">
<h2 class="usa-modal__heading" id="sessionTimerHeading">
Your session will end soon.
</h2>
<div class="usa-prose">
<p aria-live="polite" id="timerWarning">
</p>
</div>
<div class="usa-modal__footer">
<ul class="usa-button-group">
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--unstyled" id="extendSessionTimer" data-close-modal>
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" data-close-modal>
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>
</dialog>
<!-- <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 %}
{% endif %}
{% if current_service and current_service.research_mode %} {% if current_service and current_service.research_mode %}
{% set meta_suffix = 'Built by the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="usa-link">Technology Transformation Services</a><span id="research-mode" class="research-mode">research mode</span>' %} {% set meta_suffix = 'Built by the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="usa-link">Technology Transformation Services</a><span id="research-mode" class="research-mode">research mode</span>' %}