From 01fb99ec1a7b57d11d9d33cf6c841809ffccfd85 Mon Sep 17 00:00:00 2001
From: Merlijn <merlijnvanlent@gmail.com>
Date: Sun, 21 Feb 2021 14:40:16 +0100
Subject: [PATCH] Added custom shadowdom element to view emails WIthout the
 styling leaking into the global styling.

---
 .devilbox/www/htdocs/assets/js/html-email.js | 21 ++++++++++++++++
 .devilbox/www/htdocs/mail.php                | 25 +++++++++++++-------
 2 files changed, 38 insertions(+), 8 deletions(-)
 create mode 100644 .devilbox/www/htdocs/assets/js/html-email.js

diff --git a/.devilbox/www/htdocs/assets/js/html-email.js b/.devilbox/www/htdocs/assets/js/html-email.js
new file mode 100644
index 00000000..91f7ce19
--- /dev/null
+++ b/.devilbox/www/htdocs/assets/js/html-email.js
@@ -0,0 +1,21 @@
+class HtmlEmail extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    let emailContent;
+    try {
+      emailContent = window.atob(this.dataset.content);
+    } catch (error) {
+      console.log(error);
+      return;
+    }
+
+    const container = document.createElement('div');
+    container.innerHTML = emailContent;
+
+    this.shadowRoot.appendChild(container);
+  }
+}
+
+customElements.define('html-email', HtmlEmail);
diff --git a/.devilbox/www/htdocs/mail.php b/.devilbox/www/htdocs/mail.php
index 46bcdbd3..7978ed63 100644
--- a/.devilbox/www/htdocs/mail.php
+++ b/.devilbox/www/htdocs/mail.php
@@ -159,6 +159,17 @@ $messages = $MyMbox->get($sortOrderArr);
 								<?php
 									$message = htmlentities($data['raw']);
 									$structure = $data['decoded'];
+									$body = null;
+
+									if (isset($structure->body)) {
+										$body = $structure->body;
+									}
+									elseif(isset($structure->parts[1]->body)) {
+										$body = $structure->parts[1]->body;
+									}
+									elseif(isset($structure->parts[0]->body)) {
+										$body = $structure->parts[0]->body;
+									}
 								 ?>
 								<tr id="<?php echo $data['num'];?>" class="subject">
 									<td><?php echo $data['num'];?></td>
@@ -174,16 +185,13 @@ $messages = $MyMbox->get($sortOrderArr);
 								<tr id="mail-<?php echo $data['num'];?>" style="display:none">
 									<td></td>
 									<td colspan="4">
-										<?php if (isset($structure->body)): ?>
-											<?php echo htmlentities($structure->body) ?>
-										<?php elseif(isset($structure->parts[1]->body)): ?>
-											<?php echo htmlentities($structure->parts[1]->body) ?>
-										<?php elseif(isset($structure->parts[0]->body)): ?>
-											<?php echo htmlentities($structure->parts[0]->body) ?>
+										<?php if ($body !== null): ?>
+											<html-email data-content="<?php echo base64_encode($body) ?>">
+											</html-email>
 										<?php else: ?>
-											<?php echo '<div class="alert alert-warning" role="alert">
+											<div class="alert alert-warning" role="alert">
 												No valid body found
-											</div>' ?>
+											</div>
 										<?php endif; ?>
 										<hr>
 										<p><a class="btn btn-primary" data-toggle="collapse" href="#email-<?php echo $data['num'];?>" aria-expanded="false" aria-controls="email-<?php echo $data['num'];?>">Raw source</a></p>
@@ -215,5 +223,6 @@ $messages = $MyMbox->get($sortOrderArr);
 			// Handler for .ready() called.
 		});
 		</script>
+		<script src="/assets/js/html-email.js"></script>
 	</body>
 </html>