From 80631186064bd17aa5d2e8898c3bfb822c171f88 Mon Sep 17 00:00:00 2001 From: Anon Ray Date: Tue, 7 Jan 2014 17:38:56 +0530 Subject: [PATCH] Add sign in functionality Right now this app, authenticates with the sweet store. The sweet store implements a very naive authentication. It does not even send back a session token! It only sends back a 200 if the auth was successful else a 403. Based on that the client has to set some auth token. This should improve. The sweet store can send back a session token which the client can store in its cookie, which results in smoother auth mechanism. Right now there is no auth as such. Sweet store sends back 200 if the auth was successful, and then subsequent requests are made by the client injecting the 'who' parameter, and the server accepts and agrees with the client. Here the client can tamper with the username or 'who'. The correct way is, when the auth is successful, sweet store sends back a auth token, which the client stores in the cookie. And subsequent sweet store requests are made along with that cookie. Then the sweet store should identify the username or 'who' from the cookie. --- swtr/static/css/swtmaker.css | 5 ++++ swtr/static/js/swtmaker.js | 53 +++++++++++++++++++++++++++++++++++++----- swtr/templates/index.html | 21 ++++++++++++++++- 3 files changed, 72 insertions(+), 7 deletions(-) diff --git a/swtr/static/css/swtmaker.css b/swtr/static/css/swtmaker.css index df3b468..06962da 100644 --- a/swtr/static/css/swtmaker.css +++ b/swtr/static/css/swtmaker.css @@ -1,5 +1,10 @@ #swt-maker { } +#signinview { + margin 0 20px; + padding: 10px; + text-align: center; +} #img-annotation-wrapper { margin: 30px auto 0 auto; /*border: 1px solid black;*/ diff --git a/swtr/static/js/swtmaker.js b/swtr/static/js/swtmaker.js index 51debe9..63637ec 100644 --- a/swtr/static/js/swtmaker.js +++ b/swtr/static/js/swtmaker.js @@ -149,7 +149,10 @@ //TODO: move this to a annotation view or something anno.removeAll(); _.each(swtr.sweets.models, function(swt) { - swt.get('how')['editable'] = false; + if(!_.has(swt.get('how'), 'editable')) { + swt.get('how')['editable'] = false; + swt.get('how').text += '\n - by ' + swt.get('who'); + } anno.addAnnotation(swt.get('how')); }); //console.log(swtr.sweets.toJSON()); @@ -161,9 +164,10 @@ } }); this.cleanUp(); + return false; }, cleanUp: function() { - console.log('cleaning up'); + //console.log('cleaning up'); $(this.el).hide(); } }); @@ -172,7 +176,8 @@ el: $('#swt-maker'), events: { 'click #img-url-submit': 'setImage', - 'click #sweet': 'sweet' + 'click #sweet': 'sweet', + 'click #signin-credentials': 'getSignInCredentials' }, initialize: function() { //var allElements = $('body *'); @@ -213,7 +218,7 @@ getExistingAnnotations: function() { this.helpview.step(0); this.$overlay.show(); - console.log('getting existing annotations of ', this.imgURL); + //console.log('getting existing annotations of ', this.imgURL); swtr.sweets.getAll({ where: this.imgURL, success: function(data) { @@ -221,7 +226,7 @@ swtr.sweets.add(data); _.each(data, function(swt) { swt.how['editable'] = false; - swt.how.text+= '\n - by ' + swt.who; + swt.how.text += '\n - by ' + swt.who; anno.addAnnotation(swt.how); }); swtr.appView.$overlay.hide(); @@ -230,7 +235,7 @@ }, error: function(jqxhr, error, statusText) { if(jqxhr.status === 404) { //annotations don't exist for this image - console.log('annotations don\'t exist for this image. Create one!'); + //console.log('annotations don\'t exist for this image. Create one!'); } swtr.appView.$overlay.hide(); swtr.appView.helpview.step(2); @@ -261,6 +266,41 @@ this.getSweets(); this.showSweets(); return false; + }, + getSignInCredentials: function(event) { + event.preventDefault(); + if(swtr.who === 'Guest' && !$('#username').length) { + var template = _.template($('#signin-credentials-template').html()); + $('#signin-msg').html(template()); + } + else if($('#username').length && $('#username').val()) { + var username = $('#username').val(); + var password = $('#password').val(); + this.signIn(username, password); + } + return false; + }, + signIn: function(username, password) { + this.$overlay.show(); + $.ajax({ + url: swtr.swtstoreURL() + swtr.endpoints.auth, + type: 'POST', + data: {user: username, hash: password}, + success: function(data) { + swtr.appView.$overlay.hide(); + swtr.who = username; + $('#signinview').html('You are signed in.'); + }, + error: function(jqxhr, status, error) { + swtr.appView.$overlay.hide(); + if(error === 'FORBIDDEN') { + $('#signin-msg').html('Error signing in. Please check your username and password. '); + } + else { + $('#signin-msg').html('Error signin in. Please try again.'); + } + } + }); } }); @@ -295,6 +335,7 @@ break; } $(this.el).html(text); + $(window).scrollTop(0, 0); } }); diff --git a/swtr/templates/index.html b/swtr/templates/index.html index bef744c..733b1e5 100644 --- a/swtr/templates/index.html +++ b/swtr/templates/index.html @@ -16,6 +16,14 @@
+
+
+ You are not signed in. + +
+
window.swtr = window.swtr || {}; swtr.swtstoreURL = function() { return '{{ conf.swtstoreURL }}'; } - swtr.endpoints = {'get': '/sweets/q', 'post': '/sweets'}; + swtr.endpoints = {'get': '/sweets/q', 'post': '/sweets', 'auth': + '/authenticate'}; window.onload = function() { swtr.init(); }; @@ -63,5 +72,15 @@ <%= how %> + -- 1.7.10.4