From 57788745627319d13e6acfcb2c1dcee1e752f62a Mon Sep 17 00:00:00 2001
From: Max Ogden <max@maxogden.com>
Date: Wed, 13 Jul 2011 20:27:04 -0700
Subject: [PATCH] adding login/logout

---
 attachments/pages/index.html        | 38 +++++++++++++++++++++++++++++
 attachments/script/jquery.couch2.js | 17 +++++++++++++
 attachments/script/removalist.js    | 14 +++++++++--
 attachments/script/site.js          | 37 +++++++++++++++++++++++++---
 attachments/style/data-table.css    |  8 +++---
 5 files changed, 104 insertions(+), 10 deletions(-)

diff --git a/attachments/pages/index.html b/attachments/pages/index.html
index f221e964..1bbbf333 100644
--- a/attachments/pages/index.html
+++ b/attachments/pages/index.html
@@ -25,6 +25,7 @@
     <div id="header">
       <a href="http://github.com/maxogden/removalist"><img id="couchLogo" src="images/couch.png"/></a>
       <div class="project-title"></div>
+      <div class="project-actions"></div>
       <div class="project-controls"></div>
     </div>
 		<div class="main_content"></div>
@@ -42,6 +43,9 @@
   		<div class="dialog-content dialog-border"></div>
   	</div>
   </div>
+  <script type='text/mustache' class="controlsTemplate">
+    <a id="logged-in-status" href="JavaScript:void(0);" class="secondary">{{text}}</a>
+  </script>
   
   <script type='text/mustache' class="actionsTemplate">
     <a class="button" id="export-button" href="javascript:{}"><span class="button-menu">Export</span></a>
@@ -134,6 +138,40 @@
     </table>
   </script>
   
+  <script type='text/mustache' class="signInTemplate">
+    <div class="dialog-header">
+  		Sign in
+  	</div>
+  	<div class="dialog-body">
+  		<div class="grid-layout layout-tight layout-full">
+        <table id="sign-in-form" class="form-table">
+          <tbody>
+            <tr>
+              <th>
+                <label for="username">Username</label>
+              </th>
+              <td>
+                <input type="text" size="25" id="username-input" name="username">
+              </td>
+            </tr>
+            <tr>
+              <th>
+                <label for="password">Password</label>
+              </th>
+              <td>
+                <input type="password" size="25" id="password-input" name="password">
+              </td>
+            </tr>
+          </tbody>
+        </table>
+  		</div>
+  	</div>
+  	<div class="dialog-footer">
+  		<button class="okButton button">&nbsp;&nbsp;Sign in&nbsp;&nbsp;</button>
+  		<button class="cancelButton button">Cancel</button>
+  	</div>
+  </script>
+  
   <script type='text/mustache' class="bulkEditTemplate">
     <div class="dialog-header">
   		Functional transform on column {{name}}
diff --git a/attachments/script/jquery.couch2.js b/attachments/script/jquery.couch2.js
index e5f768db..43448438 100644
--- a/attachments/script/jquery.couch2.js
+++ b/attachments/script/jquery.couch2.js
@@ -11,6 +11,7 @@
   };  
 
   couch.request = function(opts) {
+    if (opts.data && typeof(opts.data === "object")) opts.data = JSON.stringify(opts.data);
     var ajaxOpts = $.extend({}, defaults, opts);
     return $.ajax(ajaxOpts).promise();
   }
@@ -18,6 +19,22 @@
   couch.get = function(url) {
     return couch.request({url:url, type:'GET'});
   };
