From 6c3e4fa5a674063e61fb92f5d9001649476c9cc0 Mon Sep 17 00:00:00 2001
From: Timotej Lazar <timotej.lazar@fri.uni-lj.si>
Date: Fri, 26 Feb 2016 18:10:32 +0100
Subject: Replace several alerts with friendlier messages

---
 css/codeq.css               | 17 ++++++++++++-----
 index.html                  | 12 +++++++++---
 js/codeq/change_password.js | 17 ++++++++++-------
 js/codeq/login.js           |  2 +-
 js/codeq/signup.js          | 46 +++++++++++++++++++++++++++++++--------------
 res/en.json                 |  9 ++++++---
 res/sl.json                 |  5 ++++-
 7 files changed, 74 insertions(+), 34 deletions(-)

diff --git a/css/codeq.css b/css/codeq.css
index 87f599c..3ae5871 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -110,6 +110,17 @@ form {
     margin-bottom: 0;
 }
 
+form .error {
+    color: red;
+}
+
+form .success {
+    color: green;
+    margin-top: 1em;
+    margin-bottom: 0.5em;
+    text-align: center;
+}
+
 div#disabled {
     background-color: rgba(0, 0, 0, 0.7);
     cursor: wait;
@@ -121,14 +132,10 @@ div#disabled {
 }
 
 /* modal screens*/
-#screen-login, #screen-signup, #screen-change-pass, #screen-settings, #screen-upgrade-to-aai {
+#screen-login, #screen-signup, #screen-change-password, #screen-settings, #screen-upgrade-to-aai {
     padding: 15px 0;
 }
 
-#screen-login div.login-failed {
-    color: red;
-}
-
 /* screen language */
 #screen-language {
     margin-top: 4em;
diff --git a/index.html b/index.html
index 3585499..9675f40 100644
--- a/index.html
+++ b/index.html
@@ -107,7 +107,7 @@
                             <h3 class="text-center" data-tkey="signin_header">Please sign in</h3>
                         </div>
                         <div class="panel-body">
-                            <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-form">
+                            <form id="login-form" class="form" role="form" method="post" action="login" accept-charset="UTF-8">
                                 <div class="form-group">
                                     <label class="sr-only" for="username" data-tkey="username">Username</label>
                                     <input type="text" class="form-control" id="username"
@@ -121,7 +121,7 @@
                                            required="required" />
                                 </div>
                                 <button type="submit" class="btn btn-primary btn-block" data-tkey="signin_button">Sign in</button>
-                                <div class="login-failed" data-tkey="login_failed" style="display: none;">Login failed.</div>
+                                <span class="error failed" data-tkey="login_failed" style="display: none;">Login failed.</span>
                             </form>
                         </div>
                         <div class="panel-body">
@@ -173,6 +173,7 @@
                                            data-tkey-placeholder="username_placeholder" placeholder="Desired username"
                                            data-tkey-title="username_title" title="Choose a alpha-numeric username of 5-15 characters."
                                            pattern="^[a-z,A-Z,0-9,_]{5,15}$" data-valid-min="5" required="required" />
+                                    <span class="error username-exists" data-tkey="username_already_exists" style="display: none;">This username already exists.</span>
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="name">Display name</label>
@@ -200,11 +201,15 @@
                                            data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again"
                                            data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters."
                                            pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" required="required" />
+                                    <span class="error mismatch" data-tkey="passwords_do_not_match" style="display: none;">Passwords do not match.</span>
                                 </div>
                                 <div class="text-center">
                                     <button type="button" class="btn btn-default" id="signup-cancel" data-tkey="cancel">Cancel</button>
                                     <button type="submit" class="btn btn-primary" data-tkey="signup_button">Sign up</button>
                                 </div>
+                                <div class="success" class="text-center">
+                                    <span data-tkey="welcome">Welcome</span>, <span class="username"></span>!
+                                </div>
                             </form>
                         </div>
                         <div class="panel-footer">
@@ -219,7 +224,7 @@
         </div>
 
         <!-- change password screen -->
-        <div class="container" id="screen-change-pass" style="display: none;">
+        <div class="container" id="screen-change-password" style="display: none;">
             <div class="row">
                 <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                     <div class="panel panel-default">
@@ -241,6 +246,7 @@
                                            data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again"
                                            data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters."
                                            pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" required="required" />
