go/mailpit
1
0
Fork 0
mirror of https://github.com/axllent/mailpit.git synced 2025-06-17 00:07:54 +02:00
Code Issues Releases Activity

Feature: Add UI settings screen

Browse Source
This commit is contained in:
Ralph Slooten
2024-04-13 00:25:04 +12:00
parent a05e4fd48f
commit faded05e47
10 changed files with 251 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
server/ui-src/components/message/HTMLCheck.vue
View File

@ -20,7 +20,6 @@ export default {
data() {
return {
error: false,
enabled: true,
check: false,
platforms: [],
allPlatforms: {
@ -37,7 +36,6 @@ export default {
},
mounted() {
this.enabled = !localStorage.getItem('htmlCheckDisabled')
this.loadConfig()
this.doCheck()
},
@ -46,7 +44,7 @@ export default {
summary: function () {
let self = this
if (!this.enabled || !this.check) {
if (!this.check) {
return false
}
@ -199,23 +197,19 @@ export default {
platforms(v) {
localStorage.setItem('html-check-platforms', JSON.stringify(v))
},
enabled(v) {
if (!v) {
localStorage.setItem('htmlCheckDisabled', true)
this.$emit('setHtmlScore', false)
} else {
localStorage.removeItem('htmlCheckDisabled')
this.doCheck()
}
}
// enabled(v) {
// if (!v) {
// localStorage.setItem('htmlCheckDisabled', true)
// this.$emit('setHtmlScore', false)
// } else {
// localStorage.removeItem('htmlCheckDisabled')
// this.doCheck()
// }
// }
},
methods: {
doCheck: function () {
if (!this.enabled) {
return
}
this.check = false
if (this.message.HTML == "") {
@ -314,20 +308,6 @@ export default {
</div>
</template>
<template v-if="!enabled">
<h2 class="h4 text-secondary">HTML check is currently disabled</h2>
<p class="text-secondary">
This feature is currently in beta. Constructive feedback is welcome via
<a href="https://github.com/axllent/mailpit/issues" target="_blank">GitHub</a>.
</p>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" v-model="enabled" id="inlineEnableHTMLCheck">
<label class="form-check-label" for="inlineEnableHTMLCheck">
Enable HTML check
</label>
</div>
</template>
<template v-if="summary">
<div class="mt-5 mb-3">
<div class="row w-100">
@ -368,10 +348,6 @@ export default {
<i class="bi bi-info-circle-fill"></i>
Help
</button>
<button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#HTMLCheckOptions">
<i class="bi bi-gear-fill"></i>
Settings
</button>
</div>
</div>
<div class="col-md">
@ -635,36 +611,4 @@ export default {
</div>
</div>
</template>
<div class="modal fade" id="HTMLCheckOptions" tabindex="-1" aria-labelledby="HTMLCheckOptionsLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="HTMLCheckOptionsLabel">HTML check options</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
HTML check is currently in beta. Constructive feedback is welcome via
<a href="https://github.com/axllent/mailpit/issues" target="_blank">GitHub</a>.
</p>
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" role="switch" v-model="enabled"
id="HTMLCheckSwitch">
<label class="form-check-label" for="HTMLCheckSwitch">
<template v-if="enabled">HTML check is enabled in the web UI</template>
<template v-else>HTML check is disabled in the web UI</template>
</label>
</div>
<p class="mt-4 small text-center text-secondary">
HTML check can be globally disabled with <code>--disable-html-check</code><br>
Remote CSS and font support can be globally blocked with <code>--block-remote-css-and-fonts</code>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</template>

38
server/ui-src/components/message/Message.vue
View File

@ -69,6 +69,14 @@ export default {
}
},
computed: {
hasAnyChecksEnabled: function() {
return (mailbox.showHTMLCheck && this.message.HTML)
|| mailbox.showLinkCheck
|| (mailbox.showSpamCheck && mailbox.uiConfig.SpamAssassin)
}
},
mounted() {
let self = this
self.canSaveTags = false
@ -263,7 +271,7 @@ export default {
<tr class="small">
<th>To</th>
<td class="privacy">
<span v-if="message.To && message.To.length" v-for="( t, i ) in message.To ">
<span v-if="message.To && message.To.length" v-for="(t, i) in message.To">
<template v-if="i > 0">, </template>
<span>
<span class="text-spaces">{{ t.Name }}</span>
@ -278,7 +286,7 @@ export default {
<tr v-if="message.Cc && message.Cc.length" class="small">
<th>Cc</th>
<td class="privacy">
<span v-for="( t, i ) in message.Cc ">
<span v-for="(t, i) in message.Cc">
<template v-if="i > 0">,</template>
<span class="text-spaces">{{ t.Name }}</span>
&lt;<a :href="searchURI(t.Address)" class="text-body">
@ -423,16 +431,16 @@ export default {
role="tab" aria-controls="nav-raw" aria-selected="false">
Raw
</button>
<div class="dropdown d-xl-none">
<div class="dropdown d-xl-none" v-show="hasAnyChecksEnabled">
<button class="nav-link dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">
Checks
</button>
<ul class="dropdown-menu checks">
<li>
<li v-if="mailbox.showHTMLCheck && message.HTML != ''">
<button class="dropdown-item" id="nav-html-check-tab" data-bs-toggle="tab"
data-bs-target="#nav-html-check" type="button" role="tab" aria-controls="nav-html"
aria-selected="false" v-if="!mailbox.uiConfig.DisableHTMLCheck && message.HTML != ''">
aria-selected="false">
HTML Check
<span class="badge rounded-pill p-1 float-end" :class="htmlScoreColor"
v-if="htmlScore !== false">
@ -440,7 +448,7 @@ export default {
</span>
</button>
</li>
<li>
<li v-if="mailbox.showLinkCheck">
<button class="dropdown-item" id="nav-link-check-tab" data-bs-toggle="tab"
data-bs-target="#nav-link-check" type="button" role="tab" aria-controls="nav-link-check"
aria-selected="false">
@ -453,7 +461,7 @@ export default {
</span>
</button>
</li>
<li v-if="mailbox.uiConfig.SpamAssassin">
<li v-if="mailbox.showSpamCheck && mailbox.uiConfig.SpamAssassin">
<button class="dropdown-item" id="nav-spam-check-tab" data-bs-toggle="tab"
data-bs-target="#nav-spam-check" type="button" role="tab" aria-controls="nav-html"
aria-selected="false">
@ -469,7 +477,7 @@ export default {
<button class="d-none d-xl-inline-block nav-link position-relative" id="nav-html-check-tab"
data-bs-toggle="tab" data-bs-target="#nav-html-check" type="button" role="tab"
aria-controls="nav-html" aria-selected="false"
v-if="!mailbox.uiConfig.DisableHTMLCheck && message.HTML != ''">
v-if="mailbox.showHTMLCheck && message.HTML != ''">
HTML Check
<span class="badge rounded-pill p-1" :class="htmlScoreColor" v-if="htmlScore !== false">
<small>{{ Math.floor(htmlScore) }}%</small>
@ -477,7 +485,7 @@ export default {
</button>
<button class="d-none d-xl-inline-block nav-link" id="nav-link-check-tab" data-bs-toggle="tab"
data-bs-target="#nav-link-check" type="button" role="tab" aria-controls="nav-link-check"
aria-selected="false">
aria-selected="false" v-if="mailbox.showLinkCheck">
Link Check
<i class="bi bi-check-all text-success" v-if="linkCheckErrors === 0"></i>
<span class="badge rounded-pill bg-danger" v-else-if="linkCheckErrors > 0">
@ -486,7 +494,7 @@ export default {
</button>
<button class="d-none d-xl-inline-block nav-link position-relative" id="nav-spam-check-tab"
data-bs-toggle="tab" data-bs-target="#nav-spam-check" type="button" role="tab"
aria-controls="nav-html" aria-selected="false" v-if="mailbox.uiConfig.SpamAssassin">
aria-controls="nav-html" aria-selected="false" v-if="mailbox.showSpamCheck && mailbox.uiConfig.SpamAssassin">
Spam Analysis
<span class="badge rounded-pill" :class="spamScoreColor" v-if="spamScore !== false">
<small>{{ spamScore }}</small>
@ -537,16 +545,16 @@ export default {
</div>
<div class="tab-pane fade" id="nav-html-check" role="tabpanel" aria-labelledby="nav-html-check-tab"
tabindex="0">
<HTMLCheck v-if="!mailbox.uiConfig.DisableHTMLCheck && message.HTML != ''" :message="message"
@setHtmlScore="(n) => htmlScore = n" @set-badge-style="(v) => htmlScoreColor = v" />
<HTMLCheck v-if="mailbox.showHTMLCheck && message.HTML != ''"
:message="message" @setHtmlScore="(n) => htmlScore = n" @set-badge-style="(v) => htmlScoreColor = v" />
</div>
<div class="tab-pane fade" id="nav-spam-check" role="tabpanel" aria-labelledby="nav-spam-check-tab"
tabindex="0">
<SpamAssassin v-if="mailbox.uiConfig.SpamAssassin" :message="message"
tabindex="0" v-if="mailbox.showSpamCheck && mailbox.uiConfig.SpamAssassin">
<SpamAssassin :message="message"
@setSpamScore="(n) => spamScore = n" @set-badge-style="(v) => spamScoreColor = v" />
</div>
<div class="tab-pane fade" id="nav-link-check" role="tabpanel" aria-labelledby="nav-html-check-tab"
tabindex="0">
tabindex="0" v-if="mailbox.showLinkCheck">
<LinkCheck :message="message" @setLinkErrors="(n) => linkCheckErrors = n" />
</div>
</div>

6
server/ui-src/components/message/SpamAssassin.vue
View File

@ -122,7 +122,11 @@ export default {
value: p,
color: c
},
];
]
},
scoreColor: function() {
return this.graphSections[0].color
},
}
}