+  
+  couch.login = function(credentials) {
+    return couch.request({
+      url: "/_session",
+      type: 'POST',
+      data: {name: credentials.username, password: credentials.password}
+    })
+  }
+  
+  couch.logout = function() {
+    return couch.request({url: "/_session", type: 'DELETE'});
+  }
+  
+  couch.session = function() {
+    return couch.request({url: "/_session"});    
+  }
 
   couch.db = function(name, couchRoot) {
     if(!couchRoot) couchRoot = "";
diff --git a/attachments/script/removalist.js b/attachments/script/removalist.js
index 14b69b0a..6b313161 100644
--- a/attachments/script/removalist.js
+++ b/attachments/script/removalist.js
@@ -131,12 +131,22 @@ var removalist = function() {
 
       util.render('tableContainer', app.container, app.dbInfo);
       util.render('title', 'project-title', app.dbInfo);
-      util.render( 'generating', 'project-controls' );    
+      util.render( 'generating', 'project-actions' );    
+      
+      couch.session().then(function(session) {
+        if ( session.userCtx.name ) {
+          var text = "Sign out";
+        } else {
+          var text = "Sign in";
+        }
+        util.render('controls', 'project-controls', {text: text});
+      })
       
       couch.request({url: app.baseURL + 'api/headers'}).then(function ( headers ) {
         app.headers = headers;
         app.csvUrl = app.baseURL + 'api/csv?headers=' + escape(JSON.stringify(headers));
-        util.render( 'actions', 'project-controls', $.extend({}, app.dbInfo, {url: app.csvUrl}) );    
+        
+        util.render( 'actions', 'project-actions', $.extend({}, app.dbInfo, {url: app.csvUrl}) );    
         fetchRows();
       })
     })
diff --git a/attachments/script/site.js b/attachments/script/site.js
index ea1d2d3a..30e6cd74 100644
--- a/attachments/script/site.js
+++ b/attachments/script/site.js
@@ -15,9 +15,6 @@ app.handler = function(route) {
 app.routes = {
   home: function() {
     removalist.bootstrap();
-  },
-  page: function(id) {
-    removalist.getPageSize();
   }
 }
 
@@ -53,7 +50,7 @@ app.after = {
       });
       doc[header] = cell.parents('.data-table-cell-editor').find('.data-table-cell-editor-editor').val();
       util.notify("Updating row...", {persist: true, loader: true});
-      couch.request({type: "PUT", url: app.baseURL + "api/" + doc._id, data: JSON.stringify(doc)}).then(function(response) {
+      couch.request({type: "PUT", url: app.baseURL + "api/" + doc._id, data: doc}).then(function(response) {
         util.notify("Row updated successfully");
         removalist.fetchRows(false, app.offset);
       })
@@ -69,8 +66,40 @@ app.after = {
       util.render('exportActions', 'menu');
     });
   },
+  controls: function() {
+    $('#logged-in-status').click(function(e) { 
+      if ($(e.target).text() === "Sign in") {
+        util.show('dialog');
+        util.render('signIn', 'dialog-content');
+      } else if ($(e.target).text() === "Sign out") {
+        util.notify("Signing you out...", {persist: true, loader: true});
+        couch.logout().then(function(response) {
+          util.notify("Signed out");
+          util.render('controls', 'project-controls', {text: "Sign in"});
+        })
+      }
+    });
+  },
   exportActions: removalist.handleMenuClick,
   columnActions: removalist.handleMenuClick,
+  signIn: function() {
+    $('.dialog-content .cancelButton').click(function(e) {
+      util.hide('dialog');
+    })
+    $('.dialog-content .okButton').click(function(e) {
+      util.hide('dialog');
+      util.notify("Signing you in...", {persist: true, loader: true});
+      var form = $(e.target).parents('.dialog-content').find('#sign-in-form');
+      var credentials = {
+        username: form.find('#username-input').val(), 
+        password: form.find('#password-input').val()
+      }
+      couch.login(credentials).then(function(response) {
+        util.notify("Signed in");
+        util.render('controls', 'project-controls', {text: "Sign out"});
+      })
+    })
+  },
   bulkEdit: function() {
     $('.dialog-content .cancelButton').click(function(e) {
       util.hide('dialog');
diff --git a/attachments/style/data-table.css b/attachments/style/data-table.css
index 1de7f4fd..4bfb51a4 100644
--- a/attachments/style/data-table.css
+++ b/attachments/style/data-table.css
@@ -81,7 +81,7 @@ h2 {
   font-weight: bold;
 }
 
-input[type=text] {
+input[type=text], input[type=password]{
   padding: 3px;
   font-size: 1em;
   font-family: inherit;
@@ -427,7 +427,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   font-size: 1.6em;
 }
 
-.project-controls {
+.project-controls, .project-actions {
   margin: 3px 2px 0px 0px;
   display: block;
   float: right;
@@ -445,9 +445,9 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   border-top: 1px solid #aaa;
 }
 
-#project-permalink-button {
+#logged-in-status {
   padding: 0 4px;
-  font-size: 0.7em;
+  font-size: 11px;
 }
 
 #left-panel {