From 8a251fe39e8dd5427289ac463eca1cd26a170299 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Tue, 1 Jul 2025 15:05:28 +0200
Subject: [PATCH] Allow to track email server location change

---
 .../src/components/MailServerLocation.vue     | 135 ++++++++++++++++++
 dashboard/src/views/EmailSettingsView.vue     |  62 +-------
 2 files changed, 139 insertions(+), 58 deletions(-)
 create mode 100644 dashboard/src/components/MailServerLocation.vue

diff --git a/dashboard/src/components/MailServerLocation.vue b/dashboard/src/components/MailServerLocation.vue
new file mode 100644
index 000000000..3a1d13502
--- /dev/null
+++ b/dashboard/src/components/MailServerLocation.vue
@@ -0,0 +1,135 @@
+<script setup>
+
+import { ref, onMounted } from 'vue';
+import { Button, ProgressBar, SingleSelect, InputGroup, TextInput } from 'pankow';
+import { prettyLongDate } from 'pankow/utils';
+import { TASK_TYPES } from '../constants.js';
+import Section from '../components/Section.vue';
+import SettingsItem from '../components/SettingsItem.vue';
+import TasksModel from '../models/TasksModel.js';
+import DomainsModel from '../models/DomainsModel.js';
+import MailModel from '../models/MailModel.js';
+
+const taskModel = TasksModel.create();
+const mailModel = MailModel.create();
+const domainsModel = DomainsModel.create();
+
+const formError = ref('');
+const domains = ref([]);
+const lastTask = ref({});
+const taskLogsMenu = ref([]);
+const originalDomain = ref('');
+const originalSubdomain = ref('');
+const subdomain = ref('');
+const domain = ref('');
+const busy = ref(false);
+
+async function waitForLastTask() {
+  if (!lastTask.value.id) return;
+
+  const [error, result] = await taskModel.get(lastTask.value.id);
+  if (error) return console.error(error);
+
+  lastTask.value = result;
+
+  if (!result.active) {
+    if (result.success) {
+      originalDomain.value = domain.value;
+      originalSubdomain.value = subdomain.value;
+      busy.value = false;
+    } else {
+      await refreshTasks();
+    }
+
+    return;
+  }
+
+  setTimeout(waitForLastTask, 2000);
+}
+
+async function refreshTasks() {
+  const [error, result] = await taskModel.getByType(TASK_TYPES.TASK_CHANGE_MAIL_LOCATION);
+  if (error) return console.error(error);
+
+  lastTask.value = result[0] || {};
+
+  // limit to last 10
+  taskLogsMenu.value = result.slice(0,10).map(t => {
+    return {
+      icon: 'fa-solid ' + ((!t.active && t.success) ? 'status-active fa-check-circle' : (t.active ? 'fa-circle-notch fa-spin' : 'status-error fa-times-circle')),
+      label: prettyLongDate(t.ts),
+      action: () => { window.open(`/logs.html?taskId=${t.id}`); }
+    };
+  });
+
+  // if last task is currently active, start polling
+  if (lastTask.value.active) waitForLastTask();
+}
+
+async function onSubmit() {
+  formError.value = '';
+  busy.value = true;
+
+  lastTask.value.active = true;
+  lastTask.value.percent = 0;
+  lastTask.value.message = 'Preparing dashboard domain';
+
+  const [error] = await mailModel.setLocation(subdomain.value, domain.value);
+  if (error) return console.error(error);
+
+  originalDomain.value = domain.value;
+  originalSubdomain.value = subdomain.value;
+
+  await refreshTasks();
+}
+
+onMounted(async () => {
+  let [error, result] = await domainsModel.list();
+  if (error) return console.error(error);
+
+  domains.value = result;
+
+  [error, result] = await mailModel.location();
+  if (error) return console.error(error);
+
+  domain.value = result.domain;
+  subdomain.value = result.subdomain;
+  originalDomain.value = result.domain;
+  originalSubdomain.value = result.subdomain;
+
+  await refreshTasks();
+});
+
+</script>
+
+<template>
+  <Section :title="$t('emails.settings.location')" :padding="false">
+    <template #header-buttons>
+      <Button tool icon="fa-solid fa-align-left" v-tooltip="$t('domains.renewCerts.showLogsAction')" :menu="taskLogsMenu" :disabled="!taskLogsMenu.length"/>
+    </template>
+
+    <SettingsItem wrap>
+      <div style="display: flex; align-items: center">
+        <div v-html="$t('emails.changeDomainDialog.description')"></div>
+      </div>
+      <div style="display: flex; gap: 6px; align-items: center; flex-wrap: wrap;">
+        <form @submit.prevent="onSubmit()">
+          <input type="submit" style="display: none" :disabled="busy || (originalSubdomain === subdomain && originalDomain === domain)"/>
+
+          <InputGroup>
+            <TextInput v-model="subdomain" :disabled="busy"/>
+            <SingleSelect v-model="domain" :options="domains" option-key="domain" option-label="domain" :disabled="busy"/>
+            <Button tool @click="onSubmit()" :disabled="busy || (originalSubdomain === subdomain && originalDomain === domain)">{{ $t('main.dialog.save') }}</Button>
+          </InputGroup>
+        </form>
+      </div>
+    </SettingsItem>
+
+    <div class="error-label" v-if="formError">{{ formError }}</div>
+
+    <div v-if="lastTask.active" style="padding: 0 10px">
+      <ProgressBar :value="lastTask.percent" />
+      <div>{{ lastTask.message }}</div>
+    </div>
+  </Section>
+</template>
diff --git a/dashboard/src/views/EmailSettingsView.vue b/dashboard/src/views/EmailSettingsView.vue
index 015c264d1..b06857f7a 100644
--- a/dashboard/src/views/EmailSettingsView.vue
+++ b/dashboard/src/views/EmailSettingsView.vue
@@ -2,52 +2,22 @@
 <script setup>
 
 import { ref, onMounted, useTemplateRef, computed } from 'vue';
