Add session timer functionality

hshassets/assets/js/session_timer.js

+$(function() {
+    var $session_timer = $('#session_timer');
+    var initial_seconds_left = $session_timer.data('initial-seconds-left');
+    var session_end = Date.now() + initial_seconds_left * 1000;
+
+    function update() {
+        var seconds_remaining = (session_end - Date.now()) / 1000;
+        var text = null;
+        if (seconds_remaining < 0) {
+            clearInterval(update_interval);
+            location.reload();
+        } else {
+            var minutes = Math.floor(seconds_remaining / 60);
+            var seconds = Math.floor(seconds_remaining) % 60;
+            text = (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
+            $session_timer.html(text);
+        }
+    }
+
+    var update_interval = setInterval(update, 200);
+    update();
+});

hshassets/assets/sass/general.scss

@@ -58,3 +58,11 @@ form#language-switch-form > button.button {
         margin-right: 10px;
     }
 }
+
+.icon.has-text-right {
+    margin-right: 0.4rem;
+}
+
+.icon.has-text-left {
+    margin-left: 0.4rem;
+}

hshassets/locale/de/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-12-08 13:29+0100\n"
+"POT-Creation-Date: 2019-01-28 17:15+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -38,9 +38,9 @@ msgstr "Email"
 msgid "Web"
 msgstr "Web"
 
-#: templates/hshassets/includes/nav_auth_buttons.html:11
+#: templates/hshassets/includes/nav_auth_buttons.html:12
 msgid "Logged in as"
-msgstr ""
+msgstr "Angemeldet als"
 
 #: templates/hshassets/includes/nav_auth_buttons.html:15
 msgid "Log Out"
@@ -50,27 +50,35 @@ msgstr "Abmelden"
 msgid "Log In"
 msgstr "Anmelden"
 
-#: templates/ssoauth/logged_out_locally.html:4
-#: templates/ssoauth/logged_out_locally.html:5
+#: templates/hshassets/includes/session_timer.html:36
+msgid "Your session will automatically expire in:"
+msgstr "Ihre Sitzung endet automatisch in:"
+
+#: templates/hshassets/includes/session_timer.html:45
+msgid "End session"
+msgstr "Sitzung beenden"
+
+#: templates/ssoauth/logged_out_locally.html:8
+#: templates/ssoauth/logged_out_locally.html:9
 msgid "Logged Out"
 msgstr "Abgemeldet"
 
-#: templates/ssoauth/logged_out_locally.html:6
+#: templates/ssoauth/logged_out_locally.html:10
 #, python-format
 msgid "Successfully logged out from \"%(THIS_SITE)s\""
 msgstr "Erfolgreich von \"%(THIS_SITE)s\" abgemeldet"
 
-#: templates/ssoauth/logged_out_locally.html:10
+#: templates/ssoauth/logged_out_locally.html:14
 msgid "Successfully logged out"
 msgstr "Erfolgreich abgemeldet"
 
-#: templates/ssoauth/logged_out_locally.html:12
+#: templates/ssoauth/logged_out_locally.html:16
 #, python-format
 msgid "You have successfully logged out of <code>%(THIS_SITE)s</code>."
 msgstr ""
 "Sie wurden erfolgreich von der Seite <code>%(THIS_SITE)s</code> abgemeldet."
 
-#: templates/ssoauth/logged_out_locally.html:13
+#: templates/ssoauth/logged_out_locally.html:17
 msgid ""
 "However, you will still be able to automatically log in to most of our "
 "services using Single Sign On."
@@ -78,7 +86,7 @@ msgstr ""
 "Sie werden trotzdem weiterhin automatisch in den meisten unserer Services, "
 "welche das Single-Sign-On Konzept verwenden, angemeldet bleiben."
 
-#: templates/ssoauth/logged_out_locally.html:15
+#: templates/ssoauth/logged_out_locally.html:19
 msgid ""
 "You will be logged out of all our services that use Single Sign On when you "
 "close your browser."
@@ -86,7 +94,7 @@ msgstr ""
 "Sie werden automatisch von all unseren Services welche Single-Sign-On "
 "unterstützen abgemeldet sobald Sie ihren Browser schließen."
 
-#: templates/ssoauth/logged_out_locally.html:16
+#: templates/ssoauth/logged_out_locally.html:20
 msgid ""
 "If you would like to log out of the Single Sign On service now, click the "
 "following Button:"
@@ -94,10 +102,10 @@ msgstr ""
 "Wenn sie jedoch sofort von allen Services welche Single-Sign-On anwenden "
 "abgemeldet werden möchten, klicken Sie auf den Folgenden Button:"
 
