Add support to sync preferences.

src/App.vue

@@ -19,6 +19,10 @@ import FooterComponent from "./components/FooterComponent.vue";
 
 const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
 
+import { generateKey, encodeArrayToBase64, decodeBase64ToArray, decryptAESGCM } from "./utils/encryptionUtils";
+import { decompressGzip } from "./utils/compressionUtils";
+import { state } from "./utils/store";
+
 export default {
     components: {
         NavBar,
@@ -39,6 +43,7 @@ export default {
         this.fetchJson(this.authApiUrl() + "/config")
             .then(config => {
                 this.config = config;
+                state.config = config;
             })
             .then(() => {
                 this.onConfigLoaded();
@@ -120,6 +125,55 @@ export default {
             const root = document.querySelector(":root");
             this.theme == "dark" ? root.classList.add("dark") : root.classList.remove("dark");
         },
+        async onConfigLoaded() {
+            if (this.config.s3Enabled && this.authenticated) {
+                if (this.getPreferenceBoolean("syncPreferences", false, false)) {
+                    var e2e2_b64_key = this.getPreferenceString("e2ee_key", null, false);
+                    if (!e2e2_b64_key) {
+                        const key = new Uint8Array(await generateKey());
+                        const encoded = encodeArrayToBase64(key);
+                        this.setPreference("e2ee_key", encoded);
+                        e2e2_b64_key = encoded;
+                    }
+
+                    const statResult = await this.fetchJson(
+                        this.authApiUrl() + "/storage/stat",
+                        {
+                            file: "pipedpref",
+                        },
+                        {
+                            headers: {
+                                Authorization: this.getAuthToken(),
+                            },
+                        },
+                    );
+
+                    if (statResult.status === "exists") {
+                        const data = await fetch(this.authApiUrl() + "/storage/get?file=pipedpref", {
+                            method: "GET",
+                            headers: {
+                                Authorization: this.getAuthToken(),
+                            },
+                        }).then(resp => resp.arrayBuffer());
+
+                        const cryptoKey = decodeBase64ToArray(e2e2_b64_key).buffer;
+
+                        const decrypted = await decryptAESGCM(data, cryptoKey);
+
+                        const decompressed = await decompressGzip(new Uint8Array(decrypted));
+
+                        const localStorageJson = JSON.parse(decompressed);
+
+                        // import into localStorage
+                        for (var key in localStorageJson) {
+                            if (Object.prototype.hasOwnProperty.call(localStorageJson, key)) {
+                                localStorage[key] = localStorageJson[key];
+                            }
+                        }
+                    }
+                }
+            }
+        },
     },
 };
 </script>

src/components/FooterComponent.vue

@@ -29,15 +29,12 @@
 
 <script>
 export default {
-<<<<<<< Updated upstream
-=======
     props: {
         config: {
             type: Object,
             required: true,
         },
     },
->>>>>>> Stashed changes
     data() {
         return {
             donationHref: null,
@@ -45,11 +42,6 @@ export default {
             privacyPolicyHref: null,
         };
     },
-    props: {
-        config: {
-            type: Object,
-        },
-    },
     watch: {
         config: {
             handler() {

src/components/PreferencesPage.vue

@@ -379,6 +379,9 @@
 <script>
 import CountryMap from "@/utils/CountryMaps/en.json";
 import ConfirmModal from "./ConfirmModal.vue";
+import { state } from "../utils/store";
+import { encryptAESGCM, decodeBase64ToArray } from "../utils/encryptionUtils";
+import { compressGzip } from "../utils/compressionUtils";
 export default {
     components: {
         ConfirmModal,
@@ -612,6 +615,53 @@ export default {
                 localStorage.setItem("hideWatched", this.hideWatched);
                 localStorage.setItem("mobileChapterLayout", this.mobileChapterLayout);
 
+                const config = state.config;
+
+                const key = this.getPreferenceString("e2ee_key", null, false);
+
+                if (config.s3Enabled && this.authenticated && key) {
+                    const statResult = await this.fetchJson(
+                        this.authApiUrl() + "/storage/stat",
+                        {
+                            file: "pipedpref",
+                        },
+                        {
+                            headers: {
+                                Authorization: this.getAuthToken(),
+                            },
+                        },
+                    );
+
+                    const etag = statResult.etag;
+
+                    // export localStorage to JSON
+                    const localStorageJson = {};
+                    for (let i = 0; i < localStorage.length; i++) {
+                        const key = localStorage.key(i);
+                        localStorageJson[key] = localStorage.getItem(key);
+                    }
+
+                    const importedKey = decodeBase64ToArray(key).buffer;
+
+                    const data = await compressGzip(JSON.stringify(localStorageJson));
+
+                    const encrypted = await encryptAESGCM(data, importedKey);
+
+                    await this.fetchJson(
+                        this.authApiUrl() + "/storage/put",
+                        {},
+                        {
+                            method: "POST",
+                            headers: {
+                                Authorization: this.getAuthToken(),
+                                "x-file-name": "pipedpref",
+                                "x-last-etag": etag,
+                            },
+                            body: encrypted,
+                        },
+                    );
+                }
+
                 if (shouldReload) window.location.reload();
             }
         },

src/utils/store.js

@@ -0,0 +1,3 @@
+import { reactive } from "vue";
+
+export const state = reactive({});