Johannes Zellner
148 lines
5.0 KiB
HTML
148 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title> Welcome to Yellow Tent </title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
|
|
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
|
|
<style>
|
|
body {
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
margin-top: 100px;
|
|
width: 40%;
|
|
margin-left: 30%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="navbar navbar-inverse navbar navbar-fixed-top">
|
|
<a href="#" class="navbar-brand">Yellow Tent</a>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Welcome to Yellow Tent!</h4>
|
|
</div>
|
|
<p> Looks like this is your first boot. Let's create the admin user first. </p>
|
|
<br/>
|
|
<div class="panel-content" style="padding: 20px;">
|
|
<form id="createAdminForm" class="form-horizontal" enctype="x-www-form-urlencoded" action="/api/v1/createadmin">
|
|
<div class="form-group">
|
|
<label for="username" class="col-lg-2 control-label">Username</label>
|
|
<div class="col-lg-10">
|
|
<input type="text" class="form-control" id="username" placeholder="Username" name="username">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email" class="col-lg-2 control-label">Email</label>
|
|
<div class="col-lg-10">
|
|
<input type="text" class="form-control" id="email" placeholder="Email" name="email">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password" class="col-lg-2 control-label">Password</label>
|
|
<div class="col-lg-10">
|
|
<input type="password" class="form-control" id="password" placeholder="Password" name="password">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-offset-2 col-lg-10">
|
|
<button type="submit" class="btn btn-default btn-primary">Create</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div> <!-- panel-content -->
|
|
</div> <!-- panel -->
|
|
</div> <!-- container -->
|
|
|
|
<div id="modalDialog" class="modal fade">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title">Title</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Body</p>
|
|
<div class="progress progress-striped active">
|
|
<div class="progress-bar" style="width: 100%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" id="button1" class="btn btn-default btn-primary" data-dismiss="modal">OK</button>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div><!-- /.modal -->
|
|
|
|
<script src="jquery/jquery.js"></script>
|
|
<script src="bootstrap/js/bootstrap.min.js"></script>
|
|
|
|
<script>
|
|
function showModalDialog(header, body, options) {
|
|
options = options || { okButton: true };
|
|
$('#modalDialog .modal-title').text(header);
|
|
$('#modalDialog .modal-body p').text(body);
|
|
if (options.okButton) {
|
|
$('#modalDialog .modal-footer').show();
|
|
$('#modalDialog button.close').show();
|
|
$('#modalDialog .progress').hide();
|
|
$('#modalDialog button#button1').text('OK');
|
|
} else if (options.indeterminate) {
|
|
// FIXME: clicking on the backdrop closes the modal
|
|
$('#modalDialog .modal-footer').hide();
|
|
$('#modalDialog button.close').hide();
|
|
$('#modalDialog .progress').show();
|
|
}
|
|
$('#modalDialog').modal('show');
|
|
}
|
|
|
|
function hideModalDialog() {
|
|
$('#modalDialog').modal('hide');
|
|
}
|
|
|
|
function errorHandler(context) {
|
|
return function (xhr, textStatus, errorThrown) {
|
|
showModalDialog(context, ' status:' + textStatus + ' error:' + errorThrown);
|
|
}
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
$('form:first *:input[type!=hidden]:first').focus();
|
|
|
|
$('#createAdminForm').submit(function(event) {
|
|
event.preventDefault();
|
|
|
|
var $form = $(this),
|
|
username = $form.find('input[name="username"]').val(),
|
|
email = $form.find('input[name="email"]').val(),
|
|
password = $form.find('input[name="password"]').val(),
|
|
url = $form.attr('action');
|
|
|
|
if (!username || !password || !email) {
|
|
showModalDialog('Oops...', 'Username, password or email is empty.');
|
|
return;
|
|
}
|
|
|
|
showModalDialog('Creating Admin user', 'Hold on...', { indeterminate: true });
|
|
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: url,
|
|
data: $form.serialize(),
|
|
success: function (data) {
|
|
window.location.href = "index.html";
|
|
},
|
|
error: errorHandler('User creation failed')
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|