Bring back the SFTP connect info dialog

dashboard/src/components/SftpInfoDialog.vue

@@ -0,0 +1,70 @@
+<script setup>
+
+import { ref, useTemplateRef } from 'vue';
+import { Dialog } from 'pankow';
+import DashboardModel from '../models/DashboardModel.js';
+import DomainsModel from '../models/DomainsModel.js';
+import ProfileModel from '../models/ProfileModel.js';
+
+const dashboardModel = DashboardModel.create();
+const domainsModel = DomainsModel.create();
+const profileModel = ProfileModel.create();
+
+const dialog = useTemplateRef('dialog');
+const fqdn = ref('');
+const adminFqdn = ref('');
+const adminDomainProvider = ref('');
+const username = ref('');
+
+function onDocs() {
+  window.open('https://docs.cloudron.io/apps/#sftp-access');
+}
+
+defineExpose({
+  async open(a) {
+    fqdn.value = a.fqdn;
+
+    let [error, result] = await dashboardModel.config();
+    if (error) return console.error(error);
+    adminFqdn.value = result.adminFqdn;
+
+    [error, result] = await domainsModel.get(result.adminDomain);
+    if (error) return console.error(error);
+    adminDomainProvider.value = result.provider;
+
+    [error, result] = await profileModel.get();
+    if (error) return console.error(error);
+    username.value = result.username;
+
+    dialog.value.open();
+  }
+});
+
+</script>
+
+<template>
+  <Dialog ref="dialog"
+    :title="$t('app.accessControl.sftp.title')"
+    :reject-label="$t('main.dialog.close')"
+    :alternate-label="'Docs'"
+     alternate-style="secondary"
+    @alternate="onDocs"
+  >
+    <p class="text-small text-warning text-bold" v-if="adminDomainProvider === 'cloudflare'">{{ $t('appstore.installDialog.cloudflarePortWarning') }} </p>
+
+    <div class="info-row">
+      <div class="info-label">{{ $t('app.accessControl.sftp.server') }}</div>
+      <div class="info-value">{{ adminFqdn }}</div>
+    </div>
+
+    <div class="info-row">
+      <div class="info-label">{{ $t('app.accessControl.sftp.port') }}</div>
+      <div class="info-value">222</div>
+    </div>
+
+    <div class="info-row">
+      <div class="info-label">{{ $t('app.accessControl.sftp.username') }}</div>
+      <div class="info-value">{{ username }}@{{ fqdn }}</div>
+    </div>
+  </Dialog>
+</template>

dashboard/src/views/AppConfigureView.vue

@@ -7,6 +7,7 @@ const t = i18n.t;
 import { ref, onMounted, onBeforeUnmount, computed, useTemplateRef } from 'vue';
 import { Button, ButtonGroup } from 'pankow';
 import PostInstallDialog from '../components/PostInstallDialog.vue';
+import SftpInfoDialog from '../components/SftpInfoDialog.vue';
 import Access from '../components/app/Access.vue';
 import Backups from '../components/app/Backups.vue';
 import Cron from '../components/app/Cron.vue';
@@ -43,6 +44,7 @@ const hasOptionalServices = ref(false);
 const hasEmail = ref(false);
 const busyStopTask = ref(false);
 const postInstallDialog = useTemplateRef('postInstallDialog');
+const sftpInfoDialog = useTemplateRef('sftpInfoDialog');
 
 const isAppStopped = computed(() => {
   return appsModel.isStopped(app.value);
@@ -108,7 +110,7 @@ async function refresh() {
   if (result.manifest?.addons?.localstorage?.ftp) {
     infoMenu.value.push({
       label: t('app.sftpInfoAction'),
-      // TODO action
+      action: () => sftpInfoDialog.value.open(app.value),
     });
   }
 
@@ -168,6 +170,7 @@ onBeforeUnmount(() => {
 <template>
   <div class="configure-outer">
     <PostInstallDialog ref="postInstallDialog"/>
+    <SftpInfoDialog ref="sftpInfoDialog"/>
 
     <div class="configure-inner" v-if="!busy">
       <div class="titlebar">