From 9a1b92fbc2c338d8829900845a7f44b7bef14512 Mon Sep 17 00:00:00 2001
From: Khanh Ngo <k@ndk.name>
Date: Tue, 17 Dec 2019 23:46:34 +0700
Subject: [PATCH] Add session timeout warning

---
 package.json                             |   5 +-
 powerdnsadmin/assets.py                  |  76 ++++++++---------
 powerdnsadmin/routes/index.py            |   6 ++
 powerdnsadmin/static/custom/js/custom.js |  17 ++++
 powerdnsadmin/templates/base.html        | 102 +++++++++++++++++++++++
 yarn.lock                                |   7 ++
 6 files changed, 170 insertions(+), 43 deletions(-)

diff --git a/package.json b/package.json
index d5bf222..cc73539 100644
--- a/package.json
+++ b/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",
-    "datatables.net-plugins": "^1.10.19"
+    "jtimeout": "^3.1.0",
+    "multiselect": "^0.9.12"
   }
 }
diff --git a/powerdnsadmin/assets.py b/powerdnsadmin/assets.py
index 8f76086..cb81ba1 100644
--- a/powerdnsadmin/assets.py
+++ b/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',
-    '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'),
-    output='generated/login.css'
-)
 
-js_login = Bundle(
-    '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'
-)
+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'),
+                   output='generated/login.css')
 
-js_validation = Bundle(
-    'node_modules/bootstrap-validator/dist/validator.js',
-    output='generated/validation.js'
-)
+js_login = Bundle('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')
+
+js_validation = Bundle('node_modules/bootstrap-validator/dist/validator.js',
+                       output='generated/validation.js')
 
 css_main = Bundle(
     'node_modules/bootstrap/dist/css/bootstrap.css',
@@ -43,28 +39,26 @@ 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'),
-    output='generated/main.css'
-)
+    filters=('cssmin', 'cssrewrite'),
+    output='generated/main.css')
 
-js_main = Bundle(
-    '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',
-    'node_modules/datatables.net-bs/js/dataTables.bootstrap.js',
-    'node_modules/jquery-sparkline/jquery.sparkline.js',
-    'node_modules/jquery-slimscroll/jquery.slimscroll.js',
-    'node_modules/icheck/icheck.js',
-    'node_modules/fastclick/lib/fastclick.js',
-    'node_modules/moment/moment.js',
-    'node_modules/admin-lte/dist/js/adminlte.js',
-    'node_modules/multiselect/js/jquery.multi-select.js',
-    'node_modules/datatables.net-plugins/sorting/natural.js',
-    'custom/js/custom.js',
-    filters=(ConcatFilter, 'jsmin'),
-    output='generated/main.js'
-)
+js_main = Bundle('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',
+                 'node_modules/datatables.net-bs/js/dataTables.bootstrap.js',
+                 'node_modules/jquery-sparkline/jquery.sparkline.js',
+                 'node_modules/jquery-slimscroll/jquery.slimscroll.js',
+                 'node_modules/icheck/icheck.js',
+                 'node_modules/fastclick/lib/fastclick.js',
+                 'node_modules/moment/moment.js',
+                 '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')
 
 assets = Environment()
 assets.register('js_login', js_login)
diff --git a/powerdnsadmin/routes/index.py b/powerdnsadmin/routes/index.py
index 8539ef5..de36314 100644
--- a/powerdnsadmin/routes/index.py
+++ b/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:
diff --git a/powerdnsadmin/static/custom/js/custom.js b/powerdnsadmin/static/custom/js/custom.js
index 81d73fb..297cd96 100644
--- a/powerdnsadmin/static/custom/js/custom.js
+++ b/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;
+}
\ No newline at end of file
diff --git a/powerdnsadmin/templates/base.html b/powerdnsadmin/templates/base.html
index 7827048..4542d7a 100644
--- a/powerdnsadmin/templates/base.html
+++ b/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 %}
diff --git a/yarn.lock b/yarn.lock
index 02be4aa..ed0f963 100644
--- a/yarn.lock
+++ b/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"