From 4210b17d8922d318e6437b75803108a0bdf26a13 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 28 Jul 2024 13:20:22 +0600
Subject: [PATCH] web/TransferSettings: show a safety warning before importing

---
 web/i18n/en/dialog.json                       |  7 +-
 .../settings/TransferSettings.svelte          | 83 ++++++++++++-------
 2 files changed, 60 insertions(+), 30 deletions(-)

diff --git a/web/i18n/en/dialog.json b/web/i18n/en/dialog.json
index 75f673f8..71af5485 100644
--- a/web/i18n/en/dialog.json
+++ b/web/i18n/en/dialog.json
@@ -7,6 +7,7 @@
     "button.download": "download",
     "button.share": "share",
     "button.copy": "copy",
+    "button.import": "import",
 
     "reset.title": "reset all settings?",
     "reset.body": "are you sure you want to reset all settings? this action is immediate and irreversible.",
@@ -16,5 +17,9 @@
     "picker.description.phone": "press an item to save it. images can also be saved with a long press.",
     "picker.description.ios": "press an item to save it with a shortcut. images can also be saved with a long press.",
 
-    "saving.title": "choose how to save"
+    "saving.title": "choose how to save",
+
+    "safety.title": "important safety notice",
+
+    "import.body": "importing unknown or corrupted files may unexpectedly alter or break cobalt functionality. only import files that you've personally exported and haven't modified.\n\nwe are not responsible for any harm caused by importing unknown setting files."
 }
diff --git a/web/src/components/settings/TransferSettings.svelte b/web/src/components/settings/TransferSettings.svelte
index d73bf6b7..6ea98af2 100644
--- a/web/src/components/settings/TransferSettings.svelte
+++ b/web/src/components/settings/TransferSettings.svelte
@@ -1,54 +1,79 @@
 <script lang="ts">
+    import { t } from "$lib/i18n/translations";
+    import { createDialog } from "$lib/dialogs";
+    import settings, { updateSetting, loadFromString, } from "$lib/state/settings";
+
     import ActionButton from "$components/buttons/ActionButton.svelte";
+
     import IconFileExport from "@tabler/icons-svelte/IconFileExport.svelte";
     import IconFileImport from "@tabler/icons-svelte/IconFileImport.svelte";
-    import settings, { updateSetting, loadFromString } from "$lib/state/settings";
+
+    const updateSettings = (reader: FileReader) => {
+        try {
+            const data = reader.result?.toString();
+            if (!data) {
+                throw "data is missing";
+            }
+
+            // TODO: input is not validated at all here, which means
+            //       someone can potentially import a broken config.
+            //       i don't know if we should do something about it
+            //       or just thug it out.
+            updateSetting(loadFromString(data));
+        } catch (e) {
+            alert(e);
+        }
+    };
 
     const importSettings = () => {
-        const pseudoinput = document.createElement('input');
-        pseudoinput.type = 'file';
-        pseudoinput.accept = '.json';
+        const pseudoinput = document.createElement("input");
+        pseudoinput.type = "file";
+        pseudoinput.accept = ".json";
         pseudoinput.onchange = (e: Event) => {
             const target = e.target as HTMLInputElement;
             const reader = new FileReader();
 
-            reader.onload = function() {
-                try {
-                    const data = reader.result?.toString();
-                    if (!data) {
-                        throw "data is missing";
-                    }
-
-                    // TODO: input is not validated at all here, which means
-                    //       someone can potentially import a broken config.
-                    //       i don't know if we should do something about it
-                    //       or just thug it out.
-                    updateSetting(
-                        loadFromString(data)
-                    );
-                } catch(e) {
-                    alert(e);
-                }
-            }
+            reader.onload = function () {
+                createDialog({
+                    id: "import-confirm",
+                    type: "small",
+                    icon: "warn-red",
+                    title: $t("dialog.safety.title"),
+                    bodyText: $t("dialog.import.body"),
+                    buttons: [
+                        {
+                            text: $t("dialog.button.cancel"),
+                            main: false,
+                            action: () => {},
+                        },
+                        {
+                            text: $t("dialog.button.import"),
+                            color: "red",
+                            main: true,
+                            action: () => updateSettings(reader),
+                        },
+                    ],
+                });
+            };
 
             if (target.files?.length === 1) {
                 reader.readAsText(target.files[0]);
-            } else alert('file missing');
+            } else alert("file missing");
         };
         pseudoinput.click();
-    }
+    };
 
     const exportSettings = () => {
         const blob = new Blob(
             [ JSON.stringify($settings, null, 2) ],
-            { type: 'application/json' }
+            { type: "application/json" }
         );
 
-        const pseudolink = document.createElement('a');
+        const pseudolink = document.createElement("a");
         pseudolink.href = URL.createObjectURL(blob);
-        pseudolink.download = 'settings.json';
+        pseudolink.download = "settings.json";
         pseudolink.click();
-    }
+    };
 </script>
 
 <div class="button-row" id="settings-data-transfer">
@@ -65,4 +90,4 @@
         display: flex;
         gap: var(--padding);
     }
-</style>
\ No newline at end of file
+</style>