From 5bcd86903c336292f13fc36e731ca0b8b9c09785 Mon Sep 17 00:00:00 2001 From: Radek Vyhnal Date: Thu, 19 Sep 2024 16:04:03 +0200 Subject: [PATCH] add login screen, redirect when unauthorized --- intelmq_manager/build.py | 2 +- intelmq_manager/static/css/style.css | 25 ++++++++++++++- intelmq_manager/static/js/static.js | 29 ++++++++++++++--- intelmq_manager/static/less/style.less | 30 ++++++++++++++++++ intelmq_manager/templates/base.mako | 44 ++------------------------ intelmq_manager/templates/login.mako | 33 +++++++++++++++++++ 6 files changed, 116 insertions(+), 47 deletions(-) create mode 100644 intelmq_manager/templates/login.mako diff --git a/intelmq_manager/build.py b/intelmq_manager/build.py index 04e15c2..d4233a8 100644 --- a/intelmq_manager/build.py +++ b/intelmq_manager/build.py @@ -21,7 +21,7 @@ def render_page(pagename: str, **template_args) -> str: def buildhtml(outputdir: pathlib.Path = pathlib.Path('html')): outputdir.mkdir(parents=True, exist_ok=True) - htmlfiles = ["configs", "management", "monitor", "check", "about", "index"] + htmlfiles = ["login", "configs", "management", "monitor", "check", "about", "index"] for filename in htmlfiles: print(f"Rendering {filename}.html") html = render_page(filename) diff --git a/intelmq_manager/static/css/style.css b/intelmq_manager/static/css/style.css index 667d05e..0b5b469 100644 --- a/intelmq_manager/static/css/style.css +++ b/intelmq_manager/static/css/style.css @@ -69,6 +69,30 @@ nav ul.nav.navbar-top-links li.active { .control-buttons [data-url=status] { display: none; } +/* + * Login page + */ +#login-page { + display: flex; + justify-content: center; + margin: 32px 0; +} +#login-page #login-card { + display: flex; + flex-direction: column; + align-content: flex-end; + align-items: center; +} +#login-page #login-card form { + width: 300px; + max-width: 300px; +} +#login-page #login-card form input { + margin-bottom: 15px; +} +#login-page #login-card form button { + margin: 15px 0 0 0; +} /* * Management page */ @@ -146,4 +170,3 @@ nav ul.nav.navbar-top-links li.active { #network-container .network-right-menu .vis-physics-toggle { right: 480px; } -/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/intelmq_manager/static/js/static.js b/intelmq_manager/static/js/static.js index 4fc6c8e..55b68c6 100644 --- a/intelmq_manager/static/js/static.js +++ b/intelmq_manager/static/js/static.js @@ -499,7 +499,13 @@ function authenticatedAjax(settings) { Authorization: token }; } - return $.ajax(settings); + let ajax = $.ajax(settings); + ajax.fail((jqxhr) => { + if (jqxhr.status == 401) { + requireLogin() + } + }) + return ajax } @@ -508,7 +514,7 @@ function authenticatedAjax(settings) { $(document).ready(function() { updateLoginStatus(); - $('#loginForm').submit(function(e) { + $('#loginForm').submit(function(e) { e.preventDefault(); $.ajax({ type: 'POST', @@ -535,9 +541,11 @@ $(document).ready(function() { sessionStorage.setItem("username", data.username); $('#loginErrorField').text("") - $('#modalLoginForm').modal('hide'); updateLoginStatus(); - window.location.reload(); + + let url = new URL(window.location.href) + let redirect = new URLSearchParams(url.search).get('r') + window.location.replace(redirect || "/index.html"); } else if (typeof data.error !== 'undefined') { // If authentication failed, the returned error message is displayed. $('#loginErrorField').text(data.error); @@ -562,8 +570,21 @@ $(document).ready(function() { }); $('#logOut').click(logout); + $('#signUp').click(()=>{ + requireLogin() + }); }); +function requireLogin(destinationUrl){ + let currentPath = window.location.pathname.substring(1) + let loginUrl = "/login.html" + + if ( ! ["login.html", "index.html"].includes(currentPath)){ + loginUrl += "?r=" + encodeURIComponent(destinationUrl || currentPath) + } + window.location.href = loginUrl +} + function logout() { sessionStorage.removeItem("login_token"); sessionStorage.removeItem("username"); diff --git a/intelmq_manager/static/less/style.less b/intelmq_manager/static/less/style.less index ec159bd..7b2146d 100644 --- a/intelmq_manager/static/less/style.less +++ b/intelmq_manager/static/less/style.less @@ -78,6 +78,36 @@ nav ul.nav.navbar-top-links li.active { display: none; // this button is normally hidden, used only in script; may be revealed if found useful } +/* + * Login page + */ + +#login-page { + display: flex; + justify-content: center; + margin: 32px 0; + + #login-card { + display: flex; + flex-direction: column; + align-content: flex-end; + align-items: center; + + form { + width: 300px; + max-width: 300px; + + input { + margin-bottom: 15px; + } + + button { + margin: 15px 0 0 0; + } + } + } +} + /* * Management page */ diff --git a/intelmq_manager/templates/base.mako b/intelmq_manager/templates/base.mako index a36aff5..f936023 100644 --- a/intelmq_manager/templates/base.mako +++ b/intelmq_manager/templates/base.mako @@ -35,6 +35,7 @@ page_map = {page.name: page for page in pages} page_map["index"] = Page("index", "", "", []) + page_map["login"] = Page("login", "", "", []) %> @@ -101,10 +102,8 @@
Not logged in
- - + +
@@ -113,43 +112,6 @@
- ${next.body()} diff --git a/intelmq_manager/templates/login.mako b/intelmq_manager/templates/login.mako new file mode 100644 index 0000000..ef02e09 --- /dev/null +++ b/intelmq_manager/templates/login.mako @@ -0,0 +1,33 @@ +<%inherit file="base.mako" /> + + + +
+
+
+

Log in

+
+
+ +

+
+ + +
+
+ + +
+ +
+
+ +
+
+
+
+
\ No newline at end of file