moved the cahnged pass popup to its own screen and enabled the change pass btn in the profile screen

1 files changed, 28 insertions, 29 deletions

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>