Allow to track email server location change

2025-07-01 15:05:28 +02:00
parent 24d93ea87d
commit 8a251fe39e
2 changed files with 139 additions and 58 deletions
@@ -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>