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..1d3f172 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(){
+ let currentFile = window.location.pathname.split("/").pop();
+ let loginUrl = "login.html"
+
+ if ( ! ["login.html", "index.html"].includes(currentFile)){
+ loginUrl += "?r=" + encodeURIComponent(currentFile)
+ }
+ 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", "", "", [])
%>
<!DOCTYPE html>
@@ -101,10 +102,8 @@
</ul>
<div id="login-status">Not logged in</div>
<div>
- <input type="button" value="Login" class="btn btn-primary" data-toggle="modal"
- data-target="#modalLoginForm" id="signUp" style="display: block;">
- <input type="button" value="Logout" id="logOut"
- class="btn btn-primary" style="display: none;">
+ <input type="button" value="Login" class="btn btn-primary" id="signUp" style="display: block;">
+ <input type="button" value="Logout"class="btn btn-primary" id="logOut" style="display: none;">
</div>
<!-- /.navbar-top-links -->
<div title="Click to expand, then escape to minimize again." id='log-window'>
@@ -113,43 +112,6 @@
</div>
</nav>
- <div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog"
- aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <div class="modal-header text-center">
- <h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">×</span>
- </button>
- </div>
- <form method="POST" id="loginForm">
- <div class="modal-body mx-3">
- <!-- Field to show if the username or password is wrong -->
- <p class="text-danger" id="loginErrorField"> </p>
- <div class="md-form mb-2">
- <input type="text" id="username" name="username"
- class="form-control">
- <label data-error="wrong" data-success="right" for="username">
- Username
- </label>
- </div>
- <div class="md-form mb-2">
- <input type="password" id="password" name="password"
- class="form-control">
- <label data-error="wrong" data-success="right" for="password">
- Password
- </label>
- </div>
-
- </div>
- <div class="modal-footer d-flex justify-content-center">
- <button class="btn btn-primary">Login</button>
- </div>
- </form>
- </div>
- </div>
- </div>
${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" />
+
+
+<!-- Page Content -->
+<div id="page-wrapper">
+ <div id="login-page">
+ <div id="login-card">
+ <h4 class=" w-100 font-weight-bold">Log in</h4>
+ <form method="POST" id="loginForm">
+ <div class="mx-3">
+ <!-- Field to show if the username or password is wrong -->
+ <p class="text-danger" id="loginErrorField"> </p>
+ <div class="md-form mb-2">
+ <label data-error="wrong" data-success="right" for="username">
+ Username
+ </label>
+ <input type="text" id="username" name="username" class="form-control">
+ </div>
+ <div class="md-form mb-2">
+ <label data-error="wrong" data-success="right" for="password">
+ Password
+ </label>
+ <input type="password" id="password" name="password" class="form-control">
+ </div>
+
+ </div>
+ <div class="d-flex justify-content-center">
+ <button class="btn btn-primary pull-right">Login</button>
+ </div>
+ </form>
+ </div>
+ </div>
+</div>
\ No newline at end of file