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>