From 69a7c4dab4ebbef9048b81a14e47b23ffb4e1ca3 Mon Sep 17 00:00:00 2001
From: Ponkhy <github@myon.lu>
Date: Tue, 7 Sep 2021 23:14:44 +0200
Subject: [PATCH] Improved importBackup handling

---
 src/languages/de-DE.js |  2 ++
 src/languages/en.js    |  2 ++
 src/pages/Settings.vue | 24 +++++++++++++++++++++---
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/languages/de-DE.js b/src/languages/de-DE.js
index 10c55b28f..e1b1daa5a 100644
--- a/src/languages/de-DE.js
+++ b/src/languages/de-DE.js
@@ -123,4 +123,6 @@ export default {
     backupDescription: "Es können alle Monitore und alle Benachrichtigungen in einer JSON-Datei gesichert werden.",
     backupDescription2: "PS: Verlaufs- und Ereignisdaten sind nicht enthalten.",
     backupDescription3: "Sensible Daten wie Benachrichtigungstoken sind in der Exportdatei enthalten, bitte bewahre sie sorgfältig auf.",
+    alertNoFile: "Bitte wähle eine Datei zum importieren aus.",
+    alertWrongFileType: "Bitte wähle eine JSON Datei aus.",
 }
diff --git a/src/languages/en.js b/src/languages/en.js
index 8b5d66b82..7dd7addde 100644
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -123,4 +123,6 @@ export default {
     backupDescription: "You can backup all monitors and all notifications into a JSON file.",
     backupDescription2: "PS: History and event data is not included.",
     backupDescription3: "Sensitive data such as notification tokens is included in the export file, please keep it carefully.",
+    alertNoFile: "Please select a file to import.",
+    alertWrongFileType: "Please select a JSON file.",
 }
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index 55de2d541..faad4914c 100644
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -129,8 +129,14 @@
 
                             <div class="input-group mb-3">
                                 <button class="btn btn-outline-primary" @click="downloadBackup">{{ $t("Export") }}</button>
-                                <button type="button" class="btn btn-outline-primary" @click="importBackup">{{ $t("Import") }}</button>
-                                <input id="importBackup" type="file" class="form-control">
+                                <button type="button" class="btn btn-outline-primary" :disabled="processing" @click="importBackup">
+                                    <div v-if="processing" class="spinner-border spinner-border-sm me-1"></div>
+                                    {{ $t("Import") }}
+                                </button>
+                                <input id="importBackup" type="file" class="form-control" accept="application/json">
+                            </div>
+                            <div v-if="importAlert" class="alert alert-danger mt-3" style="padding: 6px 16px;">
+                                {{ importAlert }}
                             </div>
 
                             <p><strong>{{ $t("backupDescription3") }}</strong></p>
@@ -276,6 +282,8 @@ export default {
 
             },
             loaded: false,
+            importAlert: null,
+            processing: false,
         }
     },
     watch: {
@@ -369,9 +377,17 @@ export default {
         },
 
         importBackup() {
+            this.processing = true;
             let uploadItem = document.getElementById("importBackup").files;
+
             if (uploadItem.length <= 0) {
-                return false;
+                this.processing = false;
+                return this.importAlert = this.$t("alertNoFile")
+            }
+
+            if (uploadItem.item(0).type !== "application/json") {
+                this.processing = false;
+                return this.importAlert = this.$t("alertWrongFileType")
             }
 
             let fileReader = new FileReader();
@@ -379,6 +395,8 @@ export default {
 
             fileReader.onload = item => {
                 this.$root.uploadBackup(item.target.result, (res) => {
+                    this.processing = false;
+
                     if (res.ok) {
                         toast.success(res.msg);
                     } else {