Add session timeout warning

package.json

@@ -3,10 +3,11 @@
     "admin-lte": "2.4.9",
     "bootstrap": "^3.4.1",
     "bootstrap-validator": "^0.11.9",
+    "datatables.net-plugins": "^1.10.19",
     "icheck": "^1.0.2",
     "jquery-slimscroll": "^1.3.8",
     "jquery-ui-dist": "^1.12.1",
-    "multiselect": "^0.9.12",
+    "jtimeout": "^3.1.0",
-    "datatables.net-plugins": "^1.10.19"
+    "multiselect": "^0.9.12"
   }
 }

powerdnsadmin/assets.py

@@ -1,5 +1,6 @@
 from flask_assets import Bundle, Environment, Filter
 
+
 class ConcatFilter(Filter):
     """
     Filter that merges files, placing a semicolon between them.
@@ -10,28 +11,23 @@ class ConcatFilter(Filter):
     def concat(self, out, hunks, **kw):
         out.write(';'.join([h.data() for h, info in hunks]))
 
-css_login = Bundle(
+
-    'node_modules/bootstrap/dist/css/bootstrap.css',
+css_login = Bundle('node_modules/bootstrap/dist/css/bootstrap.css',
                    'node_modules/font-awesome/css/font-awesome.css',
                    'node_modules/ionicons/dist/css/ionicons.css',
                    'node_modules/icheck/skins/square/blue.css',
                    'node_modules/admin-lte/dist/css/AdminLTE.css',
-    filters=('cssmin','cssrewrite'),
+                   filters=('cssmin', 'cssrewrite'),
-    output='generated/login.css'
+                   output='generated/login.css')
-)
 
-js_login = Bundle(
+js_login = Bundle('node_modules/jquery/dist/jquery.js',
-    'node_modules/jquery/dist/jquery.js',
                   'node_modules/bootstrap/dist/js/bootstrap.js',
                   'node_modules/icheck/icheck.js',
                   filters=(ConcatFilter, 'jsmin'),
-    output='generated/login.js'
+                  output='generated/login.js')
-)
 
-js_validation = Bundle(
+js_validation = Bundle('node_modules/bootstrap-validator/dist/validator.js',
-    'node_modules/bootstrap-validator/dist/validator.js',
+                       output='generated/validation.js')
-    output='generated/validation.js'
-)
 
 css_main = Bundle(
     'node_modules/bootstrap/dist/css/bootstrap.css',
@@ -43,12 +39,10 @@ css_main = Bundle(
     'node_modules/admin-lte/dist/css/AdminLTE.css',
     'node_modules/admin-lte/dist/css/skins/_all-skins.css',
     'custom/css/custom.css',
-    filters=('cssmin','cssrewrite'),
+    filters=('cssmin', 'cssrewrite'),
-    output='generated/main.css'
+    output='generated/main.css')
-)
 
-js_main = Bundle(
+js_main = Bundle('node_modules/jquery/dist/jquery.js',
-    'node_modules/jquery/dist/jquery.js',
                  'node_modules/jquery-ui-dist/jquery-ui.js',
                  'node_modules/bootstrap/dist/js/bootstrap.js',
                  'node_modules/datatables.net/js/jquery.dataTables.js',
@@ -61,10 +55,10 @@ js_main = Bundle(
                  'node_modules/admin-lte/dist/js/adminlte.js',
                  'node_modules/multiselect/js/jquery.multi-select.js',
                  'node_modules/datatables.net-plugins/sorting/natural.js',
+                 'node_modules/jtimeout/src/jTimeout.js',
                  'custom/js/custom.js',
                  filters=(ConcatFilter, 'jsmin'),
-    output='generated/main.js'
+                 output='generated/main.js')
-)
 
 assets = Environment()
 assets.register('js_login', js_login)

powerdnsadmin/routes/index.py

@@ -82,6 +82,12 @@ def index():
     return redirect(url_for('dashboard.dashboard'))
 
 
+@index_bp.route('/ping', methods=['GET'])
+@login_required
+def ping():
+    return make_response('ok')
+
+
 @index_bp.route('/google/login')
 def google_login():
     if not Setting().get('google_oauth_enabled') or google is None:

powerdnsadmin/static/custom/js/custom.js

@@ -268,3 +268,20 @@ json_library = {
             .replace(jsonLine, json_library.replacer);
     }
 };
+
+// set count down in second on an element
+function timer(elToUpdate, maxTime) {
+    elToUpdate.text(maxTime + "s");
+
+    var interval = setInterval(function () {
+        if (maxTime > 0) {
+            maxTime--;
+            elToUpdate.text(maxTime + "s");
+        }
+        else {
+            clearInterval(interval);
+        }
+    }, 1000);
+
+    return interval;
+}

powerdnsadmin/templates/base.html

@@ -174,6 +174,84 @@
 {% block scripts %}
 {% assets "js_main" -%}
   <script type="text/javascript" src="{{ ASSET_URL }}"></script>
+  <script>
+
+    $(document.body).on("click", ".button_stay_signed_in", function (e) {
+      $.get({
+          url: $.jTimeout().options.extendUrl,
+          cache: false,
+            success: function(){
+              $.jTimeout().resetExpiration();
+            }
+      });
+    });
+
+    $(document.body).on("click", ".button_sign_out", function (e) {
+      window.location.replace("{{ url_for('index.logout') }}");
+    });
+
+    $(document).on('show.bs.modal','#modal_session_warning', function () {
+      var secondsLeft = jTimeout.getSecondsTillExpiration();
+      var t = timer($('#modal-time'), secondsLeft);
+
+      $(this).on('hidden.bs.modal', function () {
+        clearInterval(t);
+        $('#modal-time').text("");
+        $(this).off('hidden.bs.modal');
+      });
+    });
+
+    $(function(){
+      $.jTimeout({
+        flashTitle: true,
+        flashTitleSpeed: 500,
+        flashingTitleText: '**WARNING**',
+        originalTitle: document.title,
+
+        timeoutAfter: {{ SETTING.get('session_timeout')|int *60 }},
+        secondsPrior: 60,
+        heartbeat: 1,
+
+        extendOnMouseMove: true,
+        mouseDebounce: 30,
+
+        extendUrl: '{{ url_for("index.ping") }}',
+        logoutUrl: '{{ url_for("index.logout") }}',
+        loginUrl: '{{ url_for("index.login") }}',
+
+        onClickExtend: function(jTimeout){
+          console.log("onClickExtend!");
+        },
+
+        onMouseMove: function(jTimeout){
+          // If the mouse is moving while popup is present, we
+          // don't extend the session.
+          if (!$('#modal_session_warning').hasClass('in')) {
+            $.get({
+              url: $.jTimeout().options.extendUrl,
+              cache: false,
+              success: function () {
+                $.jTimeout().resetExpiration();
+              }
+            });
+          }
+        },
+
+        onTimeout: function(jTimeout){
+          window.location.replace("{{ url_for('index.logout') }}");
+        },
+
+        onPriorCallback: function(jTimeout){
+          $("#modal_session_warning").modal('show');;
+        },
+
+        onSessionExtended:function(jTimeout){
+          $("#modal_session_warning").modal('hide');
+        }
+
+      });
+    });
+  </script>
 {%- endassets %}
 {% endblock %}
 {% block extrascripts %}
@@ -225,6 +303,30 @@
   <!-- /.modal-dialog -->
 </div>
 <!-- /.modal -->
+<!-- /.session-warning-modal -->
+<div class="modal fade modal-warning" data-backdrop="static" id="modal_session_warning">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">Session timeout warning</h4>
+      </div>
+      <div class="modal-body">
+        <p>Your session is about to expire. You will be automatically signed out in</p>
+        <h3><span id="modal-time"></span></h3>
+        <p>To coninue your ssession, select <strong>Stay Signed In</strong></p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-flat btn-danger pull-left button_stay_signed_in"
+          data-dismiss="modal">Stay Signed In</button>
+        <button type="button" class="btn btn-flat btn-default pull-right button_sign_out"
+          data-dismiss="modal">Sign Out</button>
+      </div>
+    </div>
+    <!-- /.session-warning-modal-content -->
+  </div>
+  <!-- /.session-warning-modal-dialog -->
+</div>
+<!-- /.session-warning-modal -->
 {% endblock %}
 {% block modals %}
 {% endblock %}

yarn.lock

@@ -701,6 +701,13 @@ jsonparse@^1.2.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
 
+jtimeout@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/jtimeout/-/jtimeout-3.1.0.tgz#4cd65b28eff8b9f8c61d08889a9ac3abdf5d9893"
+  integrity sha512-xA2TlImMGj4c0yAiM9BUq+8aAFVYVYUX2tkcC8u8das9qoZSs13SxhVcfWqI4cHOsv3huj2D0VRNHeVCLO3mVQ==
+  dependencies:
+    jquery ">=1.7.1 <4.0.0"
+
 jvectormap@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/jvectormap/-/jvectormap-1.2.2.tgz#2e4408b24a60473ff106c1e7243e375ae5ca85da"