Skip to content

add login screen, redirect when unauthorized #302

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rvyhnal wants to merge 2 commits into
base: develop
Choose a base branch
from
+116 −47
Open

add login screen, redirect when unauthorized #302

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5bcd869
add login screen, redirect when unauthorized
rvyhnal Sep 19, 2024
48ef5d9
Remove absolute redirects
rvyhnal Mar 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion intelmq_manager/build.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
25 changes: 24 additions & 1 deletion intelmq_manager/static/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -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 */
29 changes: 25 additions & 4 deletions intelmq_manager/static/js/static.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}


Expand All @@ -508,7 +514,7 @@ function authenticatedAjax(settings) {
$(document).ready(function() {
updateLoginStatus();

$('#loginForm').submit(function(e) {
$('#loginForm').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
Expand All @@ -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");
Copy link
Contributor

@kamil-certat kamil-certat Mar 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As a minimum precaution, we should verify the redirect target is related to the current path, to avoid an open redirect issue.

Copy link
Contributor Author

@rvyhnal rvyhnal Mar 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was assuming this wouldn't be an issue as the redirect happens only after the user is authenticated, anyways I have made a slight change, so that the redirect target is treated as relative path to the current location.

} else if (typeof data.error !== 'undefined') {
// If authentication failed, the returned error message is displayed.
$('#loginErrorField').text(data.error);
Expand All @@ -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
}

Copy link
Contributor

@kamil-certat kamil-certat Mar 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately, this function won't work in multiple cases. For example, IntelMQ manager in all instances I manage is deployed under a path /intelmq-manager. In addition, the main page is accessible directly under the path, without redirecting to index.html.

I've checked how the code would behave on the main page on one of my instances (in the browser's console):

> let currentPath = window.location.pathname.substring(1) 
> let loginUrl = "/login.html"
> currentPath
"intelmq-manager/"
> window.location.href = loginUrl
# Redirects to the main domain, not under the manager's path

Copy link
Contributor Author

@rvyhnal rvyhnal Mar 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have modified the redirects so that all work with relative paths

function logout() {
sessionStorage.removeItem("login_token");
sessionStorage.removeItem("username");
Expand Down
30 changes: 30 additions & 0 deletions intelmq_manager/static/less/style.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down
44 changes: 3 additions & 41 deletions intelmq_manager/templates/base.mako
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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'>
Expand All @@ -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()}

Expand Down
33 changes: 33 additions & 0 deletions intelmq_manager/templates/login.mako
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>