From e79ebc242993c1ee5083efc0e9b0bc9ebbe5c999 Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Fri, 3 Feb 2023 16:45:13 +0000
Subject: [PATCH 1/8] Add helper utility to compress data.

---
 package.json                  |  1 +
 pnpm-lock.yaml                |  7 +++++++
 src/utils/compressionUtils.js | 18 ++++++++++++++++++
 3 files changed, 26 insertions(+)
 create mode 100644 src/utils/compressionUtils.js

diff --git a/package.json b/package.json
index 8519e11d..504d6b1b 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
         "linkify-html": "4.1.1",
         "linkifyjs": "4.1.1",
         "mux.js": "6.3.0",
+        "pako": "2.1.0",
         "qrcode": "^1.5.3",
         "shaka-player": "4.4.1",
         "stream-browserify": "3.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5375c102..4ecea5c9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ dependencies:
   mux.js:
     specifier: 6.3.0
     version: 6.3.0
+  pako:
+    specifier: 2.1.0
+    version: 2.1.0
   qrcode:
     specifier: ^1.5.3
     version: 1.5.3
@@ -4177,6 +4180,10 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /pako@2.1.0:
+    resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
+    dev: false
+
   /parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
diff --git a/src/utils/compressionUtils.js b/src/utils/compressionUtils.js
new file mode 100644
index 00000000..5f482c2e
--- /dev/null
+++ b/src/utils/compressionUtils.js
@@ -0,0 +1,18 @@
+export const compressGzip = async data => {
+    // Firefox does not support CompressionStream yet
+    if (typeof CompressionStream !== "undefined") {
+        let bytes = new TextEncoder().encode(data);
+        // eslint-disable-next-line no-undef
+        const cs = new CompressionStream("gzip");
+        const writer = cs.writable.getWriter();
+        writer.write(bytes);
+        writer.close();
+        const compAb = await new Response(cs.readable).arrayBuffer();
+        bytes = new Uint8Array(compAb);
+
+        return bytes;
+    } else {
+        const pako = require("pako");
+        return pako.gzip(data);
+    }
+};

From bd7de9f94eb6e681610505eb484e90eb68acd5af Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Fri, 3 Feb 2023 18:18:53 +0000
Subject: [PATCH 2/8] Add utilities to encrypt text.

---
 src/utils/encryptionUtils.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 src/utils/encryptionUtils.js

diff --git a/src/utils/encryptionUtils.js b/src/utils/encryptionUtils.js
new file mode 100644
index 00000000..20ebd3a5
--- /dev/null
+++ b/src/utils/encryptionUtils.js
@@ -0,0 +1,19 @@
+// These functions accept and return Uint8Arrays
+
+export async function encryptAESGCM(plaintext, key) {
+    const iv = crypto.getRandomValues(new Uint8Array(12));
+    const algorithm = { name: "AES-GCM", iv: iv };
+    const keyMaterial = await crypto.subtle.importKey("raw", key, algorithm, false, ["encrypt"]);
+    const ciphertext = await crypto.subtle.encrypt(algorithm, keyMaterial, plaintext);
+
+    return new Uint8Array([...iv, ...new Uint8Array(ciphertext)]);
+}
+
+export async function decryptAESGCM(ciphertextArray, key) {
+    const iv = new Uint8Array(ciphertextArray.slice(0, 12));
+    const algorithm = { name: "AES-GCM", iv: iv };
+    const keyMaterial = await crypto.subtle.importKey("raw", key, algorithm, false, ["decrypt"]);
+    const decrypted = await crypto.subtle.decrypt(algorithm, keyMaterial, new Uint8Array(ciphertextArray.slice(12)));
+
+    return decrypted;
+}

From 89e8a3b80e427b2a4791e9d69768f2e27065199c Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Thu, 9 Feb 2023 01:05:54 +0000
Subject: [PATCH 3/8] Add key generation and base64 encoding and decoding
 utils.

---
 src/utils/encryptionUtils.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/utils/encryptionUtils.js b/src/utils/encryptionUtils.js
index 20ebd3a5..a75cbb41 100644
--- a/src/utils/encryptionUtils.js
+++ b/src/utils/encryptionUtils.js
@@ -17,3 +17,20 @@ export async function decryptAESGCM(ciphertextArray, key) {
 
     return decrypted;
 }
