mirror of
https://github.com/axllent/mailpit.git
synced 2025-12-20 00:12:26 +02:00
Ralph Slooten
323
server/ui-src/views/MessageView.vue
Normal file
323
server/ui-src/views/MessageView.vue
Normal file
@@ -0,0 +1,323 @@
|
||||
<script>
|
||||
import AboutMailpit from '../components/AboutMailpit.vue'
|
||||
import AjaxLoader from '../components/AjaxLoader.vue'
|
||||
import CommonMixins from '../mixins/CommonMixins'
|
||||
import Message from '../components/message/Message.vue'
|
||||
import Release from '../components/message/Release.vue'
|
||||
import Screenshot from '../components/message/Screenshot.vue'
|
||||
import { mailbox } from '../stores/mailbox'
|
||||
import { pagination } from '../stores/pagination'
|
||||
|
||||
export default {
|
||||
mixins: [CommonMixins],
|
||||
|
||||
components: {
|
||||
AboutMailpit,
|
||||
AjaxLoader,
|
||||
Message,
|
||||
Screenshot,
|
||||
Release,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
mailbox,
|
||||
pagination,
|
||||
message: false,
|
||||
prevLink: false,
|
||||
nextLink: false,
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
this.loadMessage()
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.loadMessage()
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadMessage: function () {
|
||||
let self = this
|
||||
this.message = false
|
||||
let uri = self.resolve('/api/v1/message/' + this.$route.params.id)
|
||||
self.get(uri, false, function (response) {
|
||||
let d = response.data
|
||||
|
||||
if (self.wasUnread(d.ID)) {
|
||||
mailbox.unread--
|
||||
}
|
||||
|
||||
// replace inline images embedded as inline attachments
|
||||
if (d.HTML && d.Inline) {
|
||||
for (let i in d.Inline) {
|
||||
let a = d.Inline[i]
|
||||
if (a.ContentID != '') {
|
||||
d.HTML = d.HTML.replace(
|
||||
new RegExp('(=["\']?)(cid:' + a.ContentID + ')(["|\'|\\s|\\/|>|;])', 'g'),
|
||||
'$1' + self.resolve('/api/v1/message/' + d.ID + '/part/' + a.PartID) + '$3'
|
||||
)
|
||||
}
|
||||
if (a.FileName.match(/^[a-zA-Z0-9\_\-\.]+$/)) {
|
||||
// some old email clients use the filename
|
||||
d.HTML = d.HTML.replace(
|
||||
new RegExp('(=["\']?)(' + a.FileName + ')(["|\'|\\s|\\/|>|;])', 'g'),
|
||||
'$1' + self.resolve('/api/v1/message/' + d.ID + '/part/' + a.PartID) + '$3'
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// replace inline images embedded as regular attachments
|
||||
if (d.HTML && d.Attachments) {
|
||||
for (let i in d.Attachments) {
|
||||
let a = d.Attachments[i]
|
||||
if (a.ContentID != '') {
|
||||
d.HTML = d.HTML.replace(
|
||||
new RegExp('(=["\']?)(cid:' + a.ContentID + ')(["|\'|\\s|\\/|>|;])', 'g'),
|
||||
'$1' + self.resolve('/api/v1/message/' + d.ID + '/part/' + a.PartID) + '$3'
|
||||
)
|
||||
}
|
||||
if (a.FileName.match(/^[a-zA-Z0-9\_\-\.]+$/)) {
|
||||
// some old email clients use the filename
|
||||
d.HTML = d.HTML.replace(
|
||||
new RegExp('(=["\']?)(' + a.FileName + ')(["|\'|\\s|\\/|>|;])', 'g'),
|
||||
'$1' + self.resolve('/api/v1/message/' + d.ID + '/part/' + a.PartID) + '$3'
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
self.message = d
|
||||
|
||||
self.detectPrevNext()
|
||||
})
|
||||
},
|
||||
|
||||
// try detect whether this message was unread based on messages listing
|
||||
wasUnread: function (id) {
|
||||
for (let m in mailbox.messages) {
|
||||
if (mailbox.messages[m].ID == id) {
|
||||
if (!mailbox.messages[m].Read) {
|
||||
mailbox.messages[m].Read = true
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
detectPrevNext: function () {
|
||||
// generate the prev/next links based on current message list
|
||||
this.prevLink = false
|
||||
this.nextLink = false
|
||||
let found = false
|
||||
|
||||
for (let m in mailbox.messages) {
|
||||
if (mailbox.messages[m].ID == this.message.ID) {
|
||||
found = true
|
||||
} else if (found && !this.nextLink) {
|
||||
this.nextLink = mailbox.messages[m].ID
|
||||
break
|
||||
} else {
|
||||
this.prevLink = mailbox.messages[m].ID
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
downloadMessageBody: function (str, ext) {
|
||||
let dl = document.createElement('a')
|
||||
dl.href = "data:text/plain," + encodeURIComponent(str)
|
||||
dl.target = '_blank'
|
||||
dl.download = this.message.ID + '.' + ext
|
||||
dl.click()
|
||||
},
|
||||
|
||||
screenshotMessageHTML: function () {
|
||||
this.$refs.ScreenshotRef.initScreenshot()
|
||||
},
|
||||
|
||||
// mark current message as read
|
||||
markUnread: function () {
|
||||
let self = this
|
||||
if (!self.message) {
|
||||
return false
|
||||
}
|
||||
let uri = self.resolve('/api/v1/messages')
|
||||
self.put(uri, { 'read': false, 'ids': [self.message.ID] }, function (response) {
|
||||
self.goBack()
|
||||
})
|
||||
},
|
||||
|
||||
deleteMessage: function () {
|
||||
let self = this
|
||||
let ids = [self.message.ID]
|
||||
let uri = self.resolve('/api/v1/messages')
|
||||
self.delete(uri, { 'ids': ids }, function () {
|
||||
self.goBack()
|
||||
})
|
||||
},
|
||||
|
||||
goBack: function () {
|
||||
mailbox.lastMessage = this.$route.params.id
|
||||
|
||||
if (mailbox.searching) {
|
||||
this.$router.push('/search?q=' + encodeURIComponent(mailbox.searching))
|
||||
} else {
|
||||
this.$router.push('/')
|
||||
}
|
||||
},
|
||||
|
||||
initReleaseModal: function () {
|
||||
let self = this
|
||||
self.modal('ReleaseModal').show()
|
||||
window.setTimeout(function () {
|
||||
window.setTimeout(function () {
|
||||
// delay to allow elements to load / focus
|
||||
self.$refs.ReleaseRef.initTags()
|
||||
document.querySelector('#ReleaseModal input[role="combobox"]').focus()
|
||||
}, 500)
|
||||
}, 300)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="navbar navbar-expand-lg navbar-dark row flex-shrink-0 bg-primary text-white">
|
||||
<div class="d-none d-md-block col-xl-2 col-md-3 col-auto pe-0">
|
||||
<RouterLink to="/" class="navbar-brand text-white me-0" @click="pagination.start = 0">
|
||||
<img :src="resolve('/mailpit.svg')" alt="Mailpit">
|
||||
<span class="ms-2 d-none d-sm-inline">Mailpit</span>
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="col col-md-4k col-lg-5 col-xl-6">
|
||||
<button @click="goBack()" class="btn btn-outline-light me-4 d-md-none" title="Return to messages">
|
||||
<i class="bi bi-arrow-return-left"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline-light me-2" title="Mark unread" v-on:click="markUnread">
|
||||
<i class="bi bi-eye-slash"></i> <span class="d-none d-md-inline">Mark unread</span>
|
||||
</button>
|
||||
<button class="btn btn-outline-light me-2" title="Release message"
|
||||
v-if="mailbox.uiConfig.MessageRelay && mailbox.uiConfig.MessageRelay.Enabled" v-on:click="initReleaseModal">
|
||||
<i class="bi bi-send"></i> <span class="d-none d-md-inline">Release</span>
|
||||
</button>
|
||||
<button class="btn btn-outline-light me-2" title="Delete message" v-on:click="deleteMessage">
|
||||
<i class="bi bi-trash-fill"></i> <span class="d-none d-md-inline">Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto col-lg-4 col-xl-4 text-end">
|
||||
|
||||
<div class="dropdown d-inline-block" id="DownloadBtn">
|
||||
<button type="button" class="btn btn-outline-light dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<i class="bi bi-file-arrow-down-fill"></i>
|
||||
<span class="d-none d-md-inline ms-1">Download</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li>
|
||||
<a :href="resolve('/api/v1/message/' + message.ID + '/raw?dl=1')" class="dropdown-item"
|
||||
title="Message source including headers, body and attachments">
|
||||
Raw message
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="message.HTML">
|
||||
<button v-on:click="downloadMessageBody(message.HTML, 'html')" class="dropdown-item">
|
||||
HTML body
|
||||
</button>
|
||||
</li>
|
||||
<li v-if="message.HTML">
|
||||
<button class="dropdown-item" @click="screenshotMessageHTML()">
|
||||
HTML screenshot
|
||||
</button>
|
||||
</li>
|
||||
<li v-if="message.Text">
|
||||
<button v-on:click="downloadMessageBody(message.Text, 'txt')" class="dropdown-item">
|
||||
Text body
|
||||
</button>
|
||||
</li>
|
||||
<template v-if="allAttachments(message).length">
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li>
|
||||
<h6 class="dropdown-header">
|
||||
Attachment<template v-if="allAttachments(message).length > 1">s</template>
|
||||
</h6>
|
||||
</li>
|
||||
<li v-for="part in allAttachments(message)">
|
||||
<RouterLink :to="'/api/v1/message/' + message.ID + '/part/' + part.PartID"
|
||||
class="row m-0 dropdown-item d-flex" target="_blank"
|
||||
:title="part.FileName != '' ? part.FileName : '[ unknown ]'" style="min-width: 350px">
|
||||
<div class="col-auto p-0 pe-1">
|
||||
<i class="bi" :class="attachmentIcon(part)"></i>
|
||||
</div>
|
||||
<div class="col text-truncate p-0 pe-1">
|
||||
{{ part.FileName != '' ? part.FileName : '[ unknown ]' }}
|
||||
</div>
|
||||
<div class="col-auto text-muted small p-0">
|
||||
{{ getFileSize(part.Size) }}
|
||||
</div>
|
||||
</RouterLink>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<RouterLink :to="'/view/' + prevLink" class="btn btn-outline-light ms-2 me-1"
|
||||
:class="prevLink ? '' : 'disabled'" title="View previous message">
|
||||
<i class="bi bi-caret-left-fill"></i>
|
||||
</RouterLink>
|
||||
<RouterLink :to="'/view/' + nextLink" class="btn btn-outline-light" :class="nextLink ? '' : 'disabled'">
|
||||
<i class="bi bi-caret-right-fill" title="View next message"></i>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row flex-fill" style="min-height:0">
|
||||
<div class="d-none d-md-block col-xl-2 col-md-3 mh-100 position-relative"
|
||||
style="overflow-y: auto; overflow-x: hidden;">
|
||||
|
||||
<div class="list-group my-2">
|
||||
<button @click="goBack()" class="list-group-item list-group-item-action">
|
||||
<i class="bi bi-arrow-return-left me-1"></i>
|
||||
<span class="ms-1">Return</span>
|
||||
<span class="badge rounded-pill ms-1 float-end text-bg-secondary" title="Unread messages"
|
||||
v-if="mailbox.unread">
|
||||
{{ formatNumber(mailbox.unread) }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="card mt-4">
|
||||
<div class="card-body text-body-secondary small">
|
||||
<p class="card-text">
|
||||
<b>Message date:</b><br>
|
||||
<small>{{ messageDate(message.Date) }}</small>
|
||||
</p>
|
||||
<p class="card-text">
|
||||
<b>Size:</b> {{ getFileSize(message.Size) }}
|
||||
</p>
|
||||
<p class="card-text" v-if="allAttachments(message).length">
|
||||
<b>Attachments:</b> {{ allAttachments(message).length }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<AboutMailpit />
|
||||
</div>
|
||||
|
||||
<div class="col-xl-10 col-md-9 mh-100 ps-0 ps-md-2 pe-0">
|
||||
<div class="mh-100" style="overflow-y: auto;" id="message-page">
|
||||
<Message v-if="message" :key="message.ID" :message="message" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AboutMailpit modals />
|
||||
<AjaxLoader :loading="loading" />
|
||||
<Release v-if="message" ref="ReleaseRef" :message="message" />
|
||||
<Screenshot v-if="message" ref="ScreenshotRef" :message="message" />
|
||||
</template>
|
||||
Reference in New Issue
Block a user