Show more info in the email domains view

dashboard/src/views/EmailDomainView.vue

@@ -6,7 +6,6 @@ const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef, inject } from 'vue';
 import { Button, Checkbox, InputDialog, Dialog, FormGroup, Switch } from '@cloudron/pankow';
-import { prettyDecimalSize, sleep } from '@cloudron/pankow/utils';
 import Section from '../components/Section.vue';
 import SettingsItem from '../components/SettingsItem.vue';
 import CatchAllSettingsItem from '../components/CatchAllSettingsItem.vue';
@@ -32,12 +31,10 @@ const mailConfig = ref({});
 const mailFqdn = ref('');
 const adminDomain = ref('');
 const adminDomainProvider = ref('');
-const incomingEnabled = ref(false);
 const enableIncomeBusy = ref(false);
 const enableIncomingSetupDns = ref(true);
 const infoMenu = ref([]);
 const busyRefresh = ref(true);
-const mailboxCount = ref('');
 const inboundEnabled = ref(false);
 const outboundEnabled = ref(false);
 const usage = ref(0);
@@ -87,7 +84,7 @@ async function onAskIncomingToggle(value) {
   });
 
   // reset switch
-  if (!yes) return incomingEnabled.value = true;
+  if (!yes) return inboundEnabled.value = true;
 
   const [error] = await mailModel.setEnabled(domain.value, false);
   if (error) return console.error(error);
@@ -166,7 +163,6 @@ async function onDomainChanged() {
   mailConfig.value = result;
   inboundEnabled.value = result.enabled;
   outboundEnabled.value = result.relay?.provider !== 'noop';
-  incomingEnabled.value = result.enabled;
   mailFromValidation.value = result.mailFromValidation;
   signatureText.value = mailConfig.value.banner.text || '';
   signatureHtml.value = mailConfig.value.banner.html || '';
@@ -181,28 +177,6 @@ async function onDomainChanged() {
     action: onShowConnectionDialog
   }];
 
-  // do this even if no outbound since people forget to remove mailboxes
-  [error, result] = await mailModel.mailboxCount(domain.value);
-  if (error) console.error(error);
-
-  mailboxCount.value = result;
-
-  // this may temporarily fail while the mail server is restarting
-  while (true) {
-    const [error, result] = await mailModel.usage(domain.value);
-    if (error && error.status === 424) {
-      await sleep(1000);
-      continue;
-    } else if (error) return console.error(error);
-
-    usage.value = 0;
-    // we used to use quotaValue here but it's quite different wrt diskSize. so choose diskSize consistently
-    // also, quotaValue can be missing for deleted mailboxes that are on disk but removed from dovecot/ldap itself
-    Object.keys(result).forEach(function (m) { usage.value += result[m].diskSize; });
-
-    break;
-  }
-
   busyRefresh.value = false;
 }
 
@@ -259,7 +233,7 @@ onMounted(async () => {
       :reject-label="enableIncomeBusy ? '' : $t('main.dialog.cancel')"
        reject-style="secondary"
       @confirm="onEnableIncoming()"
-      @reject="incomingEnabled = false"
+      @reject="inboundEnabled = false"
     >
       <div>
         <p v-html="$t('email.enableEmailDialog.description', { domain: domain, requiredPortsDocsLink: 'https://docs.cloudron.io/email/#required-ports' })"></p>
@@ -300,24 +274,8 @@ onMounted(async () => {
       </div>
     </Dialog>
 
-    <Section :title="$t('email.config.title', { domain: domain })">
-      <template #header-buttons>
-        <Button secondary tool icon="fa-solid fa-book" v-tooltip="$t('app.docsActionTooltip')" :menu="infoMenu" />
-      </template>
+    <h1 class="view-header">{{ $t('email.config.title', { domain: domain }) }}</h1>
 
-      <div v-if="busyRefresh">{{ $t('main.loadingPlaceholder') }} ...</div>
-      <div v-else>
-        <div v-if="inboundEnabled">
-          {{ $t('emails.domains.stats', { mailboxCount: mailboxCount, usage: prettyDecimalSize(usage) }) }}
-        </div>
-        <div v-else>
-          <span v-if="outboundEnabled">{{ $t('emails.domains.outbound') }}</span>
-          <span v-else>{{ $t('emails.domains.disabled') }}</span>
-        </div>
-      </div>
-    </Section>
-
-    <!-- TODO translation -->
     <Section :title="$t('email.config.sending.title')" :padding="false" v-if="!busyRefresh">
       <template #header-buttons>
         <Button @click="onSendTestMail">{{ $t('emails.domains.testEmailTooltip') }}</Button>
@@ -345,12 +303,16 @@ onMounted(async () => {
     </Section>
 
     <Section :title="$t('email.config.receiving.title')" :padding="false" v-if="!busyRefresh" :title-badge="!features.emailServer ? 'Upgrade' : ''">
+      <template #header-buttons>
+        <Button secondary tool icon="fa-solid fa-book" v-tooltip="$t('app.docsActionTooltip')" :menu="infoMenu" />
+      </template>
+
       <SettingsItem>
         <FormGroup>
           <label>{{ $t('email.incoming.title') }}</label>
           <div>{{ $t(mailConfig.enabled ? 'email.incoming.enabled' : 'email.incoming.disabled') }}</div>
         </FormGroup>
-        <Switch v-model="incomingEnabled" :disabled="busyRefresh || !features.emailServer" @change="onAskIncomingToggle"/>
+        <Switch v-model="inboundEnabled" :disabled="busyRefresh || !features.emailServer" @change="onAskIncomingToggle"/>
       </SettingsItem>
 
       <CatchAllSettingsItem :domain-config="mailConfig" :disabled="!features.emailServer"/>