From 2fe1ceebd6287ed4835798c82498834102cb7e18 Mon Sep 17 00:00:00 2001
From: Robert Zorko <robertz@gurucue.com>
Date: Wed, 14 Oct 2015 14:04:11 +0200
Subject: moved the signup to its own screen (and file)

---
 index.html             | 97 +++++++++++++++++++++++++-------------------------
 js/codeq/login.js      | 14 ++++++--
 js/codeq/navigation.js |  3 +-
 js/codeq/profile.js    | 38 --------------------
 js/codeq/signup.js     | 72 +++++++++++++++++++++++++++++++++++++
 5 files changed, 133 insertions(+), 91 deletions(-)
 create mode 100644 js/codeq/signup.js

diff --git a/index.html b/index.html
index a9e1667..3036f78 100644
--- a/index.html
+++ b/index.html
@@ -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('');
+        }
+    });
+
+})();
-- 
cgit v1.2.1