replying to messages

8 files changed, 111 insertions, 22 deletions

diff --git a/bucky/app/router.js b/bucky/app/router.js
index 8eb90e0..56e1f36 100644
--- a/bucky/app/router.js
+++ b/bucky/app/router.js
@@ -240,6 +240,7 @@ module.exports = function(app){
       res.render("pages/compose", {
         title: "new message",
         subject: fortune("subjects"),
+        verb: "wrote",
       })
     })
   app.get("/mail/:box",
@@ -253,12 +254,24 @@ module.exports = function(app){
       res.render("pages/compose", {
         title: "new message",
         subject: fortune("subjects"),
+        verb: "wrote",
       })
     })
   app.get("/mail/read/:id",
     middleware.ensureAuthenticated,
     function(req, res){
-      res.render("pages/message", { title: "read message" })
+      res.render("pages/message", {
+        title: "read message"
+      })
+    })
+  app.get("/mail/reply/:id",
+    middleware.ensureAuthenticated,
+    function(req, res){
+      res.render("pages/compose", {
+        title: "reply to message",
+        subject: fortune("subjects"),
+        verb: fortune("mail-verbs"),
+      })
     })
   app.get("/api/mailbox/:box",
     middleware.ensureAuthenticated,
@@ -287,7 +300,7 @@ module.exports = function(app){
     bucky.sendMessage,
     bucky.deleteDraft,
     function(req, res){
-      res.sendStatus(200)
+      res.json({ status: "ok" })
     }
   )
   
diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index d203c97..a5dcd55 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -462,6 +462,12 @@ pre br {
   font-size: 15px;
   margin: 10px 0;
 }
+#compose {
+  width: 530px;
+}
+#compose input[type=text] {
+  font-size: 15px;
+}
 #compose label {
   min-width: 50px;
 }
@@ -470,7 +476,7 @@ pre br {
   margin-left: 50px;
 }
 #compose input[name=subject] {
-  width: 300px;
+  width: 400px;
 }
 #compose .buttons {
   position: relative;
@@ -803,7 +809,7 @@ pre br {
   height: 40px;
   background: #fff;
 }
-#message span {
+#message > span {
   display: inline-block;
   line-height: 14px;
   margin-top: 7px;
