✨ Countdown until logout

SequentConfig.js

@@ -233,7 +233,10 @@ var SequentConfigData = {
   },
 
   mainVersion: '8.0.0',
-  repoVersions: []
+  repoVersions: [],
+
+  // Number of seconds after which an authentication token expires.
+  authTokenExpirationSeconds: 600
 };
 
 angular.module('SequentConfig', [])

avRegistration/login-directive/login-directive.js

@@ -361,6 +361,8 @@ angular.module('avRegistration')
 
           scope.sendingData = true;
           scope.error = null;
+
+          var sessionStartedAtMs = Date.now();
           Authmethod
             .login(data, autheventid)
             .then(
@@ -409,7 +411,8 @@ angular.module('avRegistration')
                       JSON.stringify([{
                         electionId: autheventid,
                         token: response.data['vote-permission-token'],
-                        isFirst: true
+                        isFirst: true,
+                        sessionStartedAtMs: sessionStartedAtMs
                       }])
                     );
                     $window.sessionStorage.setItem(
@@ -432,7 +435,8 @@ angular.module('avRegistration')
                           voted: false,
                           numSuccessfulLoginsAllowed: child['num-successful-logins-allowed'],
                           numSuccessfulLogins: child['num-successful-logins'],
-                          isFirst: index === 0
+                          isFirst: index === 0,
+                          sessionStartedAtMs: sessionStartedAtMs
                         };
                       })
                       .value();

avUi/common-header-directive/common-header-directive.html

@@ -58,16 +58,37 @@
                 av-change-lang
             >
             </span>
-            <a
+            <span class="logout-container"
               ng-if="enableLogOut() && !isElectionPortal"
-              target="_top"
-              tabindex="0"
-              class="log-out-button"
-              ng-click="confirmLogoutModal()"
+              ng-class="{ 'countdown': showCountdown}"
             >
-              <span class="glyphicon glyphicon-off"></span>
-              <span class="logout-text hidden-xs" ng-i18next>avBooth.logout</span>
-            </a>
+              <a
+                target="_top"
+                tabindex="0"
+                class="log-out-button"
+                ng-click="confirmLogoutModal()"
+              >
+                <div class="logout-bar"></div>
+                <span class="glyphicon glyphicon-off"></span>
+                <span class="logout-text hidden-xs" ng-i18next>avBooth.logout</span>
+              </a>
+              <div class="custom-tooltip">
+                <i class="fa fa-fw fa-lg fa-caret-up"></i>
+                <div class="tooltip-inner">
+                  <b ng-i18next>avBooth.countdownTooltip.title</b>
+                  <p
+                    ng-if="countdownSecs >= 60"
+                    ng-i18next="[i18next]({mins: countdownMins})avBooth.countdownTooltip.contentMins"
+                  >
+                  </p>
+                  <p
+                    ng-if="countdownSecs < 60"
+                    ng-i18next="[i18next]({secs: countdownSecs})avBooth.countdownTooltip.contentSecs"
+                  >
+                  </p>
+                </div>
+              </div>
+            </span>
         </div>
     </div>
 </nav>

avUi/common-header-directive/common-header-directive.js

@@ -49,6 +49,88 @@ angular
         };
 
         scope.showVersionsModal = ShowVersionsModalService;
