Most of the domain setup dialog bits are done

dashboard/src/views/DomainsView.vue

@@ -7,7 +7,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef, computed } from 'vue';
-import { Button, ButtonGroup, TableView, TextInput } from 'pankow';
+import { Button, ButtonGroup, TableView, TextInput, InputDialog } from 'pankow';
 import Certificates from '../components/Certificates.vue';
 import SyncDns from '../components/SyncDns.vue';
 import DomainDialog from '../components/DomainDialog.vue';
@@ -59,8 +59,22 @@ function onEdit(domain) {
   domainDialog.value.open(domain);
 }
 
-function onRemove(domain) {
+const inputDialog = useTemplateRef('inputDialog');
 
+async function onRemove(domain) {
+  const yes = await inputDialog.value.confirm({
+    message: t('domains.removeDialog.title', { domain: domain.domain }),
+    confirmStyle: 'danger',
+    confirmLabel: t('domains.removeDialog.removeAction'),
+    rejectLabel: t('main.dialog.cancel')
+  });
+
+  if (!yes) return;
+
+  const [error] = await domainsModel.remove(domain.domain);
+  if (error) return console.error(error);
+
+  await refreshDomains();
 }
 
 function onEditWellKnown(domain) {
@@ -90,13 +104,17 @@ const filteredDomains = computed(() => {
   });
 });
 
-onMounted(async () => {
-  let [error, result] = await domainsModel.list();
+async function refreshDomains() {
+  const [error, result] = await domainsModel.list();
   if (error) return console.error(error);
 
   domains.value = result;
+}
 
-  [error, result] = await dashboardModel.getConfig();
+onMounted(async () => {
+  await refreshDomains();
+
+  const [error, result] = await dashboardModel.getConfig();
   if (error) return console.error(error);
 
   dashboardDomain.value = result.adminDomain;
@@ -106,6 +124,7 @@ onMounted(async () => {
 
 <template>
   <div class="content">
+    <InputDialog ref="inputDialog" />
     <DomainDialog ref="domainDialog" />
 
     <Section :title="$t('domains.title')">
@@ -123,7 +142,7 @@ onMounted(async () => {
             <ButtonGroup>
               <Button tool small secondary @click="onEditWellKnown(domain)" v-tooltip="$t('domains.tooltipWellKnown')" icon="fa-solid fa-atlas" />
               <Button tool small secondary @click="onEdit(domain)" v-tooltip="$t('domains.tooltipEdit')" icon="fa-solid fa-pencil-alt" />
-              <Button tool small danger @click="onRemove(domain)" v-tooltip="$t('domains.tooltipRemove')" :disabled="domain.domain === adminDomain" icon="fa-solid fa-trash-alt" />
+              <Button tool small danger @click="onRemove(domain)" v-tooltip="$t('domains.tooltipRemove')" :disabled="domain.domain === dashboardDomain" icon="fa-solid fa-trash-alt" />
             </ButtonGroup>
           </div>
         </template>