Bring back the postinstall dialog

dashboard/src/components/PostInstallDialog.vue

@@ -0,0 +1,99 @@
+<script setup>
+
+import { ref, useTemplateRef } from 'vue';
+import { marked } from 'marked';
+import { Dialog } from 'pankow';
+
+const dialog = useTemplateRef('dialog');
+const app = ref(null);
+const hasPendingCheclistItems = ref(false);
+const acknowledge = ref(false);
+
+function onConfirm() {
+  delete localStorage['confirmPostInstall_' + app.value.id];
+  dialog.value.close();
+  window.open('https://' + app.value.fqdn);
+}
+
+defineExpose({
+  async open(a, ack = false) {
+    app.value = a;
+    acknowledge.value = ack;
+    hasPendingCheclistItems.value = !Object.keys(a.checklist).find((i) => a.checklist[i].acknowledged);
+    dialog.value.open();
+  }
+});
+
+</script>
+
+<template>
+  <Dialog ref="dialog"
+    :confirm-label="acknowledge ? $t('app.appInfo.openAction', { app: app.manifest.title }) : null"
+    :reject-label="$t('main.dialog.close')"
+    :reject-style="acknowledge ? 'secondary' : ''"
+    @confirm="onConfirm"
+  >
+    <div v-if="app">
+      <div class="app-info-header">
+        <img :src="app.iconUrl" onerror="this.onerror=null;this.src='img/appicon_fallback.png'" class="app-info-icon"/>
+        <div class="app-info-title">
+          {{ app.manifest.title }}<br/>
+          <span class="text-muted text-small">{{ $t('app.appInfo.package') }} <a :href="`/#/appstore/${app.manifest.id}?version=${app.manifest.version}`">v{{ app.manifest.version }}</a> </span>
+          <br/>
+          <span v-if="app.manifest.documentationUrl" class="text-small"><a target="_blank" :href="app.manifest.documentationUrl">{{ $t('app.docsAction') }}</a> </span>
+          <br/>
+        </div>
+      </div>
+
+      <div v-html="marked.parse(app.manifest.postInstallMessage)"></div>
+      <div v-if="app.manifest.documentationUrl" v-html="$t('app.appInfo.appDocsUrl', { docsUrl: app.manifest.documentationUrl, title: app.manifest.title, forumUrl: (app.manifest.forumUrl || 'https://forum.cloudron.io') })"></div>
+
+      <div class="app-info-checklist" v-show="hasPendingCheclistItems">
+        <label class="control-label">{{ $t('app.appInfo.checklist') }}</label>
+        <div v-for="(item, key) in app.checklist" :key="key">
+          <div class="checklist-item" v-show="!item.acknowledged">
+            <span v-html="marked.parse(item.message)"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<style scoped>
+
+.app-info-header {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.app-info-title {
+  margin-left: 15px;
+}
+
+.app-info-icon {
+  width: 64px;
+  height: 64px;
+}
+
+.app-info-checklist {
+  margin-top: 20px;
+  margin-bottom: 5px;
+}
+
+.checklist-item {
+  padding: 8px;
+  border: none;
+  border-left: 2px solid rgb(255, 76, 76);
+  background-color: #ff000014;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.checklist-item > span > * {
+  margin: 0;
+}
+
+</style>