Show error dialog if manual cloudron update failed

dashboard/src/components/SystemUpdate.vue

@@ -1,8 +1,12 @@
 <script setup>
 
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
 import { ref, onMounted, useTemplateRef, computed } from 'vue';
 import { marked } from 'marked';
-import { Button, Dialog, ProgressBar, Radiobutton, MultiSelect, Checkbox } from '@cloudron/pankow';
+import { Button, Dialog, ProgressBar, Radiobutton, MultiSelect, Checkbox, InputDialog } from '@cloudron/pankow';
 import { prettyLongDate } from '@cloudron/pankow/utils';
 import { TASK_TYPES, ISTATES } from '../constants.js';
 import Section from '../components/Section.vue';
@@ -37,6 +41,7 @@ function prettyAutoUpdateSchedule(pattern) {
   }
 }
 
+const inputDialog = useTemplateRef('inputDialog');
 const updateDialog = useTemplateRef('updateDialog');
 
 const taskLogsMenu = ref([]);
@@ -201,8 +206,17 @@ async function onSubmitUpdate() {
 
   const [error] = await updaterModel.update(skipBackup.value);
   if (error) {
-    updateError.value.generic = error.message || 'Internal error';
     updateBusy.value = false;
+
+    updateDialog.value.close();
+
+    inputDialog.value.info({
+      title: t('notifications.settings.cloudronUpdateFailed'),
+      message: error.body ? error.body.message : 'Internal error. Please try again.',
+      confirmLabel: t('main.dialog.close'),
+      confirmStyle: 'secondary'
+    });
+
     return;
   }
 
@@ -257,6 +271,8 @@ onMounted(async () => {
 
 <template>
   <div>
+    <InputDialog ref="inputDialog"/>
+
     <Dialog ref="updateDialog"
       :title="$t('settings.updateDialog.title') + ` v${pendingUpdate ? pendingUpdate.version : ''}`"
       :confirm-label="$t('settings.updateDialog.updateAction')"
@@ -270,7 +286,7 @@ onMounted(async () => {
     >
       <div v-if="pendingUpdate">
         <div v-if="canUpdate">
-          <p class="text-danger" v-if="pendingUpdate.unstable">{{ $t('settings.updateDialog.unstableWarning') }}</p>
+          <p v-if="pendingUpdate.unstable" class="error-label">{{ $t('settings.updateDialog.unstableWarning') }}</p>
 
           <div>{{ $t('settings.updateDialog.changes') }}:</div>
           <div class="changelog-container">
@@ -280,8 +296,6 @@ onMounted(async () => {
           </div>
 
           <Checkbox class="skip-backup" v-model="skipBackup" :label="$t('settings.updateDialog.skipBackupCheckbox')"/>
-
-          <p v-if="updateError.generic" class="error-label">{{ updateError.generic }}</p>
         </div>
 
         <div v-else>