made login as modal with arnesaai button + modals beautified;

3 files changed, 98 insertions, 27 deletions

diff --git a/css/codeq.css b/css/codeq.css
index 138761b..2efa5b0 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -44,6 +44,32 @@ body {
     border-top-right-radius: 0;
 }
 
+/* modalLogIn */
+
+#modalLogIn{
+    min-width: 250px;
+    padding: 14px 14px 0;
+    overflow:hidden;
+    background-color:rgba(255,255,255,.8);
+}
+#modalLogIn .help-block{
+    font-size:12px
+}
+#modalLogIn .bottom{
+    background-color:rgba(255,255,255,.8);
+    border-top:1px solid #ddd;
+    clear:both;
+    padding:14px;
+}
+#modalLogIn .ssa-buttons{
+    margin-bottom: 1em;
+}
+
+#modalLogIn .form-group {
+    margin-bottom: 10px;
+}
+
+
 
 /* screen language */
 #screen_language {
diff --git a/index.html b/index.html
index 105fae4..20137a7 100644
--- a/index.html
+++ b/index.html
@@ -42,7 +42,7 @@
                         <li style="display: none;" id="navigation-prolog"><a href="">Prolog</a></li>
                     </ul>
                     <ul class="nav navbar-nav navbar-right">
-                        <p class="navbar-text" id="signed-in-title">Signed in as Franc Jožef</p>
+                        <p class="navbar-text" id="signed-in-title"></p>
                         <li class="dropdown lang-selection">
                             <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                                 <span class="lang-choice"></span>
@@ -112,7 +112,7 @@
         </div>
 
         <!-- login screen -->
-        <div class="container" id="screen_login">
+        <!--div class="container" id="screen_login">
             <form class="form-signin">
                 <h2 class="form-signin-heading">Please login</h2>
                 <div class="form-group">
@@ -123,10 +123,10 @@
                     <button class="btn btn-lg btn-default btn-block" type="button" id="submit">Login</button>
                 </div>
                 <div class="form-group">
-                    <a href="" data-dismiss="modal" data-toggle="modal" role="button" data-target="#modalSignIn">New User? Sign-in..</a>
+                    <a href="" data-dismiss="modal" data-toggle="modal" role="button" data-target="#modalSignUp">New User? Sign-up..</a>
                 </div>
             </form>
-        </div>
+        </div-->
 
 
         <!-- main screen: programming language selection, settings, etc. -->
@@ -297,63 +297,106 @@
         </div><!--container-->
 
         <!-- Modals -->
-        <div id="modalSignIn" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;">
-            <div class="modal-dialog">
+
+        <div id="modalLogIn" 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">
+                        <h3 class="text-center">Please sign in</h3>
+                    </div>
+                    <div class="modal-body">
+                        <div class="row">
+                            <div class="col-md-12">
+                                Login via
+                                <div class="ssa-buttons">
+                                    <img src="res/gumb_aaiprijava.png" style="width: 49%">
+                                </div>
+                                or
+                                <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
+                                    <div class="form-group">
+                                        <label class="sr-only" for="username">Username</label>
+                                        <input type="text" class="form-control" id="username" placeholder="Username" required>
+                                    </div>
+                                    <div class="form-group">
+                                        <label class="sr-only" for="password">Password</label>
+                                        <input type="password" class="form-control" id="password" placeholder="Password" required>
+                                        <div class="help-block text-right"><a href="#">Forgot the password?</a></div>
+                                    </div>
+                                    <div class="form-group">
+                                        <button class="btn btn-primary btn-block" data-dismiss="modal" type="button" id="submit">Sign in</button>
+                                    </div>
+                                    <div class="checkbox">
+                                        <label>
+                                            <input type="checkbox"> keep me logged-in
+                                        </label>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div><!--/modal-body-->
+                    <div class="modal-footer">
+                        <div class="text-center">
+                            New here ? <a href="#" data-dismiss="modal" data-toggle="modal" role="button" data-target="#modalSignUp"><b>Sign Up</b></a>
+                        </div>
+                    </div><!--/modal-footer-->
+                </div>
+            </div>
+        </div>
+
+
+        <div id="modalSignUp" 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>
-                        <h2 class="text-center">Sign-in</h2>
+                        <h3 class="text-center">Sign up</h3>
                     </div>
                     <div class="modal-body">
                         <form class="form" method="post">
