diff options
| -rw-r--r-- | index.html | 82 | ||||
| -rw-r--r-- | js/codeq/comms.js | 21 | ||||
| -rw-r--r-- | js/codeq/login.js | 9 | ||||
| -rw-r--r-- | js/codeq/navigation.js | 10 | ||||
| -rw-r--r-- | js/codeq/profile.js | 56 |
5 files changed, 106 insertions, 72 deletions
@@ -271,78 +271,24 @@ 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="#" class="btn btn-default" id="btnProfileGoBack">Go back</a> + <a href="#" class="btn btn-default" id="btnProfileGoBack" onclick="history.back()">Go back</a> </div> </h2> <hr> <div class="row"> - <div class="col-lg-3 col-md-4"> + <div class="col-lg-12 col-md-12"> <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>Username</strong></span><span id="profileUsername">janezk</span></li> + <li class="list-group-item text-right"><span class="pull-left"><strong>Real name</strong></span>Janez Kranjski</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 & 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="button">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><!--/col-12--> </div><!--row--> </div><!--container--> @@ -370,23 +316,23 @@ <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 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> + <button class="btn btn-primary btn-block" type="button" id="submit">Sign in</button> </div> - <div class="checkbox"> + <!--div class="checkbox"> <label> <input type="checkbox"> keep me logged-in </label> - </div> + </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> + New here ? <a href="#" role="button" data-dismiss="modal" data-toggle="modal" data-target="#modalSignUp"><b>Sign Up</b></a> </div> </div><!--/modal-footer--> </div> @@ -419,7 +365,7 @@ </div><!--/modal-body--> <div class="modal-footer"> <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> + <button class="btn btn-primary" id="btnSignUp" type="submit" onclick="codeq.profile.signup()">Sign up</button> </div><!--/modal-footer--> </div> </div> @@ -436,17 +382,17 @@ <form class="form" method="post"> <div class="form-group"> <label class="control-label small">New Password</label> - <input class="form-control" placeholder="Enter a new password" name="new" type="password"> + <input class="form-control" placeholder="Enter a new password" name="new" id="modalChangePasswordNew" type="password"> </div> <div class="form-group"> <label class="control-label small">Verify Password</label> - <input class="form-control" placeholder="Repeat the password again" name="verify" type="password"> + <input class="form-control" placeholder="Repeat the password again" name="verify" id="modalChangePasswordVerify" 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-primary" id="btnPasswdChange" type="submit">Change</button> + <button class="btn btn-primary" id="btnPasswdChange" type="submit" onclick="codeq.profile.changePassword()">Change</button> </div><!--/modal-footer--> </div> </div> diff --git a/js/codeq/comms.js b/js/codeq/comms.js index 3671e95..54a912f 100644 --- a/js/codeq/comms.js +++ b/js/codeq/comms.js @@ -297,10 +297,29 @@ }); }; if (socket) return performLogin(); - // this is the only method where we do connect() first, if we're not already connected + // this is the 1st method where we do connect() first, if we're not already connected return this.connect().then(performLogin); }, + 'logout': function () { + return this.send({'action': 'logout'}); + }, + + 'signup': function (username, password) { + var myself = this, + performSignUp = function () { + return myself.send({'action': 'signup', 'username': username, 'password': password}); + }; + + if (socket) return performSignUp(); + // this is the 2nd method where we do connect() first, if we're not already connected + return this.connect().then(performSignUp); + }, + + 'changePassword': function (newpassword) { + return this.send({'action': 'change_password', 'password': newpassword}); + }, + 'updateSettings': function (new_settings){ return this.send({'action': 'settings', 'sid': sid, 'settings': new_settings}); }, diff --git a/js/codeq/login.js b/js/codeq/login.js index 391592b..d5bcd90 100644 --- a/js/codeq/login.js +++ b/js/codeq/login.js @@ -15,6 +15,9 @@ $('#disabled').css('cursor', ''); if (data.code !== 0) throw new Error('Login failed, code: ' + data.code + ', message: ' + data.message); + //merge profile + $('#profileUsername').html($('#username').val()); + //merge these settings into the already existing default settings var sett = data.settings; $.merge(true, codeq.settings, sett); @@ -47,14 +50,14 @@ } }); $('#modalLogIn').modal(); - - $("#screen_login").css('display', ''); + //$("#screen_login").css('display', ''); $('#disabled').css('display', 'none'); }, 'exit' : function(){ $("#submit").off('click', loginFun); formInputs.off('keyup'); - $("#screen_login").css('display', 'none'); + $('#modalLogIn').modal('hide'); + //$("#screen_login").css('display', 'none'); $('#signed-in-title').html('Signed in as '+$('#username').val()); $("#password").val(''); } diff --git a/js/codeq/navigation.js b/js/codeq/navigation.js index 4eff834..a1b8f3d 100644 --- a/js/codeq/navigation.js +++ b/js/codeq/navigation.js @@ -102,6 +102,16 @@ e.preventDefault(); }); $('#navigation-logout').on('click', function(e){ + codeq.comms.logout() + .then(function (data) { + console.log(data); + //codeq.globalStateMachine.transition('login'); + }) + .fail(function (reason) { + console.log(reason); + }) + .done(); + codeq.globalStateMachine.transition('login'); 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 5dcda05..be0bb1e 100644 --- a/js/codeq/profile.js +++ b/js/codeq/profile.js @@ -3,6 +3,62 @@ */
(function(){
+
+ codeq.profile = {
+
+ 'signup': function () {
+ var jqUsername = $("#modalSignUpUsername"),
+ jqPassword = $("#modalSignUpPassword"),
+ jqVerify = $("#modalSignUpVerify");
+
+ if (jqUsername.val() == "" || jqPassword.val() == "" || jqVerify.val() == "") {
+ alert('Some fields are empty.');
+ }
+ else if (jqPassword.val() != jqVerify.val()) {
+ alert('Passwords do not match.');
+ }
+ else {
+ codeq.comms.signup(jqUsername.val(), jqPassword.val())
+ .then(function (data) {
+ //back to login
+ $('#modalSignUp').modal('hide');
+ alert('Welcome '+ jqUsername.val() +'. Thanks for signing up.');
+ $('#modalLogIn').modal('show');
+ //assume user wants to sign-in with signed username
+ $("#username").val(jqUsername.val());
+ //clear
+ jqUsername.val('');
+ jqPassword.val('');
+ jqVerify.val('');
+ })
+ .done();
+ }
+
+ },
+
+ 'changePassword': function () {
+ var jqNew = $("#modalChangePasswordNew"),
+ jqVerify = $("#modalChangePasswordVerify");
+
+ if (jqNew.val() == "" || jqVerify.val() == "") {
+ alert('Some fields are empty.');
+ }
+ else if (jqNew.val() != jqVerify.val()) {
+ alert('Passwords do not match.');
+ }
+ else {
+ codeq.comms.changePassword(jqNew.val())
+ .then(function (data) {
+ $('#modalChangePassword').modal('hide');
+ jqNew.val('');
+ jqVerify.val('');
+ alert('Password changed.');
+ })
+ .done();
+ }
+ }
+ };
+
codeq.globalStateMachine.register('profile',{
'enter': function(){
|