Simple HTML sanitizer implementation

themes/bootstrap/public/inbucket.css

@@ -51,12 +51,17 @@ body {
   }
 }
 
+#body-tabs > li > a {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
 .message-body {
-  padding: 0 5px;
+  padding: 10px 4px;
 }
 
 .message-attachments {
-  margin-top: 20px;
+  margin-top: 5px;
   padding: 10px 10px 0 0;
 }
 

themes/bootstrap/public/mailbox.js

@@ -157,6 +157,7 @@ function onMessageLoaded(responseText, textStatus, XMLHttpRequest) {
     return;
   }
   onDocumentChange();
+  $('#body-tabs a:first').tab('show')
   var top = $('#message-container').offset().top - navBarOffset;
   $(window).scrollTop(top);
 }

themes/bootstrap/templates/mailbox/_show.html

@@ -24,7 +24,7 @@
             class="btn btn-primary"
             onClick="htmlView('{{.message.ID}}');">
       <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
-      HTML
+      Raw HTML
     </button>
   {{end}}
 </div>
@@ -78,7 +78,22 @@
 </div>
 {{end}}
 
-<div class="message-body">{{.body}}</div>
+<nav>
+  <ul id="body-tabs" class="nav nav-tabs" role="tablist">
+    {{if .htmlAvailable}}
+    <li role="presentation">
+      <a href="#body-html" aria-controls="body-html" role="tab" data-toggle="tab">Safe HTML</a>
+    </li>
+    {{end}}
+    <li role="presentation">
+      <a href="#body-text" aria-controls="body-text" role="tab" data-toggle="tab">Plain Text</a>
+    </li>
+  </ul>
+</nav>
+<div class="tab-content">
+  <div role="tabpanel" class="tab-pane message-body" id="body-html">{{.htmlBody}}</div>
+  <div role="tabpanel" class="tab-pane message-body" id="body-text">{{.body}}</div>
+</div>
 
 {{with .attachments}}
 <div class="well message-attachments">