Add session timeout warning

This commit is contained in:
Khanh Ngo 2019-12-17 23:46:34 +07:00
parent ea8531dd3c
commit 9a1b92fbc2
No known key found for this signature in database
GPG Key ID: A945965CD6351844
6 changed files with 170 additions and 43 deletions

View File

@ -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"
}
}

View File

@ -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'),
output='generated/login.css'
)
output='generated/login.css')
js_login = Bundle(
'node_modules/jquery/dist/jquery.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'
)
output='generated/login.js')
js_validation = Bundle(
'node_modules/bootstrap-validator/dist/validator.js',
output='generated/validation.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',
@ -44,11 +40,9 @@ css_main = Bundle(
'node_modules/admin-lte/dist/css/skins/_all-skins.css',
'custom/css/custom.css',
filters=('cssmin', 'cssrewrite'),
output='generated/main.css'
)
output='generated/main.css')
js_main = Bundle(
'node_modules/jquery/dist/jquery.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',
@ -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)

View File

@ -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:

View File

@ -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;
}

View File

@ -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 %}

View File

@ -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"