session example

10 files changed, 84 insertions, 73 deletions

diff --git a/examples/cross-domain/css/theme.css b/examples/cross-domain/css/theme.css
index e2fb34f..aed18bd 100644
--- a/examples/cross-domain/css/theme.css
+++ b/examples/cross-domain/css/theme.css
@@ -1,37 +1,9 @@
 .container {
   background-color: #fff;
 }
-body {
-  color: #444;
-
+h1 {
+  font-size: 16px;
 }
-.twitter-widget {
-  overflow-y: scroll;
-  overflow-x: hidden;
-  height: 500px;
-}
-code {
-  border:1px dashed #E1E1E1;
-  color:#333344;
-  background:#FAFAFA;
-  font-family:monospace;
-  overflow:auto;
-  font-size:11px;
-  padding:0.2em;
-}
-
-a, a:visited {
-  color: #444;
-}
- 
-a:hover {
-  color: #000;
-  text-decoration: none;
-} 
-
-.tweets {
-  list-style: none;
-}
-.tweets li {
-  margin-top: 50px;
+[disabled=disabled] {
+  opacity: 0.5;
 }
diff --git a/examples/cross-domain/index.html b/examples/cross-domain/index.html
index 9e8c0b3..04a2617 100644
--- a/examples/cross-domain/index.html
+++ b/examples/cross-domain/index.html
@@ -7,7 +7,7 @@
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
-	<title>Playground</title>
+	<title>Cross-domain Backbone.js with sessions using CORS</title>
 	<meta name="viewport" content="width=device-width,initial-scale=1">
 	<meta name="description" content="">
 	<link rel="stylesheet" href="css/styles.css">
diff --git a/examples/cross-domain/js/models/session.js b/examples/cross-domain/js/models/session.js
index 45f9b67..b052c63 100644
--- a/examples/cross-domain/js/models/session.js
+++ b/examples/cross-domain/js/models/session.js
@@ -5,19 +5,31 @@ define([
   var SessionModel = Backbone.Model.extend({
   
     urlRoot: '/session',
-    // When you implement user athentication
-    login: function(creds, callback) {
+    
+    login: function(creds) {
+      // Do a POST to /session and send the serialized form creds
       this.save(creds, {
-         success: callback
+         success: function () {}
       });
     },
-    logout: function(callback) {
+    logout: function() {
+      // Do a DELETE to /session and clear the clientside data
+      var that = this;
       this.destroy({
-        success: callback
+        success: function (model) {
+          model.clear()
+          // Set auth to false to trigger a change:auth event
+          that.set({auth: false});
+        }
       });      
     },
-    checkAuth: function() {}
-
+    getAuth: function(callback) {
+      // getAuth is wrapped around our router
+      // before we start any routers let us see if the user is valid
+      this.fetch({
+          success: callback
+      });
+    }
   });
   return new SessionModel();
 
diff --git a/examples/cross-domain/js/views/app.js b/examples/cross-domain/js/views/app.js
index 7ae5d78..6f0e2d0 100644
--- a/examples/cross-domain/js/views/app.js
+++ b/examples/cross-domain/js/views/app.js
@@ -4,13 +4,15 @@ define([
   'backbone',
   'vm',
 	'events',
+  'models/session',
   'text!templates/layout.html' 
-], function($, _, Backbone, Vm, Events, layoutTemplate){
+], function($, _, Backbone, Vm, Events, Session, layoutTemplate){
   var AppView = Backbone.View.extend({
     el: '.container',
     initialize: function () {
       
-          
+      // This snipper should usually be loaded elsewhere
+      // It simply takes a <form> and converts its values to an object
       $.fn.serializeObject = function() {
           var o = {};
           var a = this.serializeArray();
@@ -30,6 +32,7 @@ define([
     
       $.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
       // Your server goes below
+      //options.url = 'http://localhost:8000' + options.url;
       options.url = 'http://cross-domain.nodejitsu.com' + options.url;
       options.xhrFields = {
         withCredentials: true
@@ -40,7 +43,13 @@ define([
     render: function () {
 			var that = this;
       $(this.el).html(layoutTemplate);
-      Backbone.history.start();
+      // This is the entry point to your app, therefore
+      // when the user refreshes the page we should
+      // really know if they're authed. We will give it
+      // A call back when we know what the auth status is
+      Session.getAuth(function () {
+        Backbone.history.start();
+      })
 		} 
 	});
   return AppView;
diff --git a/examples/cross-domain/js/views/example/page.js b/examples/cross-domain/js/views/example/page.js
index 0b0e4c8..401a586 100644
--- a/examples/cross-domain/js/views/example/page.js
+++ b/examples/cross-domain/js/views/example/page.js
@@ -3,37 +3,44 @@ define([
   'underscore',
   'backbone',
   'models/session',
-  'text!templates/example/page.html'
-], function($, _, Backbone, Session, examplePageTemplate){
+  'text!templates/example/login.html',
+  'text!templates/example/logout.html'
+], function($, _, Backbone, Session, exampleLoginTemplate, exampleLogoutTemplate){
   var ExamplePage = Backbone.View.extend({
     el: '.page',
     initialize: function () {
-  
+      var that = this;
+      // Bind to the Session auth attribute so we
+      // make our view act recordingly when auth changes
+      Session.on('change:auth', function (session) {
+          that.render();
+      });
     },
     render: function () {
-      this.$el.html(examplePageTemplate);
+      // Simply choose which template to choose depending on
+      // our Session models auth attribute
+      if(Session.get('auth')){
+        this.$el.html(_.template(exampleLogoutTemplate, {username: Session.get('username')}));
+      } else {
+        this.$el.html(exampleLoginTemplate); 
+      }
     },
-    // This will simply listen for scroll events on the current el
     events: {
-      'submit form.login': 'login',
+      'submit form.login': 'login', // On form submission
       'click .logout': 'logout'
     },
     login: function (ev) {
-      var that = this;
- 
+      // Disable the button
+      $('[type=submit]', ev.currentTarget).val('Logging in').attr('disabled', 'disabled');
+      // Serialize the form into an object using a jQuery plgin
       var creds = $(ev.currentTarget).serializeObject();
-      Session.login(creds, function () {
-          that.updateSessionStatus('Authed');
-      });
+      Session.login(creds);
       return false;
     },
-    logout: function () {
-      Session.logout(function () {
-          that.updateSessionStatus('Un-Authed');
-      });
-    },
-    updateSessionStatus: function(response) {
-      $('.session-status').html(response);
+    logout: function (ev) {
+      // Disable the button
+      $(ev.currentTarget).text('Logging out').attr('disabled', 'disabled');
+      Session.logout();
     }
   });
   return ExamplePage;
diff --git a/examples/cross-domain/package.json b/examples/cross-domain/package.json
index b4e2779..fee8e0b 100644
--- a/examples/cross-domain/package.json
+++ b/examples/cross-domain/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "start": "server.js"
   },
-  "version": "0.0.0-6",
+  "version": "0.0.0-11",
   "engines": {
     "node": "0.6.x"
   },
diff --git a/examples/cross-domain/server.js b/examples/cross-domain/server.js
index 1d54988..d0adf32 100644
--- a/examples/cross-domain/server.js
+++ b/examples/cross-domain/server.js
@@ -18,25 +18,29 @@ app.configure(function() {
 });
 
 app.get('/session', function(req, res){ 
-  if(typeof req.session.id !== 'undefined'){
-    res.send({auth: true});
+  // Check auth
+  if(typeof req.session.username !== 'undefined'){
+    res.send({auth: true, id: req.session.id, username: req.session.username});
   } else {
     res.send({auth: false});
   }
 });
 
 app.post('/session', function(req, res){  
+  // Login
   // Here you would pull down your user credentials and match them up
-  // Instead we are just assigning the session a random id
-  var someUserId = Math.ceil(Math.random() * 100000);
-  req.session.id = someUserId;
+  // to the request
+  var randomSessionId = Math.ceil(Math.random() * 100000);
+  req.session.id = randomSessionId;
   req.session.username = req.body.username;
-  res.send({auth: true, id: someUserId});
+  res.send({auth: true, id: req.session.id, username: req.session.username});
 });
 
-app.del('/session', function(req, res, next){  
-  req.session.destroy();
-  res.send({auth: false});
+app.del('/session/:id', function(req, res, next){  
+  // Logout
+  req.session.destroy(function(err){
+    res.send({auth: false});  
+  });  
 });
 
 app.listen(8000);
diff --git a/examples/cross-domain/templates/example/login.html b/examples/cross-domain/templates/example/login.html
new file mode 100644
index 0000000..b1f4a49
--- /dev/null
+++ b/examples/cross-domain/templates/example/login.html
@@ -0,0 +1,5 @@
+<form class="login">
+    <label for="">Username</label>
+    <input name="username" type="text" required autofocus>
+    <input type="submit" id="submit" value="Login">
+</form>
diff --git a/examples/cross-domain/templates/example/logout.html b/examples/cross-domain/templates/example/logout.html
new file mode 100644
index 0000000..dc3e3a5
--- /dev/null
+++ b/examples/cross-domain/templates/example/logout.html
@@ -0,0 +1,2 @@
+<p>Hello, <%= username %>. Time to logout?</p>
+<button class="logout">Logout</button>
diff --git a/examples/cross-domain/templates/layout.html b/examples/cross-domain/templates/layout.html
index 392c285..3b73d03 100644
--- a/examples/cross-domain/templates/layout.html
+++ b/examples/cross-domain/templates/layout.html
@@ -1,10 +1,10 @@
 <div class="header">
   <h1>Cross-domain Backbone.js with sessions using CORS</h1>
-  <p>You might need blah.</p>
+  <em>Simply clone this repo and host it ANYWHERE to get it to work. Run the example server with `node server.js`. Make sure to change the baseUrl in app.js though!</em>
 </div>
 <div style="clear: both;"></div>
 <div class="page">
-  <div class="example"></div>
+  <div class="example">Checking auth....</div>
 </div>
 <div style="clear: both;"></div>
 <div class="footer"></div>