+                                    <span class="error mismatch" data-tkey="passwords_do_not_match" style="display: none;">Passwords do not match.</span>
                                 </div>
                                 <div class="text-center">
                                     <button type="button" class="btn btn-default" id="change-password-cancel" data-tkey="cancel">Cancel</button>
diff --git a/js/codeq/change_password.js b/js/codeq/change_password.js
index 562f4b2..6311764 100644
--- a/js/codeq/change_password.js
+++ b/js/codeq/change_password.js
@@ -22,24 +22,26 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
  */
 (function(){
     "use strict";
-    var jqScreen = $('#screen-change-pass'),
+    var jqScreen = $('#screen-change-password'),
+        jqChangePassForm = $('#change-password-form'),
         jqNew = $('#change-password-new'),
         jqVerify = $('#change-password-verify'),
         jqCancelBtn = $('#change-password-cancel'),
-        jqChangePassForm = $('#change-password-form');
+        jqErrorMismatch = jqChangePassForm.find('.error.mismatch');
 
     codeq.globalStateMachine.register('changePassword',{
         'jqScreen': jqScreen,
         'isModal': true,
 
-        'enter': function(){
+        'enter': function() {
+            jqErrorMismatch.hide();
             jqCancelBtn.on('click',function(){
                 history.back();//forces a transition to the previous state
             });
-            jqChangePassForm.on('submit',function(event) {
-
+            jqChangePassForm.on('submit', function (e) {
+                jqErrorMismatch.hide();
                 if (jqNew.val() != jqVerify.val()) {
-                    alert('Passwords do not match.');
+                    jqErrorMismatch.show();
                 }
                 else {
                     codeq.comms.changePassword(jqNew.val())
@@ -54,7 +56,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
                         })
                         .done();
                 }
-                event.preventDefault(); // Prevent the form from submitting via the browser.
+                e.preventDefault(); // Prevent the form from submitting via the browser.
             });
 
 
@@ -62,6 +64,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
             $('#disabled').css('display', 'none');
         },
         'exit' : function(){
+            jqErrorMismatch.hide();
             jqChangePassForm.off('submit');
             jqCancelBtn.off('click');
             jqScreen.css('display', 'none');
diff --git a/js/codeq/login.js b/js/codeq/login.js
index 9b87762..bf47917 100644
--- a/js/codeq/login.js
+++ b/js/codeq/login.js
@@ -29,7 +29,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
         jqSignupBtn = $('#signup-button'),
         jqLangSelect = jqScreen.find('.lang-select'),
         jqDisabledOverlay = $('#disabled'),
-        jqLoginFailed = jqScreen.find('.login-failed');
+        jqLoginFailed = jqLoginForm.find('.error.failed');
 
     //the loginCallbackFunction is used here and in the AAI login as well
     codeq.loginCallbackFunction = function (data) {
diff --git a/js/codeq/signup.js b/js/codeq/signup.js
index d41f1d5..7f28e9f 100644
--- a/js/codeq/signup.js
+++ b/js/codeq/signup.js
@@ -31,12 +31,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
         jqExitSignUpBtn = $('#signup-cancel'),
         jqLangSelect = jqScreen.find('.lang-select'),
         jqNavBarRight = $('.nav.navbar-nav.navbar-right'),
-        jqNavigationHomeBtn = $('#navigation-home');
+        jqNavigationHomeBtn = $('#navigation-home'),
+        jqMessages = jqFormSignUp.find('.error,.success'),
+        redirectTimeout = null;
 
     codeq.globalStateMachine.register('signup',{
         'jqScreen': jqScreen,
 
-        'enter': function(){
+        'enter': function() {
+            jqMessages.hide();
             jqNavigationHomeBtn.off('click');//remove the click listener of this element here
             jqNavBarRight.css('display','none');//hide settings etc.
             $('#signed-in-title').html('');
@@ -47,22 +50,32 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
             });
 
             //prepare listener for successfull signup
-            jqFormSignUp.on('submit',function(event) {
+            jqFormSignUp.on('submit', function(e) {
+                jqMessages.hide();
                 if (jqPassword.val() != jqVerify.val()) {
-                    alert('Passwords do not match.');
+                    jqFormSignUp.find('.error.mismatch').show();
                 }
                 else {
                     codeq.comms.signup(jqUsername.val(), jqName.val(), jqEmail.val(), jqPassword.val())
                         .then(function (data) {
-                            if (data.code !== 0) throw new Error('Signup failed, code: ' + data.code + ', message: ' + data.message);
-
-                            var newUsername = jqUsername.val();//saving before transition (which will reset the value of the field)
-                            //back to login
-                            codeq.globalStateMachine.transition('login');
-                            alert('Welcome '+ newUsername +'. Thanks for signing up.');
-                            //assume user wants to sign-in with signed username
-                            $("#username").val(newUsername);
-
+                            var jqSuccess = jqFormSignUp.find('.success'),
+                                username = jqUsername.val();
+                            switch (data.code) {
+                            case 0:  // everything OK
+                                $("#username").val(username);
+                                jqSuccess.find('.username').text(username);
+                                jqSuccess.show();
+                                // back to login after short pause
+                                redirectTimeout = setTimeout(function() {
+                                    codeq.globalStateMachine.transition('login');
+                                }, 2000);
+                                break;
+                            case 10:  // username exists
+                                jqFormSignUp.find('.error.username-exists').show();
+                                break;
+                            default:
+                                throw new Error(data.message);
+                            }
                         })
                         .fail(function (reason) {
                             codeq.log.error('Signup failed: ' + reason, reason);
@@ -70,7 +83,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
                         })
                         .done();
                 }
-                event.preventDefault(); // Prevent the form from submitting via the browser.
+                e.preventDefault(); // Prevent the form from submitting via the browser.
             });
 
             // setup language selection links
@@ -80,6 +93,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
             });
         },
         'exit' : function(){
+            if (redirectTimeout !== null) {
+                clearTimeout(redirectTimeout);
+                redirectTimeout = null;
+            }
+            jqMessages.hide();
             jqScreen.css('display', 'none');
             //re-enable the click listener
             jqNavigationHomeBtn.on('click', function(e){
diff --git a/res/en.json b/res/en.json
index be6c330..4f5e89d 100644
--- a/res/en.json
+++ b/res/en.json
@@ -1,12 +1,15 @@
 {
   "language": "Language",
   "ui_language_title": "Select the UI language.",
+  "passwords_do_not_match": "Passwords do not match.",
   "robot_address": "Robot’s IP address",
   "robot_address_placeholder": "IP address",
-  "robot_address_title": "Set the robot's IPv4 or IPv6 address.",
+  "robot_address_title": "Set the robot’s IPv4 or IPv6 address.",
   "settings": "User settings",
   "save": "Save",
+  "username_already_exists": "This username already exists.",
   "your_solutions": "Your solutions",
+  "welcome": "Welcome",
   "problem_list": "Problems",
   "python": "Python",
   "prolog": "Prolog",
@@ -19,7 +22,7 @@
   "btn_test": "Test",
   "btn_run": "Run",
   "btn_stop": "Stop",
-  "btn_more": "More...",
+  "btn_more": "More…",
   "instructions": "Instructions",
   "hints": "Hints",
   "code": "Code",
@@ -40,7 +43,7 @@
   "username_placeholder": "Desired username",
   "name_placeholder" : "Desired display name",
   "password_verify": "Verify password",
-  "password_verify_placeholder": "Repeat the password again",
+  "password_verify_placeholder": "Repeat the password",
   "username_title": "Choose a alpha-numeric username of 5-15 characters.",
   "name_title": "Choose a display name.",
   "email_title": "Enter a valid email address.",
diff --git a/res/sl.json b/res/sl.json
index 78646f9..f3af40c 100644
--- a/res/sl.json
+++ b/res/sl.json
@@ -1,12 +1,15 @@
 {
   "language": "Jezik",
   "ui_language_title": "Izberi jezik uporabniškega vmesnika.",
+  "passwords_do_not_match": "Gesli se ne ujemata.",
   "robot_address": "Robotov naslov IP",
   "robot_address_placeholder": "Naslov IP",
   "robot_address_title": "Vnesi IPv4 ali IPv6 naslov robota.",
   "settings": "Uporabniške nastavitve",
   "save": "Shrani",
+  "username_already_exists": "To uporabniško ime že obstaja.",
   "your_solutions": "Tvoje rešitve",
+  "welcome": "Pozdravljen/a",
   "problem_list": "Naloge",
   "python": "Python",
   "prolog": "Prolog",
@@ -19,7 +22,7 @@
   "btn_test": "Testiraj",
   "btn_run": "Zaženi",
   "btn_stop": "Ustavi",
-  "btn_more": "Več...",
+  "btn_more": "Več…",
   "instructions": "Navodila",
   "hints": "Namigi",
   "code": "Program",
-- 
cgit v1.2.1