add login screen, redirect when unauthorized

certtools · Sep 19, 2024 · 5bcd869 · 5bcd869
1 parent 2117b60
commit 5bcd869
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 47 deletions.
diff --git 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
@@ -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 */
diff --git 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
@@ -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
@@ -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">&times;</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
@@ -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>