aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorIgor Pashev <pashev.igor@gmail.com>2016-06-10 01:52:28 +0800
committerIgor Pashev <pashev.igor@gmail.com>2016-06-10 01:54:25 +0800
commit0fa01348c73096b25fdd233c7a5777cc9d7dd46e (patch)
treedbafcff1b975707d1f28fedb92e07ecf36fda7c8
parent9ad79bc12001cf6f47864b7389e49c7462955b40 (diff)
downloadjuandelacosa-0fa01348c73096b25fdd233c7a5777cc9d7dd46e.tar.gz
JS & HTML improvements
Show initial "Loading..." message. Show errors when ping fails.
Diffstat
-rw-r--r--index.html84
-rw-r--r--static/juandelacosa.js80
2 files changed, 87 insertions, 77 deletions
diff --git a/index.html b/index.html
index d31c7a8..aa3b17a 100644
--- a/index.html
+++ b/index.html
@@ -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 () {
});
})
});
-
generated by cgit v1.2.3 (git 2.39.1) at 2024-04-19 00:59:41 +0000