From 25fa99925917f0c729cb934a0e7f2cf5a0608a5c Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 11 Aug 2025 19:07:02 +0200
Subject: [PATCH] Fixup various vuejs warnings

---
 .../src/components/DockerRegistryDialog.vue   |   2 -
 dashboard/src/components/DomainDialog.vue     |   4 +-
 dashboard/src/components/ExternalLdap.vue     |   4 +-
 dashboard/src/components/MailDomainStatus.vue | 172 +++++++++---------
 dashboard/src/views/EmailMailboxesView.vue    |   4 +-
 dashboard/src/views/EmailStatusView.vue       |   2 +-
 6 files changed, 97 insertions(+), 91 deletions(-)

diff --git a/dashboard/src/components/DockerRegistryDialog.vue b/dashboard/src/components/DockerRegistryDialog.vue
index cb622b2c8..7f49937da 100644
--- a/dashboard/src/components/DockerRegistryDialog.vue
+++ b/dashboard/src/components/DockerRegistryDialog.vue
@@ -91,8 +91,6 @@ defineExpose({
      reject-style="secondary"
     @confirm="onSubmit()"
   >
-    <p class="has-error text-center" v-show="configureError">{{ configureError }}</p>
-
     <form novalidate @submit.prevent="onSubmit()" autocomplete="off">
       <fieldset :disabled="busy">
         <input style="display: none" type="submit" :disabled="!isValid"/>
diff --git a/dashboard/src/components/DomainDialog.vue b/dashboard/src/components/DomainDialog.vue
index 824379531..52497fe43 100644
--- a/dashboard/src/components/DomainDialog.vue
+++ b/dashboard/src/components/DomainDialog.vue
@@ -97,13 +97,11 @@ defineExpose({
      reject-style="secondary"
     @confirm="onSubmit()"
   >
-    <p class="text-danger" v-show="errorMessage">{{ errorMessage }}</p>
-
     <form ref="form" @submit.prevent="onSubmit()" autocomplete="off" @input="checkValidity()">
       <fieldset :disabled="busy">
         <input style="display: none;" type="submit" :disabled="busy"/>
 
-        <div class="error-label" v-show="error">{{ error }}</div>
+        <div class="error-label" v-show="errorMessage">{{ errorMessage }}</div>
 
         <FormGroup>
           <label for="domainInput">{{ $t('domains.domainDialog.domain') }}</label>
diff --git a/dashboard/src/components/ExternalLdap.vue b/dashboard/src/components/ExternalLdap.vue
index 63a7701c8..1a1f34560 100644
--- a/dashboard/src/components/ExternalLdap.vue
+++ b/dashboard/src/components/ExternalLdap.vue
@@ -1,7 +1,7 @@
 <script setup>
 
 import { ref, useTemplateRef, onMounted, computed, inject } from 'vue';
-import { Dialog, Button, Icon, FormGroup, SingleSelect, Checkbox, TextInput, ProgressBar } from '@cloudron/pankow';
+import { Dialog, Button, Icon, FormGroup, SingleSelect, Checkbox, TextInput, ProgressBar, PasswordInput } from '@cloudron/pankow';
 import { prettyLongDate } from '@cloudron/pankow/utils';
 import Section from './Section.vue';
 import UserDirectoryModel from '../models/UserDirectoryModel.js';
@@ -286,7 +286,7 @@ onMounted(async () => {
 
             <FormGroup :class="{ 'has-error': editError.groupnameField }" v-show="syncGroups && provider !== 'cloudron'">
               <label for="groupnameFieldInput">{{ $t('users.externalLdap.groupnameField') }}</label>
-              <TextInput v-model="groupnameField" id="groupnameFieldInput" placeholder="cn" v-required="syncGroups && provider !== 'cloudron'" />
+              <TextInput v-model="groupnameField" id="groupnameFieldInput" placeholder="cn" :required="syncGroups && provider !== 'cloudron'" />
             </FormGroup>
 
             <FormGroup :class="{ 'has-error': editError.credentials }" v-show="provider !== 'cloudron'">
diff --git a/dashboard/src/components/MailDomainStatus.vue b/dashboard/src/components/MailDomainStatus.vue
index 9ed89759c..f0471a5a7 100644
--- a/dashboard/src/components/MailDomainStatus.vue
+++ b/dashboard/src/components/MailDomainStatus.vue
@@ -1,7 +1,7 @@
 <script setup>
 
 import { ref, onMounted } from 'vue';
-import { Button } from '@cloudron/pankow';
+import { Button, ProgressBar } from '@cloudron/pankow';
 import MailModel from '../models/MailModel.js';
 
 const props = defineProps([ 'domain' ]);
@@ -46,94 +46,97 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div v-if="domainStatus.mx">
-    <h4>{{ $t('email.dnsStatus.title') }} &nbsp; <Button @click="refresh()" small tool icon="fa fa-sync-alt" :disabled="busy" :loading="busy"/></h4>
-    <div v-html="$t('email.dnsStatus.description', { emailDnsDocsLink:'https://docs.cloudron.io/email/#dns-records'})"></div>
-    <br/>
-    <div v-for="(label, type) in dnsRecordLabels" :key="type">
-      <div class="text-muted">
-        <i v-if="!busy" class="fa-solid" :class="{
-          'fa-check-circle text-success': domainStatus[type].status === 'passed',
-          'fa-exclamation-triangle text-danger': domainStatus[type].status === 'failed',
-          'fa-minus text-success': domainStatus[type].status === 'skipped',
-          }"></i>
-        <i v-else class="fa-solid fa-circle-notch fa-spin"></i>
-        &nbsp;
-        <span>{{ label }} record</span>
-      </div>
-
-      <div class="record-details">
-        <div v-if="type === 'mx' && domain.provider === 'namecheap'">{{ $t('email.dnsStatus.namecheapInfo') }} <sup><a href="https://docs.cloudron.io/domains/#namecheap-dns" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></div>
-        <div v-if="type === 'ptr4' || type === 'ptr6'">{{ $t('email.dnsStatus.ptrInfo') }} <sup><a href="https://docs.cloudron.io/email/#ptr-record" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></div>
-        <div v-if="domainStatus[type].status === 'skipped'">{{ domainStatus[type].message }}</div>
-        <div v-else>
-          <table>
-            <tbody>
-              <tr>
-                <td>{{ $t('email.dnsStatus.hostname') }}:</td>
-                <td>{{ domainStatus[type].name }}</td>
-              </tr>
-              <tr>
-                <td>{{ $t('email.dnsStatus.domain') }}:</td>
-                <td>{{ domainStatus[type].domain }}</td>
-              </tr>
-              <tr>
-                <td style="width: 10px;">{{ $t('email.dnsStatus.type') }}:</td>
-                <td>{{ domainStatus[type].type }}</td>
-              </tr>
-              <tr>
-                <td>{{ $t('email.dnsStatus.expected') }}:</td>
-                <td>{{ domainStatus[type].expected }}</td>
-              </tr>
-              <tr>
-                <td>{{ $t('email.dnsStatus.current') }}:</td>
-                <td>{{ domainStatus[type].value ? domainStatus[type].value : ('['+$t('email.dnsStatus.recordNotSet')+']') }} {{ domainStatus[type].message }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-    <br/>
-
-    <h4>{{ $t('email.smtpStatus.title') }} <sup><a href="https://docs.cloudron.io/email/#smtp-status" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></h4>
-
-    <div v-if="domainStatus.relay">
-      <div class="text-muted">
-        <i v-if="!busy" class="fa" :class="{
-          'fa-check-circle text-success': domainStatus.relay.status === 'passed',
-          'fa-exclamation-triangle text-danger': domainStatus.relay.status === 'failed',
-          'fa-minus text-success': domainStatus.relay.status === 'skipped',
-          }"></i>
-        <i v-else class="fa-solid fa-circle-notch fa-spin"></i>
-        &nbsp;
-        <span>{{ $t('email.smtpStatus.outboundSmtp') }}</span>
-      </div>
-      <div class="record-details">
-        {{ domainStatus.relay.message }}
-      </div>
-    </div>
-
-    <div v-for="type in rblTypes" :key="type">
-      <div v-if="domainStatus[type]">
-        <div class="text-muted">
-          <i v-if="!busy" class="fa" :class="{
+  <div>
+    <ProgressBar mode="indeterminate" v-if="busy" slim :show-label="false" />
+    <div v-if="domainStatus.mx">
+      <h4>{{ $t('email.dnsStatus.title') }} &nbsp; <Button @click="refresh()" small tool icon="fa fa-sync-alt" :disabled="busy" :loading="busy"/></h4>
+      <div v-html="$t('email.dnsStatus.description', { emailDnsDocsLink:'https://docs.cloudron.io/email/#dns-records'})"></div>
+      <br/>
+      <div v-for="(label, type) in dnsRecordLabels" :key="type">
+        <div>
+          <i v-if="!busy" class="fa-solid" :class="{
             'fa-check-circle text-success': domainStatus[type].status === 'passed',
             'fa-exclamation-triangle text-danger': domainStatus[type].status === 'failed',
-            'fa-minus text-success': domainStatus[type].status === 'skipped',
+            'fa-circle-minus text-warning': domainStatus[type].status === 'skipped',
             }"></i>
           <i v-else class="fa-solid fa-circle-notch fa-spin"></i>
           &nbsp;
-          <span>{{ type === 'rbl4' ? 'IPv4' : 'IPv6' }} {{ $t('email.smtpStatus.rblCheck') }}</span>
+          <b>{{ label }} record</b>
+        </div>
+
+        <div class="record-details">
+          <div v-if="type === 'mx' && domain.provider === 'namecheap'">{{ $t('email.dnsStatus.namecheapInfo') }} <sup><a href="https://docs.cloudron.io/domains/#namecheap-dns" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></div>
+          <div v-if="type === 'ptr4' || type === 'ptr6'">{{ $t('email.dnsStatus.ptrInfo') }} <sup><a href="https://docs.cloudron.io/email/#ptr-record" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></div>
+          <div v-if="domainStatus[type].status === 'skipped'">{{ domainStatus[type].message }}</div>
+          <div v-else>
+            <table class="domain-status">
+              <tbody>
+                <tr>
+                  <td>{{ $t('email.dnsStatus.hostname') }}:</td>
+                  <td>{{ domainStatus[type].name }}</td>
+                </tr>
+                <tr>
+                  <td>{{ $t('email.dnsStatus.domain') }}:</td>
+                  <td>{{ domainStatus[type].domain }}</td>
+                </tr>
+                <tr>
+                  <td>{{ $t('email.dnsStatus.type') }}:</td>
+                  <td>{{ domainStatus[type].type }}</td>
+                </tr>
+                <tr>
+                  <td>{{ $t('email.dnsStatus.expected') }}:</td>
+                  <td>{{ domainStatus[type].expected }}</td>
+                </tr>
+                <tr>
+                  <td>{{ $t('email.dnsStatus.current') }}:</td>
+                  <td>{{ domainStatus[type].value ? domainStatus[type].value : ('['+$t('email.dnsStatus.recordNotSet')+']') }} {{ domainStatus[type].message }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <br/>
+
+      <h4>{{ $t('email.smtpStatus.title') }} <sup><a href="https://docs.cloudron.io/email/#smtp-status" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></h4>
+
+      <div v-if="domainStatus.relay">
+        <div>
+          <i v-if="!busy" class="fa" :class="{
+            'fa-check-circle text-success': domainStatus.relay.status === 'passed',
+            'fa-exclamation-triangle text-danger': domainStatus.relay.status === 'failed',
+            'fa-circle-minus text-warning': domainStatus.relay.status === 'skipped',
+            }"></i>
+          <i v-else class="fa-solid fa-circle-notch fa-spin"></i>
+          &nbsp;
+          <b>{{ $t('email.smtpStatus.outboundSmtp') }}</b>
         </div>
         <div class="record-details">
-          <div v-if="domainStatus[type].status !== 'failed'">{{ domainStatus[type].message }}</div>
-          <div v-else>
-            <div v-if="domainStatus[type].servers.length" v-html="$t('email.smtpStatus.blacklisted', { ip: domainStatus[type].ip })"></div>
-            <div v-else v-html="$t('email.smtpStatus.notBlacklisted', { ip: domainStatus[type].ip })"></div>
+          {{ domainStatus.relay.message }}
+        </div>
+      </div>
 
-            <div v-for="server in domainStatus[type].servers" :key="server.name">
-              <a :href="server.removal" target="_blank">{{ server.name }}</a>
+      <div v-for="type in rblTypes" :key="type">
+        <div v-if="domainStatus[type]">
+          <div>
+            <i v-if="!busy" class="fa" :class="{
+              'fa-check-circle text-success': domainStatus[type].status === 'passed',
+              'fa-exclamation-triangle text-danger': domainStatus[type].status === 'failed',
+              'fa-circle-minus text-success': domainStatus[type].status === 'skipped',
+              }"></i>
+            <i v-else class="fa-solid fa-circle-notch fa-spin"></i>
+            &nbsp;
+            <b>{{ type === 'rbl4' ? 'IPv4' : 'IPv6' }} {{ $t('email.smtpStatus.rblCheck') }}</b>
+          </div>
+          <div class="record-details">
+            <div v-if="domainStatus[type].status !== 'failed'">{{ domainStatus[type].message }}</div>
+            <div v-else>
+              <div v-if="domainStatus[type].servers.length" v-html="$t('email.smtpStatus.blacklisted', { ip: domainStatus[type].ip })"></div>
+              <div v-else v-html="$t('email.smtpStatus.notBlacklisted', { ip: domainStatus[type].ip })"></div>
+
+              <div v-for="server in domainStatus[type].servers" :key="server.name">
+                <a :href="server.removal" target="_blank">{{ server.name }}</a>
+              </div>
             </div>
           </div>
         </div>
@@ -145,7 +148,7 @@ onMounted(async () => {
 <style scoped>
 
 .record-details {
-  padding: 10px 25px;
+  padding: 10px 30px;
   overflow: hidden;
 }
 
@@ -166,4 +169,9 @@ onMounted(async () => {
   font-weight: bold;
 }
 
+.domain-status > tbody > tr > td:first-of-type {
+  white-space: nowrap;
+  padding-right: 20px;
+}
+
 </style>
diff --git a/dashboard/src/views/EmailMailboxesView.vue b/dashboard/src/views/EmailMailboxesView.vue
index 71ff51318..8fb7beba0 100644
--- a/dashboard/src/views/EmailMailboxesView.vue
+++ b/dashboard/src/views/EmailMailboxesView.vue
@@ -126,7 +126,9 @@ async function refresh() {
   let tmp = [];
   async function refreshForDomain(domain) {
     let [error, result] = await mailModel.usage(domain);
-    if (error) return console.error(error);
+    // retry if mail addon cannot be reached during restarts
+    if (error && error.status === 424) return setTimeout(refresh, 2000);
+    else if (error) return console.error(error);
 
     const usage = result;
 
diff --git a/dashboard/src/views/EmailStatusView.vue b/dashboard/src/views/EmailStatusView.vue
index 56ee9ba53..bfa75a60b 100644
--- a/dashboard/src/views/EmailStatusView.vue
+++ b/dashboard/src/views/EmailStatusView.vue
@@ -2,7 +2,7 @@
 
 import { ref, onMounted } from 'vue';
 import { eachLimit } from 'async';
-import { Button, Icon } from '@cloudron/pankow';
+import { Button } from '@cloudron/pankow';
 import { prettyDecimalSize } from '@cloudron/pankow/utils';
 import Section from '../components/Section.vue';
 import StateLED from '../components/StateLED.vue';