From faded05e47c57116328defc7de9c87bcd58be566 Mon Sep 17 00:00:00 2001 From: Ralph Slooten Date: Sat, 13 Apr 2024 00:25:04 +1200 Subject: [PATCH] Feature: Add UI settings screen --- package-lock.json | 6 + package.json | 1 + server/ui-src/App.vue | 2 - server/ui-src/assets/styles.scss | 18 +-- server/ui-src/components/AboutMailpit.vue | 117 ++++------------- server/ui-src/components/Settings.vue | 119 ++++++++++++++++++ .../ui-src/components/message/HTMLCheck.vue | 76 ++--------- server/ui-src/components/message/Message.vue | 38 +++--- .../components/message/SpamAssassin.vue | 6 +- server/ui-src/stores/mailbox.js | 53 +++++++- 10 files changed, 251 insertions(+), 185 deletions(-) create mode 100644 server/ui-src/components/Settings.vue diff --git a/package-lock.json b/package-lock.json index 6d757e1..2be1bf8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "moment": "^2.29.4", "prismjs": "^1.29.0", "rapidoc": "^9.3.4", + "timezones-list": "^3.0.3", "vue": "^3.2.13", "vue-css-donut-chart": "^2.0.0", "vue-router": "^4.2.4" @@ -3559,6 +3560,11 @@ "node": ">=6" } }, + "node_modules/timezones-list": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/timezones-list/-/timezones-list-3.0.3.tgz", + "integrity": "sha512-C+Vdvvj2c1xB6pu81pOX8geo6mrk/QsudFVlTVQET7QQwu8WAIyhDNeCrK5grU7EMzmbKLWqz7uU6dN8fvQvPQ==" + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", diff --git a/package.json b/package.json index 9b2b43c..dfcdf3d 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "moment": "^2.29.4", "prismjs": "^1.29.0", "rapidoc": "^9.3.4", + "timezones-list": "^3.0.3", "vue": "^3.2.13", "vue-css-donut-chart": "^2.0.0", "vue-router": "^4.2.4" diff --git a/server/ui-src/App.vue b/server/ui-src/App.vue index 08a85b6..200d917 100644 --- a/server/ui-src/App.vue +++ b/server/ui-src/App.vue @@ -15,8 +15,6 @@ export default { beforeMount() { document.title = document.title + ' - ' + location.hostname - mailbox.showTagColors = !localStorage.getItem('hideTagColors') == '1' - mailbox.timeZone = localStorage.getItem('timezone') ? localStorage.getItem('timezone') : Intl.DateTimeFormat().resolvedOptions().timeZone; // load global config this.get(this.resolve('/api/v1/webui'), false, function (response) { diff --git a/server/ui-src/assets/styles.scss b/server/ui-src/assets/styles.scss index d3d4b2f..cdd22d8 100644 --- a/server/ui-src/assets/styles.scss +++ b/server/ui-src/assets/styles.scss @@ -320,16 +320,18 @@ body.blur { display: none; } -.form-control.dropdown { - padding: 0; - border: 0; +#message-view { + .form-control.dropdown { + padding: 0; + border: 0; - input { - font-size: 0.875em; - } + input { + font-size: 0.875em; + } - div { - cursor: text; // html5-tags + div { + cursor: text; // html5-tags + } } } diff --git a/server/ui-src/components/AboutMailpit.vue b/server/ui-src/components/AboutMailpit.vue index 38d04bd..eae4d2f 100644 --- a/server/ui-src/components/AboutMailpit.vue +++ b/server/ui-src/components/AboutMailpit.vue @@ -1,5 +1,6 @@ + + diff --git a/server/ui-src/components/message/HTMLCheck.vue b/server/ui-src/components/message/HTMLCheck.vue index 57c8109..805cc1c 100644 --- a/server/ui-src/components/message/HTMLCheck.vue +++ b/server/ui-src/components/message/HTMLCheck.vue @@ -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 { - - - - diff --git a/server/ui-src/components/message/Message.vue b/server/ui-src/components/message/Message.vue index fcb7468..3a5faf3 100644 --- a/server/ui-src/components/message/Message.vue +++ b/server/ui-src/components/message/Message.vue @@ -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 { To - + {{ t.Name }} @@ -278,7 +286,7 @@ export default { Cc - + {{ t.Name }} < @@ -423,16 +431,16 @@ export default { role="tab" aria-controls="nav-raw" aria-selected="false"> Raw -
+
    -
  • +
    • -
  • +
    • -
  • +
diff --git a/server/ui-src/components/message/SpamAssassin.vue b/server/ui-src/components/message/SpamAssassin.vue index 7397896..7f135ed 100644 --- a/server/ui-src/components/message/SpamAssassin.vue +++ b/server/ui-src/components/message/SpamAssassin.vue @@ -122,7 +122,11 @@ export default { value: p, color: c }, - ]; + ] + }, + + scoreColor: function() { + return this.graphSections[0].color }, } } diff --git a/server/ui-src/stores/mailbox.js b/server/ui-src/stores/mailbox.js index 3cf3684..9630159 100644 --- a/server/ui-src/stores/mailbox.js +++ b/server/ui-src/stores/mailbox.js @@ -9,7 +9,6 @@ export const mailbox = reactive({ count: 0, // total in mailbox or search messages: [], // current messages tags: [], // all tags - showTagColors: true, // show/hide tag colors selected: [], // currently selected connected: false, // websocket connection searching: false, // current search, false for none @@ -19,7 +18,13 @@ export const mailbox = reactive({ appInfo: {}, // application information uiConfig: {}, // configuration for UI lastMessage: false, // return scrolling - timeZone: '', // browser timezone + + // settings + showTagColors: !localStorage.getItem('hideTagColors') == '1', + showHTMLCheck: !localStorage.getItem('hideHTMLCheck') == '1', + showLinkCheck: !localStorage.getItem('hideLinkCheck') == '1', + showSpamCheck: !localStorage.getItem('hideSpamCheck') == '1', + timeZone: localStorage.getItem('timeZone') ? localStorage.getItem('timeZone') : Intl.DateTimeFormat().resolvedOptions().timeZone, }) watch( @@ -39,3 +44,47 @@ watch( } } ) + +watch( + () => mailbox.showHTMLCheck, + (v) => { + if (v) { + localStorage.removeItem('hideHTMLCheck') + } else { + localStorage.setItem('hideHTMLCheck', '1') + } + } +) + +watch( + () => mailbox.showLinkCheck, + (v) => { + if (v) { + localStorage.removeItem('hideLinkCheck') + } else { + localStorage.setItem('hideLinkCheck', '1') + } + } +) + +watch( + () => mailbox.showSpamCheck, + (v) => { + if (v) { + localStorage.removeItem('hideSpamCheck') + } else { + localStorage.setItem('hideSpamCheck', '1') + } + } +) + +watch( + () => mailbox.timeZone, + (v) => { + if (v == Intl.DateTimeFormat().resolvedOptions().timeZone) { + localStorage.removeItem('timeZone') + } else { + localStorage.setItem('timeZone', v) + } + } +)