logout, sign in + change password modals, setting drop-down, profile screen

6 files changed, 219 insertions, 43 deletions

diff --git a/css/codeq.css b/css/codeq.css
index 153e870..138761b 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -109,18 +109,6 @@ body {
         min-height: 100%; height: 100%;
     }
 
-    /* focus on 1st block */
-    .quadrants.block1 > * > .block { min-width: 22%; width: 22%; }
-    .quadrants.block1 > * > .block.block1 { min-width: 34%; width: 34%; }
-    /* focus on 2nd block */
-    .quadrants.block2 > * > .block { min-width: 22%; width: 22%; }
-    .quadrants.block2 > * > .block.block2 { min-width: 34%; width: 34%; }
-    /* focus on 3rd block */
-    .quadrants.block3 > * > .block { min-width: 22%; width: 22%; }
-    .quadrants.block3 > * > .block.block3 { min-width: 34%; width: 34%; }
-    /* focus on 4th block */
-    .quadrants.block4 > * > .block { min-width: 22%; width: 22%; }
-    .quadrants.block4 > * > .block.block4 { min-width: 34%; width: 34%; }
 }
 
 /* md */
@@ -135,26 +123,6 @@ body {
         min-height: 50%; height: 50%;
     }
 
-    /* focus on 1st block */
-    .quadrants.block1 > * > .block1 { min-height: 60%; height: 60%; min-width: 60%; width: 60%; }
-    .quadrants.block1 > * > .block2 { min-height: 60%; height: 60%; min-width: 40%; width: 40%; }
-    .quadrants.block1 > * > .block3 { min-height: 40%; height: 40%; min-width: 60%; width: 60%; }
-    .quadrants.block1 > * > .block4 { min-height: 40%; height: 40%; min-width: 40%; width: 40%; }
-    /* focus on 2nd block */
-    .quadrants.block2 > * > .block1 { min-height: 60%; height: 60%; min-width: 40%; width: 40%; }
-    .quadrants.block2 > * > .block2 { min-height: 60%; height: 60%; min-width: 60%; width: 60%; }
-    .quadrants.block2 > * > .block3 { min-height: 40%; height: 40%; min-width: 40%; width: 40%; }
-    .quadrants.block2 > * > .block4 { min-height: 40%; height: 40%; min-width: 60%; width: 60%; }
-    /* focus on 3rd block */
-    .quadrants.block3 > * > .block1 { min-height: 40%; height: 40%; min-width: 60%; width: 60%; }
-    .quadrants.block3 > * > .block2 { min-height: 40%; height: 40%; min-width: 40%; width: 40%; }
-    .quadrants.block3 > * > .block3 { min-height: 60%; height: 60%; min-width: 60%; width: 60%; }
-    .quadrants.block3 > * > .block4 { min-height: 60%; height: 60%; min-width: 40%; width: 40%; }
-    /* focus on 4th block */
-    .quadrants.block4 > * > .block1 { min-height: 40%; height: 40%; min-width: 40%; width: 40%; }
-    .quadrants.block4 > * > .block2 { min-height: 40%; height: 40%; min-width: 60%; width: 60%; }
-    .quadrants.block4 > * > .block3 { min-height: 60%; height: 60%; min-width: 40%; width: 40%; }
-    .quadrants.block4 > * > .block4 { min-height: 60%; height: 60%; min-width: 60%; width: 60%; }
 }
 
 /* sm */
diff --git a/index.html b/index.html
index 2299c2d..105fae4 100644
--- a/index.html
+++ b/index.html
@@ -54,12 +54,57 @@
                                 <span class="glyphicon glyphicon glyphicon-user"></span>
                             </a>
                             <ul class="dropdown-menu">
-                                <li><a href="#">Profile</a></li>
-                                <li><a href="#">Login or Signup</a></li>
-                                <li><a href="#">Logout</a></li>
+                                <li id="navigation-logout"><a href="#">Logout</a></li>
+                                <li id="navigation-profile"><a href="#">Profile</a></li>
+                                <li role="separator" class="divider"></li>
+                                <li><a href="#" data-toggle="modal" data-target="#modalChangePassword">Change password</a></li>
                             </ul>
                         </li>
