From 751ee468a0f996da42bccc65a9dfee5a7b243352 Mon Sep 17 00:00:00 2001
From: Robert Zorko <robertz@gurucue.com>
Date: Wed, 14 Oct 2015 15:29:12 +0200
Subject: moved the cahnged pass popup to its own screen and enabled the change
 pass btn in the profile screen

---
 index.html                  | 57 ++++++++++++++++++++++-----------------------
 js/codeq/change_password.js | 50 +++++++++++++++++++++++++++++++++++++++
 js/codeq/login.js           | 11 +++++----
 js/codeq/navigation.js      |  4 ++++
 js/codeq/profile.js         | 30 ++++--------------------
 js/codeq/signup.js          | 22 ++++++++++-------
 6 files changed, 107 insertions(+), 67 deletions(-)
 create mode 100644 js/codeq/change_password.js

diff --git a/index.html b/index.html
index 3036f78..ae7ff38 100644
--- a/index.html
+++ b/index.html
@@ -52,7 +52,7 @@
                                 <li id="navigation-logout"><a href="#" data-tkey="logout">Logout</a></li>
                                 <li id="navigation-profile"><a href="#" data-tkey="profile">Profile</a></li>
                                 <li role="separator" class="divider"></li>
-                                <li><a href="#" data-toggle="modal" data-target="#modalChangePassword" data-tkey="change_pass">Change password</a></li>
+                                <li><a href="#" data-toggle="modal" data-target="#modalChangePassword" data-tkey="change_pass" id="change-password">Change password</a></li>
                             </ul>
                         </li>
                         <li class="dropdown" id="settings_dropdown_menu">
@@ -183,6 +183,31 @@
             </div>
         </div>
 
+        <!-- change password screen -->
+        <div class="container" id="screen_change_pass" style="display: none;">
+            <div class="modal-dialog modal-sm">
+                <div class="row">
+                    <h3 class="text-center" data-tkey="change_password_header">Change password </h3>
+                </div>
+                <div class="row">
+                    <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="">
+                        </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="">
+                        </div>
+                    </form>
+                </div>
+                <div class="row">
+                    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true" 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>
+
         <!-- main screen: programming language selection, settings, etc. -->
         <div class="container" id="screen_language" style="text-align: center; display: none;">
             <div class="row">
@@ -329,7 +354,7 @@
             <h2>
                 Profile
                 <div class="btn-group btn-group-xs hidden-md pull-right">
-                    <a href="" data-toggle="modal" data-target="#modalChangePassword" class="btn btn-default" data-tkey="change_pass">Change Password</a>
+                    <a href="" data-toggle="modal" data-target="#modalChangePassword" class="btn btn-default" data-tkey="change_pass" id="change_pass_profile">Change Password</a>
                     <a href="#" class="btn btn-default" id="btnProfileGoBack" onclick="history.back()">Go back</a>
                 </div>
             </h2>
@@ -356,33 +381,6 @@
         </div><!--container-->
 
         <!-- Modals -->
-        <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">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-                        <h3 class="text-center" data-tkey="change_password_header">Change password </h3>
-                    </div>
-                    <div class="modal-body">
-                        <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="">
-                            </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="">
-                            </div>
-                        </form><!--/row-->
-                    </div><!--/modal-body-->
-                    <div class="modal-footer">
-                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true" data-tkey="cancel">Cancel</button>
-                        <input form="formChangePassword" class="btn btn-primary" id="btnPasswdChange" type="submit" data-tkey-value="change_password_button" value="Change password"></button>
-                    </div><!--/modal-footer-->
-                </div>
-            </div>
-        </div>
-
         <div id="modalAAI" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" data-keyboard="false" data-backdrop="static" style="display: none;">
             <div class="modal-dialog">
                 <div class="modal-content">
@@ -433,6 +431,7 @@
         <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/change_password.js"></script>
         <script src="js/codeq/profile.js"></script>
         <script src="js/codeq/language.js"></script>
         <script src="js/codeq/problem_list.js"></script>
