From 5dd793cdaadc0456892673ee70a04df774bae522 Mon Sep 17 00:00:00 2001
From: Timotej Lazar <timotej.lazar@fri.uni-lj.si>
Date: Fri, 26 Feb 2016 15:11:13 +0100
Subject: Improve forms

---
 css/codeq.css     |  4 +++
 index.html        | 93 ++++++++++++++++++++++++++++++++++---------------------
 js/codeq/login.js | 28 +++++++----------
 3 files changed, 73 insertions(+), 52 deletions(-)

diff --git a/css/codeq.css b/css/codeq.css
index cc39ad9..33a4c2f 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -105,6 +105,10 @@ button.navbar-toggle > span.glyphicon {
     margin: 0;
 }
 
+form {
+    margin-bottom: 0;
+}
+
 /* modal screens*/
 #screen_login, #screen_signup, #screen_change_pass, #screen_settings, #screen_upgrade_to_aai {
     padding: 15px 0;
diff --git a/index.html b/index.html
index c7fdf92..eb8f093 100644
--- a/index.html
+++ b/index.html
@@ -114,23 +114,25 @@
                                 </a>
                             </div>
                             <span data-tkey="signin_or">or</span>
-                            <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
+                            <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-form">
                                 <div class="form-group">
                                     <label class="sr-only" for="username" data-tkey="username">Username</label>
-                                    <input type="text" class="form-control" id="username" data-tkey-placeholder="username" placeholder="Username" required>
+                                    <input type="text" class="form-control" id="username"
+                                           data-tkey-placeholder="username" placeholder="Username"
+                                           required="required" />
                                 </div>
                                 <div class="form-group">
                                     <label class="sr-only" for="password" data-tkey="password">Password</label>
-                                    <input type="password" class="form-control" id="password" data-tkey-placeholder="password" placeholder="Password" required>
-                                </div>
-                                <div class="form-group">
-                                    <button class="btn btn-primary btn-block" type="button" id="submit" data-tkey="signin_button">Sign in</button>
+                                    <input type="password" class="form-control" id="password"
+                                           data-tkey-placeholder="password" placeholder="Password"
+                                           required="required" />
                                 </div>
                                 <!--div class="checkbox">
                                     <label>
                                         <input type="checkbox"> keep me logged-in
                                     </label>
                                 </div-->
+                                <button type="submit" class="btn btn-primary btn-block" id="submit" data-tkey="signin_button">Sign in</button>
                                 <div class="login-failed" data-tkey="login_failed" style="display: none;">Login failed.</div>
                             </form>
                         </div>
@@ -171,32 +173,45 @@
                             <form id="formSignUp" class="form">
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="username">Username</label>
-                                    <input class="form-control" name="username" id="modalSignUpUsername" type="text" data-tkey-placeholder="username_placeholder" placeholder="Desired username" pattern="^[a-z,A-Z,0-9,_]{5,15}$" data-valid-min="5" data-tkey-title="username_title" title="Choose a alpha-numeric username of 5-15 characters." required="">
+                                    <input class="form-control" name="username" id="modalSignUpUsername" type="text"
+                                           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" />
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="name">Display name</label>
-                                    <input class="form-control" name="name" id="modalSignUpName" type="text" data-tkey-placeholder="name_placeholder" placeholder="Desired display name" data-tkey-title="name_title" title="Choose a display name.">
+                                    <input class="form-control" name="name" id="modalSignUpName" type="text"
+                                           data-tkey-placeholder="name_placeholder" placeholder="Desired display name"
+                                           data-tkey-title="name_title" title="Choose a display name." />
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="email">E-mail</label>
-                                    <input class="form-control" name="email" id="modalSignUpEmail" type="email" data-tkey-placeholder="email" placeholder="E-mail" data-tkey-title="email_title" title="Enter a valid email address." required="">
+                                    <input class="form-control" name="email" id="modalSignUpEmail" type="email"
+                                           data-tkey-placeholder="email" placeholder="E-mail"
+                                           data-tkey-title="email_title" title="Enter a valid email address."
+                                           required="required" />
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="password">Password</label>
-                                    <input class="form-control" name="password" id="modalSignUpPassword" type="password" data-tkey-placeholder="password" placeholder="Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" 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." required="">
+                                    <input class="form-control" name="password" id="modalSignUpPassword" type="password"
+                                           data-tkey-placeholder="password" placeholder="Password"
+                                           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" />
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="password_verify">Verify (repeat password)</label>
-                                    <input class="form-control" name="verify" id="modalSignUpVerify" type="password" data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" 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." required="">
+                                    <input class="form-control" name="verify" id="modalSignUpVerify" type="password"
+                                           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" />
+                                </div>
+                                <div class="text-center">
+                                    <button type="button" class="btn btn-default" id="exit_signup_btn" data-tkey="cancel">Cancel</button>
+                                    <button type="submit" class="btn btn-primary" id="btnSignUp" data-tkey="signup_button">Sign up</button>
                                 </div>
                             </form>
                         </div>
                         <div class="panel-footer">