-import { Button, ProgressBar, InputDialog, Dialog, FormGroup, TextInput, InputGroup, Switch, SingleSelect } from 'pankow';
+import { Button, InputDialog, Dialog, FormGroup, Switch } from 'pankow';
 import { prettyDecimalSize } from 'pankow/utils';
 import Section from '../components/Section.vue';
 import SettingsItem from '../components/SettingsItem.vue';
+import MailServerLocation from '../components/MailServerLocation.vue';
 import DomainsModel from '../models/DomainsModel.js';
 import MailModel from '../models/MailModel.js';
-import TasksModel from '../models/TasksModel.js';
 import ServicesModel from '../models/ServicesModel.js';
 
 const domainsModel = DomainsModel.create();
 const mailModel = MailModel.create();
-const tasksModel = TasksModel.create();
 const servicesModel = ServicesModel.create();
 
 const inputDialog = useTemplateRef('inputDialog');
 const domains = ref([]);
 
-const currentLocationSubdomain = ref('');
-const currentLocationDomain = ref('');
-const locationSubdomain = ref('');
-const locationDomain = ref('');
-const locationChangeBusy = ref(false);
-const locationChangeMessage = ref('');
-const locationChangeProgress = ref(0);
-
-async function onChangeMailDomain() {
-  locationChangeBusy.value = true;
-  locationChangeMessage.value = '';
-  locationChangeProgress.value = 0;
-
-  const [error, result] = await mailModel.setLocation(locationSubdomain.value, locationDomain.value);
-  if (error) return console.error(error);
-
-  await tasksModel.wait(result, (result) => {
-    locationChangeMessage.value = result.message;
-    locationChangeProgress.value = result.percent;
-  });
-
-  currentLocationDomain.value = locationDomain.value;
-  currentLocationSubdomain.value = locationSubdomain.value;
-  locationChangeBusy.value = false;
-  locationChangeMessage.value = '';
-  locationChangeProgress.value = 0;
-}
-
-
 const maxEmailSizeBusy = ref(false);
 const maxEmailSize = ref(0);
 const currentMaxEmailSize = ref(0);
@@ -189,13 +159,6 @@ onMounted(async () => {
 
   domains.value = result;
 
-  [error, result] = await mailModel.location();
-  if (error) return console.error(error);
-  locationDomain.value = result.domain;
-  locationSubdomain.value = result.subdomain;
-  currentLocationDomain.value = result.domain;
-  currentLocationSubdomain.value = result.subdomain;
-
   [error, result] = await mailModel.mailboxSharing();
   if (error) return console.error(error);
   mailboxSharingEnabled.value = result;
@@ -290,24 +253,6 @@ onMounted(async () => {
     </Dialog>
 
     <Section :title="$t('emails.settings.title')" :padding="false">
-      <SettingsItem wrap>
-        <FormGroup style="flex-grow: 1;">
-          <label>{{ $t('emails.settings.location') }}</label>
-          <div v-html="$t('emails.changeDomainDialog.description')"></div>
-        </FormGroup>
-        <div style="display: flex; gap: 6px; align-items: center; flex-wrap: wrap;">
-          <InputGroup>
-            <TextInput v-model="locationSubdomain" :disabled="locationChangeBusy"/>
-            <SingleSelect v-model="locationDomain" :options="domains" option-key="domain" option-label="domain" :disabled="locationChangeBusy"/>
-          </InputGroup>
-          <Button tool @click="onChangeMailDomain()" :plain="(currentLocationSubdomain !== locationSubdomain || currentLocationDomain !== locationDomain) ? null : true" :disabled="locationChangeBusy || (currentLocationSubdomain === locationSubdomain && currentLocationDomain === locationDomain)">{{ $t('main.dialog.save') }}</Button>
-        </div>
-        <template #bottom v-if="locationChangeProgress">
-          <ProgressBar :value="locationChangeProgress"/>
-          <div style="padding-top: 6px">{{ locationChangeMessage }}</div>
-        </template>
-      </SettingsItem>
-
       <SettingsItem>
         <FormGroup>
           <label>{{ $t('emails.mailboxSharing.title') }}</label>
@@ -363,7 +308,8 @@ onMounted(async () => {
           <Button tool plain @click="onShowSpamFilterDialog()">{{ $t('main.dialog.edit') }}</Button>
         </div>
       </SettingsItem>
-
     </Section>
+
+    <MailServerLocation />
   </div>
 </template>