Improve error messages for login form

4 files changed, 35 insertions, 12 deletions

diff --git a/index.html b/index.html
index ca34854..43fca9e 100644
--- a/index.html
+++ b/index.html
@@ -121,7 +121,9 @@
                                            required="required" />
                                 </div>
                                 <button type="submit" class="btn btn-primary btn-block" data-tkey="signin_button">Sign in</button>
-                                <span class="error failed" data-tkey="login_failed" style="display: none;">Login failed.</span>
+                                <span class="error wrong-user-or-pw" data-tkey="wrong_username_or_password" style="display: none;">Wrong username or password.</span>
+                                <span class="error connection-failed" data-tkey="connection_failed" style="display: none;">Could not connect to server.</span>
+                                <span class="error login-failed" data-tkey="login_failed" style="display: none;">Login failed.</span>
                             </form>
                         </div>
                         <div class="panel-body">
diff --git a/js/codeq/login.js b/js/codeq/login.js
index bf47917..dff70e5 100644
--- a/js/codeq/login.js
+++ b/js/codeq/login.js
@@ -25,16 +25,20 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
         jqNavBarRight = $('.nav.navbar-nav.navbar-right'),
         jqNavigationHomeBtn = $('#navigation-home'),
         jqAAILoginBtn = $('#aai-login-button'),
-        jqLoginForm = $('#login-form'),
+        jqForm = $('#login-form'),
         jqSignupBtn = $('#signup-button'),
         jqLangSelect = jqScreen.find('.lang-select'),
         jqDisabledOverlay = $('#disabled'),
-        jqLoginFailed = jqLoginForm.find('.error.failed');
+        jqMessages = jqForm.find('.error');
 
     //the loginCallbackFunction is used here and in the AAI login as well
     codeq.loginCallbackFunction = function (data) {
-        jqDisabledOverlay.css('display', 'none');
-        if (data.code !== 0) throw new Error('Login failed, code: ' + data.code + ', message: ' + data.message);
+        if (data.code === 1) {
+            throw new Error('Wrong username/password');
+        }
+        else if (data.code !== 0) {
+            throw new Error('Login failed');
+        }
 
         //nav signed in...
         $('#signed-in-title').html(data.name||data.username||data.email||'undefined');
@@ -62,14 +66,27 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
     };
 
     var loginFun = function() {
-            jqLoginFailed.hide();
+            jqMessages.hide();
+            jqDisabledOverlay.show();
             codeq.comms.connect()
                 .then(function () {
                     return codeq.comms.login($('#username').val(), $('#password').val());
                 })
                 .then(codeq.loginCallbackFunction)
-                .fail(function (reason) {
-                    jqLoginFailed.show();
+                .fail(function (error) {
+                    switch (error.message) {
+                    case 'Wrong username/password':
+                        jqForm.find('.error.wrong-user-or-pw').show();
+                        break;
+                    case 'Connection failed':
+                        jqForm.find('.error.connection-failed').show();
+                        break;
+                    default:
+                        jqForm.find('.error.login-failed').show();
+                    }
+                })
+                .finally(function () {
+                    jqDisabledOverlay.hide();
                 })
                 .done();
         };
@@ -80,14 +97,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
         'enter': function(){
             jqNavigationHomeBtn.off('click');//remove the click listener of this element here
             jqNavBarRight.css('display','none');//hide settings etc.
-            jqLoginFailed.hide();
+            jqMessages.hide();
             $('#signed-in-title').html('');
 
             codeq.samlLogin = false;//remove saml login flag
             $('.saml-login-hide').css('display','');//if we login the normal way we want to show the change password buttons. if we enter the saml login they will be hidden
 
             // setup login form
-            jqLoginForm.on('submit', function (e) {
+            jqForm.on('submit', function (e) {
                 e.preventDefault();
                 loginFun();
             });
@@ -112,7 +129,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
         },
         'exit' : function(){
             //remove the listener from the buttons specific to this page
-            jqLoginForm.off('submit');
+            jqForm.off('submit');
             jqSignupBtn.off('click');
             jqAAILoginBtn.off('click');
             jqLangSelect.off('click');
@@ -125,7 +142,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
                 e.preventDefault();
             });
             jqNavBarRight.css('display','');
-            jqLoginFailed.hide();
+            jqMessages.hide();
         }
     });
 })();
diff --git a/res/en.json b/res/en.json
index fb861c7..2c6559b 100644
--- a/res/en.json
+++ b/res/en.json
@@ -1,8 +1,10 @@
 {
   "teacher_help": "If a teacher helped you solve this problem, please click",
   "here": "here",
+  "connection_failed": "Could not connect to server.",
   "language": "Language",
   "ui_language_title": "Select the UI language.",
+  "wrong_username_or_password": "Wrong username or password.",
   "password_change_failed": "Password change failed.",
   "password_changed": "Password changed.",
   "passwords_do_not_match": "Passwords do not match.",
diff --git a/res/sl.json b/res/sl.json
index aebc87f..18e2e86 100644
--- a/res/sl.json
+++ b/res/sl.json
@@ -1,8 +1,10 @@
 {
   "teacher_help": "Če ti je pri reševanju pomagal učitelj, klikni",
   "here": "tukaj",
+  "connection_failed": "Povezava na strežnik ni uspela.",
   "language": "Jezik",
   "ui_language_title": "Izberi jezik uporabniškega vmesnika.",
+  "wrong_username_or_password": "Napačno uporabniško ime ali geslo.",
   "password_change_failed": "Sprememba gesla ni uspela.",
   "password_changed": "Geslo spremenjeno.",
   "passwords_do_not_match": "Gesli se ne ujemata.",