-                        <li><a href="#"><span class="glyphicon glyphicon glyphicon-wrench" aria-hidden="true"></span></a></li>
+                        <li class="dropdown">
+                            <a href="" class="dropdown-toggle" data-toggle="dropdown" id="settingsTrigger" title="Settings, options..." aria-expanded="true"><span class="glyphicon glyphicon glyphicon-wrench" aria-hidden="true"></span></a>
+                            <div class="dropdown-menu" style="background-color: #fff">
+                                <form class="form col-sm-12">
+                                    <div class="form-group">
+                                        <span class="small">Language</span>
+                                        <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-content="<span class='small'>Select the UI language.</span>" data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
+                                        <select class="form-control">
+                                            <option value="sl">Slovensko</option>
+                                            <option value="en">English</option>
+                                            <option value="d">Dolgooooooooooooooooooooooooooooooooooooooooooooooo</option>
+                                        </select>
+                                    </div>
+                                    <div class="form-group">
+                                        <span class="small">
+                                            Language
+                                        </span>
+                                        <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-content="<span class='small'>Select the UI language.</span>" data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
+                                        <div>
+                                            <div class="radio">
+                                                <label>
+                                                    <input name="lang" value="en" type="radio">English
+                                                </label>
+                                            </div>
+                                            <div class="radio">
+                                                <label>
+                                                    <input name="lang" value="sl" type="radio">Slovensko
+                                                </label>
+                                            </div>
+                                            <div class="radio">
+                                                <label>
+                                                    <input name="lang" value="d" type="radio">Dolgooooooooooooooooooooooooooooooooooooooooooooooo
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="form-group">
+                                        <div class="text-right">
+                                            <button type="button" class="btn btn-default" data-target="settingsDropdown" data-toggle="dropdown">Close</button>
+                                            <button type="button" class="btn btn-primary" data-target="settingsDropdown" data-toggle="dropdown">Save</button>
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                        </li>
                     </ul>
                 </div><!--/.nav-collapse -->
 
@@ -70,14 +115,20 @@
         <div class="container" id="screen_login">
             <form class="form-signin">
                 <h2 class="form-signin-heading">Please login</h2>
-                <label for="username" class="sr-only">Username</label>
-                <input type="text" id="username" class="form-control" placeholder="Username" required="" autofocus="">
-                <label for="password" class="sr-only">Password</label>
-                <input type="password" id="password" class="form-control" placeholder="Password" required="">
-                <button class="btn btn-lg btn-default btn-block" type="button" id="submit">Login</button>
+                <div class="form-group">
+                    <label for="username" class="sr-only">Username</label>
+                    <input type="text" id="username" class="form-control" placeholder="Username" required="" autofocus="">
+                    <label for="password" class="sr-only">Password</label>
+                    <input type="password" id="password" class="form-control" placeholder="Password" required="">
+                    <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>
+                </div>
             </form>
         </div>
 
+
         <!-- main screen: programming language selection, settings, etc. -->
         <div class="container" id="screen_language" style="text-align: center; display: none;">
             <div class="row">
@@ -164,6 +215,150 @@
             </div><!--/row-->
         </div><!--container-->
 