+
+        function calculateCountdownPercent() {
+          var ratio = (scope.logoutTimeMs - Date.now())/(scope.logoutTimeMs - scope.countdownStartTimeMs);
+          return Math.min(100, Math.round(10000*ratio)/100) + '%';
+        }
+
+        // find progress bar and update its width
+        function updateProgressBar(percent) {
+          var element = $(".logout-bar")[0];
+          if (!element) {
+            // There's no logout on the login page
+            return;
+          }
+          element.style.setProperty('width', percent);
+        }
+
+        // helper function for enableLogoutCountdown()
+        function updateTimedown() {
+          scope.showCountdown = true;
+          scope.countdownSecs = Math.round((scope.logoutTimeMs - Date.now()) / 1000);
+          scope.countdownMins = Math.round((scope.logoutTimeMs - Date.now()) / (60 * 1000));
+          scope.countdownPercent = calculateCountdownPercent();
+          updateProgressBar(scope.countdownPercent);
+          scope.$apply();
+          if (scope.countdownSecs <= 1) {
+            return;
+          }
+          var targetMins = Math.floor((scope.logoutTimeMs - Date.now()) / (60 * 1000));
+          var targetNextTime = scope.logoutTimeMs - targetMins * 60 * 1000;
+          var targetElapsedTime = targetNextTime - Date.now();
+          setTimeout(
+            updateTimedown,
+            scope.countdownMins > 0?  targetElapsedTime : 1000
+          );
+        }
+
+        // Show countdown on logout button based on cookies
+        function enableLogoutCountdown() {
+          scope.showCountdown = false;
+
+          var election = (
+            (!!scope.parentElection) ?
+            scope.parentElection :
+            scope.election
+          );
+
+          if (
+            ConfigService.authTokenExpirationSeconds &&
+            (
+              election &&
+              election.presentation &&
+              _.isNumber(election.presentation.booth_log_out__countdown_seconds)
+            )
+          ) {
+            scope.showCountdown = false;
+            scope.countdownSecs = 0;
+            scope.countdownMins = 0;
+
+            var initialTimeMs = scope.$parent.getSessionStartTime && scope.$parent.getSessionStartTime() || Date.now();
+            scope.elapsedCountdownMs = (
+              election.presentation.booth_log_out__countdown_seconds > 0?
+              election.presentation.booth_log_out__countdown_seconds :
+              ConfigService.authTokenExpirationSeconds
+            ) * 1000;
+            scope.logoutTimeMs = initialTimeMs + ConfigService.authTokenExpirationSeconds * 1000;
+            scope.countdownStartTimeMs = scope.logoutTimeMs - scope.elapsedCountdownMs;
+            scope.countdownPercent = calculateCountdownPercent();
+            updateProgressBar(scope.countdownPercent);
+
+            // If we're on a demo/live preview, the bar is fixed at 100%
+            if (scope.isDemo || scope.isPreview) {
+              return;
+            }
+
+            setTimeout(
+              updateTimedown,
+              election.presentation.booth_log_out__countdown_seconds > 0?  scope.countdownStartTimeMs - Date.now() : 0
+            );
+
+          }
+        }
+        setTimeout(enableLogoutCountdown, 0);
       };
       return {
         restrict: 'AE',

avUi/common-header-directive/common-header-directive.less

@@ -97,6 +97,80 @@
     .log-out-button {
         display: flex;
         align-items: center;
+        position: relative;
+    }
+
+    .logout-bar {
+        position: absolute;
+        background-color: #CCE5FF;
+        border-bottom: 2px solid #0F054C;
+        border-radius: 4px 0px 0px 4px;
+        z-index: -1;
+        height: 100%;
+        left: 0;
+    }
+
+    .logout-container {
+        position: relative;
+
+        .custom-tooltip, .logout-bar {
+            display: none;
+        }
+    }
+
+    .logout-container.countdown {
+        .logout-bar {
+            display: block;
+        }
+
+        &:hover {
+            .custom-tooltip {
+                display: block;
+            }
+        }
+    }
+
+    .logout-container .custom-tooltip {
+        position: absolute;
+        top: 120%;
+        right: 40px;
+        z-index: -1;
+        width: 231px;
+
+        @media(max-width: @screen-xs-max) {
+            right: 0;
+
+            .fa-caret-up {
+                padding-right: 12px !important;
+            }
+        }
+
+        .fa-caret-up {
+            color: #CCE5FF;
+            font-size: 34px;
+            height: 14px;
+            line-height: 10px;
+            width: 100%;
+            text-align: right;
+            padding-right: 20px;
+        }
+
+        .tooltip-inner {
+            background-color: #CCE5FF;
+            margin-top: -9px;
+            font-size: 12px;
+            line-height: 15px;
+            padding: 16px;
+            gap: 8px;
+            display: flex;
+            flex-direction: column;
+            text-align: justify;
+            color: black;
+            max-width: unset;
+            b {
+                color: #0F054C;
+            }
+        }
     }
 
     .logout-text {

dist/SequentConfig-v8.0.0.js

@@ -233,7 +233,10 @@ var SequentConfigData = {
   },
 
   mainVersion: '8.0.0',
-  repoVersions: []
+  repoVersions: [],
+
+  // Number of seconds after which an authentication token expires.
+  authTokenExpirationSeconds: 600
 };
 
 angular.module('SequentConfig', [])