Add test email sending dialog

dashboard/src/views/EmailsView.vue

@@ -5,7 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Button, TableView, FormGroup, TextInput, InputGroup, Switch, ButtonGroup, SingleSelect } from 'pankow';
+import { Button, TableView, InputDialog, FormGroup, TextInput, InputGroup, Switch, ButtonGroup, SingleSelect } from 'pankow';
 import { prettyDecimalSize } from 'pankow/utils';
 import Section from '../components/Section.vue';
 import SettingsItem from '../components/SettingsItem.vue';
@@ -17,6 +17,7 @@ const domainsModel = DomainsModel.create();
 const mailModel = MailModel.create();
 const profileModel = ProfileModel.create();
 
+const inputDialog = useTemplateRef('inputDialog');
 const columns = {
   status: { sort: true },
   domain: { label: t('emails.domains.domain'), sort: true },
@@ -109,6 +110,27 @@ async function refreshStatus() {
   }
 }
 
+async function onSendTestMail(domain) {
+  const address = await inputDialog.value.prompt({
+    value: profile.value.email,
+    title: t('emails.testMailDialog.title', { domain: domain.domain }),
+    message: t('emails.testMailDialog.description', { domain: domain.domain }),
+    confirmLabel: t('emails.testMailDialog.sendAction'),
+    rejectLabel: t('main.dialog.cancel'),
+    rejectStyle: 'secondary'
+  });
+
+  if (!address) return;
+
+  const [error] = await mailModel.sendTestMail(domain.domain, address);
+  if (error) {
+    window.pankow.notify({ text: error.body ? error.body.message : 'Failed to send mail', type: 'danger' });
+    return console.error(error);
+  }
+
+  window.pankow.notify({ text: 'Mail sent', type: 'success' });
+}
+
 onMounted(async () => {
   let [error, result] = await profileModel.get();
   if (error) return console.error(error);
@@ -161,6 +183,8 @@ onMounted(async () => {
 
 <template>
   <div class="content">
+    <InputDialog ref="inputDialog"/>
+
     <h1 class="section-header">
       {{ $t('emails.title') }}
       <div style="display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px;">