Terminal: add download file dialog

frontend/src/components/Terminal.vue

@@ -1,6 +1,20 @@
 <template>
   <MainLayout :gap="false">
     <template #dialogs>
+      <Dialog v-model:visible="downloadFileDialog.visible" modal :style="{ width: '50vw' }" @show="onDialogShow('downloadFileDialogNameInput')">
+        <template #header>
+          <label class="dialog-header" for="downloadFileDialogNameInput">{{ $t('terminal.downloadAction') }}</label>
+        </template>
+        <template #default>
+          <form @submit="onDownloadFileDialogSubmit" @submit.prevent>
+            <p :v-show="downloadFileDialog.error">{{ downloadFileDialog.error }}</p>
+            <label for="downloadFileDialogNameInput">{{ $t('terminal.download.filePath') }}</label>
+            <InputText class="dialog-single-input" :class="{ 'p-invalid': downloadFileDialog.error }" id="downloadFileDialogNameInput" v-model="downloadFileDialog.name" :disabled="downloadFileDialog.busy" required/>
+            <Button class="dialog-single-input-submit" type="submit" :label="$t('terminal.download.download')" :loading="downloadFileDialog.busy" :disabled="downloadFileDialog.busy || !downloadFileDialog.name"/>
+          </form>
+          <a id="fileDownloadLink" :href="downloadFileDialog.downloadUrl" target="_blank"></a>
+        </template>
+      </Dialog>
     </template>
     <template #header>
       <TopBar class="navbar">
@@ -88,15 +102,56 @@ export default {
       id: '',
       name: '',
       socket: null,
-      terminal: null
+      terminal: null,
+      downloadFileDialog: {
+        busy: false,
+        name: '',
+        error: '',
+        downloadUrl: '',
+        visible: false,
+      }
     };
   },
   methods: {
-    onUpload() {
-      this.$refs.fileUploader.onUploadFile('/tmp');
+    // generic dialog focus handler TODO move to pankow and reuse in filemanger
+    onDialogShow(focusElementId) {
+      setTimeout(() => document.getElementById(focusElementId).focus(), 0);
     },
     onDownload() {
+      this.downloadFileDialog.busy = false;
+      this.downloadFileDialog.name = '';
+      this.downloadFileDialog.error = '';
+      this.downloadFileDialog.downloadUrl = '';
+      this.downloadFileDialog.visible = true;
+    },
+    async onDownloadFileDialogSubmit() {
+      this.downloadFileDialog.busy = true;
 
+      try {
+        const result = await superagent.head(`${this.apiOrigin}/api/v1/apps/${this.id}/download`).query({
+          file: this.downloadFileDialog.name,
+          access_token: this.accessToken
+        });
+      } catch (error) {
+        this.downloadFileDialog.busy = false;
+
+        if (error.status === 404) this.downloadFileDialog.error = 'The requested file does not exist.';
+        else console.error('Failed', error);
+
+        return;
+      }
+
+      this.downloadFileDialog.downloadUrl = `${this.apiOrigin}/api/v1/apps/${this.id}/download?file=${encodeURIComponent(this.downloadFileDialog.name)}&access_token=${this.accessToken}`;
+      console.log(this.downloadFileDialog.downloadUrl)
+
+      // we have to click the link to make the browser do the download
+      // don't know how to prevent the browsers
+      document.getElementById('fileDownloadLink').click();
+
+      this.downloadFileDialog.visible = false;
+    },
+    onUpload() {
+      this.$refs.fileUploader.onUploadFile('/tmp');
     },
     async uploadHandler(targetDir, file, progressHandler) {
       await superagent.post(`${this.apiOrigin}/api/v1/apps/${this.id}/upload`)
@@ -272,3 +327,23 @@ body {
 
 </style>
 
+<style scoped>
+
+.dialog-header {
+  font-weight: 600;
+  font-size: 1.25rem;
+}
+
+.dialog-single-input {
+  display: block;
+  width: 100%;
+  margin-top: 5px;
+  margin-bottom: 1.5rem;
+}
+
+.dialog-single-input-submit {
+  margin-top: 5px;
+}
+
+</style>
+