web/TransferSettings: show a safety warning before importing

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."
 }

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');
+        const pseudoinput = document.createElement("input");
-        pseudoinput.type = 'file';
+        pseudoinput.type = "file";
-        pseudoinput.accept = '.json';
+        pseudoinput.accept = ".json";
         pseudoinput.onchange = (e: Event) => {
             const target = e.target as HTMLInputElement;
             const reader = new FileReader();
 
-            reader.onload = function() {
+            reader.onload = function () {
-                try {
+                createDialog({
-                    const data = reader.result?.toString();
+                    id: "import-confirm",
-                    if (!data) {
+                    type: "small",
-                        throw "data is missing";
+                    icon: "warn-red",
-                    }
+                    title: $t("dialog.safety.title"),
-
+                    bodyText: $t("dialog.import.body"),
-                    // TODO: input is not validated at all here, which means
+                    buttons: [
-                    //       someone can potentially import a broken config.
+                        {
-                    //       i don't know if we should do something about it
+                            text: $t("dialog.button.cancel"),
-                    //       or just thug it out.
+                            main: false,
-                    updateSetting(
+                            action: () => {},
-                        loadFromString(data)
+                        },
-                    );
+                        {
-                } catch(e) {
+                            text: $t("dialog.button.import"),
-                    alert(e);
+                            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>
+</style>