summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorTimotej Lazar <timotej.lazar@fri.uni-lj.si>2016-02-26 18:10:32 +0100
committerTimotej Lazar <timotej.lazar@fri.uni-lj.si>2016-02-26 18:10:32 +0100
commit6c3e4fa5a674063e61fb92f5d9001649476c9cc0 (patch)
tree73b794ea979ac17e1166cb304b97249b1fcaacb0
parentaf6f38e8ad6bfcc5410646ee070d05f8ab0783db (diff)
Replace several alerts with friendlier messages
-rw-r--r--css/codeq.css17
-rw-r--r--index.html12
-rw-r--r--js/codeq/change_password.js17
-rw-r--r--js/codeq/login.js2
-rw-r--r--js/codeq/signup.js46
-rw-r--r--res/en.json9
-rw-r--r--res/sl.json5
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",