From a1c66e38086ac8acdbc33e8bc904e3bcaeb6e7e2 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Fri, 13 Jun 2025 22:30:46 +0200
Subject: [PATCH] Correctly handle blocklist and blocklist count

---
 dashboard/src/views/EmailSettingsView.vue | 24 +++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/dashboard/src/views/EmailSettingsView.vue b/dashboard/src/views/EmailSettingsView.vue
index 18a3db2e7..015c264d1 100644
--- a/dashboard/src/views/EmailSettingsView.vue
+++ b/dashboard/src/views/EmailSettingsView.vue
@@ -137,12 +137,20 @@ const spamFilterDialog = useTemplateRef('spamFilterDialog');
 const spamFilterBusy = ref(false);
 const spamFilterError = ref('');
 const blocklist = ref([]);
+const blocklistString = ref('');
 const allowlist = ref([]);
+const allowlistString = ref('');
 const spamCustomConfig = ref('');
 
+const blocklistCount = computed(() => {
+  return blocklist.value.filter(l => l.trim()).filter(l => l.indexOf('#') !== 0).length;
+});
+
 function onShowSpamFilterDialog() {
   spamFilterError.value = '';
   spamFilterBusy.value = false;
+  blocklistString.value = blocklist.value.join('\n');
+  allowlistString.value = allowlist.value.join('\n');
 
   spamFilterDialog.value.open();
 }
@@ -151,8 +159,8 @@ async function onSubmitSpamFilter() {
   spamFilterError.value = '';
   spamFilterBusy.value = true;
 
-  const block = blocklist.value.split('\n').filter((l) => { return l !== ''; });
-  const allow = allowlist.value.split('\n').filter((l) => { return l !== ''; });
+  const block = blocklistString.value.split('\n').filter((l) => { return l !== ''; });
+  const allow = allowlistString.value.split('\n').filter((l) => { return l !== ''; });
 
   let [error] = await mailModel.setSpamAcl(allow, block);
   if (error) {
@@ -170,8 +178,8 @@ async function onSubmitSpamFilter() {
 
   spamFilterDialog.value.close();
 
-  blocklist.value = block.join('\n');
-  allowlist.value = allow.join('\n');
+  blocklist.value = block;
+  allowlist.value = allow;
   spamFilterBusy.value = false;
 }
 
@@ -212,8 +220,8 @@ onMounted(async () => {
 
   [error, result] = await mailModel.spamAcl();
   if (error) return console.error(error);
-  allowlist.value = result.allowlist.join('\n');
-  blocklist.value = result.blocklist.join('\n');
+  allowlist.value = result.allowlist;
+  blocklist.value = result.blocklist;
 
   [error, result] = await mailModel.ftsConfig();
   if (error) return console.error(error);
@@ -268,7 +276,7 @@ onMounted(async () => {
           <FormGroup>
             <label for="blocklistInput">{{ $t('emails.spamFilterDialog.blacklisteAddresses') }}</label>
             <p class="small">{{ $t('emails.spamFilterDialog.blacklisteAddressesInfo') }}</p>
-            <textarea id="blocklistInput" v-model="blocklist" :placeholder="$t('emails.spamFilterDialog.blacklisteAddressesPlaceholder')" rows="4"></textarea>
+            <textarea id="blocklistInput" v-model="blocklistString" :placeholder="$t('emails.spamFilterDialog.blacklisteAddressesPlaceholder')" rows="4"></textarea>
           </FormGroup>
 
           <FormGroup>
@@ -349,7 +357,7 @@ onMounted(async () => {
       <SettingsItem>
         <FormGroup>
           <label>{{ $t('emails.settings.spamFilter') }}</label>
-          <div>{{ $t('emails.settings.spamFilterOverview', { blacklistCount: blocklist.length }) }}</div>
+          <div>{{ $t('emails.settings.spamFilterOverview', { blacklistCount: blocklistCount }) }}</div>
         </FormGroup>
         <div style="display: flex; align-items: center">
           <Button tool plain @click="onShowSpamFilterDialog()">{{ $t('main.dialog.edit') }}</Button>