diff --git a/js/codeq/change_password.js b/js/codeq/change_password.js
new file mode 100644
index 0000000..c08c2d2
--- /dev/null
+++ b/js/codeq/change_password.js
@@ -0,0 +1,50 @@
+/**
+ * Created by robert on 10/14/15.
+ */
+(function(){
+
+    var jqNew = $("#modalChangePasswordNew"),
+        jqVerify = $("#modalChangePasswordVerify"),
+        jqCancelBtn = $("#cancel_change_pass_button"),
+        jqChangePassForm = $('#formChangePassword');
+
+    codeq.globalStateMachine.register('changePassword',{
+        'enter': function(){
+            jqCancelBtn.on('click',function(){
+                history.back();//forces a transition to the previous state
+            });
+            jqChangePassForm.on('submit',function(event) {
+
+                if (jqNew.val() != jqVerify.val()) {
+                    alert('Passwords do not match.');
+                }
+                else {
+                    codeq.comms.changePassword(jqNew.val())
+                        .then(function (data) {
+                            if (data.code !== 0) throw new Error('Password change failed, code: ' + data.code + ', message: ' + data.message);
+                            alert('Password changed.');
+                            history.back();//force to return to previous state
+                        })
+                        .fail(function (reason) {
+                            codeq.log.error('Password change failed: ' + reason, reason);
+                            alert('Password change failed: ' + reason);
+                        })
+                        .done();
+                }
+                event.preventDefault(); // Prevent the form from submitting via the browser.
+            });
+
+
+            $("#screen_change_pass").css('display', '');
+            $('#disabled').css('display', 'none');
+        },
+        'exit' : function(){
+            jqChangePassForm.off('submit');
+            jqCancelBtn.off('click');
+            $("#screen_change_pass").css('display', 'none');
+            jqNew.val('');
+            jqVerify.val('');
+        }
+    });
+
+})();
diff --git a/js/codeq/login.js b/js/codeq/login.js
index 53a422c..29dd87b 100644
--- a/js/codeq/login.js
+++ b/js/codeq/login.js
@@ -3,6 +3,9 @@
  */
 
 (function(){
+    var jqNavBarRight = $('.nav.navbar-nav.navbar-right'),
+        jqNavigationHomeBtn = $('#navigation-home');
+
     var loginFun = function(){
             $('#disabled').css('display', '');
             $('#disabled').css('cursor', 'wait');
@@ -48,8 +51,8 @@
 
     codeq.globalStateMachine.register('login',{
         '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.
+            jqNavigationHomeBtn.off('click');//remove the click listener of this element here
+            jqNavBarRight.css('display','none');//hide settings etc.
             $('#signed-in-title').html('');
 
             //setup the signup button
@@ -76,11 +79,11 @@
             $('#signed-in-title').html($('#username').val());
             $("#password").val('');
             //re-enable the click listener
-            $('#navigation-home').on('click', function(e){
+            jqNavigationHomeBtn.on('click', function(e){
                 codeq.globalStateMachine.transition('language');
                 e.preventDefault();
             });
-            $('.nav.navbar-nav.navbar-right').css('display','');
+            jqNavBarRight.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 58f0cf2..9b7a8f7 100644
--- a/js/codeq/navigation.js
+++ b/js/codeq/navigation.js
@@ -126,5 +126,9 @@
         codeq.globalStateMachine.transition('profile');
         e.preventDefault();//prevent this since we'll trigger a page reload otherwise
     });
+    $('#change-password').on('click', function(e){
+        codeq.globalStateMachine.transition('changePassword');
+        e.preventDefault();//prevent this since we'll trigger a page reload otherwise
+    });
 
 })();
diff --git a/js/codeq/profile.js b/js/codeq/profile.js
index 08a8883..3f4a274 100644
--- a/js/codeq/profile.js
+++ b/js/codeq/profile.js
@@ -4,31 +4,7 @@
 
 (function(){
 
-    $('#formChangePassword').submit(function(event) {
-        var jqNew = $("#modalChangePasswordNew"),
-            jqVerify = $("#modalChangePasswordVerify");
-
-        if (jqNew.val() != jqVerify.val()) {
-            alert('Passwords do not match.');
-        }
-        else {
-            codeq.comms.changePassword(jqNew.val())
-                .then(function (data) {
-                    if (data.code !== 0) throw new Error('Password change failed, code: ' + data.code + ', message: ' + data.message);
-
-                    $('#modalChangePassword').modal('hide');
-                    jqNew.val('');
-                    jqVerify.val('');
-                    alert('Password changed.');
-                })
-                .fail(function (reason) {
-                    codeq.log.error('Password change failed: ' + reason, reason);
-                    alert('Password change failed: ' + reason);
-                })
-                .done();
-        }
-        event.preventDefault(); // Prevent the form from submitting via the browser.
-    });
+    var jqBtnChangePass = $("#change_pass_profile");
 
     codeq.profile = {
     };
@@ -74,9 +50,13 @@
                     alert('GetUserStat failed: ' + reason);
                 })
                 .done();
+            jqBtnChangePass.on('click',function(){
+                codeq.globalStateMachine.transition('changePassword');
+            });
         },
         'exit' : function(){
             $("#screen_profile").css('display', 'none');
+            jqBtnChangePass.off('click');
         }
     });
 })();
\ No newline at end of file
diff --git a/js/codeq/signup.js b/js/codeq/signup.js
index aab831f..bafd690 100644
--- a/js/codeq/signup.js
+++ b/js/codeq/signup.js
@@ -7,21 +7,25 @@
         jqName = $("#modalSignUpName"),
         jqEmail = $("#modalSignUpEmail"),
         jqPassword = $("#modalSignUpPassword"),
-        jqVerify = $("#modalSignUpVerify");
+        jqVerify = $("#modalSignUpVerify"),
+        jqFormSignUp = $('#formSignUp'),
+        jqExitSignUpBtn = $('#exit_signup_btn'),
+        jqNavBarRight = $('.nav.navbar-nav.navbar-right'),
+        jqNavigationHomeBtn = $('#navigation-home');
 
     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.
+            jqNavigationHomeBtn.off('click');//remove the click listener of this element here
+            jqNavBarRight.css('display','none');//hide settings etc.
             $('#signed-in-title').html('');
             $("#screen_signup").css('display', '');
             $('#disabled').css('display', 'none');
-            $('#exit_signup_btn').on('click',function(){
+            jqExitSignUpBtn.on('click',function(){
                 codeq.globalStateMachine.transition('login');
             });
 
             //prepare listener for successfull signup
-            $('#formSignUp').on('submit',function(event) {
+            jqFormSignUp.on('submit',function(event) {
                 console.log($(this).serialize());
                 if (jqPassword.val() != jqVerify.val()) {
                     alert('Passwords do not match.');
@@ -51,15 +55,15 @@
         'exit' : function(){
             $("#screen_signup").css('display', 'none');
             //re-enable the click listener
-            $('#navigation-home').on('click', function(e){
+            jqNavigationHomeBtn.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');
+            jqExitSignUpBtn.off('click');
+            jqFormSignUp.off('submit');
             //show the menu buttons
-            $('.nav.navbar-nav.navbar-right').css('display','');
+            jqNavBarRight.css('display','');
 
             jqUsername.val('');
             jqName.val('');
-- 
cgit v1.2.1