+
+export async function generateKey() {
+    const algorithm = { name: "AES-GCM", length: 256 };
+    const key = await crypto.subtle.generateKey(algorithm, true, ["encrypt", "decrypt"]);
+
+    return await crypto.subtle.exportKey("raw", key);
+}
+
+export function encodeArrayToBase64(array) {
+    const chars = String.fromCharCode.apply(null, array);
+    return btoa(chars);
+}
+
+export function decodeBase64ToArray(base64) {
+    const chars = atob(base64);
+    return new Uint8Array(chars.split("").map(c => c.charCodeAt(0)));
+}

From 8901a97fcbb8cb78c38729a9281a1ef5c026313d Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Mon, 20 Feb 2023 11:46:33 +0000
Subject: [PATCH 4/8] Add optional allowQuery parameter.

---
 src/main.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/main.js b/src/main.js
index 37148852..8bcade0c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -125,10 +125,10 @@ const mixin = {
                 if (!disableAlert) alert(this.$t("info.local_storage"));
             }
         },
-        getPreferenceBoolean(key, defaultVal) {
+        getPreferenceBoolean(key, defaultVal, allowQuery = true) {
             var value;
             if (
-                (value = new URLSearchParams(window.location.search).get(key)) !== null ||
+                (allowQuery && (value = new URLSearchParams(window.location.search).get(key)) !== null) ||
                 (this.testLocalStorage && (value = localStorage.getItem(key)) !== null)
             ) {
                 switch (String(value).toLowerCase()) {
@@ -142,29 +142,29 @@ const mixin = {
                 }
             } else return defaultVal;
         },
-        getPreferenceString(key, defaultVal) {
+        getPreferenceString(key, defaultVal, allowQuery = true) {
             var value;
             if (
-                (value = new URLSearchParams(window.location.search).get(key)) !== null ||
+                (allowQuery && (value = new URLSearchParams(window.location.search).get(key)) !== null) ||
                 (this.testLocalStorage && (value = localStorage.getItem(key)) !== null)
             ) {
                 return value;
             } else return defaultVal;
         },
-        getPreferenceNumber(key, defaultVal) {
+        getPreferenceNumber(key, defaultVal, allowQuery = true) {
             var value;
             if (
-                (value = new URLSearchParams(window.location.search).get(key)) !== null ||
+                (allowQuery && (value = new URLSearchParams(window.location.search).get(key)) !== null) ||
                 (this.testLocalStorage && (value = localStorage.getItem(key)) !== null)
             ) {
                 const num = Number(value);
                 return isNaN(num) ? defaultVal : num;
             } else return defaultVal;
         },
-        getPreferenceJSON(key, defaultVal) {
+        getPreferenceJSON(key, defaultVal, allowQuery = true) {
             var value;
             if (
-                (value = new URLSearchParams(window.location.search).get(key)) !== null ||
+                (allowQuery && (value = new URLSearchParams(window.location.search).get(key)) !== null) ||
                 (this.testLocalStorage && (value = localStorage.getItem(key)) !== null)
             ) {
                 return JSON.parse(value);

From 12650448543fc3d3ebf6dc63754b68b6090e81e5 Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Mon, 20 Feb 2023 12:01:28 +0000
Subject: [PATCH 5/8] Move frontend config loading to App.vue.

---
 src/App.vue                        | 11 ++++++++++-
 src/components/FooterComponent.vue | 29 ++++++++++++++++++++---------
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 551267a5..49004ade 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,7 @@
             </router-view>
         </div>
 
-        <FooterComponent />
+        <FooterComponent :config="config" />
     </div>
 </template>
 
@@ -27,6 +27,7 @@ export default {
     data() {
         return {
             theme: "dark",
+            config: null,
         };
     },
     mounted() {
@@ -35,6 +36,14 @@ export default {
             this.setTheme();
         });
 
+        this.fetchJson(this.authApiUrl() + "/config")
+            .then(config => {
+                this.config = config;
+            })
+            .then(() => {
+                this.onConfigLoaded();
+            });
+
         if ("indexedDB" in window) {
             const request = indexedDB.open("piped-db", 5);
             request.onupgradeneeded = ev => {
diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue
index 38212347..c267b440 100644
--- a/src/components/FooterComponent.vue
+++ b/src/components/FooterComponent.vue
@@ -29,6 +29,15 @@
 
 <script>
 export default {
+<<<<<<< Updated upstream
+=======
+    props: {
+        config: {
+            type: Object,
+            required: true,
+        },
+    },
+>>>>>>> Stashed changes
     data() {
         return {
             donationHref: null,
@@ -36,16 +45,18 @@ export default {
             privacyPolicyHref: null,
         };
     },
-    mounted() {
-        this.fetchConfig();
+    props: {
+        config: {
+            type: Object,
+        },
     },
-    methods: {
-        async fetchConfig() {
-            this.fetchJson(this.apiUrl() + "/config").then(config => {
-                this.donationHref = config?.donationUrl;
-                this.statusPageHref = config?.statusPageUrl;
-                this.privacyPolicyHref = config?.privacyPolicyUrl;
-            });
+    watch: {
+        config: {
+            handler() {
+                this.donationHref = this.config?.donationUrl;
+                this.statusPageHref = this.config?.statusPageUrl;
+                this.privacyPolicyHref = this.config?.privacyPolicyUrl;
+            },
         },
     },
 };

From 2d7801eb6731bf074c1622dd2270c016405d2cfc Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Mon, 20 Feb 2023 15:38:22 +0000
Subject: [PATCH 6/8] Add gzip decompression helper.

---
 src/utils/compressionUtils.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/utils/compressionUtils.js b/src/utils/compressionUtils.js
index 5f482c2e..29f1c88f 100644
--- a/src/utils/compressionUtils.js
+++ b/src/utils/compressionUtils.js
@@ -16,3 +16,23 @@ export const compressGzip = async data => {
         return pako.gzip(data);
     }
 };
+
+export const decompressGzip = async compressedData => {
+    // Firefox does not support DecompressionStream yet
+    if (typeof DecompressionStream !== "undefined") {
+        // eslint-disable-next-line no-undef
+        const ds = new DecompressionStream("gzip");
+        const writer = ds.writable.getWriter();
+        writer.write(compressedData);
+        writer.close();
+        const decompAb = await new Response(ds.readable).arrayBuffer();
+        const bytes = new Uint8Array(decompAb);
+
+        return new TextDecoder().decode(bytes);
+    } else {
+        const pako = require("pako");
+        const inflated = pako.inflate(compressedData, { to: "string" });
+
+        return inflated;
+    }
+};

From ee20e0ccdf5b52bf9b793cd0741d5b0b69f7fd19 Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Mon, 20 Feb 2023 15:43:25 +0000
Subject: [PATCH 7/8] Add support to sync preferences.

---
 src/App.vue                        | 54 ++++++++++++++++++++++++++++++
 src/components/FooterComponent.vue |  8 -----
 src/components/PreferencesPage.vue | 50 +++++++++++++++++++++++++++
 src/utils/store.js                 |  3 ++
 4 files changed, 107 insertions(+), 8 deletions(-)
 create mode 100644 src/utils/store.js

diff --git a/src/App.vue b/src/App.vue
index 49004ade..823eaa0e 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue
index c267b440..f0441678 100644
--- a/src/components/FooterComponent.vue
+++ b/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() {
diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index ce8f19f5..e1fe9430 100644
--- a/src/components/PreferencesPage.vue
+++ b/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();
             }
         },
diff --git a/src/utils/store.js b/src/utils/store.js
new file mode 100644
index 00000000..ddb01b12
--- /dev/null
+++ b/src/utils/store.js
@@ -0,0 +1,3 @@
+import { reactive } from "vue";
+
+export const state = reactive({});

From a5c0d8007ce8d1c2a2ddfd5be828186c5c20ce18 Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Mon, 20 Feb 2023 15:57:30 +0000
Subject: [PATCH 8/8] Fix pako imports for firefox.

---
 src/utils/compressionUtils.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/compressionUtils.js b/src/utils/compressionUtils.js
index 29f1c88f..86ed78f5 100644
--- a/src/utils/compressionUtils.js
+++ b/src/utils/compressionUtils.js
@@ -12,7 +12,7 @@ export const compressGzip = async data => {
 
         return bytes;
     } else {
-        const pako = require("pako");
+        const pako = await import("pako");
         return pako.gzip(data);
     }
 };
@@ -30,7 +30,7 @@ export const decompressGzip = async compressedData => {
 
         return new TextDecoder().decode(bytes);
     } else {
-        const pako = require("pako");
+        const pako = await import("pako");
         const inflated = pako.inflate(compressedData, { to: "string" });
 
         return inflated;