Combine Export / Import & Storage & Backup #599 (#605)

_locales/en/messages.json

@@ -87,10 +87,6 @@
         "message": "About",
         "description": "About."
     },
-    "export_import": {
-        "message": "Export / Import",
-        "description": "Export and Import."
-    },
     "settings": {
         "message": "Settings",
         "description": "Settings."
@@ -313,20 +309,12 @@
         "message": "High Contrast",
         "description": "High Contrast theme"
     },
-    "storage_menu": {
-        "message": "Storage & Backup",
-        "description": "Storage and sync menu title"
-    },
-    "storage_location_info": {
-        "message": "Choose where your data is stored. Using 'local' stores your data on your PC. Using 'sync' lets your browser sync your data to the cloud if you are signed into a sync account.",
-        "description": "Message explaning the diffrences between sync and local storage spaces."
-    },
     "storage_sync_info": {
         "message": "Automatically backup your data to 3rd party storage services.",
         "description": "3rd party backup info"
     },
-    "storage_location": {
-        "message": "Storage Location",
+    "browser_sync": {
+        "message": "Browser Sync",
         "description": "Storage location"
     },
     "sign_in": {
@@ -388,5 +376,11 @@
     },
     "smart_filter": {
         "message": "Smart Filter"
+    },
+    "backup": {
+        "message": "Backup"
+    },
+    "backup_file_info": {
+        "message": "Backup your data to a file."
     }
 }

src/components/Popup/ExportPage.vue → src/components/Popup/BackupPage.vue

@@ -1,9 +1,13 @@
 <template>
   <div>
+    <!-- File Backup -->
     <div v-show="!exportDisabled">
       <div class="text warning" v-if="!encryption.getEncryptionStatus()">
         {{ i18n.export_info }}
       </div>
+      <div class="text">
+        {{ i18n.backup_file_info }}
+      </div>
       <div class="text warning" v-if="unsupportedAccounts">
         {{ i18n.otp_unsupported_warn }}
       </div>
@@ -27,6 +31,17 @@
       >
     </div>
     <a-button-link href="import.html">{{ i18n.import_backup }}</a-button-link>
+    <br />
+    <!-- 3rd Party Backup Services -->
+    <div v-show="!backupDisabled">
+      <div class="text">
+        {{ i18n.storage_sync_info }}
+      </div>
+      <p></p>
+      <a-button @click="showInfo('DrivePage')"> Google Drive </a-button>
+      <a-button @click="showInfo('OneDrivePage')"> OneDrive </a-button>
+      <a-button @click="showInfo('DropboxPage')"> Dropbox </a-button>
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -59,6 +74,59 @@ export default Vue.extend({
     currentlyEncrypted: function () {
       return this.$store.getters["accounts/currentlyEncrypted"];
     },
+    backupDisabled: function () {
+      return this.$store.getters["menu/storageArea"];
+    },
+  },
+  methods: {
+    showInfo(tab: string) {
+      if (tab === "DropboxPage") {
+        chrome.permissions.request(
+          { origins: ["https://*.dropboxapi.com/*"] },
+          async (granted) => {
+            if (granted) {
+              this.$store.commit("style/showInfo");
+              this.$store.commit("currentView/changeView", tab);
+            }
+          }
+        );
+        return;
+      } else if (tab === "DrivePage") {
+        chrome.permissions.request(
+          {
+            origins: [
+              "https://www.googleapis.com/*",
+              "https://accounts.google.com/o/oauth2/revoke",
+            ],
+          },
+          async (granted) => {
+            if (granted) {
+              this.$store.commit("style/showInfo");
+              this.$store.commit("currentView/changeView", tab);
+            }
+            return;
+          }
+        );
+        return;
+      } else if (tab === "OneDrivePage") {
+        chrome.permissions.request(
+          {
+            origins: [
+              "https://graph.microsoft.com/me/*",
+              "https://login.microsoftonline.com/common/oauth2/v2.0/token",
+            ],
+          },
+          async (granted) => {
+            if (granted) {
+              this.$store.commit("style/showInfo");
+              this.$store.commit("currentView/changeView", tab);
+            }
+            return;
+          }
+        );
+        return;
+      }
+    },
   },
 });
 

