Skip to content

Commit

Permalink
JS & HTML improvements
Browse files Browse the repository at this point in the history 
Show initial "Loading..." message.
Show errors when ping fails.
  • Loading branch information
@ip1981
ip1981 committed Jun 9, 2016
1 parent 9ad79bc commit 0fa0134
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 77 deletions.
84 changes: 39 additions & 45 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,48 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="static/external/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="static/external/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<title>Juan De La Cosa</title>
</head>

<body>
<div id="noSuchAccount" class="collapse container">
<h1>Your account does not exist</h1>
<div class="alert alert-info">
Your login would be <strong id="account"></strong>, but it does not exist in the database.
</div>
</div>

<div id="main" class="collapse container">

<h1>Your Account</h1>
<p class="lead">The button below generates a new password every time you click it.
<br> The new password shows for a short time, then you copy it.</p>


<form class="form-horizontal">
<div id="loginGroup" class="form-group">
<label class="control-label col-sm-2" for="login">Login:</label>
<div class="col-sm-6">
<input id="login" readonly type="text" class="form-control" maxlength="80">
</div>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="static/external/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="static/external/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<title>Juan De La Cosa</title>
</head>

<body>
<div id="info" class="container">
<h1>Loading, please wait...</h1>
<div></div>
</div>

<div id="main" style="display: none;" class="container">
<h1>Your Account</h1>
<p class="lead">The button below generates a new password every time you click it.
<br>The new password shows for a short time, then you copy it.</p>

<form class="form-horizontal">
<div id="loginGroup" class="form-group">
<label class="control-label col-sm-2" for="login">Login:</label>
<div class="col-sm-6">
<input id="login" readonly type="text" class="form-control" maxlength="80">
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="resetPassword">Password:</label>
<div class="col-sm-6">
<input id="password" readonly type="text" class="collapse form-control">
<button id="resetPassword" type="button" class="btn btn-danger">Reset password</button>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="resetPassword">Password:</label>
<div class="col-sm-6">
<input id="password" readonly type="text" style="display: none;" class="form-control">
<button id="resetPassword" type="button" class="btn btn-danger">Reset password</button>
</div>
<div id="passwordChanged" class="collapse alert alert-success">Password changed</div>
<div id="passwordFailed" class="collapse alert alert-danger"></div>
</form>

</div>
<div id="passwordMessage" style="display: none;"></div>
</form>
</div>

</div>
<script src="static/external/jquery-2.2.4.min.js"></script>
<script src="static/external/bootstrap/js/bootstrap.min.js"></script>
<script src="static/juandelacosa.js"></script>
<script src="static/external/jquery-2.2.4.min.js"></script>
<script src="static/external/bootstrap/js/bootstrap.min.js"></script>
<script src="static/juandelacosa.js"></script>

</body>
</body>

</html>
80 changes: 48 additions & 32 deletions static/juandelacosa.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
$(function () {
var account = $('#account');
$(function() {
var info = $('#info');
var infoHead = $('#info>h1');
var infoAlert = $('#info>div');
var main = $('#main');
var noSuchAccount = $('#noSuchAccount');
var password = $('#password');
var passwordChanged = $('#passwordChanged');
var passwordFailed = $('#passwordFailed');
var passwordMessage = $('#passwordMessage');
var resetPassword = $('#resetPassword');

document.title = window.location.hostname + ' - ' + 'Juan De La Cosa';
Expand All @@ -13,51 +14,67 @@ $(function () {
$.ajax({
url: "whoAmI",
method: "GET",
success: function (login) {
noSuchAccount.hide();
success: function(login) {
info.hide();
main.show();
$('#login').val(login);
setTimeout(whoAmI, 60 * 1000);
},
error: function (jqXHR, textStatus, errorThrown) {
if (404 == jqXHR.status) {
main.hide();
account.text(jqXHR.responseText);
noSuchAccount.show();
error: function(jqXHR, textStatus, errorThrown) {
main.hide();
if ((404 == jqXHR.status) && ('' != jqXHR.responseText)) {
infoHead.text('Your account does not exist');
infoAlert.html('Your login would be <strong>' + jqXHR.responseText +
'</strong>, but it does not exist in the database.');
infoAlert.removeClass().addClass('alert alert-info');
setTimeout(whoAmI, 60 * 1000);
} else {
infoHead.text('An error has occured');
infoAlert.text((0 == jqXHR.readyState) ?
'Service unavailable' : errorThrown);
infoAlert.removeClass().addClass('alert alert-danger');
setTimeout(whoAmI, 10 * 1000);
}
},
complete: setTimeout(whoAmI, 60 * 1000)
info.show();
}
})
})();

resetPassword.click(function () {
function showPasswordMessage(succ, msg, done) {
if (succ) {
passwordMessage.removeClass().addClass('alert alert-success');
} else {
passwordMessage.removeClass().addClass('alert alert-danger');
}
passwordMessage.fadeIn();
passwordMessage.text(msg);
setTimeout(function() {
passwordMessage.fadeOut();
if (typeof done == 'function') done();
}, 5 * 1000);
};

resetPassword.click(function() {
$.ajax({
url: "resetMyPassword",
method: "POST",
error: function (jqXHR, textStatus, errorThrown) {
error: function(jqXHR, textStatus, errorThrown) {
resetPassword.prop('disabled', true);
passwordFailed.fadeIn();
if (0 == jqXHR.readyState) {
passwordFailed.text('Service unavailable');
} else {
passwordFailed.text(errorThrown);
}
setTimeout(function () {
passwordFailed.fadeOut();
resetPassword.prop('disabled', false);
}, 5 * 1000);
showPasswordMessage(false, (0 == jqXHR.readyState) ?
'Service unavailable' : errorThrown,
function() {
resetPassword.prop('disabled', false)
});
},
success: function (newpwd) {
success: function(newpwd) {
resetPassword.hide();
password.val(newpwd);
password.show();
passwordChanged.fadeIn();
password.select();

setTimeout(function () {
passwordChanged.fadeOut();
}, 5 * 1000);
showPasswordMessage(true, 'Password changed.');

setTimeout(function () {
setTimeout(function() {
password.val('');
password.hide();
resetPassword.show();
Expand All @@ -66,4 +83,3 @@ $(function () {
});
})
});

0 comments on commit 0fa0134

Please sign in to comment.