-                            <div class="text-center">
-                                <button class="btn btn-default" data-tkey="cancel" id="exit_signup_btn">Cancel</button>
-                                <input form="formSignUp" class="btn btn-primary" id="btnSignUp" type="submit" data-tkey-value="signup_button" value="Sign up">
-                            </div>
-                            <br>
                             <div class="text-center small">
                                 <a href="#" class="lang-select" role="button" data-lang="sl">Slovenščina</a> |
                                 <a href="#" class="lang-select" role="button" data-lang="en">English</a>
@@ -219,24 +234,29 @@
                             <form id="formChangePassword" class="form">
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="password_new">New Password</label>
-                                    <input class="form-control" name="new" id="modalChangePasswordNew" type="password" data-tkey-placeholder="password_new_placeholder" placeholder="Enter a new password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" 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." required="">
+                                    <input class="form-control" name="new" id="modalChangePasswordNew" type="password"
+                                           data-tkey-placeholder="password_new_placeholder" placeholder="Enter a new password"
+                                           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" />
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="password_verify">Verify Password</label>
-                                    <input class="form-control" name="verify" id="modalChangePasswordVerify" type="password" data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" 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." required="">
+                                    <input class="form-control" name="verify" id="modalChangePasswordVerify" type="password"
+                                           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" />
+                                </div>
+                                <div class="text-center">
+                                    <button type="button" class="btn btn-default" id="cancel_change_pass_button" data-tkey="cancel">Cancel</button>
+                                    <button type="submit" class="btn btn-primary" id="btnPasswdChange" data-tkey="change_password_button">Change password</button>
                                 </div>
                             </form>
                         </div>
-                        <div class="panel-footer text-center">
-                            <button class="btn btn-default" data-tkey="cancel" id="cancel_change_pass_button">Cancel</button>
-                            <input form="formChangePassword" class="btn btn-primary" id="btnPasswdChange" type="submit" data-tkey-value="change_password_button" value="Change password"></button>
-                        </div>
                     </div>
                 </div>
             </div>
         </div>
 
-
         <!-- upgrade account to AAI screen -->
         <div class="container" id="screen_upgrade_to_aai" style="display: none;">
             <div class="row">
@@ -253,19 +273,19 @@
                                 </div>
                                 <div class="form-group">
                                     <label class="sr-only" for="password" data-tkey="password">Password</label>
-                                    <input type="password" class="form-control" name="password" id="formUpgradeToAAIPassword" data-tkey-placeholder="password" placeholder="Password" required>
+                                    <input type="password" class="form-control" name="password" id="formUpgradeToAAIPassword"
+                                           data-tkey-placeholder="password" placeholder="Password" />
                                 </div>
                                 <div data-tkey="upgrade_to_aai_body_text_2">
                                     <p>Select <span class="badge">No</span> to do a separate account.</p>
                                 </div>
+                                <div class="text-center">
+                                    <button type="button" class="btn btn-default" id="btnUpgradeToAAINo" data-tkey="upgrade_to_aai_no_button">No, make new</button>
+                                    <button type="submit" class="btn btn-primary" id="btnUpgradeToAAIYes" data-tkey="upgrade_to_aai_yes_button">Yes, upgrade to AAI</button>
+                                </div>
                             </form>
                         </div>
                         <div class="panel-footer text-center">
-                            <div>
-                                <button class="btn btn-default" id="btnUpgradeToAAINo" data-tkey="upgrade_to_aai_no_button">No, make new</button>
-                                <input form="formUpgradeToAAI" class="btn btn-primary" id="btnUpgradeToAAIYes" type="submit" data-tkey-value="upgrade_to_aai_yes_button" value="Yes, upgrade to AAI"></button>
-                            </div>
-                            <br>
                             <div class="text-center small">
                                 <a href="#" class="lang-select" role="button" data-lang="sl">Slovenščina</a> |
                                 <a href="#" class="lang-select" role="button" data-lang="en">English</a>
@@ -473,7 +493,10 @@
                                 <div class="form-group">
                                     <span class="small" data-tkey="robot_address">Robot’s address</span>
                                     <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-tkey-data-content="robot_address_title" data-content="Set the robot's IPv4 or IPv6 address." data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
