diff options
| -rw-r--r-- | index.html | 97 | ||||
| -rw-r--r-- | js/codeq/login.js | 14 | ||||
| -rw-r--r-- | js/codeq/navigation.js | 3 | ||||
| -rw-r--r-- | js/codeq/profile.js | 38 | ||||
| -rw-r--r-- | js/codeq/signup.js | 72 |
5 files changed, 133 insertions, 91 deletions
@@ -125,20 +125,64 @@ </form> </div> </div> - </div><!--/modal-body--> + </div> <div class="row"><!-- class="modal-footer"--> <div class="text-center"> - <span data-tkey="signin_footer">New here ? </span><a href="#" role="button" data-dismiss="modal" data-toggle="modal" data-target="#modalSignUp"><b data-tkey="signin_footer_signup">Sign Up</b></a> + <span data-tkey="signin_footer">New here ? </span><a href="" role="button" data-dismiss="modal" data-toggle="modal" id="signup_button"> <!--data-target="#modalSignUp"--><b data-tkey="signin_footer_signup">Sign Up</b></a> </div> <br> <div class="text-center small"> <a role="button" onclick="codeq.setLang('sl')">Slovenščina</a> | <a role="button" onclick="codeq.setLang('en')">English</a> </div> - </div><!--/modal-footer--> + </div> <!--/div--> </div> </div> + <!--Sign up screen--> + <div class="container" id="screen_signup" style="display: none;"> + <div class="modal-dialog modal-sm"> + <div class="row"> + <h3 class="text-center" data-tkey="signup_header">Sign up</h3> + </div> + <div class="row"> + <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=""> + </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."> + </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=""> + </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=""> + </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=""> + </div> + </form> + </div> + <div class="row"> + <div> + <button class="btn btn-default" data-dismiss="modal" aria-hidden="true" data-toggle="modal" data-target="#modalLogIn" 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 role="button" onclick="codeq.setLang('sl')">Slovenščina</a> | <a role="button" onclick="codeq.setLang('en')">English</a> + </div> + + </div> + </div> + </div> + <!-- main screen: programming language selection, settings, etc. --> <div class="container" id="screen_language" style="text-align: center; display: none;"> <div class="row"> @@ -312,52 +356,6 @@ </div><!--container--> <!-- Modals --> - <div id="modalSignUp" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" data-keyboard="false" data-backdrop="static" style="display: none;"> - <div class="modal-dialog modal-sm"> - <div class="modal-content"> - <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true" data-toggle="modal" data-target="#modalLogIn">×</button> - <h3 class="text-center" data-tkey="signup_header">Sign up</h3> - </div> - <div class="modal-body"> - <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=""> - </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."> - </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=""> - </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=""> - </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=""> - </div> - </form><!--/row--> - </div><!--/modal-body--> - <div class="modal-footer"> - <div> - <button class="btn btn-default" data-dismiss="modal" aria-hidden="true" data-toggle="modal" data-target="#modalLogIn" data-tkey="cancel">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 role="button" onclick="codeq.setLang('sl')">Slovenščina</a> | <a role="button" onclick="codeq.setLang('en')">English</a> - </div> - - </div><!--/modal-footer--> - </div> - </div> - </div> - <div id="modalChangePassword" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;"> <div class="modal-dialog modal-sm"> <div class="modal-content"> @@ -433,6 +431,7 @@ <script src="js/codeq/prolog.js"></script> <script src="js/codeq/python.js"></script> <script src="js/codeq/robot.js"></script> + <script src="js/codeq/signup.js"></script> <script src="js/codeq/login.js"></script> <script src="js/codeq/profile.js"></script> <script src="js/codeq/language.js"></script> diff --git a/js/codeq/login.js b/js/codeq/login.js index a3158ae..53a422c 100644 --- a/js/codeq/login.js +++ b/js/codeq/login.js @@ -48,9 +48,16 @@ codeq.globalStateMachine.register('login',{ 'enter': function(){ - $('#navigation-home').off('click');//remove the click listener of this element here only - in each other state the listener should exist - $('.nav.navbar-nav.navbar-right').css('display','none'); + $('#navigation-home').off('click');//remove the click listener of this element here + $('.nav.navbar-nav.navbar-right').css('display','none');//hide settings etc. $('#signed-in-title').html(''); + + //setup the signup button + $('#signup_button').on('click', function(e){ + codeq.globalStateMachine.transition('signup'); + e.preventDefault(); + }); + $("#submit").on('click', loginFun); formInputs.on('keyup', function (ev) { if ((ev.keyCode || ev.which) == 13) { @@ -74,6 +81,9 @@ e.preventDefault(); }); $('.nav.navbar-nav.navbar-right').css('display',''); + + //remove the listener from the signup button + $('#signup_button').off('click'); } }); })(); diff --git a/js/codeq/navigation.js b/js/codeq/navigation.js index dab907a..58f0cf2 100644 --- a/js/codeq/navigation.js +++ b/js/codeq/navigation.js @@ -71,7 +71,7 @@ }, 'actualTransition': function (name) { //check if we are logged in - if we aren't we will always transition to the login state - if(!codeq.comms.getSid()){ + if(!codeq.comms.getSid() && name !== "signup"){//we can of course enter the signup state even if not logged in name = 'login';//this will cause the following code to transition to the login state instead of the original one given } @@ -85,7 +85,6 @@ }; codeq.globalStateMachine = makeGlobalStateMachine({}); - //setup all the buttons in the banner $('#navigation-home').on('click', function(e){ codeq.globalStateMachine.transition('language'); diff --git a/js/codeq/profile.js b/js/codeq/profile.js index 4723b4a..08a8883 100644 --- a/js/codeq/profile.js +++ b/js/codeq/profile.js @@ -4,44 +4,6 @@ (function(){
- $('#formSignUp').submit(function(event) {
- console.log($(this).serialize());
- var jqUsername = $("#modalSignUpUsername"),
- jqName = $("#modalSignUpName"),
- jqEmail = $("#modalSignUpEmail"),
- jqPassword = $("#modalSignUpPassword"),
- jqVerify = $("#modalSignUpVerify");
-
- if (jqPassword.val() != jqVerify.val()) {
- alert('Passwords do not match.');
- }
- 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);
-
- //back to login
- $('#modalSignUp').modal('hide');
- alert('Welcome '+ jqUsername.val() +'. Thanks for signing up.');
- $('#modalLogIn').modal('show');
- //assume user wants to sign-in with signed username
- $("#username").val(jqUsername.val());
- //clear
- jqUsername.val('');
- jqName.val('');
- jqEmail.val('');
- jqPassword.val('');
- jqVerify.val('');
- })
- .fail(function (reason) {
- codeq.log.error('Signup failed: ' + reason, reason);
- alert('Signup failed: ' + reason);
- })
- .done();
- }
- event.preventDefault(); // Prevent the form from submitting via the browser.
- });
-
$('#formChangePassword').submit(function(event) {
var jqNew = $("#modalChangePasswordNew"),
jqVerify = $("#modalChangePasswordVerify");
diff --git a/js/codeq/signup.js b/js/codeq/signup.js new file mode 100644 index 0000000..aab831f --- /dev/null +++ b/js/codeq/signup.js @@ -0,0 +1,72 @@ +/** + * Created by robert on 10/14/15. + */ +(function(){ + + var jqUsername = $("#modalSignUpUsername"), + jqName = $("#modalSignUpName"), + jqEmail = $("#modalSignUpEmail"), + jqPassword = $("#modalSignUpPassword"), + jqVerify = $("#modalSignUpVerify"); + + codeq.globalStateMachine.register('signup',{ + 'enter': function(){ + $('#navigation-home').off('click');//remove the click listener of this element here + $('.nav.navbar-nav.navbar-right').css('display','none');//hide settings etc. + $('#signed-in-title').html(''); + $("#screen_signup").css('display', ''); + $('#disabled').css('display', 'none'); + $('#exit_signup_btn').on('click',function(){ + codeq.globalStateMachine.transition('login'); + }); + + //prepare listener for successfull signup + $('#formSignUp').on('submit',function(event) { + console.log($(this).serialize()); + if (jqPassword.val() != jqVerify.val()) { + alert('Passwords do not match.'); + } + 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); + + }) + .fail(function (reason) { + codeq.log.error('Signup failed: ' + reason, reason); + alert('Signup failed: ' + reason); + }) + .done(); + } + event.preventDefault(); // Prevent the form from submitting via the browser. + }); + }, + 'exit' : function(){ + $("#screen_signup").css('display', 'none'); + //re-enable the click listener + $('#navigation-home').on('click', function(e){ + codeq.globalStateMachine.transition('language'); + e.preventDefault(); + }); + //disable listeners on stuff from this page only + $('#exit_signup_btn').off('click'); + $('#formSignUp').off('submit'); + //show the menu buttons + $('.nav.navbar-nav.navbar-right').css('display',''); + + jqUsername.val(''); + jqName.val(''); + jqEmail.val(''); + jqPassword.val(''); + jqVerify.val(''); + } + }); + +})(); |