moved the signup to its own screen (and file)

1 files changed, 48 insertions, 49 deletions

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>