src/components/Popup/MenuPage.vue

@@ -15,17 +15,8 @@
         </a>
       </div>
       <div class="menuList">
-        <p
-          v-bind:title="i18n.export_import"
-          v-on:click="showInfo('ExportPage')"
-        >
-          <span><IconExchange /></span>{{ i18n.export_import }}
-        </p>
-        <p
-          v-bind:title="i18n.storage_menu"
-          v-on:click="showInfo('StorageSyncConfPage')"
-        >
-          <span><IconDatabase /></span>{{ i18n.storage_menu }}
+        <p v-bind:title="i18n.backup" v-on:click="showInfo('BackupPage')">
+          <span><IconExchange /></span>{{ i18n.backup }}
         </p>
         <p
           v-bind:title="i18n.security"

src/components/Popup/PageHandler.vue

@@ -19,11 +19,10 @@ import AddAccountPage from "./AddAccountPage.vue";
 import AddMethodPage from "./AddMethodPage.vue";
 import SetPasswordPage from "./SetPasswordPage.vue";
 import EnterPasswordPage from "./EnterPasswordPage.vue";
-import ExportPage from "./ExportPage.vue";
+import BackupPage from "./BackupPage.vue";
 import DropboxPage from "./DropboxPage.vue";
 import DrivePage from "./DrivePage.vue";
 import OneDrivePage from "./OneDrivePage.vue";
-import StorageSyncConfPage from "./StorageSyncConfPage.vue";
 import PreferencesPage from "./PreferencesPage.vue";
 import LoadingPage from "./LoadingPage.vue";
 
@@ -44,12 +43,11 @@ export default Vue.extend({
     AddMethodPage,
     SetPasswordPage,
     EnterPasswordPage,
-    ExportPage,
+    BackupPage,
     DropboxPage,
     DrivePage,
     OneDrivePage,
     PreferencesPage,
-    StorageSyncConfPage,
     LoadingPage,
   },
 });

src/components/Popup/PreferencesPage.vue

@@ -28,6 +28,12 @@
     </a-select-input>
     <a-toggle-input :label="i18n.use_autofill" v-model="useAutofill" />
     <a-toggle-input :label="i18n.smart_filter" v-model="smartFilter" />
+    <a-toggle-input
+      :label="i18n.browser_sync"
+      v-model="browserSync"
+      :disabled="storageArea"
+      @change="migrateStorage()"
+    />
     <div class="control-group" v-show="encryption.getEncryptionStatus()">
       <label class="combo-label">{{ i18n.autolock }}</label>
       <input
@@ -101,6 +107,23 @@ export default Vue.extend({
         chrome.runtime.sendMessage({ action: "resetAutolock" });
       },
     },
+    storageArea() {
+      return this.$store.state.menu.storageArea;
+    },
+    browserSync: {
+      get(): boolean {
+        return this.newStorageLocation === "sync";
+      },
+      set(value) {
+        this.newStorageLocation = value ? "sync" : "local";
+      },
+    },
+  },
+  data() {
+    return {
+      newStorageLocation:
+        this.$store.state.menu.storageArea || localStorage.storageLocation,
+    };
   },
   methods: {
     popOut() {
@@ -117,6 +140,19 @@ export default Vue.extend({
         width: window.innerWidth,
       });
     },
+    migrateStorage() {
+      this.$store.commit("currentView/changeView", "LoadingPage");
+      this.$store
+        .dispatch("accounts/migrateStorage", this.newStorageLocation)
+        .then((m) => {
+          this.$store.commit("notification/alert", this.i18n[m]);
+          this.$store.commit("currentView/changeView", "PreferencesPage");
+        }),
+        (r: string) => {
+          this.$store.commit("notification/alert", this.i18n.updateFailure + r);
+          this.$store.commit("currentView/changeView", "PreferencesPage");
+        };
+    },
   },
 });
 </script>