go/mailpit
1
0
Fork 0
mirror of https://github.com/axllent/mailpit.git synced 2025-07-13 01:20:22 +02:00
Code Issues Releases Activity

UI: Tab to view formatted message headers

Browse Source 
See #71
This commit is contained in:
Ralph Slooten
2023-04-01 17:02:49 +13:00
parent f16b105d26
commit 1b798c5514
4 changed files with 77 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
server/ui-src/templates/Message.vue
View File

@ -4,6 +4,7 @@ import commonMixins from '../mixins.js';
import Prism from "prismjs";
import Tags from "bootstrap5-tags";
import Attachments from './Attachments.vue';
import Headers from './Headers.vue';
export default {
props: {
@ -12,7 +13,8 @@ export default {
},
components: {
Attachments
Attachments,
Headers
},
mixins: [commonMixins],
@ -24,6 +26,7 @@ export default {
showTags: false, // to force rerendering of component
messageTags: [],
allTags: [],
loadHeaders: false
}
},
@ -34,6 +37,7 @@ export default {
self.showTags = false;
self.messageTags = self.message.Tags;
self.allTags = self.existingTags;
self.loadHeaders = false;
// delay to select first tab and add HTML highlighting (prev/next)
self.$nextTick(function () {
self.renderUI();
@ -60,9 +64,16 @@ export default {
self.allTags = self.existingTags;
window.addEventListener("resize", self.resizeIframes);
self.renderUI();
var tabEl = document.getElementById('nav-raw-tab');
tabEl.addEventListener('shown.bs.tab', function (event) {
let headersTab = document.getElementById('nav-headers-tab');
headersTab.addEventListener('shown.bs.tab', function (event) {
self.loadHeaders = true;
});
let rawTab = document.getElementById('nav-raw-tab');
rawTab.addEventListener('shown.bs.tab', function (event) {
self.srcURI = 'api/v1/message/' + self.message.ID + '/raw';
self.resizeIframes();
});
self.showTags = true;
@ -236,15 +247,21 @@ export default {
<button class="nav-link" id="nav-html-tab" data-bs-toggle="tab" data-bs-target="#nav-html" type="button"
role="tab" aria-controls="nav-html" aria-selected="true" v-if="message.HTML">HTML</button>
<button class="nav-link" id="nav-html-source-tab" data-bs-toggle="tab" data-bs-target="#nav-html-source"
type="button" role="tab" aria-controls="nav-html-source" aria-selected="false" v-if="message.HTML">HTML
Source</button>
type="button" role="tab" aria-controls="nav-html-source" aria-selected="false" v-if="message.HTML">
HTML <span class="d-sm-none">Src</span><span class="d-none d-sm-inline">Source</span>
</button>
<button class="nav-link" id="nav-plain-text-tab" data-bs-toggle="tab" data-bs-target="#nav-plain-text"
type="button" role="tab" aria-controls="nav-plain-text" aria-selected="false"
:class="message.HTML == '' ? 'show' : ''">Text</button>
<button class="nav-link" id="nav-headers-tab" data-bs-toggle="tab" data-bs-target="#nav-headers"
type="button" role="tab" aria-controls="nav-headers" aria-selected="false">
<span class="d-sm-none">Hdrs</span><span class="d-none d-sm-inline">Headers</span>
</button>
<button class="nav-link" id="nav-raw-tab" data-bs-toggle="tab" data-bs-target="#nav-raw" type="button"
role="tab" aria-controls="nav-raw" aria-selected="false">Raw</button>
</div>
</nav>
<div class="tab-content mb-5" id="nav-tabContent">
<div v-if="message.HTML != ''" class="tab-pane fade show" id="nav-html" role="tabpanel"
aria-labelledby="nav-html-tab" tabindex="0">
@ -264,6 +281,9 @@ export default {
<Attachments v-if="allAttachments(message).length" :message="message"
:attachments="allAttachments(message)"></Attachments>
</div>
<div class="tab-pane fade" id="nav-headers" role="tabpanel" aria-labelledby="nav-headers-tab" tabindex="0">
<Headers v-if="loadHeaders" :message="message"></Headers>
</div>
<div class="tab-pane fade" id="nav-raw" role="tabpanel" aria-labelledby="nav-raw-tab" tabindex="0">
<iframe v-if="srcURI" :src="srcURI" v-on:load="resizeIframe" seamless frameborder="0"
style="width: 100%; height: 300px;" id="message-src"></iframe>