diff --git a/public/assets/js/lib/views/mail/compose.js b/public/assets/js/lib/views/mail/compose.js
index b3e302e..1da4ceb 100644
--- a/public/assets/js/lib/views/mail/compose.js
+++ b/public/assets/js/lib/views/mail/compose.js
@@ -13,6 +13,24 @@ var ComposeView = FormView.extend({
   },
   
   load: function(username){
+    var id = parseInt(username)
+    if (! isNaN(id)) {
+      $.get('/api/message/' + id, function(data){
+        var message = data.message
+        var date = verbose_date(message.date)
+        var tmpl = $("#reply-template").html()
+          .replace(/{{username}}/, message.sender)
+          .replace(/{{date}}/, date[0])
+          .replace(/{{time}}/, date[1])
+          .replace(/ /g, " ")
+        console.log(tmpl)
+        this.$("[name=username]").val(message.sender)
+        this.$("[name=subject]").val(message.subject)
+        this.$("[name=body]").val(sanitize(tmpl + message.body))
+        $("body").removeClass('loading')
+      }.bind(this))
+      return
+    }
     this.$("[name=username]").val(sanitize(username))
     $("body").removeClass('loading')
   },
@@ -20,17 +38,17 @@ var ComposeView = FormView.extend({
   validate: function(){
     var errors = []
     var username = $("[name=username]").val()
-    var message = $("[name=message]").val()
+    var body = $("[name=body]").val()
     if (! username || ! username.length) {
       errors.push("Please enter who this message is going to.")
     }
-    if (! message || ! message.length) {
-      errors.push("Please enter your message.")
+    if (! body || ! body.length) {
+      errors.push("Please enter your body.")
     }
     return errors.length ? errors : null
   },
 
   success: function(){
-    window.location.reload()
+    window.location.href = "/mail/outbox"
   }
 })
\ No newline at end of file
diff --git a/public/assets/js/lib/views/mail/mailbox.js b/public/assets/js/lib/views/mail/mailbox.js
index 2f822aa..860d200 100644
--- a/public/assets/js/lib/views/mail/mailbox.js
+++ b/public/assets/js/lib/views/mail/mailbox.js
@@ -2,6 +2,7 @@ var MailboxView = View.extend({
   el: "#messages",
   
   events: {
+    'click .discard_link': 'discard',
   },
   
   action: "/api/mailbox/",
@@ -19,17 +20,20 @@ var MailboxView = View.extend({
   },
   
   populate: function(data){
-    $("body").removeClass('loading')
     this.boxlist.load(data.boxes)
 
     var user = data.user
     var max = data.messages.length-1
+    if (data.messages.length) {
+      $("#no_messages").hide()
+    }
     data.messages.forEach(function(message, i){
-      var $row = $( this.parse(message, user) )
+      var $row = this.parse(message, user)
       if (i === 0) $row.addClass("first")
       if (i === max) $row.addClass("last")
       this.$el.append($row)
     }.bind(this))
+    $("body").removeClass('loading')
   },
   
   parse: function(message, user){
@@ -37,7 +41,7 @@ var MailboxView = View.extend({
     var size = hush_size(message.size)
     var id = message.id
 
-    var is_sender = message.sender == user.username
+    var is_sender = message.sender === user.username
     var t = this.template
                 .replace(/{{id}}/g, message.id)
                 .replace(/{{to}}/g, is_sender ? "to " : "")
@@ -48,7 +52,22 @@ var MailboxView = View.extend({
                 .replace(/{{date_class}}/g, carbon_date(message.lastmodified) )
                 .replace(/{{size}}/g, size[1] )
                 .replace(/{{size_class}}/g, size[0] )
-    return t
+    var $t = $(t)
+    if (is_sender) {
+      $t.find('reply_link').remove()
+    }
+    return $t
   },
 
+  discard: function(e){
+    var id = $(e.target).data('id')
+    $.ajax({
+      method: 'delete',
+      url: '/api/message/' + id,
+      success: function(){ window.location.reload() },
+      error: function(){ window.location.reload() },
+    })
+  },
+
+
 })
diff --git a/public/assets/js/lib/views/mail/message.js b/public/assets/js/lib/views/mail/message.js
index 19293e5..400c11e 100644
--- a/public/assets/js/lib/views/mail/message.js
+++ b/public/assets/js/lib/views/mail/message.js
@@ -1,6 +1,10 @@
 var MessageView = View.extend({
 
   el: "#message",
+  
+  events: {
+    'click .discard_link': 'discard',
+  },
 
   action: '/api/message/',
   
@@ -30,7 +34,8 @@ var MessageView = View.extend({
     $("h1").html(message.subject)
     var datetime = verbose_date(message.date)
     var id = message.id
-//     var is_sender = message.sender == user.username
+    var is_sender = message.sender === auth.user.username
+    console.log(message.body)
     var t = this.template
                 .replace(/{{id}}/g, message.id)
                 .replace(/{{sender}}/g, message.sender)
@@ -38,7 +43,21 @@ var MessageView = View.extend({
                 .replace(/{{date}}/g, datetime[0])
                 .replace(/{{time}}/g, datetime[1])
                 .replace(/{{body}}/g, tidy_urls(message.body) )
-    this.$el.html(t)
+    var $t = $(t)
+    if (is_sender) {
+      $t.find('reply_link').remove()
+    }
+    this.$el.empty().append($t)
+  },
+  
+  discard: function(e){
+    var id = $(e.target).data('id')
+    $.ajax({
+      method: 'delete',
+      url: '/api/message/' + id,
+      success: function(){ window.location.reload() },
+      error: function(){ window.location.reload() },
+    })
   },
 
 })
diff --git a/views/pages/compose.ejs b/views/pages/compose.ejs
index ec83d7d..d7b1a49 100644
--- a/views/pages/compose.ejs
+++ b/views/pages/compose.ejs
@@ -17,10 +17,10 @@
           <label for="compose_subject">subject:</label><input id="compose_subject" type='text' name='subject' value='<%= subject %>'>
         </div>
         <div>
-          <textarea name="message" placeholder="Enter your message"></textarea><br>
+          <textarea name="body" placeholder="Enter your message"></textarea><br>
         </div>
         <div class="buttons">
-          <button id="save_as_draft" style="opacity: 0.5">SAVE DRAFT</button>
+<!--           <button id="save_draft" style="opacity: 0.5">SAVE DRAFT</button> -->
           <input type="submit" value="SEND MESSAGE" />
         </div>
         <div class="errors"></div>
@@ -30,5 +30,12 @@
 </table>
 
 </div>
+<script type="text/html" id="reply-template">
 
+
+
+_____________________
+On {{date}} {{time}}, {{username}} <%= verb %>:
+
+</script>
 <% include ../partials/footer %>
diff --git a/views/pages/mailbox.ejs b/views/pages/mailbox.ejs
index 9d6dc85..19938d0 100644
--- a/views/pages/mailbox.ejs
+++ b/views/pages/mailbox.ejs
@@ -5,9 +5,9 @@
 </div>
 <div id="content">
   
-  <div id="nomessages">
-    <h3>No messages</h3>
-  </div>
+  <h3 id="no_messages">
+    No messages
+  </h3>
 
   <table id="messages" class="ledger">
     <tr><td></td></tr>
@@ -26,8 +26,11 @@
           <span class="{{size_class}}">{{size}}</span>
         </td>
         <td>
-          [reply]
-          [delete]
+          <span class='reply-link'>
+            <a href='/mail/reply/{{id}}'>reply</a>
+            &middot;
+          </span>
+          <a href='#' class='discard-link' data-id='{{id}}'>discard</a>
         </td>
       </tr>
     </script>
diff --git a/views/pages/message.ejs b/views/pages/message.ejs
index 1d76fdc..6382b25 100644
--- a/views/pages/message.ejs
+++ b/views/pages/message.ejs
@@ -12,8 +12,12 @@
       sent by
       <a href="/profile/{{sender}}">{{sender}}</a>
       on {{date}} {{time}}
+      <span class='reply_link'>
+        &middot;
+        <a href="/mail/reply/{{id}}">reply</a>
+      </span>
       &middot;
-      <a href="/mail/reply/{{id}}">reply</a>
+      <a href='#' class='discard_link'>discard</a>
     </span>
     <div class="body">
       {{body}}