diff options
| -rw-r--r-- | css/codeq.css | 17 | ||||
| -rw-r--r-- | index.html | 12 | ||||
| -rw-r--r-- | js/codeq/change_password.js | 17 | ||||
| -rw-r--r-- | js/codeq/login.js | 2 | ||||
| -rw-r--r-- | js/codeq/signup.js | 46 | ||||
| -rw-r--r-- | res/en.json | 9 | ||||
| -rw-r--r-- | 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; @@ -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", |