Skip to content
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

add login screen, redirect when unauthorized #302

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

add login screen, redirect when unauthorized #302

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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");
} 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
}

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>
Loading