diff options
| -rw-r--r-- | css/codeq.css | 4 | ||||
| -rw-r--r-- | index.html | 93 | ||||
| -rw-r--r-- | 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; @@ -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'); |