feat: ✨ Backup feature (no restore yet)

backup all app settings to be resored later

#477 WIP

NUXT/pages/mods/developer.vue

@@ -11,6 +11,7 @@
     <!--   Add New Key Button   -->
     <center>
       <v-btn
+      rounded
         @click="
           addDialog = !addDialog;
           selectedKey = null;

NUXT/pages/mods/general.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="mainContainer pt-1">
+    <!--   Language Picker   -->
     <v-card
       flat
       class="pb-5 background"
@@ -11,6 +12,25 @@
         <language />
       </v-card-text>
     </v-card>
+
+    <!--   Backup   -->
+    <v-card
+      flat
+      class="pb-5 background"
+      :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+      :style="{ borderRadius: `${roundTweak / 2}rem` }"
+    >
+      <v-card-title>{{ lang.backup }}</v-card-title>
+      <v-card-text>
+        <p>Backup or restore your application settings</p>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn rounded color="primary darken-2" @click="registryBackup">{{ lang.backup }}</v-btn>
+        <v-btn rounded @click="registryRestore">{{ lang.restore }}</v-btn>
+      </v-card-actions>
+    </v-card>
+
+
   </div>
 </template>
 
@@ -34,6 +54,45 @@ export default {
     const lang = this.$lang();
     this.lang = lang.mods.general;
   },
+  methods: {
+    download(filename, text) {
+      var element = document.createElement('a');
+      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+      element.setAttribute('download', filename);
+    
+      element.style.display = 'none';
+      document.body.appendChild(element);
+    
+      element.click();
+    
+      document.body.removeChild(element);
+    },
+
+    getRegistry() {
+      let keys = [];
+      const localStorageKeys = Object.keys(localStorage);
+      for (const i in localStorageKeys) {
+        const key = localStorageKeys[i];
+        const keyValue = localStorage.getItem(key);
+        keys.push({ key: key, value: keyValue });
+      }
+      return keys;
+    },
+
+    registryBackup() {
+      const file = JSON.stringify({
+        scheme: "VueTube Backup",
+        version: process.env.version,
+        channel: process.env.channel,
+        date: Date.now(),
+        registry: this.getRegistry()
+      });
+      this.download("vuetube-backup.json",file);
+    },
+    registryRestore() {
+
+    }
+  }
 };
 </script>
 

NUXT/plugins/languages/english.js

@@ -53,6 +53,8 @@ module.exports = {
   mods: {
     general: {
       language: "Language",
+      backup: "Backup",
+      restore: "Restore"
     },
     theme: {
       normal: "Normal",