display messages

7 files changed, 106 insertions, 3 deletions

diff --git a/lib/bucky.js b/lib/bucky.js
index c003103..bfc4b6f 100644
--- a/lib/bucky.js
+++ b/lib/bucky.js
@@ -175,4 +175,15 @@ var bucky = module.exports = {
       next()
     })
   },
+  ensureMessage: function(req, res, next){
+    db.getMessage(req.params.id).then(function(message){
+      var username = req.user.get('username')
+      if (username !== message.get('recipient') && username !== message.get('sender')) {
+        res.sendStatus(404)
+        return
+      }
+      res.message = message
+      next()
+    })
+  }
 }
\ No newline at end of file
diff --git a/lib/router.js b/lib/router.js
index f1d9a48..67fee61 100644
--- a/lib/router.js
+++ b/lib/router.js
@@ -108,7 +108,7 @@ module.exports = function(app){
       res.render("pages/mailbox", { title: util.sanitize(req.params.box) })
     }
   )
-  app.get("/mail/read/:id",
+  app.get("/message/:id",
     middleware.ensureAuthenticated,
     function(req, res){
       res.render("pages/message", { title: util.sanitize(req.params.box) })
@@ -129,4 +129,13 @@ module.exports = function(app){
     }
   )
 
+  app.get("/api/message/:id",
+    middleware.ensureAuthenticated,
+    bucky.ensureMessage,
+    function(req, res){
+      res.json({
+        message: res.message,
+      })
+  })
+
 }
diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index 62842fd..24ed78e 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -349,6 +349,33 @@ tr:nth-child(odd) td.comment { background-color: #fcf8f8; }
 #boxes td {
   padding: 3px;
 }
+
+#message {
+  text-align: left;
+  max-width: 500px;
+  margin: 0 auto;
+}
+#message .av {
+  float: left;
+  margin-right: 10px;
+}
+#message span {
+  display: inline-block;
+  line-height: 14px;
+  margin-top: 7px;
+}
+#message .subject {
+  font-weight: bold;
+  font-size: 15px;
+}
+#message hr {
+  clear: both;
+}
+#message .body {
+  font-size: 12px;
+  line-height: 15px;
+  padding: 20px;
+}
 @media (max-width: 1024px) {
   #threads td:nth-child(3) small {
     display: none;
diff --git a/public/assets/js/lib/router.js b/public/assets/js/lib/router.js
index 0482c0e..b491fb9 100644
--- a/public/assets/js/lib/router.js
+++ b/public/assets/js/lib/router.js
@@ -11,8 +11,8 @@ var SiteRouter = Router.extend({
 		"/details/:id":   'details',
 		"/mail":          'mailbox',
 		"/mail/:mailbox": 'mailbox',
-		"/mail/read/:id": 'message',
 		"/mail/compose":  'compose',
+		"/message/:id":   'message',
 	},
 	
 	initialize: function(){
diff --git a/public/assets/js/lib/views/mail/message.js b/public/assets/js/lib/views/mail/message.js
index 7deb6b6..b6297d9 100644
--- a/public/assets/js/lib/views/mail/message.js
+++ b/public/assets/js/lib/views/mail/message.js
@@ -1,3 +1,38 @@
 var MessageView = View.extend({
 
+  el: "#message",
+
+  action: '/api/message/',
+  
+  initialize: function(){
+    this.template = this.$(".template").html()
+  },
+
+  load: function(name){
+    name = sanitize(name) || "inbox"
+    $.get(this.action + name, this.populate.bind(this))
+  },
+  
+  populate: function(data){
+    this.parse(data)
+  },
+  
+  parse: function(data){
+    var message = data.message
+//     var user = data.user
+
+    $("h1").html(message.subject)
+    var datetime = verbose_date(message.date)
+    var id = message.id
+//     var is_sender = message.sender == user.username
+    var t = this.template
+                .replace(/{{id}}/g, message.id)
+                .replace(/{{sender}}/g, message.sender)
+                .replace(/{{subject}}/g, message.subject)
+                .replace(/{{date}}/g, datetime[0])
+                .replace(/{{time}}/g, datetime[1])
+                .replace(/{{body}}/g, tidy_urls(message.body) )
+    this.$el.html(t)
+  },
+
 })
diff --git a/views/pages/mailbox.ejs b/views/pages/mailbox.ejs
index 5c62687..87fa30e 100644
--- a/views/pages/mailbox.ejs
+++ b/views/pages/mailbox.ejs
@@ -31,7 +31,7 @@
           {{to}} <a href="/profile/{{username}}">{{username}}</a> &middot;
         </td>
         <td class="ivory">
-          <a href="/mail/read/{{id}}">{{subject}}</a>
+          <a href="/message/{{id}}">{{subject}}</a>
         </td>
         <td class="{{date_class}}">
           {{date}} <small>{{time}}</small>
diff --git a/views/pages/message.ejs b/views/pages/message.ejs
index e69de29..333908d 100644
--- a/views/pages/message.ejs
+++ b/views/pages/message.ejs
@@ -0,0 +1,21 @@
+<% include ../partials/header %>
+
+<hr>
+
+<div class="bluebox" id="message">
+  <script class="template" type="text/html">
+    <a href="/profile/{{sender}}" class="av"><img src="//www.carbonpictures.com/bucky/data/profile/.thumb/al.{{sender}}.jpg"></a>
+    <span class="subject">{{subject}}</span>
+    <span class="sender">
+      sent by
+      <a href="/profile/{{sender}}">{{sender}}</a>
+      on {{date}} {{time}}
+    </span>
+    <hr>
+    <div class="body">
+      {{body}}
+    </div>
+  </script>
+</div>
+
+<% include ../partials/footer %>