diff options
| -rw-r--r-- | index.html | 84 | ||||
| -rw-r--r-- | static/juandelacosa.js | 80 |
2 files changed, 87 insertions, 77 deletions
@@ -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> diff --git a/static/juandelacosa.js b/static/juandelacosa.js index b4be44f..5552f9f 100644 --- a/static/juandelacosa.js +++ b/static/juandelacosa.js @@ -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'; @@ -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(); @@ -66,4 +83,3 @@ $(function () { }); }) }); - |