From 0fa01348c73096b25fdd233c7a5777cc9d7dd46e Mon Sep 17 00:00:00 2001 From: Igor Pashev Date: Fri, 10 Jun 2016 01:52:28 +0800 Subject: JS & HTML improvements Show initial "Loading..." message. Show errors when ping fails. --- index.html | 84 +++++++++++++++++++++++--------------------------- static/juandelacosa.js | 80 ++++++++++++++++++++++++++++------------------- 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 @@ - - - - - - - Juan De La Cosa - - - -
-

Your account does not exist

-
- Your login would be , but it does not exist in the database. -
-
- -
- -

Your Account

-

The button below generates a new password every time you click it. -
The new password shows for a short time, then you copy it.

- - -
-
- -
- -
+ + + + + + + Juan De La Cosa + + + +
+

Loading, please wait...

+
+
+ + - - - + + + - + 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 ' + jqXHR.responseText + + ', 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 () { }); }) }); - -- cgit v1.2.3