-                            <div class="form-group">
-                                <label class="control-label">Email</label>
-                                <input class="form-control" name="email" id="inputEmail" type="email" data-ng-model="newuser.email" placeholder="email@you.com (kept private)" required="">
-                            </div>
                             <div class="form-group" bs-has-error="">
-                                <label class="control-label">Username</label>
-                                <input class="form-control" name="username" id="inputUsername" type="text" data-ng-model="newuser.username" placeholder="desired username" pattern="^[a-z,A-Z,0-9,_]{5,15}$" data-valid-min="5" title="Choose a alpha-numeric username of 5-15 characters" required="">
+                                <label class="control-label small">Username</label>
+                                <input class="form-control" name="username" id="modalSignUpUsername" type="text" placeholder="desired username" pattern="^[a-z,A-Z,0-9,_]{5,15}$" data-valid-min="5" title="Choose a alpha-numeric username of 5-15 characters" required="">
                             </div>
                             <div class="form-group">
-                                <label class="control-label">Password</label>
-                                <input class="form-control" name="password" id="inputpassword" type="password" data-ng-model="newuser.password" placeholder="password" pattern="^[a-z,A-Z,0-9,_]{6,15}$" data-valid-min="6" title="Choose a alpha-numeric password of a least 6 characters" required="">
+                                <label class="control-label small">Password</label>
+                                <input class="form-control" name="password" id="modalSignUpPassword" type="password" placeholder="password" pattern="^[a-z,A-Z,0-9,_]{6,15}$" data-valid-min="6" title="Choose a alpha-numeric password of a least 6 characters" required="">
                             </div>
                             <div class="form-group">
-                                <label class="control-label">Verify (repeat password)</label>
-                                <input class="form-control" name="verify" id="inputVerify" type="password" data-ng-model="newuser.verify" placeholder="password (again)" pattern="^[a-z,A-Z,0-9,_]{6,15}$" data-valid-min="6" title="Choose a alpha-numeric password of a least 6 characters" required="">
+                                <label class="control-label small">Verify (repeat password)</label>
+                                <input class="form-control" name="verify" id="modalSignUpVerify" type="password" placeholder="password (again)" pattern="^[a-z,A-Z,0-9,_]{6,15}$" data-valid-min="6" title="Choose a alpha-numeric password of a 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">Cancel</button>
-                        <button class="btn btn-lg btn-primary" id="btnRegister" type="submit">Sign</button>
+                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true" data-toggle="modal" data-target="#modalLogIn">Cancel</button>
+                        <button class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#modalLogIn" id="btnSignUp" type="submit">Sign up</button>
                     </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">
+            <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>
-                        <h2 class="text-center">Password Change</h2>
+                        <h3 class="text-center">Change password </h3>
                     </div>
                     <div class="modal-body">
                         <form class="form" method="post">
                             <div class="form-group">
-                                <label>New Password</label>
-                                <input class="form-control input-lg" placeholder="Enter a new password" name="new" type="password">
+                                <label class="control-label small">New Password</label>
+                                <input class="form-control" placeholder="Enter a new password" name="new" type="password">
                             </div>
                             <div class="form-group">
-                                <label>Verify Password</label>
-                                <input class="form-control input-lg" placeholder="Repeat the password again" name="verify" type="password">
+                                <label class="control-label small">Verify Password</label>
+                                <input class="form-control" placeholder="Repeat the password again" name="verify" type="password">
                             </div>
                         </form><!--/row-->
                     </div><!--/modal-body-->
                     <div class="modal-footer">
                         <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
-                        <button class="btn btn-lg btn-primary" id="btnPasswdChange" type="submit">Change</button>
+                        <button class="btn btn-primary" id="btnPasswdChange" type="submit">Change</button>
                     </div><!--/modal-footer-->
                 </div>
             </div>
diff --git a/js/codeq/login.js b/js/codeq/login.js
index f590acb..248e8c3 100644
--- a/js/codeq/login.js
+++ b/js/codeq/login.js
@@ -28,8 +28,9 @@
     };

     codeq.globalStateMachine.register('login',{

         'enter': function(){

+            $('#signed-in-title').html('');

             $("#submit").on('click', loginFun);

-            //$('#modalLogin').modal();

+            $('#modalLogIn').modal();

 

             $("#screen_login").css('display', '');

             $('#disabled').css('display', 'none');

@@ -37,6 +38,7 @@
         'exit' : function(){

             $("#submit").off('click', loginFun);

             $("#screen_login").css('display', 'none');

+            $('#signed-in-title').html('Signed in as '+$('#username').val());

             $("#password").val('');

         }

     });