Import und Export der Datenbank

src/stores/admin/database.ts

@@ -12,24 +12,37 @@ export const useDatabaseStore = defineStore("database", {
     };
   },
   actions: {
-    async import() {
+    async import(noEncryption: boolean, secret: string, requestData: any) {
-      this.status = "working";
-      http
-        .post("/admin/database")
-        .then((result) => {
-          this.data = result.data;
-          this.status = "success";
-        })
-        .catch(() => {
-          this.status = "failed";
-        });
-    },
-    async export(secret: string) {
       try {
+        this.data = {};
         this.status = "working";
-        const postData = {secret: secret};
+        this.failureReason = '';
-        const response: AxiosResponse = await http.post("/admin/database", postData);
+        this.ex = {};
-        this.data = response.data.data;
+        const requestHeaders = {headers: {'Content-Type': 'application/json', 'x-decrypt-no' : noEncryption}};
+        if (!noEncryption) {
+          requestHeaders.headers['x-decrypt-with'] = secret;
+        }
+        await http.post("/admin/database", requestData, requestHeaders);
+        this.status = "success";
+      } catch (ex) {
+        this.status = "failed";
+        this.failureReason = (ex as Error).message;
+        this.ex = (ex as Error);
+        throw ex;
+      }
+    },
+    async export(noEncryption: boolean, secret: string) {
+      try {
+        this.data = {};
+        this.status = "working";
+        this.failureReason = '';
+        this.ex = {};
+        const requestHeaders = {headers: {'Content-Type': 'application/json', 'x-encrypt-no' : noEncryption}};
+        if (!noEncryption) {
+          requestHeaders.headers['x-encrypt-with'] = secret;
+        }
+        const response: AxiosResponse = await http.get("/admin/database", requestHeaders);
+        this.data = response.data;
         this.status = "success";
       } catch (ex) {
         this.status = "failed";

src/views/admin/settings/Database.vue

@@ -6,25 +6,28 @@
       </div>
     </template>
     <template #main>
-      <Spinner v-if="status == 'working'" class="mx-auto" />
-      <p v-else-if="status == 'failed'">Fehler</p>
       <div class="flex flex-row justify-start items-center gap-2">
-        <label for="file" class="w-1/4">Zum Importieren Datei auswählen</label>
+        <label for="file" class="w-2/6">Zum Importieren Datei auswählen</label>
-        <input type="file" class="grow" id="file" @change="addFile"/>
+        <input type="file" class="" id="file" @change="addFile"/>
       </div>
       <div class="flex flex-row justify-start items-center gap-2">
-        <label for="encKey" class="w-1/4 text-nowrap">Encryption Key</label>
+        <label for="noEnc" class="w-2/6">Ohne Verschlüsselung</label>
-        <input type="password" id="encKey" required v-model="secret" />
+        <input type="checkbox" class="w-fit" id="noEnc" required v-model="noEncryption" />
+      </div>
+      <div class="flex flex-row justify-start items-center gap-2">
+        <label for="encKey" class="w-2/6">Encryption Key</label>
+        <input :disabled="noEncryption" type="password" id="encKey" required v-model="secret" />
       </div>
       <div class="flex flex-row justify-end gap-2">
-        <button primary :disabled="uploadDisabled" class="!w-fit" @click="importDatabase">Import</button>
+        <span v-if="status == 'failed'">Fehler</span>
-        <button :disabled="disabled" primary class="!w-fit" @click="exportDatabase">Exportieren</button>
-      </div>
-      <div class="flex flex-row justify-start gap-2">
-        <a class="download-link" v-if="dataUrl !== ''" :href="dataUrl" :download="downloadFilename">Download {{data.length}} Bytes</a>
         <Spinner v-if="status == 'working'" class="my-auto" />
         <SuccessCheckmark v-else-if="status == 'success'" />
         <FailureXMark v-else-if="status == 'failed'" />
+        <button primary :disabled="uploadDisabled" class="!w-fit" @click="importDatabase">Import</button>
+        <button :disabled="disabled" primary class="!w-fit" @click="exportDatabase">Exportieren</button>
+      </div>
+      <div class="flex flex-row justify-end gap-2">
+        <a class="download-link" v-if="dataUrl !== ''" :href="dataUrl" :download="downloadFilename">Hier für Download ({{dataUrl.length}} Bytes) klicken</a>
       </div>
     </template>
   </MainTemplate>
@@ -46,7 +49,7 @@ export default defineComponent({
   data() {
     return {
       dataUrl: '' as string,
-      dataImport: '' as string,
+      noEncryption: false as boolean,
       file: null,
       downloadFilename: '' as string,
       secret: '' as string,
@@ -55,40 +58,43 @@ export default defineComponent({
   computed: {
     ...mapState(useDatabaseStore, ["data", "status", "failureReason"]),
     disabled() : boolean {
-      return this.status === 'working' || this.secret === '';
+      return this.status === 'working' || (this.secret === '' && !this.noEncryption);
     },
     uploadDisabled() : boolean {
-      return this.status === 'working' || this.secret === '' || this.file === null;
+      return this.status === 'working' || (this.secret === '' && !this.noEncryption) || this.file === null;
     }
   },
   mounted() {
     this.secret = '' as string;
+    this.noEncryption = false;
   },
   methods: {
     ...mapActions(useDatabaseStore, ["export", "import"]),
     addFile(e) {
+      this.dataUrl = '';
+
+      if (e.target.files?.length !== 1) {
+        return;
+      }
       this.file = e.target.files[0];
-      console.log(this.file);
     },
     async exportDatabase() {
       try {
         if (this.dataUrl) {
           this.dataUrl = '';
         }
-        await this.export(this.secret);
+        await this.export(this.noEncryption, this.secret);
-        this.dataUrl = 'data:application/octet-stream,' + this.data;
+        this.dataUrl = 'data:application/octet-stream,' + encodeURIComponent(JSON.stringify(this.data));
-        this.downloadFilename = `${new Date().toISOString().replace(/:/g, '-')}_database_export.enc`;
+        this.downloadFilename = `${new Date().toISOString().replace(/:/g, '-')}_database_export.${this.noEncryption ? 'json' : 'enc'}`;
       }
       catch(ex) {
         console.log(ex);
       }
-    },
-    onChangeFileUpload() {
-
     },
     async importDatabase() {
       try {
-        await this.import(this.secret, this.dataImport);
+        const fileContent = await this.file.text();
+        await this.import(this.noEncryption, this.secret, fileContent);
       }
       catch(ex) {
         console.log(ex);