go/mailpit
1
0
Fork 0
mirror of https://github.com/axllent/mailpit.git synced 2024-12-30 23:17:59 +02:00
Code Issues Releases Activity

UI: Message release functionality

Browse Source 
When an SMTP relay server is configured, the web UI will display a "Release" button and allow a message to be manually relayed via the SMTP server to selected addresses.

@see #29
This commit is contained in:
Ralph Slooten 2023-04-21 12:17:14 +12:00
parent 3d63a27458
commit def9602811
6 changed files with 236 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
server/apiv1/swagger.go
View File

@ -9,6 +9,13 @@ type infoResponse struct {
Body appInformation
}
// Web UI configuration
// swagger:response WebUIConfigurationResponse
type webUIConfigurationResponse struct {
// Web UI configuration settings
Body webUIConfiguration
}
// Message summary
// swagger:response MessagesSummaryResponse
type messagesSummaryResponse struct {

54
server/apiv1/webui.go Normal file
View File

@ -0,0 +1,54 @@
package apiv1
import (
"encoding/json"
"fmt"
"net/http"
"github.com/axllent/mailpit/config"
)
// Response includes global web UI settings
//
// swagger:model WebUIConfiguration
type webUIConfiguration struct {
// Message Relay information
MessageRelay struct {
// Whether message relaying (release) is enabled
Enabled bool
// The configured SMTP server address
SMTPServer string
// Enforced Return-Path (if set) for relay bounces
ReturnPath string
}
}
// WebUIConfig returns configuration settings for the web UI.
func WebUIConfig(w http.ResponseWriter, r *http.Request) {
// swagger:route GET /api/v1/webui application WebUIConfiguration
//
// # Get web UI configuration
//
// Returns configuration settings for the web UI.
//
// Produces:
// - application/json
//
// Schemes: http, https
//
// Responses:
// 200: WebUIConfigurationResponse
// default: ErrorResponse
conf := webUIConfiguration{}
conf.MessageRelay.Enabled = config.ReleaseEnabled
if config.ReleaseEnabled {
conf.MessageRelay.SMTPServer = fmt.Sprintf("%s:%d", config.SMTPRelayConfig.Host, config.SMTPRelayConfig.Port)
conf.MessageRelay.ReturnPath = config.SMTPRelayConfig.ReturnPath
}
bytes, _ := json.Marshal(conf)
w.Header().Add("Content-Type", "application/json")
_, _ = w.Write(bytes)
}

1
server/server.go
View File

@ -88,6 +88,7 @@ func defaultRoutes() *mux.Router {
r.HandleFunc(config.Webroot+"api/v1/message/{id}/headers", middleWareFunc(apiv1.GetHeaders)).Methods("GET")
r.HandleFunc(config.Webroot+"api/v1/message/{id}", middleWareFunc(apiv1.GetMessage)).Methods("GET")
r.HandleFunc(config.Webroot+"api/v1/info", middleWareFunc(apiv1.AppInfo)).Methods("GET")
r.HandleFunc(config.Webroot+"api/v1/webui", middleWareFunc(apiv1.WebUIConfig)).Methods("GET")
return r
}

55
server/ui-src/App.vue
View File

@ -2,6 +2,7 @@
import commonMixins from './mixins.js';
import Message from './templates/Message.vue';
import MessageSummary from './templates/MessageSummary.vue';
import MessageRelease from './templates/MessageRelease.vue';
import moment from 'moment';
import Tinycon from 'tinycon';
@ -10,7 +11,8 @@ export default {
components: {
Message,
MessageSummary
MessageSummary,
MessageRelease
},
data() {
@ -36,7 +38,9 @@ export default {
selected: [],
tcStatus: 0,
appInfo: false,
lastLoaded: false
lastLoaded: false,
relayConfig: {},
releaseAddresses: false,
}
},
@ -87,6 +91,7 @@ export default {
});
this.connect();
this.getUISettings();
this.loadMessages();
},
@ -147,6 +152,13 @@ export default {
});
},
getUISettings: function () {
let self = this;
self.get('api/v1/webui', null, function (response) {
self.relayConfig = response.data;
});
},
doSearch: function (e) {
e.preventDefault();
this.loadMessages();
@ -192,6 +204,7 @@ export default {
openMessage: function (id) {
let self = this;
self.selected = [];
self.releaseAddresses = false;
self.existingTags = JSON.parse(JSON.stringify(self.tags));
let uri = 'api/v1/message/' + self.currentPath
@ -550,6 +563,34 @@ export default {
dl.target = '_blank';
dl.download = this.message.ID + '.' + ext;
dl.click();
},
initReleaseModal: function () {
this.releaseAddresses = false;
let addresses = [];
for (let i in this.message.To) {
addresses.push(this.message.To[i].Address)
}
for (let i in this.message.Cc) {
addresses.push(this.message.Cc[i].Address)
}
for (let i in this.message.Bcc) {
addresses.push(this.message.Bcc[i].Address)
}
// include only unique email addresses, regardless of casing
let uAddresses = new Map(addresses.map(a => [a.toLowerCase(), a]));
this.releaseAddresses = [...uAddresses.values()];
let self = this;
window.setTimeout(function () {
// delay to allow elements to load
self.modal('ReleaseModal').show();
window.setTimeout(function () {
document.querySelector('#ReleaseModal input[role="combobox"]').focus()
}, 500);
}, 300);
}
}
}
@ -572,6 +613,10 @@ export default {
<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="relayConfig.MessageRelay && relayConfig.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="deleteMessages">
<i class="bi bi-trash-fill"></i> <span class="d-none d-md-inline">Delete</span>
</button>
@ -963,4 +1008,10 @@ export default {
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="ReleaseModal" tabindex="-1" aria-labelledby="AppInfoModalLabel" aria-hidden="true">
<MessageRelease v-if="releaseAddresses" :message="message" :relayConfig="relayConfig"
:releaseAddresses="releaseAddresses"></MessageRelease>
</div>
</template>

12
server/ui-src/assets/styles.scss
View File

@ -251,6 +251,10 @@ body.blur {
input {
font-size: 0.875em;
}
div {
cursor: text; // html5-tags
}
}
#DownloadBtn {
@ -264,6 +268,14 @@ body.blur {
}
}
#ReleaseModal {
.form-control.dropdown {
div {
@extend .form-control;
}
}
}
/* PrismJS 1.29.0 - modified!
https://prismjs.com/download.html#themes=prism-coy&languages=markup+css */
code[class*="language-"],

109
server/ui-src/templates/MessageRelease.vue Normal file
View File

@ -0,0 +1,109 @@
<script>
import Tags from "bootstrap5-tags";
import commonMixins from '../mixins.js';
export default {
props: {
message: Object,
relayConfig: Object,
releaseAddresses: Array
},
data() {
return {
addresses: []
}
},
mixins: [commonMixins],
mounted() {
this.addresses = JSON.parse(JSON.stringify(this.releaseAddresses));
this.$nextTick(function () {
Tags.init("select[multiple]");
});
},
methods: {
releaseMessage: function () {
let self = this;
// set timeout to allow for user clicking send before the tag filter has applied the tag
window.setTimeout(function () {
if (!self.addresses.length) {
return false;
}
let data = {
to: self.addresses
}
self.post('api/v1/message/' + self.message.ID + '/release', data, function (response) {
self.modal("ReleaseModal").hide();
});
}, 100);
}
}
}
</script>
<template>
<div class="modal-dialog modal-lg" v-if="message">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="AppInfoModalLabel">Release email</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h6>Send this message to one or more addresses specified below.</h6>
<div class="row">
<label class="col-sm-2 col-form-label text-muted">From</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" :value="message.From.Address">
</div>
</div>
<div class="row">
<label class=" col-sm-2 col-form-label text-muted">Subject</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" :value="message.Subject">
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 col-form-label text-muted">Send to</label>
<div class="col-sm-10">
<select class="form-select tag-selector" v-model="addresses" multiple data-allow-new="true"
data-clear-end="true" data-allow-clear="true" data-placeholder="Enter email addresses..."
data-add-on-blur="true" data-badge-style="primary"
data-regex='^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$'
data-separator="|,|">
<option value="">Enter email addresses...</option>
<!-- you need at least one option with the placeholder -->
<option v-for="t in releaseAddresses" :value="t">{{ t }}</option>
</select>
<div class="invalid-feedback">Invalid email address</div>
</div>
</div>
<div class="form-text text-center">
Note: For testing purposes, a unique Message-Id will be generated on send.
<br class="d-none d-md-inline">
SMTP delivery failures will bounce back to
<b v-if="relayConfig.MessageRelay.ReturnPath != ''">{{ relayConfig.MessageRelay.ReturnPath }}</b>
<b v-else>{{ message.ReturnPath }}</b>.
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" :disabled="!addresses.length"
v-on:click="releaseMessage">Release</button>
</div>
</div>
</div>
<div id="loading" v-if="loading">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</template>