Skip to content

Login page #7

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
cledvina wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Login page #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
82df782
Align login buttons.
cledvina Jan 15, 2019
013fd70
Move login scripts to bfe/static/js
cledvina Jan 16, 2019
39ea793
Moved login modal to bfe/static/js/loginLogout.js
cledvina Jan 16, 2019
b308656
Add separate login page.
cledvina Jan 17, 2019
50f6f54
Get jquery stuff working properly.
cledvina Jan 17, 2019
f27d927
Added cancel function.
cledvina Jan 17, 2019
68ed704
Add navbar-right section for login link.
cledvina Jan 17, 2019
2fd6324
Include bfe updates
cledvina Jan 17, 2019
34c976f
Include profile-edit changes.
cledvina Jan 18, 2019
4634b65
Add current_user cookie for ldap logins.
cledvina Jan 18, 2019
b44c77c
bfe changes
cledvina Jan 18, 2019
1bee97a
Add profile-edit changes.
cledvina Jan 18, 2019
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 bfe
Open in desktop
Submodule bfe updated 9 files
+1 −1 Gruntfile.js
+3 −0 development.html
+1,568 −134 package-lock.json
+1 −1 package.json
+57 −23 src/bfe.js
+186 −0 src/bfeapi.js
+2 −213 static/js/config-dev.js
+195 −393 static/js/config.js
+28 −0 static/js/loginLogout.js
127 changes: 20 additions & 107 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,18 +45,25 @@
<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">BIBFRAME Editor Demo</a>
</div>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">BIBFRAME Editor Demo</a>
</div>
</nav>
<div class="collapse navbar-collapse visible-print">
<ul class="nav navbar-nav navbar-right">
<li class="divider"></li>
<li><a id="login-logout" href="/login.html">Login</a></li>
<li class="divider"></li>
</ul>
</div>
</div>
</nav>

<!-- Breadcrumbs -->
<ol class="breadcrumb">
Expand All @@ -70,107 +77,13 @@
<li class="nav-item"><a class="nav-link" href="http://bibframe.org/bibliomata/mads/index-en.html">MADS ontology (local)</a></li>
</ul>

<div class="modal fade" id="up-modal" tabindex="-1" role="dialog" aria-labelledby="up-title">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="up-title">Enter Credentials</h4>
</div>
<div class="modal-body">
<form id="authForm">
<div class="form-group">
<label for="username" class="control-label">Username:</label>
<input type="text" class="form-control" id="username" name="username">
</div>
<div class="form-group">
<label for="password" class="control-label">Password:</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<input type="hidden" id="auth-type" name="auth-type" value="">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="up-login">Login</button>
</div>
</div>
</div>
</div>

<script>
var $login = '<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#up-modal" data-ltype="Local Login">Local Login</button> \
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#up-modal" data-ltype="LDAP Login">LDAP Login</button>';
var $logout = '<button type="button" class="btn btn-primary" id="up-logout">Logout</button>';
$('.container-fluid').append('<span id="up-buttons" class="pull-right"></span>');
$(function () {
var cooks = document.cookie;
if (cooks.match(/access_token=|current_user=/)) {
$('#up-buttons').html($logout);
} else {
$('#up-buttons').html($login);
}
});
$('#up-modal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var type = button.data('ltype');
var modal = $(this);
modal.find('.modal-title').text(type);
var authType = (type.match(/LDAP/i)) ? 'ldap' : 'local';
modal.find('#auth-type').val(authType);
})

$(document).on("click", "#up-login", function (e) {
e.preventDefault();
var authUrl = ($("#auth-type").val() == "ldap") ? "/verso/auth/ldap" : "/verso/api/Users/login";
$.ajax ({
url: authUrl,
type: "POST",
data: JSON.stringify({
username: $("#username").val(),
password: $("#password").val()
}),
contentType: "application/json; charset=utf-8",
error: function(x) {
alert(JSON.parse(x.responseText).error.message);
// alert('Login failed');
$("#username").val("");
$("#password").val("");
},
success: function() {
if (!document.cookie.match(/access_token=|current_user=/)) {
alert('Login failed');
$("#username").val("");
$("#password").val("");
} else {
$("#up-modal").modal('hide');
$('#up-buttons').html($logout);
}
},
});
});

$(document).on("click", "#up-logout", function (e) {
e.preventDefault();
$.ajax ({
url: "/verso/api/Users/logout",
type: "POST",
contentType: "application/json; charset=utf-8",
error: function() {
alert('Logout failed');
},
success: function() {
$('#up-buttons').html($login);
},
});
});
</script>
<script type="text/javascript" src="/bfe/static/js/loginLogout.js"></script>

<div id="bfeditor" class="container-fluid">
<div id="iealert"></div>
</div>

<script type="text/javascript" src="/recto/bfe/js/config-dev.js"></script>
<script type="text/javascript" src="/bfe/static/js/config-dev.js"></script>

<br/><br/><br/>

Expand Down
141 changes: 141 additions & 0 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="en">

<head>
<title>(Bibliographic Framework Initiative Technical Site - BIBFRAME.ORG - Login)</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="/static/images/favicon.ico">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/css/bootstrap-theme.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.js"></script>
<!--<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>-->
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>

<link rel="stylesheet" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">

<link rel="stylesheet" href="bfe/builds/bfe.css">

<style>
@media screen {
body {
padding-top: 50px;
padding-bottom: 20px;
}
}
@media print {
a[href]:after {
content: none;
}
}
.login-form {
width: 340px;
margin: 30px auto;
}
</style>

</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">BIBFRAME Editor Demo</a>
</div>
</div>
</nav>
<div class="container">
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<!-- <div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Forgot password?</a></div> -->
</div>
<div style="padding-top:30px" class="panel-body">
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="username" type="text" class="form-control" name="username" value="" placeholder="username">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div style="margin-top:10px" class="form-group">
<div class="col-sm-12 controls">
<a id="login-local" href="#" class="btn btn-success">Login </a>
<a id="login-ldap" href="#" class="btn btn-primary" data-auth="ldap">Login with LDAP </a>
<a id="login-cancel" href="#" class="btn btn-default">Cancel </a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
var goBack = document.referrer;
$(document).on("click", ".btn", function (e) {
e.preventDefault();
if ($(this.id).selector == "login-cancel") {
document.location = goBack;
} else {
var authType = $(this.id).selector;
var authUrl = (authType == "login-ldap") ? "/verso/auth/ldap" : "/verso/api/Users/login";
$.ajax ({
url: authUrl,
type: "POST",
data: JSON.stringify({
username: $("#username").val(),
password: $("#password").val()
}),
contentType: "application/json; charset=utf-8",
error: function(x) {
alert(JSON.parse(x.responseText).error.message);
$("#username").val("");
$("#password").val("");
},
success: function() {
if (!document.cookie.match(/access_token=|current_user=/)) {
alert('Login failed');
$("#username").val("");
$("#password").val("");
} else {
if (authType == "login-ldap") {
var user = $("#username").val();
var cookValue = encodeURIComponent('{"username":"' + user + '"}');
document.cookie = 'current_user=' + cookValue;
}
document.location = goBack;
};
},
});
};
});
</script>
<hr>
<footer class="bs-footer" role="contentinfo">
<div class="container">
<p>This is a development view of the Bibliographic Framework Initiative project's editor. For more information, go to <a href="http://www.loc.gov/bibframe/">www.loc.gov/bibframe</a>.</p>
</div>
</footer>
</body>
</html>
Loading