+        <!-- problem screen: profile -->
+        <div class="container-fluid" id="screen_profile" style="display: none;">
+            <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">Change Password</a>
+                    <a href="#" class="btn btn-default">Go back</a>
+                </div>
+            </h2>
+            <hr>
+            <div class="row">
+                <div class="col-lg-3 col-md-4">
+                    <div class="panel panel-default">
+                        <div class="panel-heading">
+                            Overview
+                        </div>
+                        <ul class="list-group small">
+                            <li class="list-group-item text-right"><span class="pull-left"><strong>Username</strong></span>markopusnik</li>
+                            <li class="list-group-item text-right"><span class="pull-left"><strong>Real name</strong></span>Marko Pušnik</li>
+                            <li class="list-group-item text-right"><span class="pull-left"><strong>Joined</strong></span>Sep 29, 2015</li>
+                            <li class="list-group-item text-right"><span class="pull-left"><strong>Last seen</strong></span>1 hour ago</li>
+                        </ul>
+                    </div>
+
+                    <div class="panel panel-default">
+                        <div class="panel-heading">
+                            Statistics
+                        </div>
+                        <ul class="list-group small">
+                            <li class="list-group-item"><strong>Points</strong> <span class="label label-default pull-right">87</span></li>
+                            <li class="list-group-item"><strong>Prolog</strong> <span class="label label-default pull-right">10</span></li>
+                            <li class="list-group-item"><strong>Python</strong> <span class="label label-default pull-right">10</span></li>
+                            <li class="list-group-item"><strong>Robot</strong> <span class="label label-default pull-right">10</span></li>
+                        </ul>
+                    </div>
+                </div><!--/col-3-->
+
+                <div class="col-lg-9 col-md-8">
+                    <ul class="nav nav-tabs" id="profileTab">
+                        <li class="active"><a href="#" class="text-primary" data-target="#profileSettings" data-toggle="tab">Edit Profile</a></li>
+                        <li><a href="#" class="text-primary" data-target="#profile2" data-toggle="tab">Neki</a></li>
+                    </ul>
+                    <div class="tab-content">
+                        <div class="tab-pane active" id="profileSettings">
+                            <br>
+                            <form class="form">
+                                <div class="col-lg-6">
+                                    <div class="form-group">
+                                        <label><h4>Username</h4></label>
+                                        <input type="text" class="form-control input-lg disabled" disabled="disabled" name="username" value="markopusnik">
+                                    </div>
+                                </div>
+                                <div class="col-lg-6">
+                                    <div class="form-group">
+                                        <label><h4>Real name</h4></label>
+                                        <input type="text" class="form-control input-lg" name="realName" placeholder="First &amp; last name" maxlength="50">
+                                    </div>
+                                </div><!--/col-->
+                                <div class="col-lg-12">
+                                    <div class="form-group">
+                                        <label><h4>Email</h4></label>
+                                        <input type="email" class="form-control input-lg disabled" disabled="disabled" name="email" placeholder="Email address (private)" required="required">
+                                    </div>
+                                </div><!--/col-->
+                                <div class="col-lg-12">
+                                    <div class="form-group">
+                                        <button class="btn btn-lg btn-primary pull-right" type="submit">Save</button>
+                                    </div>
+                                </div><!--/col-->
+                            </form>
+                        </div><!--/tab-pane-->
+
+                        <div class="tab-pane" id="profile2">
+                            <h2 class="text-center">Todo...</h2>
+                        </div><!--/tab-pane-->
+
+                    </div><!--/tab-content-->
+                </div><!--/col-9-->
+            </div><!--row-->
+        </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 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>
+                    </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="">
+                            </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="">
+                            </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="">
+                            </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>
+                    </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-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                        <h2 class="text-center">Password Change</h2>
+                    </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">
+                            </div>
+                            <div class="form-group">
+                                <label>Verify Password</label>
+                                <input class="form-control input-lg" 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>
+                    </div><!--/modal-footer-->
+                </div>
+            </div>
+        </div>
+
         <!-- Covers the whole screen with a semi-transparent block, so no input events can be triggered below.
              Used as a wait screen; must be the last element in the DOM.
              It is active after load, javascript turns it off after initialization. -->
@@ -197,6 +392,7 @@
         <script src="js/codeq/prolog.js"></script>
         <script src="js/codeq/python.js"></script>
         <script src="js/codeq/login.js"></script>
+        <script src="js/codeq/profile.js"></script>
         <script src="js/codeq/language.js"></script>
         <script src="js/codeq/problem.js"></script>
     </body>
diff --git a/js/codeq/core.js b/js/codeq/core.js
index 1685dd7..3dfa7c2 100644
--- a/js/codeq/core.js
+++ b/js/codeq/core.js
@@ -389,5 +389,7 @@
         codeq.setLang(lang || 'en'); // initial language setting
         // go to login
         codeq.globalStateMachine.transition('login');
-    });
+
+        //For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
+        $('[data-toggle="popover"]').popover()});
 })();
diff --git a/js/codeq/login.js b/js/codeq/login.js
index c400f06..f590acb 100644
--- a/js/codeq/login.js
+++ b/js/codeq/login.js
@@ -29,6 +29,7 @@
     codeq.globalStateMachine.register('login',{

         'enter': function(){

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

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

 

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

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

diff --git a/js/codeq/navigation.js b/js/codeq/navigation.js
index 1a7799f..80fd321 100644
--- a/js/codeq/navigation.js
+++ b/js/codeq/navigation.js
@@ -97,4 +97,13 @@
         codeq.globalStateMachine.transition('prolog');
         e.preventDefault();
     });
+    $('#navigation-logout').on('click', function(e){
+        codeq.globalStateMachine.transition('login');
+        e.preventDefault();//prevent this since we'll trigger a page reload otherwise
+    });
+    $('#navigation-profile').on('click', function(e){
+        codeq.globalStateMachine.transition('profile');
+        e.preventDefault();//prevent this since we'll trigger a page reload otherwise
+    });
+
 })();
\ No newline at end of file
diff --git a/js/codeq/statusbar.js b/js/codeq/statusbar.js
index 2134b93..56070bd 100644
--- a/js/codeq/statusbar.js
+++ b/js/codeq/statusbar.js
@@ -6,7 +6,7 @@
 
     (function () {
         var langs = codeq.supportedLangs,
-            jqMenu = jqBar.find('.dropdown-menu'),
+            jqMenu = jqLang.find('.dropdown-menu'),
             lang, cssClass;
         for (lang in langs) {
             if (!langs.hasOwnProperty(lang)) continue;