From c61906e480eaccd0031e388ecd7020690c18c00a Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Wed, 31 Mar 2021 20:07:50 -0800
Subject: [PATCH] bug/backup-download (#245)

* fix blocked download

* + download blocked

Co-authored-by: hay-kot <hay-kot@pm.me>
---
 docs/docs/changelog/v0.4.1.md                 |  1 +
 .../components/Admin/Backup/ImportDialog.vue  | 26 ++++++++++++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/docs/docs/changelog/v0.4.1.md b/docs/docs/changelog/v0.4.1.md
index 0a3b7a71190a..e4ff85e4e8bd 100644
--- a/docs/docs/changelog/v0.4.1.md
+++ b/docs/docs/changelog/v0.4.1.md
@@ -9,4 +9,5 @@
 - Fix Tags/Categories render problems on recipes
 - Tags redirect to new tag pages
 - Categories redirect to category pages
+- Fix Backup download blocked by authentication
 
diff --git a/frontend/src/components/Admin/Backup/ImportDialog.vue b/frontend/src/components/Admin/Backup/ImportDialog.vue
index 497d77404ee7..0d54aeaa5b6e 100644
--- a/frontend/src/components/Admin/Backup/ImportDialog.vue
+++ b/frontend/src/components/Admin/Backup/ImportDialog.vue
@@ -37,7 +37,12 @@
         <v-divider></v-divider>
 
         <v-card-actions>
-          <v-btn color="accent" text :href="`/api/backups/${name}/download`">
+          <v-btn
+            color="accent"
+            text
+            :loading="downloading"
+            @click="downloadFile(`/api/backups/${name}/download`)"
+          >
             {{ $t("general.download") }}
           </v-btn>
           <v-spacer></v-spacer>
@@ -61,6 +66,7 @@
 
 <script>
 import ImportOptions from "@/components/Admin/Backup/ImportOptions";
+import axios from "axios";
 export default {
   components: { ImportOptions },
   props: {
@@ -83,6 +89,7 @@ export default {
       dialog: false,
       forceImport: false,
       rebaseImport: false,
+      downloading: false,
     };
   },
   methods: {
@@ -109,6 +116,23 @@ export default {
       this.close();
       this.$emit(event, eventData);
     },
+    async downloadFile(downloadURL) {
+      this.downloading = true;
+      const response = await axios({
+        url: downloadURL,
+        method: "GET",
+        responseType: "blob", // important
+      });
+
+      const url = window.URL.createObjectURL(new Blob([response.data]));
+      const link = document.createElement("a");
+      link.href = url;
+      link.setAttribute("download", `${this.name}.zip`);
+      document.body.appendChild(link);
+      link.click();
+
+      this.downloading = false;
+    },
   },
 };
 </script>