-#: templates/ssoauth/logged_out_locally.html:18
+#: templates/ssoauth/logged_out_locally.html:22
 msgid "Log Out of the Single Sign On service"
 msgstr "Vom Single-Sign-On Service abmelden"
 
-#: templates/ssoauth/logged_out_locally.html:19
+#: templates/ssoauth/logged_out_locally.html:23
 msgid "Back to start page"
 msgstr "Zurück zur Startseite"

hshassets/static/hshassets/js/session_timer.js

+$(function() {
+    var $session_timer = $('#session_timer');
+    var initial_seconds_left = $session_timer.data('initial-seconds-left');
+    var session_end = Date.now() + initial_seconds_left * 1000;
+
+    function update() {
+        var seconds_remaining = (session_end - Date.now()) / 1000;
+        var text = null;
+        if (seconds_remaining < 0) {
+            clearInterval(update_interval);
+            location.reload();
+        } else {
+            var minutes = Math.floor(seconds_remaining / 60);
+            var seconds = Math.floor(seconds_remaining) % 60;
+            text = (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
+            $session_timer.html(text);
+        }
+    }
+
+    var update_interval = setInterval(update, 200);
+    update();
+});
+

hshassets/static/hshassets/js/session_timer.min.js

+$(function(){var $session_timer=$('#session_timer');var initial_seconds_left=$session_timer.data('initial-seconds-left');var session_end=Date.now()+initial_seconds_left*1000;function update(){var seconds_remaining=(session_end-Date.now())/1000;var text=null;if(seconds_remaining<0){clearInterval(update_interval);location.reload();}else{var minutes=Math.floor(seconds_remaining/60);var seconds=Math.floor(seconds_remaining)%60;text=(minutes<10?"0":"")+minutes+":"+(seconds<10?"0":"")+seconds;$session_timer.html(text);}}
+var update_interval=setInterval(update,200);update();});
\ No newline at end of file

hshassets/static/hshassets/styles.css

@@ -14310,6 +14310,14 @@ form#language-switch-form > button.button:not(:last-child) {
   margin-right: 10px;
 }
 
+.icon.has-text-right {
+  margin-right: 0.4rem;
+}
+
+.icon.has-text-left {
+  margin-left: 0.4rem;
+}
+
 div.breadcrumb-wrapper {
   box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
   margin-bottom: 5px;

hshassets/templates/hshassets/includes/session_timer.html

+{% load i18n %}
+
+{% comment %}
+This template can be included in apps that need to handle any kind of custom sessions.
+This is often the case if you want anonymous sessions that handle sensitive information
+to expire as soon as possible.
+
+To use the template as is simply include it in your "base.html":
+
+{% block pre-section %}
+{% include "hshassets/includes/session_timer.html" %}
+{% endblock %}
+
+You can also specify "end_session_icon" and "end_session_text" when including:
+
+{% include "hshassets/includes/session_timer.html" with end_session_icon="fa-lock" end_session_text="Lock" %}
+
+Chances are that you need even more fine grained control over the template so you can also extend
+it in your app and include your extended template instead or write your own from the getgo.
+
+Also make sure to include the corresponding javascript in your "base.html":
+
+{% block post-script %}
+{% if debug %}
+<script type="text/javascript" src="{% static "hshassets/js/session_timer.js" %}"></script>
+{% else %}
+<script type="text/javascript" src="{% static "hshassets/js/session_timer.min.js" %}"></script>
+{% endif %}
+{% endblock post-script %}
+{% endcomment %}
+
+<nav class="navbar is-light">
+    <div class="container">
+        {% block session-nav-left %}{% endblock session-nav-left %}
+        <div class="navbar-item has-text-grey">
+            {% trans "Your session will automatically expire in:" %}
+            <span class="icon is-small has-text-left has-text-right"><i class="fa fa-clock-o"></i></span>
+            <span id="session_timer" data-initial-seconds-left="{{ initial_seconds_left }}">00:00</span>
+        </div>
+        <a href="{% url "flush-session" %}" class="navbar-item">
+            <span class="icon is-small has-text-right"><i class="fa {% if end_session_icon %}{{ end_session_icon }}{% else %}fa-sign-out{% endif %}"></i></span>
+            {% if end_session_text %}
+            {{ end_session_text }}
+            {% else %}
+            {% trans "End session" %}
+            {% endif %}
+        </a>
+        {% block session-nav-right %}{% endblock session-nav-right %}
+    </div>
+</nav>