-                                    <input type="text" class="form-control" id="robot_address_input" data-tkey-placeholder="robot_address_placeholder" placeholder="IP address" pattern="^(([0-9a-f]{0,4}:){1,7}[0-9a-f]{1,4}|([0-9]{1,3}\.){3}[0-9]{1,3})$" data-tkey-title="robot_address_title" title="Set the robot's IPv4 or IPv6 address.">
+                                    <input type="text" class="form-control" id="robot_address_input"
+                                           data-tkey-placeholder="robot_address_placeholder" placeholder="IP address"
+                                           data-tkey-title="robot_address_title" title="Set the robot's IPv4 or IPv6 address."
+                                           pattern="^(([0-9a-f]{0,4}:){1,7}[0-9a-f]{1,4}|([0-9]{1,3}\.){3}[0-9]{1,3})$" />
                                 </div>
                                 <div class="form-group" id="gui_layout_select_form_group">
                                     <span class="small" data-tkey="layout_select" >Layout</span>
@@ -482,19 +505,17 @@
                                         <option value="square-layout"  data-tkey="square_layout">Square</option>
                                     </select>
                                 </div>
+                                <div class="text-center">
+                                    <button type="button" class="btn btn-default" id="settings_cancel_btn" data-tkey="settings_cancel_btn">Close</button>
+                                    <button type="submit" class="btn btn-primary" id="settings_save_btn" data-tkey="save">Save</button>
+                                </div>
                             </form>
                         </div>
-                        <div class="panel-footer text-center">
-                            <button type="button" class="btn btn-default" id="settings_cancel_btn" data-tkey="settings_cancel_btn">Close</button>
-                            <input form="settingsForm" type="submit" class="btn btn-primary" id="settings_save_btn" data-tkey-value="save" value="Save"/>
-                        </div>
                     </div>
                 </div>
             </div>
         </div>
 
-        <!-- Modals -->
-
         <!-- Covers the whole screen with a semi-transparent block, so no input events can be triggered below.
              Used as a wait screen; must be the last element in the DOM.
              It is active after load, javascript turns it off after initialization. -->
diff --git a/js/codeq/login.js b/js/codeq/login.js
index 5f6aa4c..ff217c5 100644
--- a/js/codeq/login.js
+++ b/js/codeq/login.js
@@ -25,8 +25,8 @@ 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'),
         jqSignupBtn = $('#signup_button'),
-        jqSubmitLoginBtn = $("#submit"),
         jqLangSelect = jqScreen.find('.lang-select'),
         jqDisabledOverlay = $('#disabled'),
         jqLoginFailed = jqScreen.find('.login-failed');
@@ -61,7 +61,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
         codeq.globalStateMachine.transition('language');
     };
 
-    var loginFun = function(){
+    var loginFun = function() {
             jqLoginFailed.hide();
             codeq.comms.connect()
                 .then(function () {
@@ -72,8 +72,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
                     jqLoginFailed.show();
                 })
                 .done();
-        },
-        formInputs = $('#username, #password');
+        };
 
     codeq.globalStateMachine.register('login',{
         'jqScreen': jqScreen,
@@ -87,23 +86,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
             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 the signup button
-            jqSignupBtn.on('click', function(e){
-                codeq.globalStateMachine.transition('signup');
+            // setup login form
+            jqLoginForm.on('submit', function (e) {
                 e.preventDefault();
+                loginFun();
             });
-            //setup the AAI login btn
+            // setup the AAI login btn
             jqAAILoginBtn.on('click',function(e){
                 codeq.globalStateMachine.transition('aailogin');
                 e.preventDefault();
             });
-            jqSubmitLoginBtn.on('click', loginFun);
-            formInputs.on('keyup', function (ev) {
-                if ((ev.keyCode || ev.which) == 13) {
-                    jqSubmitLoginBtn.trigger('click');
-                }
+            // setup the signup button
+            jqSignupBtn.on('click', function(e){
+                codeq.globalStateMachine.transition('signup');
+                e.preventDefault();
             });
-
             // setup language selection links
             jqLangSelect.on('click', function (e) {
                 codeq.setLang($(this).data('lang'));
@@ -115,8 +112,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
-            jqSubmitLoginBtn.off('click', loginFun);
-            formInputs.off('keyup');
+            jqLoginForm.off('submit');
             jqSignupBtn.off('click');
             jqAAILoginBtn.off('click');
             jqLangSelect.off('click');
-- 
cgit v1.2.1