Moved html to footer

app/assets/javascripts/timeoutPopup.js

@@ -1,6 +1,5 @@
 (function(global) {
     "use strict";
-    //hideTimerButtons();
 
     const sessionTimer = document.getElementById("sessionTimer");
 
@@ -11,17 +10,19 @@
             var difference = timeTillSessionEnd - now;
             var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
             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 ";
-            showTimerButtons();
+            showTimer();
             document.getElementById("logOutTimer").addEventListener("click", logoutByUser);
             document.getElementById("extendSessionTimer").addEventListener("click", extendSession);
-            if (difference === 0) {
+            if (difference < 0) {
                 clearInterval(x);
+                closeTimer();
                 redirectToSignin();
             }
         }, 1000);
-    }, 1 * 60 * 1000);
+    }, 60 * 1000);
 
     function redirectToSignin() {
         window.location.href = '/sign-in';
@@ -35,14 +36,12 @@
         window.location.reload();
     }
 
-    function hideTimerButtons() {
-        document.getElementById("logOutTimer").style.display = 'none';
-        document.getElementById("extendSessionTimer").style.display = 'none';
+    function showTimer() {
+        sessionTimer.showModal();
     }
 
-    function showTimerButtons() {
-        sessionTimer.showModal();
-        document.getElementById("extendSessionTimer").style.display = 'block';
+    function closeTimer() {
+        sessionTimer.close();
     }
 
 })(window);

app/templates/admin_template.html

@@ -11,50 +11,47 @@
 {% endblock %}
 
 {% block head %}
-    {% if current_user.is_authenticated %}
-    {% block sessionUserWarning %}
-    <div 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">
-              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>
-    <!-- <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_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 %}#}
   {%- for font in font_paths %}
   <link rel="preload" href="{{ asset_url(font, with_querystring_hash=False) }}" as="font" type="font/woff2" crossorigin>
   {%- endfor %}
@@ -187,7 +184,47 @@
 {% endblock %}
 
 {% 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 %}
     {% 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>' %}