2 files changed, 118 insertions(+), 3 deletions(-)

M client.js
M css/style.css

@@ 6,6 6,25 @@ document.body.appendChild(screen)
 function render (msg, keys) {
   console.log(msg)
 
+  var getRaw = h('button', {
+    onclick: function () {
+      if (msg.to === keys.publicKey) {
+        var raw = h('span', {classList: 'hint'}, [h('hr'), 'This is how this message looks for those who are unable to decrypt it. For example, those who do not have access to your private key:', h('pre', [h('code', [msg.boxed])])])
+      } else {
+        var raw = h('span', {classList: 'hint'}, [h('hr'), 'This is how this message looks for those who are unable to decrypt it. For example, those who do not have access to ' + msg.to + '\'s private key:', h('pre', [h('code', [msg.boxed])])])
+      }
+      var removeRaw = h('button', {
+        onclick: function () {
+          raw.parentNode.removeChild(raw)
+          removeRaw.parentNode.replaceChild(getRaw, removeRaw)
+        }
+      }, ['hide'])
+      getRaw.parentNode.replaceChild(removeRaw, getRaw)
+      message.appendChild(raw)
+    }
+  }, ['raw'])
+
+
   var sentto = h('span', [' '])
   var from = h('span', ['From: ',
     h('a', { href: '',


@@ 17,13 36,15 @@ function render (msg, keys) {
     }, [msg.author.substring(0, 10) + '...']),
   ])
 
-  scroller.insertBefore(h('div', {classList: 'message'}, [
-    h('span', {classList: 'right'}, [human(new Date(msg.timestamp))]),
+  var message = h('div', {classList: 'message'}, [
+    h('span', {classList: 'right'}, [human(new Date(msg.timestamp)), ' ', getRaw]),
     from,
     h('div', [sentto]),
     h('hr'), 
     h('div', {innerHTML: marked(msg.text)})
-  ]), scroller.childNodes[1])
+  ])
+
+  scroller.insertBefore(message, scroller.childNodes[1])
 
   if (msg.to) {
     sentto.appendChild(h('span', [


@@ 48,6 69,7 @@ function existingMail (keys) {
       unbox(split[1], split[0], keys).then(unboxed => {
         var msg = JSON.parse(unboxed)
         msg.author = split[0]
+        msg.boxed = value
         collected.push(msg)
       })
     }


@@ 85,6 107,7 @@ function send (req, pub, keys) {
           var split = unboxed.split('~')
           unbox(split[1], split[0], keys).then(unboxed => {
             msg = JSON.parse(unboxed)
+            msg.boxed = message.data
             msg.author = split[0]
             render(msg, keys)
           })

@@ 12,6 12,17 @@ a {color: #2196f3;}
 
 pre, code {color: #dd1144;}
 
+code, pre {
+  overflow: auto;
+  word-break: break-all;
+  word-wrap: break-word;
+  white-space: pre;
+  white-space: -moz-pre-wrap;
+  white-space: pre-wrap;
+  white-space: pre\9;
+}
+
+
 hr {
   border: solid #ddd;
   clear: both;


@@ 30,3 41,84 @@ hr {
 input {width: 80%;}
 
 textarea {width: 100%; height: 8em; border: 1px solid #ddd; border-radius: 5px; padding: 5px;}
+
+button {
+  display: inline-block;
+  *display: inline;
+  padding: 4px 12px;
+  margin-top: 0;
+  margin-bottom: 0;
+  *margin-left: .3em;
+  font-size: 14px;
+  line-height: 20px;
+  color: #333333;
+  text-align: center;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: #f5f5f5;
+  *background-color: #e6e6e6;
+  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
+  background-repeat: repeat-x;
+  border: 1px solid #cccccc;
+  *border: 0;
+  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  border-bottom-color: #b3b3b3;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  *zoom: 1;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+button:hover,
+button:focus,
+button:active,
+button[disabled] {
+  color: #333333;
+  background-color: #e6e6e6;
+  *background-color: #d9d9d9;
+}
+
+button:active {
+  background-color: #cccccc \9;
+}
+
+button:first-child {
+  *margin-left: 0;
+}
+
+button:hover,
+button:focus {
+  color: #333333;
+  text-decoration: none;
+  background-position: 0 -15px;
+  -webkit-transition: background-position 0.1s linear;
+     -moz-transition: background-position 0.1s linear;
+       -o-transition: background-position 0.1s linear;
+          transition: background-position 0.1s linear;
+}
+
+button:focus {
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+button:active {
+  background-image: none;
+  outline: 0;
+  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+     -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+